* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
-@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,700");
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500");
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
body {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
- font-weight: normal;
+ font-weight: 400;
line-height: 1.5;
color: #263238;
background-color: #eceff1; }
small,
.small {
font-size: 0.875rem;
- font-weight: 300; }
+ font-weight: 400; }
mark,
.mark {
border-color: #d9534f; }
.btn-link {
- font-weight: 300;
+ font-weight: 400;
color: #b71c1c;
border-radius: 0; }
.btn-link, .btn-link:active, .btn-link.active, .btn-link:disabled {
text-transform: capitalize !important; }
.font-weight-normal {
- font-weight: 300; }
+ font-weight: 400; }
.font-weight-bold {
- font-weight: 900; }
+ font-weight: 500; }
.font-italic {
font-style: italic; }
.hidden-print {
display: none !important; } }
+body {
+ font-smoothing: antialiased; }
+
h1 {
line-height: 3rem; }
h3 {
line-height: 2rem; }
+ @media (max-width: 767px) {
+ h3 {
+ font-size: 1em; } }
h4 {
- font-weight: 600;
+ font-weight: 500;
line-height: 1.75rem; }
+ @media (max-width: 767px) {
+ h4 {
+ font-size: 1em; } }
h5 {
line-height: 1.5rem; }
p {
line-height: 1.5rem; }
+ @media (max-width: 767px) {
+ p {
+ font-size: .85em; } }
p.lead {
line-height: 2rem; }
@media (max-width: 991px) {
font-size: 2rem;
line-height: 2.75rem; } }
-@media (max-width: 767px) {
+@media (max-width: 575px) {
.display-4 {
font-size: .875rem;
line-height: 1.25rem; } }
small {
line-height: 1rem; }
+ @media (max-width: 767px) {
+ small {
+ font-size: .75em; } }
.truncate {
width: 100%;
overflow: hidden;
text-overflow: ellipsis; }
-img.img-fluid {
- width: 100%;
- max-width: 100%;
- height: auto; }
+#mask {
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: transparent;
+ display: none;
+ visibility: hidden; }
+ #mask.open {
+ display: block;
+ visibility: visible; }
-.icon {
- width: 1.5rem;
- height: 1.5rem;
- fill: currentColor;
- vertical-align: -.15rem;
- overflow: hidden;
- margin-right: .5rem; }
+.menu-text {
+ -webkit-transition: opacity .25s ease-in-out;
+ transition: opacity .25s ease-in-out; }
-.i_arrow_down {
- margin: 0;
- position: absolute;
- left: .75rem;
- top: -.25rem;
- -webkit-animation: scroll 3s infinite;
- animation: scroll 3s infinite; }
- @media (max-width: 767px) {
- .i_arrow_down {
- width: 2rem !important;
- height: 2rem !important;
- left: .15rem;
- top: -.75rem; } }
+.menu-text.hidden {
+ opacity: 0;
+ -webkit-transition: opacity .35s ease-in-out;
+ transition: opacity .35s ease-in-out; }
-.i_lg {
- width: 2.5rem;
- height: 2.5rem;
- margin: 0;
- -webkit-transform: translateY(-0.35rem);
- transform: translateY(-0.35rem);
- fill: #b71c1c; }
+.fixed-top {
+ -webkit-transition: background-color .5s linear;
+ transition: background-color .5s linear;
+ height: 56px; }
+ @media (min-width: 576px) {
+ .fixed-top {
+ height: 72px; } }
+ @media (min-width: 992px) {
+ .fixed-top {
+ height: 96px; } }
+ .fixed-top .navbar {
+ width: 100%; }
+ .fixed-top .navbar a {
+ color: #263238; }
+ .fixed-top .navbar .navbar-toggler-left {
+ left: -12px;
+ top: 8px; }
+ @media (min-width: 576px) {
+ .fixed-top .navbar .navbar-toggler-left {
+ top: 17px; } }
+ .fixed-top .navbar .btn {
+ margin-top: .15rem; }
-.i_sm {
- vertical-align: top;
- -webkit-transform: translateY(-0.1rem);
- transform: translateY(-0.1rem); }
+.navbar-brand {
+ font-size: 20px;
+ font-weight: 300;
+ opacity: 0;
+ margin: 8px 0 0 96px;
+ margin-top: 8px;
+ -webkit-transition: opacity .7s linear;
+ transition: opacity .7s linear; }
+ @media (min-width: 992px) {
+ .navbar-brand {
+ opacity: 1;
+ font-size: 36px; } }
+ .navbar-brand strong {
+ font-weight: 900; }
+ .navbar-brand img {
+ margin-right: 4px;
+ -webkit-transform: translateY(-5px);
+ transform: translateY(-5px);
+ height: 32px;
+ width: auto; }
+ @media (min-width: 992px) {
+ .navbar-brand img {
+ height: 40px; } }
-footer .btn-toolbar .icon {
- height: 2.25rem;
- width: 2.25rem;
- fill: rgba(38, 50, 56, 0.6); }
+.scrolled {
+ background-color: rgba(255, 255, 255, 0.96);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+ height: 56px; }
+ @media (min-width: 576px) {
+ .scrolled {
+ height: 72px; } }
+ @media (min-width: 992px) {
+ .scrolled {
+ height: 96px; } }
+ .scrolled .navbar-brand {
+ opacity: 1; }
-footer .i_heart {
- vertical-align: top;
- -webkit-transform: translateY(-0.15rem);
- transform: translateY(-0.15rem); }
- @media (max-width: 767px) {
- footer .i_heart {
- -webkit-transform: translateY(-0.75rem);
- transform: translateY(-0.75rem); } }
+#navbarSupportedContent {
+ width: 100%; }
+ @media (max-width: 1199px) {
+ #navbarSupportedContent {
+ background: white;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 256px;
+ height: 100vh;
+ padding-top: 64px;
+ -webkit-transform: translateX(-256px);
+ transform: translateX(-256px);
+ -webkit-transition: all 0.25s ease-in-out;
+ transition: all 0.25s ease-in-out; }
+ #navbarSupportedContent.open {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ -webkit-transition: all .25s ease-in-out;
+ transition: all .25s ease-in-out;
+ box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26); } }
+
+@media (min-width: 992px) {
+ .navbar-nav {
+ padding-top: 10px; } }
+
+.navbar-nav .nav-link {
+ color: #263238;
+ padding: 16px !important;
+ display: block;
+ position: relative; }
+ @media (min-width: 992px) {
+ .navbar-nav .nav-link {
+ margin-right: 16px;
+ display: block;
+ position: relative; }
+ .navbar-nav .nav-link:after {
+ content: "";
+ border-bottom: 2px solid #b71c1c;
+ position: absolute;
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0);
+ width: 100%;
+ left: 0;
+ top: 44px;
+ padding: inherit;
+ -webkit-transition: color .3s ease-out, -webkit-transform .3s ease-out;
+ transition: color .3s ease-out, -webkit-transform .3s ease-out;
+ transition: transform .3s ease-out, color .3s ease-out;
+ transition: transform .3s ease-out, color .3s ease-out, -webkit-transform .3s ease-out; } }
+
+@media (max-width: 1199px) {
+ .navbar-nav .nav-link:active {
+ color: #b71c1c; } }
+
+@media (max-width: 1199px) {
+ .navbar-nav .nav-link:active:before {
+ content: "";
+ border-left: 2px solid #b71c1c;
+ position: absolute;
+ left: 0;
+ height: 36px;
+ -webkit-transform: translateY(-4px);
+ transform: translateY(-4px); } }
+
+@media (min-width: 992px) {
+ .navbar-nav .nav-link:hover {
+ color: #b71c1c; } }
+
+@media (min-width: 992px) {
+ .navbar-nav .nav-link:hover:after {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1); } }
.btn-red900 {
color: #fff !important;
font-family: 'Ubuntu', sans-serif;
font-size: 1rem;
display: inline-block;
- margin-left: 12px; }
+ position: relative;
+ top: -4px; }
.btn {
height: 36px;
@media (min-width: 768px) {
.btn-block {
margin: 0 0 2rem 0; } }
- @media (max-width: 767px) {
+ @media (max-width: 575px) {
.btn-block {
font-size: .875rem;
line-height: 0; } }
-.fixed-top {
- -webkit-transition: background-color 700ms linear;
- transition: background-color 700ms linear; }
- .fixed-top .navbar {
- width: 100%; }
- @media (max-width: 991px) {
- .fixed-top .navbar {
- padding: .5rem 0; } }
- .fixed-top .navbar .navbar-toggler-left {
- left: -1rem; }
- .fixed-top .navbar-brand {
- opacity: 0;
- -webkit-transition: opacity 700ms linear;
- transition: opacity 700ms linear; }
- @media (min-width: 992px) {
- .fixed-top .navbar-brand {
- opacity: 1; } }
+button:focus {
+ outline: none; }
-.scrolled {
- background-color: rgba(255, 255, 255, 0.96); }
- .scrolled .navbar-brand {
- opacity: 1;
- -webkit-transition: opacity 700ms linear;
- transition: opacity 700ms linear; }
+.btn-donate {
+ margin-top: 18px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ padding: 3px 16px 0 5px; }
+ @media (min-width: 992px) {
+ .btn-donate {
+ margin-top: 29px; } }
+ .btn-donate svg {
+ vertical-align: -7px;
+ margin-right: 5px; }
-.menu-text.hidden {
- display: none;
- visibility: hidden; }
+.amber-800 {
+ color: #ff8f00; }
-.navbar a {
- color: #263238; }
+img.img-fluid {
+ width: 100%;
+ max-width: 100%;
+ height: auto; }
-.navbar .btn {
- margin-top: .15rem; }
+.icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ fill: currentColor;
+ vertical-align: -.15rem;
+ overflow: hidden;
+ margin-right: .5rem; }
-.navbar-brand {
- font-size: 1.25rem;
- font-weight: 300; }
- @media (min-width: 576px) {
- .navbar-brand {
- font-size: 2rem; } }
- .navbar-brand strong {
- font-weight: 900; }
- .navbar-brand img {
- margin-right: 1rem;
- -webkit-transform: translateY(-5px);
- transform: translateY(-5px); }
+.i_arrow_down {
+ margin: 0;
+ position: absolute;
+ left: .75rem;
+ top: -.25rem;
+ -webkit-animation: scroll 1.5s ease-in-out infinite;
+ animation: scroll 1.5s ease-in-out infinite; }
+ @media (max-width: 575px) {
+ .i_arrow_down {
+ width: 1.75rem !important;
+ height: 1.75rem !important;
+ left: .25rem;
+ top: -.5rem; } }
+
+.i_lg {
+ width: 2.5rem;
+ height: 2.5rem;
+ margin: 0;
+ -webkit-transform: translateY(-0.35rem);
+ transform: translateY(-0.35rem);
+ fill: #b71c1c; }
+
+.i_sm {
+ vertical-align: top;
+ -webkit-transform: translateY(-0.1rem);
+ transform: translateY(-0.1rem); }
+
+footer .btn-toolbar .icon {
+ height: 2.25rem;
+ width: 2.25rem;
+ fill: rgba(38, 50, 56, 0.6); }
+
+footer .i_heart {
+ vertical-align: top;
+ -webkit-transform: translateY(-0.15rem);
+ transform: translateY(-0.15rem); }
+ @media (max-width: 767px) {
+ footer .i_heart {
+ -webkit-transform: translateY(-0.75rem);
+ transform: translateY(-0.75rem); } }
section.intro {
min-height: 100vh;
margin-bottom: 64px;
text-align: center;
color: #546e7a; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.intro .branding {
padding-top: 192px; } }
section.intro .branding h1 {
font-weight: 300 !important;
color: #263238; }
- @media (max-width: 767px) {
+ @media (max-width: 575px) {
section.intro .branding h1 {
font-size: 4.5rem; } }
section.intro .branding h1 strong {
display: inline-block;
position: relative;
top: 4px; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.intro .branding h1:before {
height: 120px;
width: 93px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
section.intro .page-scroll .btn {
- width: 32px;
- height: 32px;
+ width: 36px;
+ height: 36px;
fill: #b71c1c; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.intro .page-scroll .btn {
width: 64px;
height: 64px; } }
+ section.intro .page-scroll .btn:hover .i_arrow_down {
+ fill: white; }
section.content-section {
padding: 3rem 0; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.content-section {
padding: 72px 0; } }
background-size: cover;
background-position: center center; }
+.progress {
+ background-color: rgba(255, 255, 255, 0.2); }
+
.bg-progress {
background-image: -webkit-linear-gradient(left, #fbc02d, #ff8f00);
background-image: linear-gradient(to right, #fbc02d, #ff8f00); }
color: #546e7a;
position: absolute;
top: calc(50% - 1.25rem);
- width: 100%; }
+ width: 100%;
+ font-size: 1.25em; }
+
+section#appliances {
+ padding-bottom: 48px; }
footer {
padding: 3rem 0 0 0; }
+ @media (max-width: 991px) {
+ footer {
+ padding-top: 31px; } }
footer h4 {
margin-bottom: 1.25rem;
color: rgba(38, 50, 56, 0.6); }
padding: 1rem 0; }
@-webkit-keyframes scroll {
- 0% {
+ 0%, 100% {
-webkit-transform: translateY(30%);
transform: translateY(30%); }
50% {
-webkit-transform: translateY(50%);
- transform: translateY(50%); }
- 100% {
- -webkit-transform: translateY(30%);
- transform: translateY(30%); } }
+ transform: translateY(50%); } }
@keyframes scroll {
- 0% {
+ 0%, 100% {
-webkit-transform: translateY(30%);
transform: translateY(30%); }
50% {
-webkit-transform: translateY(50%);
- transform: translateY(50%); }
- 100% {
- -webkit-transform: translateY(30%);
- transform: translateY(30%); } }
+ transform: translateY(50%); } }
projects / people / shoehn / ipfire.org.git / blobdiff