Getting rid of le bloat

From ~1.3MB on the weblog index to just < 200KB!

18 files changed, 43 insertions, 63 deletions

diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss
index df32dd0..a24f933 100644
--- a/sass/css/_colors.scss
+++ b/sass/css/_colors.scss
@@ -1,5 +1,5 @@
-$bg: #000000;
-$bg2: #1b1e25;
+$bg0: #000000;
+$bg1: #1b1e25;
 $white: #e5e9f0;
 $gray: #a1a6b2;
 $magenta: #9c6992;
diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss
index de85b23..686bc1b 100644
--- a/sass/css/_fonts.scss
+++ b/sass/css/_fonts.scss
@@ -1,56 +1,8 @@
 @font-face {
-  font-family: "IBM Plex Sans";
-  src: url("/fonts/IBMPlexSans-Regular.ttf");
-}
-
-@font-face {
-  font-family: "IBM Plex Sans";
-  src: url("/fonts/IBMPlexSans-Bold.ttf");
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: "IBM Plex Sans";
-  src: url("/fonts/IBMPlexSans-Italic.ttf");
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "IBM Plex Sans";
-  src: url("/fonts/IBMPlexSans-BoldItalic.ttf");
-  font-style: italic;
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: "IBM Plex Serif";
-  src: url("/fonts/IBMPlexSerif-Regular.ttf");
-}
-
-@font-face {
-  font-family: "IBM Plex Serif";
-  src: url("/fonts/IBMPlexSerif-Bold.ttf");
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: "IBM Plex Serif";
-  src: url("/fonts/IBMPlexSerif-Italic.ttf");
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "IBM Plex Serif";
-  src: url("/fonts/IBMPlexSerif-BoldItalic.ttf");
-  font-style: italic;
-  font-weight: bold;
-}
-
-@font-face {
   font-family: "IBM Plex Mono";
-  src: url("/fonts/BlexMono.ttf");
+  src: url("/fonts/IBMPlexMono-Regular.ttf");
 }
 
-$font_sans: "IBM Plex Sans", Verdana, Helvetica, sans-serif;
-$font_serif: "IBM Plex Serif", Georgia, serif;
+$font_sans: Verdana, Geneva, sans-serif;
+$font_serif: Georgia, serif;
 $font_mono: "IBM Plex Mono", monospace;
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index e9f85df..93d87f9 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -5,7 +5,7 @@
 html, body {
   width: 100%;
   min-height: 100vh;
-  background-color: $bg2;
+  background-color: $bg1;
 }
 
 h1,
@@ -73,7 +73,12 @@ code {
 }
 
 span.icon {
-  font-family: $font_mono;
+  height: 1em;
+}
+
+span.icon > img {
+  height: 1em;
+  width: 1em;
 }
 
 .publish-date {
@@ -96,7 +101,7 @@ h2 > span.publish-date {
   margin: 0 auto;
   min-height: 100vh;
   height: auto;
-  background-color: $bg;
+  background-color: $bg0;
 }
 
 .landing-page-container {
@@ -168,7 +173,7 @@ h2 > span.publish-date {
   display: inline-block;
   padding: 0.5em;
   background-color: $cyan;
-  color: $bg;
+  color: $bg0;
 }
 
 .paginator a:hover {
diff --git a/static/fonts/BlexMono.ttf b/static/fonts/BlexMono.ttf
deleted file mode 100644
index 2579b49..0000000
--- a/static/fonts/BlexMono.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexMono-Regular.ttf b/static/fonts/IBMPlexMono-Regular.ttf
new file mode 100644
index 0000000..f99c8e9
--- /dev/null
+++ b/static/fonts/IBMPlexMono-Regular.ttf
diff --git a/static/fonts/IBMPlexSans-Bold.ttf b/static/fonts/IBMPlexSans-Bold.ttf
deleted file mode 100644
index 28cd4a2..0000000
--- a/static/fonts/IBMPlexSans-Bold.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSans-BoldItalic.ttf b/static/fonts/IBMPlexSans-BoldItalic.ttf
deleted file mode 100644
index 147dd86..0000000
--- a/static/fonts/IBMPlexSans-BoldItalic.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSans-Italic.ttf b/static/fonts/IBMPlexSans-Italic.ttf
deleted file mode 100644
index 044173e..0000000
--- a/static/fonts/IBMPlexSans-Italic.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSans-Regular.ttf b/static/fonts/IBMPlexSans-Regular.ttf
deleted file mode 100644
index b43625f..0000000
--- a/static/fonts/IBMPlexSans-Regular.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSerif-Bold.ttf b/static/fonts/IBMPlexSerif-Bold.ttf
deleted file mode 100644
index 8a7a786..0000000
--- a/static/fonts/IBMPlexSerif-Bold.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSerif-BoldItalic.ttf b/static/fonts/IBMPlexSerif-BoldItalic.ttf
deleted file mode 100644
index 1d42cc8..0000000
--- a/static/fonts/IBMPlexSerif-BoldItalic.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSerif-Italic.ttf b/static/fonts/IBMPlexSerif-Italic.ttf
deleted file mode 100644
index 61d5c1f..0000000
--- a/static/fonts/IBMPlexSerif-Italic.ttf
+++ /dev/null
diff --git a/static/fonts/IBMPlexSerif-Regular.ttf b/static/fonts/IBMPlexSerif-Regular.ttf
deleted file mode 100644
index aa79e5c..0000000
--- a/static/fonts/IBMPlexSerif-Regular.ttf
+++ /dev/null
diff --git a/static/svg/icons/git.svg b/static/svg/icons/git.svg
new file mode 100644
index 0000000..f2cbb02
--- /dev/null
+++ b/static/svg/icons/git.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="Git" role="img"
+viewBox="0 0 512 512">
+<rect width="512" height="512" rx="15%"/>
+<path fill="#f05133" d="M 500.95105,233.4116 278.46545,11.058584 a 32.749667,32.749667 0 0 0 -46.40642,0 l -46.14123,46.273823 58.60467,58.472083 a 38.981386,38.981386 0 0 1 49.32338,49.72116 l 56.35066,56.35063 a 38.981386,38.981386 0 1 1 -23.3358,22.0099 l -52.63813,-52.63814 v 138.55629 a 38.981386,38.981386 0 1 1 -32.08673,-1.19329 V 188.86144 A 38.981386,38.981386 0 0 1 220.92149,137.68179 L 163.24496,80.005253 10.766746,232.48347 a 32.749667,32.749667 0 0 0 0,46.27382 l 222.618184,222.353 a 32.749667,32.749667 0 0 0 46.4064,0 L 501.08364,279.68541 a 32.749667,32.749667 0 0 0 0,-46.27381"/></svg>
diff --git a/static/svg/icons/github.svg b/static/svg/icons/github.svg
new file mode 100644
index 0000000..c9f372e
--- /dev/null
+++ b/static/svg/icons/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="GitHub" role="img"
+viewBox="0 0 512 512"><path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
diff --git a/static/svg/icons/rss.svg b/static/svg/icons/rss.svg
new file mode 100644
index 0000000..7b96e49
--- /dev/null
+++ b/static/svg/icons/rss.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="RSS" role="img"
+viewBox="0 0 512 512"><circle cx="62" cy="450" r="58" fill="#f80"/><path fill="none" stroke="#f80" stroke-width="90" d="m 2.5881976,246.80852 c 144.2697024,0 262.6032824,118.33359 262.6032824,262.60329 m 184.79489,0 c 0,-246.3932 -201.00498,-447.398178 -447.3981724,-447.398178"/></svg>
diff --git a/templates/base.html b/templates/base.html
index 824f129..c64b27d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -45,9 +45,15 @@
               {% endif %}
             {% endblock %}
             <div class="links-container">
-              <a href="https://github.com/Yaroslav-95" title="GitHub"><span class="icon"></span></a>
-              <a href="https://git.yaroslavps.com/yaroslav" title="Git server"><span class="icon"></span></a>
-              <a href="/feed.xml" title="RSS feed"><span class="icon"></span></a>
+              <a href="https://github.com/Yaroslav-95" title="GitHub">
+                <span class="icon"><img src="/svg/icons/github.svg"/></span>
+              </a>
+              <a href="https://git.yaroslavps.com/yaroslav" title="Git server">
+                <span class="icon"><img src="/svg/icons/git.svg"/></span>
+              </a>
+              <a href="/feed.xml" title="RSS feed">
+                <span class="icon"><img src="/svg/icons/rss.svg"/></span>
+              </a>
             </div>
             <h3>Navigation</h3>
             <ul class="navigation-list">
diff --git a/templates/index.html b/templates/index.html
index f0ede2a..a9ef8c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,9 +7,15 @@
       <a href="/food">Recipe book</a>
     </div>
     <div class="links-container">
-      <a href="https://github.com/Yaroslav-95" title="GitHub"><span class="icon"></span></a>
-      <a href="https://git.yaroslavps.com/yaroslav" title="Git server"><span class="icon"></span></a>
-      <a href="/feed.xml" title="RSS feed"><span class="icon"></span></a>
+      <a href="https://github.com/Yaroslav-95" title="GitHub">
+        <span class="icon"><img src="/svg/icons/github.svg"/></span>
+      </a>
+      <a href="https://git.yaroslavps.com/yaroslav" title="Git server">
+        <span class="icon"><img src="/svg/icons/git.svg"/></span>
+      </a>
+      <a href="/feed.xml" title="RSS feed">
+        <span class="icon"><img src="/svg/icons/rss.svg"/></span>
+      </a>
     </div>
     <p>Welcome, my name is Yaroslav de la Peña Smirnov. I keep this site to
     sometimes write about what I do or think on my weblog, or to remind myself