feat: copy font in assets and improve h1 look (closes #8, closes #7)

src/lib/css/content.scss

@@ -1,11 +1,5 @@
 body {
     background-image: url(img/background.jpg);
-    font-family: "Montserrat", sans-serif;
-    font-optical-sizing: auto;
-    text-align: justify;
-    line-height: 25px;
-    color: var(--color);
-    font-weight: 300;
 }
 
 * {

src/lib/css/typo.scss

@@ -1,46 +1,65 @@
-h1, h2, h3, h4 {
-    font-family: Knewave;
+@font-face {
+  font-family: 'Knewave';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/Knewave.woff) format('woff');
+}
+
+@mixin montserrat($style, $weight, $file) {
+    @font-face {
+      font-family: 'Montserrat';
+      font-style: $style;
+      font-weight: $weight;
+      src: url(/fonts/#{$file}.woff2) format('woff2');
+    }
+}
+
+@include montserrat(normal, 700, "Montserrat-Bold");
+@include montserrat(italic, 700, "Montserrat-BoldItalic");
+@include montserrat(normal, 400, "Montserrat-Regular");
+@include montserrat(italic, 400, "Montserrat-Italic");
+@include montserrat(normal, 300, "Montserrat-Light");
+@include montserrat(italic, 300, "Montserrat-LightItalic");
+
+body {
+    font-family: "Montserrat", sans-serif;
+    color: var(--color-text);
 }
 
 h1 {
     margin: 0 0 var(--space-medium) 0;
 
-    font-family: "Knewave", system-ui;
+    font-family: 'Knewave';
     font-size: var(--fz-1);
-
     text-transform: uppercase;
-    text-align: center;
 }
 
 h2 {
     margin: 0 0 var(--space-medium) 0;
 
-    font-family: "Knewave", system-ui;
+    font-family: 'Knewave';
     font-size: var(--fz-2);
-
     text-transform: uppercase;
 }
 
 h3 {
     margin: 0 0 var(--space-small) 0;
 
-    font-family: "Knewave", system-ui;
     font-size: var(--fz-3);
 }
 
 h4 {
     margin: 0 0 var(--space-small) 0;
 
-    font-family: "Knewave", system-ui;
     font-size: var(--fz-4);
 }
 
 p {
     margin: 0 0 var(--space-small) 0;
+
     margin-bottom: var(--space-medium);
 }
 
-
 @media ($mobile-breakpoint) {
     h1, h2, h3 {
         margin: 0 0 var(--space-small) 0;

src/lib/css/variables.scss

@@ -3,7 +3,7 @@ $mobile-breakpoint: "max-width: 768px";
 :root {
     --color-text: #161616;
 
-    --color-primary: #aa1d29;
+    --color-primary: #DB2937;
     --color-on-primary: white;
 
     --color-accent: #161616;
@@ -21,8 +21,8 @@ $mobile-breakpoint: "max-width: 768px";
 
     --width: 1100px;
 
-    --fz-1: 2rem;
-    --fz-2: 2rem;
+    --fz-1: 4rem;
+    --fz-2: 3rem;
     --fz-3: 1.5rem;
     --fz-4: 1.125rem;
 
@@ -32,4 +32,11 @@ $mobile-breakpoint: "max-width: 768px";
     --elevation-medium: 0px 2px 7px 0px rgba(22, 22, 22, 0.3);
 
     --transitions-duration: 0.2s;
+    
+    @media ($mobile-breakpoint) {
+        --fz-1: 2.8rem;
+        --fz-2: 2.5rem;
+        --fz-3: 1.5rem;
+        --fz-4: 1.125rem;
+    }
 }

src/lib/nav.scss

@@ -25,10 +25,6 @@
     box-shadow: var(--elevation-high);
     background: var(--color-dark-gradient);
 
-    @media ($mobile-breakpoint) {
-        margin-bottom: 65px;
-    }
-
     &--content {
         grid-area: 1 / 2 / 2 / 3;
         height: var(--desktop-height);

src/lib/section.html

@@ -1,11 +1,22 @@
-{% macro section(title, title_image, title_image_hover) -%}
-  <div class="section"
+{% macro section(
+  title,
+  title_picture,
+  title_picture_hover = None,
+  title_picture_offset = "20px",
+  title_color = "var(--color-text)")
+-%}
+  <div class="section">
+    <h1
+      class="section--title"
       style="
-      --image:url('{{ title_image }}');
-      --hover-image:url('{{ title_image_over or title_image }}');
+        color: {{ title_color }};
+        --picture-url:url('{{ title_picture }}');
+        --picture-hover-url:url('{{ title_picture_hover or title_picture }}');
+        --picture-offset: {{ title_picture_offset }};
       "
     >
-    <h2 class="section--title">{{ title }}</h2>
+      {{ title }}
+    </h1>
     {{ caller() }}
   </div>
 {%- endmacro -%}

src/lib/section.scss

@@ -2,36 +2,44 @@
     margin-bottom: var(--space-xlarge);
     display: flex;
     flex-direction: column;
+    align-items: center;
 
     @media ($mobile-breakpoint) {
         margin-bottom: var(--space-large);
     }
 
     &--title {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        @media ($mobile-breakpoint) {
-            flex-direction: row;
-            justify-content: center;
-        }
+        background: transparent;
+        position: relative;
+        margin-top: 110px;
 
         &::before {
-            width: 150px;
-            height: 150px;
-            background: center / contain no-repeat var(--image);
-            content: "";
+            z-index: -1;
 
-            @media ($mobile-breakpoint) {
-                width: 50px;
-                height: 50px;
-                margin-right: var(--space-small);
-            }
+            position: absolute;
+            top: -110px;
+            left: var(--picture-offset);
+            width: 150px;
+            height: 125px;
+
+            background: center / contain no-repeat var(--picture-url);
+            content: "";
         }
 
         &:hover::before {
-            background-image: var(--hover-image);
+            background-image: var(--picture-hover-url);
+        }
+
+        @media ($mobile-breakpoint) {
+            margin-top: 75px;
+
+            &::before {
+                top: -75px;
+                left: calc(var(--picture-offset) * 0.8);
+
+                width: 90px;
+                height: 90px;
+            }
         }
     }
 

src/pages/index.html

@@ -2,11 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
         <title>Frog Collective</title>
-        <link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:400,300">
         <link rel="stylesheet" href="/style.css"/>
         <script type="module" src="/js/index.js"></script>
     </head>

src/pages/index/games.html

@@ -1,6 +1,10 @@
 {% from "lib/section.html" import section %}
 
-{% call section(gettext("Games"), "/img/section-games.png") %}
+{% call section(gettext("Games"),
+    "/img/section-games.png",
+    title_picture_offset = "-20px",
+    title_color = "var(--color-primary)"
+  ) %}
   {% for game in glob("games/*.md") | map('markdown') %}
     <div class="game">
       <div class="game--picture-wrapper">

src/pages/index/news.html

@@ -1,6 +1,11 @@
 {% from "lib/section.html" import section %}
 
-{% call section(gettext("News"), "/img/section-news.png") %}
+{% call section(
+  gettext("News"),
+  "/img/section-news.png",
+  title_picture_offset="60px",
+  title_color = "var(--color-primary)"
+  ) %}
   {% for news in glob("news/*.md") | map('markdown') %}
     <div class="news">
       <div class="news--title">

src/pages/index/presentation.html

@@ -8,7 +8,12 @@
   </div>
 {% endmacro %}
 
-{% call section(gettext("Collective"), "/img/section-collective.png", "/img/section-collective-hover.png") %}
+{% call section(
+  gettext("Collective"),
+  "/img/section-collective.png",
+  title_picture_hover = "/img/section-collective-hover.png",
+  title_picture_offset = "170px"
+  ) %}
   <div class="presentation--content">
     <p>
       {% trans %}