Merge pull request #137 from whitep4nth3r/remove-custom-fonts

remove custom fonts

.eleventy.js

@@ -8,7 +8,6 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addWatchTarget("./src/css");
   eleventyConfig.addPassthroughCopy({ "./src/_css/": "/css/" });
-  eleventyConfig.addPassthroughCopy({ "./src/_fonts": "/fonts" });
   eleventyConfig.addPassthroughCopy({ "./src/_public": "/" });
   eleventyConfig.addPassthroughCopy({
     "./src/_client_scripts/app_search.js": "/js/app_search.js",

src/_sass/_404.scss

@@ -18,7 +18,7 @@
 }
 
 .fourohfour__title {
-  @include font_atomic;
+  margin-top: 2rem;
   color: var(--color-body);
 }
 
@@ -32,8 +32,7 @@
 }
 
 .fourohfour__img {
-  box-shadow: 0px 1.5rem 2rem -1rem rgba(0, 0, 0, 0.4),
-    inset 0px 1px 0px rgba(255, 255, 255, 0.48);
+  box-shadow: 0px 1.5rem 2rem -1rem rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.48);
   border-radius: calc(var(--border-radius-base) * 2);
   width: 100%;
   margin: auto;

src/_sass/_font.scss

@@ -1,40 +1,3 @@
-@font-face {
-  font-family: "Rubik";
-  font-weight: 400 900; /* safe weight range */
-  src: url("/fonts/Rubik-Variable.woff2") format("woff2-variations"),
-    url("/fonts/Rubik-Variable.woff2") format("woff2");
-  font-style: normal;
-  font-stretch: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Atomic Marker";
-  src: url("/fonts/AtomicMarker.woff2") format("woff2");
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: "Atomic Marker Extras";
-  src: url("/fonts/AtomicMarkerExtras.woff2") format("woff2");
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: "Atomic Marker Extras Two";
-  src: url("/fonts/AtomicMarkerExtrasTwo.woff2") format("woff2");
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  font-display: block;
-}
-
 @mixin font_main {
   font-weight: var(--font-weight-main);
   font-family: var(--font-family-main);
@@ -49,21 +12,3 @@
   font-weight: var(--font-weight-mid);
   font-family: var(--font-family-main);
 }
-
-@mixin font_atomic {
-  font-weight: normal;
-  font-style: normal;
-  font-family: "Atomic Marker";
-}
-
-@mixin font_atomic_extras {
-  font-weight: normal;
-  font-style: normal;
-  font-family: "Atomic Marker Extras";
-}
-
-@mixin font_atomic_extras_two {
-  font-weight: normal;
-  font-style: normal;
-  font-family: "Atomic Marker Extras Two";
-}

src/_sass/_newsletter-signup.scss

@@ -14,8 +14,8 @@
   margin-bottom: 0.5rem;
 
   span {
-    font-family: "Atomic Marker";
     color: var(--orange);
+    font-style: italic;
   }
 }
 
@@ -39,7 +39,8 @@
   border-radius: var(--border-radius-base);
   width: 100%;
   color: var(--white);
-  font-family: "Atomic Marker";
+  font-weight: bold;
+  text-transform: uppercase;
   font-size: 1.5rem;
   text-align: center;
   text-decoration: none;

src/_sass/_post.scss

@@ -205,7 +205,7 @@
 
 .post__blockquote:before {
   content: '"';
-  @include font_atomic;
+  font-style: italic;
   color: var(--orange);
   font-size: 10rem;
   line-height: 0;
@@ -325,7 +325,7 @@
 
 .post__calloutContent blockquote:before {
   content: '"';
-  @include font_atomic;
+  font-style: italic;
   color: var(--orange);
   font-size: 10rem;
   line-height: 0;

src/_sass/_reset.scss

@@ -48,15 +48,6 @@ body {
   }
 }
 
-@keyframes fadeInBrush {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 50%;
-  }
-}
-
 main {
   margin: 6rem auto auto auto;
   max-width: var(--global-max-width);
@@ -66,18 +57,16 @@ main {
   }
 
   &:before {
-    animation: fadeInBrush 0.42s ease-in-out;
-    @include font_atomic_extras_two;
-    content: "M" / "";
-    color: var(--color-brush-bg);
+    content: "";
+    background-image: var(--bg-brush);
+    background-repeat: no-repeat;
+    background-size: cover;
     position: fixed;
     z-index: -1;
     opacity: 50%;
+    height: 100%;
+    width: 100%;
     mix-blend-mode: overlay;
-    font-size: 1000px;
-    line-height: 1;
-    right: -10%;
-    top: 5%;
   }
 
   &:after {
@@ -95,13 +84,3 @@ main {
     z-index: -1;
   }
 }
-
-[data-type="about"],
-[data-type="uses"],
-[data-type="post"] {
-  main:before {
-    content: "Q" / "";
-    top: 20%;
-    right: -20%;
-  }
-}

src/_sass/_root.scss

@@ -21,10 +21,11 @@ $global_md_breakpoint: 768px;
   --body-horizontal-padding-sm: 1rem;
   --body-horizontal-padding-lg: 2.5rem;
 
-  --font-family-main: "Rubik", Arial, sans-serif;
+  /* https://modernfontstacks.com/ */
+  --font-family-main: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
 
-  --font-weight-bold: 800;
-  --font-weight-mid: 600;
+  --font-weight-bold: 700;
+  --font-weight-mid: 700;
   --font-weight-main: 400;
 
   --border-radius-base: 0.375rem;
@@ -45,6 +46,7 @@ $global_md_breakpoint: 768px;
   color-scheme: dark;
   --page-bg: radial-gradient(farthest-corner at 100% 100%, var(--black-alt) 0%, var(--black) 50%);
   --whitep4nth3r-bg-svg: url("/img/whitep4nth3r-darkmode.svg");
+  --bg-brush: url("/img/brush-dark.svg");
 
   --color-bg: var(--black);
   --color-fg: var(--white);
@@ -60,6 +62,7 @@ $global_md_breakpoint: 768px;
   color-scheme: light;
   --page-bg: radial-gradient(farthest-corner at 100% 100%, var(--white-alt) 0%, var(--white) 50%);
   --whitep4nth3r-bg-svg: url("/img/whitep4nth3r-lightmode.svg");
+  --bg-brush: url("/img/brush-light.svg");
 
   --color-bg: var(--white);
   --color-fg: var(--black);

src/_sass/_webring.scss

@@ -6,7 +6,7 @@
   margin-bottom: 0.5rem;
 
   span {
-    font-family: "Atomic Marker";
+    font-style: italic;
     color: var(--orange);
   }
 }
@@ -98,7 +98,8 @@
   border-radius: var(--border-radius-base);
   width: 100%;
   color: var(--black);
-  font-family: "Atomic Marker";
+  font-weight: bold;
+  text-transform: uppercase;
   font-size: 1.5rem;
   text-align: center;
   text-decoration: none;