feat(style): custom font for titles

6 files changed, 39 insertions, 10 deletions

diff --git a/public/benedict.ttf b/public/benedict.ttf
new file mode 100644
index 0000000..9a1dfe5
--- /dev/null
+++ b/public/benedict.ttf
diff --git a/public/benedict.woff2 b/public/benedict.woff2
new file mode 100644
index 0000000..d3fa91a
--- /dev/null
+++ b/public/benedict.woff2
diff --git a/public/league_gothic.ttf b/public/league_gothic.ttf
new file mode 100644
index 0000000..c0c64f6
--- /dev/null
+++ b/public/league_gothic.ttf
diff --git a/public/league_gothic.woff2 b/public/league_gothic.woff2
new file mode 100644
index 0000000..3fca8e3
--- /dev/null
+++ b/public/league_gothic.woff2
diff --git a/src/pages/legal.astro b/src/pages/legal.astro
index adc83de..fc4a026 100644
--- a/src/pages/legal.astro
+++ b/src/pages/legal.astro
@@ -39,6 +39,16 @@ import Base from "../layout/Base.astro";
         Les images utilisées dans la section « Références » appartiennent à leur(s)
         ayant droit respectif(s).
       </p>
+      <p>Crédits polices&thinsp;:</p>
+      <ul>
+        <li>
+          Les contributeurs de <a
+            href="https://github.com/theleagueof/league-gothic"
+            target="_blank">League Gothic</a
+          >
+        </li>
+        <li>Joanne Hewitt</li>
+      </ul>
     </div>
     <div>
       <h3>3. Vie privée</h3>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 0d112e5..c4b3165 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -8,32 +8,48 @@ $bp-mid: 1000px; // video disabled
 $bp-small: 630px;
 $bp-tiny: 500px;
 
-body {
+@font-face {
+  font-family: "Benedict";
+  src: url("/benedict.woff2") format("woff2"), url("/benedict.ttf") format("ttf");
+}
+
+@font-face {
+  font-family: "League Gothic";
+  src: url("/league_gothic.woff2") format("woff2"), url("/league_gothic.ttf") format("ttf");
+}
+
+:root {
   font-size: 22px;
+}
+
+body {
   background: $background;
   color: $text;
   font-family: "Raveo", Inter, Roboto, Arial, "Liberation Sans", sans-serif;
 }
 
 h1 {
-  font-size: 3em;
+  font-size: 4rem;
   font-weight: bold;
-  margin-bottom: 1rem;
-  font-family: serif;
+  //margin-bottom: 1rem;
+  font-family: Benedict, serif;
 }
 
 h2 {
-  font-size: 2em;
+  font-size: 3rem;
   font-weight: bold;
   margin-bottom: 2rem;
+  font-family: "League Gothic", serif;
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 2rem;
+  font-weight: bold;
+  font-family: Benedict, serif;
 }
 
 h4 {
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 p {
@@ -47,7 +63,7 @@ p {
 
 ul {
   list-style: disc outside;
-  margin-top: -0.5rem;
+  margin-top: -0.75rem;
   margin-left: 1em;
 }
 
@@ -102,7 +118,8 @@ header {
 .tags {
   display: flex;
   gap: 0.5rem 1rem;
-  font-size: 1.75rem;
+  font-size: 2rem;
+  font-family: "League Gothic", sans-serif;
   @media only screen and (max-width: $bp-mid) {
     flex-wrap: wrap;
     & *:nth-child(2) {
@@ -160,7 +177,6 @@ section[data-scroll] .content {
 
   &__header {
     text-align: center;
-    margin-bottom: 1rem;
 
     & h2 {
       margin-bottom: 1rem;
@@ -193,6 +209,9 @@ section[data-scroll] .content {
 
   & h3 {
     margin-bottom: 2rem;
+    font-family: "Raveo", Inter, Roboto, Arial, "Liberation Sans", sans-serif;
+    font-size: 1.75rem;
+    font-weight: normal;
   }
 }