p0c-website

commit 54578aaa68e21dc60faf2c092f3a3fe2d684438c
parent eb3a88be14189aa4324767c9ce6f8806df69c1df
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Mon, 26 Feb 2024 19:54:57 +0100

feat: styles for small screen res

Diffstat:
M
assets/scss/_layout.scss
 | 
8
++++++++
M
assets/scss/_variables.scss
 | 
2
+-
M
assets/scss/base/_typography.scss
 | 
20
+++++++++++++++++++-

3 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss
@@ -87,6 +87,7 @@ hr {
 
   .container {
     padding-bottom: 0;
+    display: table;
   }
 }
 
@@ -291,4 +292,11 @@ hr {
       color: $blue-color;
     }
   }
+
+  .navbar {
+    a span {
+      /* hide text on small screens, display only octicon */
+      display: none;
+    }
+  }
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
@@ -21,7 +21,7 @@ $primary-color: #000;
 $action-color: $primary-color;
 $white-color: #fff;
 $black-color: #000;
-$blue-color: #0086B3;
+$blue-color: #9877d0;
 $dark-gray-color: #333;
 $medium-gray-color: #999;
 $light-gray-color: #ccc;
diff --git a/assets/scss/base/_typography.scss b/assets/scss/base/_typography.scss
@@ -44,9 +44,16 @@ p {
   margin: 0 0 $small-spacing;
 
   &.lead {
-    font-size: rem(22);
+    font-size: rem(18);
     font-weight: 300;
   }
+  @media(min-width: 500px){
+    &.lead {
+      font-size: rem(22);
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
 }
 
 a {
@@ -73,6 +80,17 @@ img,
 picture {
   margin: 0;
   max-width: 100%;
+  &.mascot {
+    display: block;
+    width: 35%;
+    margin: 0 auto 8% auto;
+  }
+  @media(min-width: 500px){
+    &.mascot {
+      width: 80%;
+      display: table-cell;
+    }
+  }
 }
 
 blockquote {