[SITE] add new logo (and Boon font) to front page

assets/css/main.css

@@ -1,5 +1,9 @@
 /* STYLE for jannikbeyerstedt.de
  * generic styles
+ *
+ * main font: Alegreya Sans
+ * headings: Crimson Text
+ * Logo: Boon
  */
 body {
   margin: 0;

assets/css/templates/home.css

@@ -3,17 +3,26 @@
  */
 main div.home {
   text-align: center;
-  margin-top: 20%;
+  margin-top: 17%;
   margin-bottom: 20%; }
-  main div.home h1 {
+  main div.home div.logo {
-    margin: 0;
+    font-family: 'Boon', "Verdana", "Arial", sans-serif;
-    font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
+    font-size: 24.5px;
+    line-height: 1.2em;
     font-weight: 100;
-    font-size: 60px;
+    width: 11em;
-    margin-top: 15px;
+    margin: 0 auto; }
-    margin-bottom: 15px; }
+    main div.home div.logo span {
+      color: #2da301;
+      font-weight: 400; }
+      main div.home div.logo span.firstname {
+        padding-left: 0.1em;
+        padding-right: 0.56em; }
+      main div.home div.logo span.surname {
+        letter-spacing: -0.036em; }
   main div.home p {
-    margin: 0;
+    margin-top: 0.5em;
-    font-size: 20px; }
+    font-size: 14px;
+    letter-spacing: -0.02em; }
 
 /*# sourceMappingURL=home.css.map */

assets/css/templates/home.css.map

@@ -2,9 +2,10 @@
   "version": 3,
   "file": "home.css",
   "sources": [
-    "../../scss/templates/home.scss"
+    "../../scss/templates/home.scss",
+    "../../scss/_mainvariables.scss"
   ],
   "sourcesContent": [],
-  "mappings": "AAAA;;GAEG;AAGE,IAAI,CAAC,GAAG,AAAA,KAAK,CAAP;EACP,UAAU,EAAE,MAAO;EACnB,UAAU,EAAE,GAAI;EAChB,aAAa,EAAE,GAAI,GAHX;EAIR,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,EAAE,CAAb;IACD,MAAM,EAAE,CAAE;IACV,WAAW,EAAE,+CAAgD;IAC7D,WAAW,EAAE,GAAI;IACjB,SAAS,EAAE,IAAK;IAChB,UAAU,EAAE,IAAK;IACjB,aAAa,EAAE,IAAK,GANlB;EAQJ,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,CAAC,CAAb;IACA,MAAM,EAAE,CAAE;IACV,SAAS,EAAE,IAAK,GAFf",
+  "mappings": "AAAA;;GAEG;AAKE,IAAI,CAAC,GAAG,AAAA,KAAK,CAAP;EACP,UAAU,EAAE,MAAO;EACnB,UAAU,EAAE,GAAI;EAChB,aAAa,EAAE,GAAI,GAHX;EAKL,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAhB;IACP,WAAW,EAAE,sCAAuC;IACpD,SAAS,EAAE,MAAO;IAClB,WAAW,EAAE,KAAM;IACnB,WAAW,EAAE,GAAI;IAEjB,KAAK,EAAE,IAAK;IACZ,MAAM,EAAE,MAAO,GAPP;IASR,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,CAAtB;MACH,KAAK,ECnBE,OAAO;MDoBd,WAAW,EAAE,GAAI,GAFb;MAGH,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,AAAA,UAAU,CAA1B;QACV,YAAY,EAAE,KAAM;QACpB,aAAa,EAAE,MAAO,GAFX;MAIZ,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,GAAG,AAAA,KAAK,CAAC,IAAI,AAAA,QAAQ,CAA1B;QACR,cAAc,EAAE,QAAS,GADhB;EAOf,IAAI,CAAC,GAAG,AAAA,KAAK,CAAC,CAAC,CAAb;IACA,UAAU,EAAE,KAAM;IAClB,SAAS,EAAE,IAAK;IAChB,cAAc,EAAE,OAAQ,GAHvB",
   "names": []
 }

assets/fonts/boon.css

@@ -0,0 +1,55 @@
+@font-face {
+  src: url("boon-300.woff") format("woff");
+  font-family: "Boon";
+  font-style: normal;
+  font-weight: 300;
+}
+
+@font-face {
+  src: url("boon-300i.woff") format("woff");
+  font-family: "Boon";
+  font-style: italic;
+  font-weight: 300;
+}
+
+@font-face {
+  src: url("boon-400.woff") format("woff");
+  font-family: "Boon";
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  src: url("boon-400i.woff") format("woff");
+  font-family: "Boon";
+  font-style: italic;
+  font-weight: 400;
+}
+
+@font-face {
+  src: url("boon-500.woff") format("woff");
+  font-family: "Boon";
+  font-style: normal;
+  font-weight: 500;
+}
+
+@font-face {
+  src: url("boon-500i.woff") format("woff");
+  font-family: "Boon";
+  font-style: italic;
+  font-weight: 500;
+}
+
+@font-face {
+  src: url("boon-700.woff") format("woff");
+  font-family: "Boon";
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  src: url("boon-700i.woff") format("woff");
+  font-family: "Boon";
+  font-style: italic;
+  font-weight: 700;
+}

assets/scss/main.scss

@@ -1,5 +1,9 @@
 /* STYLE for jannikbeyerstedt.de
  * generic styles
+ *
+ * main font: Alegreya Sans
+ * headings: Crimson Text
+ * Logo: Boon
  */
 @import "custom";
 @import "variables";

assets/scss/templates/home.scss

@@ -2,22 +2,42 @@
  * for specific template
  */
 
+@import "../mainvariables";
+
 main {
   div.home {
     text-align: center;
-    margin-top: 20%;
+    margin-top: 17%;
     margin-bottom: 20%;
-    h1 {
+    
-      margin: 0;
+    div.logo {
-      font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
+      font-family: 'Boon', "Verdana", "Arial", sans-serif;
+      font-size: 24.5px;
+      line-height: 1.2em;
       font-weight: 100;
-      font-size: 60px;
+      
-      margin-top: 15px;
+      width: 11em; // more than needed, because of fallback fonts
-      margin-bottom: 15px;
+      margin: 0 auto;
+      
+      span {
+        color: $color_accent;
+        font-weight: 400;
+        &.firstname {
+          padding-left: 0.1em;
+          padding-right: 0.56em;
+        }
+        &.surname {        
+          letter-spacing: -0.036em;
+        }
+      }
+      
     }
+    
     p {
-      margin: 0;
+      margin-top: 0.5em;
-      font-size: 20px;
+      font-size: 14px;
+      letter-spacing: -0.02em;
     }
+    
   }
 }

site/snippets/base/html-head.php

@@ -36,6 +36,8 @@ if( $page->isHomePage() ) {
   <!-- Google web fonts -->
   <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
   <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,700' rel='stylesheet' type='text/css'>
+  
+  <?php echo css('assets/fonts/boon.css') ?>
 
 </head>
 <body>

site/templates/home.php

@@ -14,7 +14,17 @@ snippet('base/cont-header');
   <div class="container">
     
     <div class="home">
-      <h1><?php echo $page->hero_text()->kirbytextRaw() ?></h1>
+      <div class="logo">
+        <span class="firstname">jannik</span>0b 01101010<br>
+        01100001 01101110<br>
+        01101110 01101001<br>
+        01101011 <span class="surname">beyerstedt</span><br>
+        01100010 01100101<br>
+        01111001 01100101<br>
+        01110010 01110011<br>
+        01110100 01100101<br>
+        01100100 01110100
+      </div>
       <p><?php echo $page->subtitle()->kirbytextRaw() ?></p>
     </div>