Accessibility and SEO

config.toml

@@ -5,7 +5,7 @@ base_url = "https://abridge.netlify.app"
 # If you use the npm/node script then all you have to do is set offline = true, and everything else is automatic.
 
 title = "Abridge"
-description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS."
+description = "Abridge is a fast, lightweight, and modern Zola theme (class-light, semantic HTML). Perfect Lighthouse, YellowLabTools, and Observatory scores."#for SEO aim for 140-180 Characters
 #theme = "abridge"
 
 default_language = "en"
@@ -147,7 +147,7 @@ foothr = false # show or hide horizontal rule above footer
 ###############################################################################
 
 title_separator = "|"  # Separator between title and title_addition, set as |, -, _, etc
-title_addition = "Fast & Lightweight Zola Theme" # a default value for title addition
+title_addition = "Fast, Lightweight, and Modern Zola Theme" # a default value for title addition (for SEO aim for 50-70 characters including the title and separator 'Abridge | title_addition')
 author = "Jake G" # Put Your Name here
 keywords = "Abridge, Abridge.css, Zola, Theme, Zola Theme, getzola, Semantic Html, Fast, lightweight" # used for the primary site index
 banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.

sass/abridge.scss

@@ -437,6 +437,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   }
 }
 @if $typography {
+  big,
   h1,
   h2,
   h3,
@@ -450,7 +451,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
     font-size: var(--fs);
     line-height: var(--lhh);
   }
-  h1 {
+  big,h1 {
     font-size: 2rem;
   }
   h2 {
@@ -480,7 +481,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   a:visited {
     color: var(--a4);
   }
-  h1 a, h2 a, main nav a, header li > a {
+  big a, h1 a, h2 a, main nav a, header li > a {
     color: var(--f2);
     text-decoration: none;
     font-weight: var(--fh);
@@ -493,7 +494,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
     }
   }
   article {
-    padding-bottom: .2rem;
+    padding: 1rem 0rem;
   }
 
   // Abbreviations

templates/base.html

@@ -32,19 +32,19 @@
       <div>
         {%- if config.extra.logo -%}
 
-        <h1><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls %}/index.html{%- endif %}" title="{{config.title}}">
+        <big><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls %}/index.html{%- endif %}" title="{{config.title}}">
         {%- if config.extra.logo.file -%}
         <img src="{{ config.base_url | safe }}/{{ config.extra.logo.file | safe }}"{%- if config.extra.logo.alt %} alt="{{ config.extra.logo.alt | safe }}"{%- endif %}{%- if config.extra.logo.width %} width="{{ config.extra.logo.width | safe }}"{%- endif %}{%- if config.extra.logo.height %} height="{{ config.extra.logo.height | safe }}"{%- endif %} />
         {%- endif -%}
         {%- if config.extra.logo.text -%}{{ config.extra.logo.text | safe }}{%- endif -%}
-        </a></h1>
+        </a></big>
 
         {%- elif config.extra.textlogo -%}
-        <h1><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls -%}
+        <big><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls -%}
         {%- if lang == config.default_language -%}/{%- endif -%}
-        index.html{%- endif -%}" title="{{config.title}}">{{ config.extra.textlogo | safe }}</a></h1>
+        index.html{%- endif -%}" title="{{config.title}}">{{ config.extra.textlogo | safe }}</a></big>
         {%- elif config.title -%}
-        <h1><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls %}/index.html{%- endif %}" title="{{config.title}}">{{ config.title | safe }}</a></h1>
+        <big><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls %}/index.html{%- endif %}" title="{{config.title}}">{{ config.title | safe }}</a></big>
         {%- endif -%}
       </div>
       <div>

templates/macros/macros.html

@@ -100,7 +100,7 @@ <h1><a href="{{ page.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}
 {%- macro title_index(page, config) %}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.search_library %}{%- if config.extra.search_library == "offline" %}{% set uglyurls = true %}{% endif %}{% endif %}
-        <h1>{% if config.extra.title_size_index %}<span class="{{ config.extra.title_size_index }}">{% endif %}<a href="{{ page.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ page.title }}</a>{% if config.extra.title_size_index %}</span>{% endif %}</h1>
+        <big>{% if config.extra.title_size_index %}<span class="{{ config.extra.title_size_index }}">{% endif %}<a href="{{ page.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ page.title }}</a>{% if config.extra.title_size_index %}</span>{% endif %}</big>
 {%- endmacro title_index %}