chore(style): change fonts and styling

maiste · Sep 4, 2024 · 43d2a5c · 43d2a5c
1 parent d5d529e
commit 43d2a5c
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 34 deletions.
diff --git a/bin/actions/all.ml b/bin/actions/all.ml
@@ -5,6 +5,7 @@ let process (module R : S.RESOLVER) cache =
   Blog.process (module R) cache
   >>= Css.process (module R)
   >>= Js.process (module R)
+  >>= Fonts.process (module R)
   >>= Images.process (module R)
   >>= Page.process (module R)
   >>= Wiki.process (module R)

diff --git a/bin/actions/fonts.ml b/bin/actions/fonts.ml
@@ -0,0 +1,10 @@
+
+open Yocaml
+
+let process (module R : S.RESOLVER) =
+  Action.batch
+    ~only:`Files
+    ~where:Rule.wildcard
+    R.Source.fonts
+    (Action.copy_file ~into:R.Target.fonts)
+;;
diff --git a/bin/resolver.ml b/bin/resolver.ml
@@ -7,6 +7,7 @@ module Make (R : S.RESOLVABLE) : S.RESOLVER = struct
     let static = Path.(R.source / "static")
     let css = Path.(static / "css")
     let js = Path.(static / "script")
+    let fonts = Path.(static / "fonts")
     let images = Path.(static / "images")
     let pages = Path.(static / "pages")
     let templates = Path.(static / "templates")
@@ -25,6 +26,7 @@ module Make (R : S.RESOLVABLE) : S.RESOLVER = struct
     let static = Path.(R.target / "static")
     let css = Path.(static / "css")
     let js = Path.(static / "script")
+    let fonts = Path.(static / "fonts")
     let images = Path.(static / "images")
     let pages = R.target
     let blog = Path.(R.target / "blog")

diff --git a/bin/s.ml b/bin/s.ml
@@ -16,6 +16,7 @@ module type RESOLVER = sig
     val static : Path.t
     val css : Path.t
     val js : Path.t
+    val fonts: Path.t
     val images : Path.t
     val pages : Path.t
     val templates : Path.t
@@ -36,6 +37,7 @@ module type RESOLVER = sig
     val static : Path.t
     val css : Path.t
     val js : Path.t
+    val fonts: Path.t
     val images : Path.t
     val pages : Path.t
     val blog : Path.t
@@ -50,26 +52,3 @@ module type RESOLVER = sig
   val truncate : Path.t -> int -> string list
   val truncate_and_move : into:Path.t -> Path.t -> int -> Path.t
 end
-
-module type DATA_REINJECTABLE = sig
-  (** Union of the [DATA_PROVIDER] and the [DATA_INJECTABLE] module. *)
-
-  (** Describe the type of a the content. *)
-  type t
-
-  include Required.DATA_READABLE with type t := t
-  include Required.DATA_INJECTABLE with type t := t
-end
-
-module type DATA_TREE = sig
-  (** A representation of tree structure. *)
-
-  (** Extremity nodes *)
-  module Leaf : DATA_REINJECTABLE
-
-  (** Nodes *)
-  module Node : DATA_REINJECTABLE
-
-  val node_to_action : Node.t -> Action.t
-  val leaf_to_action : Leaf.t -> Action.t
-end
diff --git a/content/index.md b/content/index.md
@@ -14,7 +14,7 @@ language!
 - The [wiki](/wiki) (This part is under construction ⚙️)
 - Who [I](/about) am (Not really a nice page but, it will improve over time 🤞)
 
-## Important ⚠️
-This website is still under heavy development and lack a lot of features. It
+## Important
+⚠️ This website is still under heavy development and lack a lot of features. It
 will improve over time but, I wanted to have a decent base first (hence the
 code does not look good actually!).
diff --git a/static/css/main.css b/static/css/main.css
@@ -21,7 +21,7 @@ body {
     flex-direction: column;
     align-items: center;
     font-weight: 400;
-    font-family: "Inter", sans-serif;
+    font-family: "Overpass", "Inter", sans-serif;
 }
 
 h2,
@@ -31,6 +31,7 @@ h4 {
 }
 
 h1 {
+    font-family: "Playfair Display SC";
     font-size: 3rem;
     color: var(--font-color);
     background-color: var(--primary);
@@ -54,11 +55,11 @@ img {
 }
 
 p {
+    font-size: 1rem;
     margin: 0;
     padding: 0;
     line-height: 1.2;
     text-align: justify;
-    font-family: "Inter";
 }
 
 p em {
@@ -121,6 +122,7 @@ header {
 }
 
 header h2 {
+    font-size: 3rem;
     position: relative;
 }
 
@@ -143,6 +145,10 @@ header h2 a::before {
     margin-bottom: 10px;
 }
 
+header h2 a:hover::before {
+    background-color: var(--font-color);
+}
+
 header nav {
     width: 100%;
     display: flex;
@@ -194,6 +200,10 @@ main a {
     text-decoration-style: dotted;
 }
 
+main a:hover {
+    text-decoration: none;
+}
+
 
 /* --- Footer sections --- */
 

diff --git a/static/fonts/Overpass-italic.woff2 b/static/fonts/Overpass-italic.woff2
diff --git a/static/fonts/Overpass.woff2 b/static/fonts/Overpass.woff2
diff --git a/static/fonts/Playfair-italic.woff2 b/static/fonts/Playfair-italic.woff2
diff --git a/static/fonts/Playfair.woff2 b/static/fonts/Playfair.woff2
diff --git a/static/fonts/Railway-italic.woff2 b/static/fonts/Railway-italic.woff2
diff --git a/static/fonts/Railway.woff2 b/static/fonts/Railway.woff2
diff --git a/static/fonts/import.css b/static/fonts/import.css
@@ -0,0 +1,37 @@
+@font-face {
+    font-family: 'Overpass';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(Overpass-italic.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(Overpass.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: 'Playfair Display SC';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(Playfair-italic.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+/* latin */
+@font-face {
+    font-family: 'Playfair Display SC';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(Playfair.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/static/templates/base.html b/static/templates/base.html
@@ -5,16 +5,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Maiste.fr</title>
+
+    <!-- Main CSS -->
     <link href="/static/css/main.css" rel="stylesheet" />
+
+    <!-- Fonts -->
+    <link href="/static/fonts/import.css" rel="stylesheet" />
     <link rel="me" href="https://fosstodon.org/@maiste" />
 
-    <!-- FIXME: replace me with a local version of the fonts i.e. NO GOOGLE -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link
-        href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-        rel="stylesheet">
-    <!-- FIXME: replace me with local version of the css + script load from local. -->
+    <!-- Code Highlighting -->
     <link href="/static/css/code.css" rel="stylesheet" type="text/css" />
     <script src="/static/script/highlight.min.js"></script>
 </head>