myheats-website

commit af19b18a9fba7cd366eba0921ec1a7fe942733e8
parent fd72c6d078d730a3a0d78b65b4331a5f3007b29f
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Thu, 20 Apr 2023 22:21:58 +0200

feat: add intro

Diffstat:
M
_includes/intro.html
 | 
5
++++-
M
assets/scss/_layout.scss
 | 
1
+
M
assets/scss/_variables.scss
 | 
2
+-
M
assets/scss/base/_typography.scss
 | 
20
+++++++++++++++++++-

4 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/_includes/intro.html b/_includes/intro.html
@@ -1,5 +1,8 @@
 <section class="intro">
   <div class="container">
-    <p class="lead">Hi, I'm John Doe. I do stuffs with computer and sometimes write about it here. I'm from Penang, MY and I ship code at <a href="#">Microsoft</a>.</p>
+    <img class="logo" src="https://0x0.in0rdr.ch/Z.png" alt="myheats-logo"/>
+    <p class="lead">
+      Live-leaderboard. Simple & elegant scoring. Your code, your data, your event.
+    </p>
   </div>
 </section>
diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss
@@ -87,6 +87,7 @@ hr {
 
   .container {
     padding-bottom: 0;
+    display: table;
   }
 }
 
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: #2ea6ff;
 $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%;
+  &.logo {
+    display: block;
+    width: 35%;
+    margin: 0 3% 8% 0;
+  }
+  @media(min-width: 500px){
+    &.logo {
+      width: 80%;
+      display: table-cell;
+    }
+  }
 }
 
 blockquote {