Add font variable for the main font

spyder-ide · Nov 24, 2023 · 07fb55b · 07fb55b
1 parent 0f8636a
commit 07fb55b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/assets/static/css/magnific-popup.css b/assets/static/css/magnific-popup.css
@@ -132,7 +132,7 @@ button::-moz-focus-inner {
   color: white;
   font-style: normal;
   font-size: 28px;
-  font-family: Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Arial, sans-serif; }
+  font-family: var(--main-font);
   .mfp-close:hover, .mfp-close:focus {
     opacity: 1;
     filter: alpha(opacity=100); }

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
@@ -17,6 +17,10 @@
  * https://github.com/spyder-ide/lektor-icon/blob/master/NOTICE.txt
  */
 
+:root {
+  --main-font: "Raleway", "DejaVu Sans", "Open Sans", "Liberation Sans", helvetica, arial, sans-serif;
+}
+
 html {
   background-color: #fff;
   background-color: var(--theme-bg-color, #fff);
@@ -109,7 +113,7 @@ html {
 body {
   color: #333;
   color: var(--theme-fg-alt-color, #333);
-  font-family: Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
+  font-family: var(--main-font);
   font-weight: 300;
   line-height: 1.9;
   margin: 0;
@@ -182,7 +186,7 @@ h6,
 .h6 {
   color: #000;
   color: var(--theme-fg-color, #000);
-  font-family: Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
+  font-family: var(--main-font);
   font-weight: 500;
   line-height: 1.1;
   margin: 0;
@@ -533,7 +537,7 @@ img {
 }
 
 .fh5co-main-nav .fh5co-logo {
-  font-family: Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
+  font-family: var(--main-font);
   font-size: 40px;
   font-style: italic;
   font-weight: bold;
@@ -1199,7 +1203,7 @@ img {
   align-content: center;
   color: #ee1c24;
   color: var(--theme-accent-color, #ee1c24);
-  font-family: Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
+  font-family: var(--main-font);
   font-size: 1.4em;
   margin: 0;
   position: relative;
@@ -2120,7 +2124,7 @@ html [type="button"] {
 
 #menu-logo .logo-text {
   display: block;
-  font-family: Candara, Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
+  font-family: var(--main-font);
   font-size: 2.2em;
   margin-top: 2px;
 }
@@ -2149,9 +2153,8 @@ html [type="button"] {
 .blog-post {
   color: #333;
   color: var(--theme-fg-alt-color, #333);
-  font-family: Raleway, "DejaVu Sans", "Open Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
-  margin-bottom: 4rem;
-  margin-top: 2rem;
+  font-family: var(--main-font);
+  margin: 4rem 0;
 }
 
 .blog-post img,
@@ -2201,7 +2204,6 @@ html [type="button"] {
 .blog-post h3 {
   color: #000;
   color: var(--theme-fg-color, #000);
-  font-family: Amiri, "Open Serif", "Liberation Serif", "DejaVu Serif", Times, "Times New Roman", serif;
   text-align: left;
 }
 
@@ -2229,7 +2231,6 @@ html [type="button"] {
 .blog-post .blog-index-header .row h3 {
   color: #000;
   color: var(--theme-fg-color, #000);
-  font-family: Amiri, "Open Serif", "Liberation Serif", "DejaVu Serif", Times, "Times New Roman", serif;
   text-align: left;
 }
 
@@ -2262,8 +2263,7 @@ html [type="button"] {
 }
 
 .blog-index-header {
-  margin: 0;
-  width: 90%;
+  margin-top: 4em;
 }
 
 .meta-blog-index .author {
@@ -2310,13 +2310,16 @@ html [type="button"] {
   margin-bottom: 0.5em;
 }
 
+.blog-post-header {
+  margin-bottom: 2rem;
+}
+
 #blog-main-title {
   margin-bottom: 0;
   margin-top: 3em;
 }
 
 #blog-main-title h1 {
-  font-family: Amiri, "Open Serif", "Liberation Serif", "DejaVu Serif", Times, "Times New Roman", serif;
   font-size: 2em;
   margin-bottom: 0;
 }

diff --git a/templates/layout.html b/templates/layout.html
@@ -169,7 +169,7 @@
   <link rel="stylesheet" href="{{ '/static/css/style.css' | asseturl }}" type="text/css">
   {%- if config.THEME_SETTINGS.custom_css %}
   <!-- User Custom CSS -->
-  {%- for custom_css in config.THEME_SETTINGS.custom_css.replace(', ', ',').split(',') %}
+  {%- for custom_css in config.THEME_SETTINGS.custom_css.split(', ') %}
   <link rel="stylesheet" href="{%- if custom_css.startswith('http') %}{{ custom_css | safe }}{%- else %}{{ custom_css | asseturl }}{%- endif %}" type="text/css">
   {%- endfor %}
   {%- endif %}

diff --git a/templates/macros/blog.html b/templates/macros/blog.html
@@ -9,6 +9,12 @@
 {%- endif %}
 <div class="blog-post">
   <div class="blog-header blog-{%- if from_index %}index{%- else %}post{%- endif %}-header">
+    {%- if from_index %}
+      <h2><a href="{{ post | url }}">{{ post.title }}</a></h2>
+    {%- else %}
+      <h1>{{ post.title }}</h1>
+    {%- endif %}
+
     <div class="row">
       {%- if author.image %}
       <div class="column meta-blog-author">
@@ -28,15 +34,12 @@
         </p>
       </div>
     </div>
-    {%- if from_index %}
-    <div class="row">
-      <h2><a href="{{ post | url }}">{{ post.title }}</a></h2>
-    </div>
-    {%- else %}
-    <h1>{{ post.title }}</h1>
-    {{ post.body }}
-    {%- endif %}
   </div>
+
+  {%- if not from_index %}
+  {{ post.body }}
+  {%- endif %}
+
   {%- if from_index %}
   {%- if post.summary %}
   {{ post.summary }}