add stats

[people/shoehn/ipfire.org.git] / static / css / style.css

diff --git a/static/css/style.css b/static/css/style.css
index 4be90d1dc477a139f743c675ad60352b777868db..c8e08b0a0ceb1aec67cc22b7df3c455c341d32a1 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1425,7 +1425,7 @@ mark,
 .btn {
   display: inline-block;
   font-weight: normal;
-  line-height: 1.25;
+  line-height: 0.95;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -4994,6 +4994,15 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   .hidden-print {
     display: none !important; } }
 
+h4 {
+  font-weight: 600; }
+
+button.navbar-toggler div {
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 1rem;
+  display: inline-block;
+  margin-left: 12px; }
+
 .btn {
   text-transform: uppercase;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
@@ -5010,18 +5019,56 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
     -webkit-transform: translateY(2px);
             transform: translateY(2px); }
 
+.btn-outline-primary,
+.btn-outline-secondary {
+  -webkit-transition: background-color .25s ease-in-out;
+  transition: background-color .25s ease-in-out; }
+  .btn-outline-primary:hover,
+  .btn-outline-secondary:hover {
+    -webkit-transition: background-color .25s ease-in-out;
+    transition: background-color .25s ease-in-out; }
+
 .btn-lg, .btn-group-lg > .btn {
   margin: 0 24px; }
+  @media (max-width: 991px) {
+    .btn-lg, .btn-group-lg > .btn {
+      margin: 0 8px;
+      font-size: 14px; } }
+
+.btn-sm small, .btn-group-sm > .btn small {
+  display: inline-block;
+  -webkit-transform: translateY(-2px);
+          transform: translateY(-2px); }
 
 .btn-block {
-  margin: 0 0 2rem 0; }
+  margin: 0 0 1.5rem 0; }
+  @media (min-width: 768px) {
+    .btn-block {
+      margin: 0 0 2rem 0; } }
 
 .fixed-top {
   -webkit-transition: background-color 700ms linear;
   transition: background-color 700ms linear; }
+  .fixed-top .navbar {
+    width: 100%; }
+  .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; } }
 
 .scrolled {
   background-color: rgba(255, 255, 255, 0.96); }
+  .scrolled .navbar-brand {
+    opacity: 1;
+    -webkit-transition: opacity 700ms linear;
+    transition: opacity 700ms linear; }
+
+.menu-text.hidden {
+  display: none;
+  visibility: hidden; }
 
 .navbar a {
   color: #263238; }
@@ -5030,8 +5077,11 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   margin-top: .15rem; }
 
 .navbar-brand {
-  font-size: 2rem;
+  font-size: 1.25rem;
   font-weight: 300; }
+  @media (min-width: 576px) {
+    .navbar-brand {
+      font-size: 2rem; } }
   .navbar-brand img {
     margin-right: 1rem;
     -webkit-transform: translateY(-5px);
@@ -5039,6 +5089,13 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 
 .display-2 {
   margin-bottom: 4rem; }
+  @media (max-width: 991px) {
+    .display-2 {
+      font-size: 32px; } }
+
+@media (max-width: 991px) {
+  .display-4 {
+    font-size: 14px; } }
 
 .bg-progress {
   background-image: -webkit-linear-gradient(left, #fbc02d, #ff8f00);
@@ -5052,42 +5109,56 @@ section.intro {
   background-position: center top;
   position: relative; }
   section.intro .branding {
-    padding-top: 192px;
+    padding-top: 6rem;
     margin-bottom: 64px;
     text-align: center;
     color: #546e7a; }
+    @media (min-width: 768px) {
+      section.intro .branding {
+        padding-top: 192px; } }
     section.intro .branding h1 {
       font-weight: 300 !important;
       color: #263238; }
+      @media (max-width: 991px) {
+        section.intro .branding h1 {
+          font-size: 4.5rem; } }
       section.intro .branding h1 strong {
         font-weight: 700 !important; }
     section.intro .branding h1:before {
       content: "";
-      height: 120px;
-      width: 93px;
+      height: 60px;
+      width: 76px;
       background-image: url("../img/ipfire-tux.png");
       background-repeat: no-repeat;
       background-position: center center;
       background-size: contain;
-      margin-right: 32px;
       display: inline-block;
       position: relative;
-      top: 8px; }
+      top: 4px; }
+      @media (min-width: 768px) {
+        section.intro .branding h1:before {
+          height: 120px;
+          width: 93px;
+          margin-right: 32px;
+          top: 8px; } }
   section.intro .page-scroll {
     position: absolute;
     bottom: 48px;
-    width: 66px;
     left: 50%;
     -webkit-transform: translateX(-50%);
             transform: translateX(-50%); }
     section.intro .page-scroll .btn {
-      width: 64px;
-      height: 64px;
+      width: 32px;
+      height: 32px;
       fill: #b71c1c; }
+      @media (min-width: 768px) {
+        section.intro .page-scroll .btn {
+          width: 64px;
+          height: 64px; } }
       section.intro .page-scroll .btn:hover {
         fill: white; }
       section.intro .page-scroll .btn svg {
-        width: 24px;
+        width: 12px;
         height: auto;
         position: absolute;
         top: 50%;
@@ -5095,9 +5166,15 @@ section.intro {
                 transform: translate(-50%, -60%);
         -webkit-animation: scroll 3s infinite;
                 animation: scroll 3s infinite; }
+        @media (min-width: 768px) {
+          section.intro .page-scroll .btn svg {
+            width: 24px; } }
 
 section.content-section {
-  padding: 96px 0; }
+  padding: 3rem 0; }
+  @media (min-width: 768px) {
+    section.content-section {
+      padding: 96px 0; } }
 
 section#features,
 section#appliances,
@@ -5183,21 +5260,6 @@ footer {
     -webkit-transform: translate(-50%, -60%);
             transform: translate(-50%, -60%); } }
 
-.donate small {
-  display: inline-block;
-  -webkit-transform: translateY(-2px);
-          transform: translateY(-2px); }
-  .donate small:before {
-    content: "";
-    width: 20px;
-    height: 19px;
-    margin-right: 8px;
-    display: inline-block;
-    background-image: url("../img/icons/icon-heart-filled-white.svg");
-    background-size: cover;
-    -webkit-transform: translateY(5px);
-            transform: translateY(5px); }
-
 .btn-red900 {
   color: #fff !important;
   background-color: #b71c1c;
@@ -5257,3 +5319,21 @@ footer {
     background-color: #11171a;
     background-image: none;
     border-color: #0d1114; }
+
+@media (max-width: 991px) {
+  p.lead {
+    font-size: 1rem; } }
+
+.circle {
+  position: relative; }
+  .circle p.lead {
+    color: #546e7a;
+    position: absolute;
+    top: calc(50% - 1.25rem);
+    width: 100%; }
+
+.truncate {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; }