Customise CSS :focus selector

changelog/2022.html

@@ -40,11 +40,11 @@
                 <h1>Website Changelog Archive: 2022</h1>
 
                 <p>You can subscribe to the <a href="/feed.xml" target="blank">Leilukin's Hub RSS feed</a> or follow <a href="https://neocities.org/site/leilukin" target="_blank">my Neocities profile</a> to get notified of the updates on this website.</p>
-                <p>
+                <div class="web-btn-wrapper">
-                    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
+                    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed" class="center-el">
-                        <img src="/assets/rss-button.gif" alt="RSS feed button" class="center-el">
+                        <img src="/assets/rss-button.gif" alt="RSS feed button">
                     </a>
-                </p>
+                </div>
 
                 <p class="center-text">
                     Archive: <a href="../changelog/">Latest</a> | <span class="bold-text">2022</span> | <a href="./layouts.html">Website Layouts</a>

changelog/index.html

@@ -40,11 +40,11 @@
                 <h1>Website Changelog</h1>
 
                 <p>You can subscribe to the <a href="/feed.xml" target="blank">Leilukin's Hub RSS feed</a> or follow <a href="https://neocities.org/site/leilukin" target="_blank">my Neocities profile</a> to get notified of the updates on this website.</p>
-                <p>
+                <div class="web-btn-wrapper">
-                    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
+                    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed" class="center-el">
-                        <img src="/assets/rss-button.gif" alt="RSS feed button" class="center-el">
+                        <img src="/assets/rss-button.gif" alt="RSS feed button">
                     </a>
-                </p>
+                </div>
 
                 <p class="center-text">
                     Archive: <span class="bold-text">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
@@ -62,6 +62,7 @@
                     <li><a href="/shrines/asummersend/"><cite>A Summer’s End — Hong Kong 1986</cite> shrine</a>: Updated the main page with information about the spiritual sequel <cite>In the Ocean I Learned to Float</cite>.</li>
                     <li><a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite> shrine</a>: Adjusted header image and added more images to the home page.</li>
                     <li>Leilukin Hub now has an <a href="/feed.xml" target="blank">RSS feed</a>.</li>
+                    <li>Improved accessibility of the site's design by customising the CSS <code class="inline-code">:focus</code> selector.</li>
                 </ul>
 
                 <p class="date-style">August 26, 2023:</p>

css/style-index.css

@@ -1,3 +1,18 @@
+:root {
+    --clr-body-bg: #000000;
+    --clr-body-txt: #ffffff;
+    --clr-h1: #BA6FE8;
+    --clr-link-btn-bg: #7A37A3;
+    --clr-link-btn-hover: #BA6FE8;
+
+    --fs-h1: 4rem;
+    --fs-body: 1rem;
+    --fs-link-btn: 2rem;
+
+    --fw-reg: 400;
+    --fw-link-btn: 600;
+}
+
 /* CSS RESET */
 /* Box sizing rules */
 *,
@@ -76,7 +91,7 @@ select {
 
 /* STYLING BEGINS */
 body {
-    font-size: 1rem; /* 16px */
+    font-size: var(--clr-body-bg);
     font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
     color: #FFFFFF;
     background: #000000;
@@ -96,9 +111,9 @@ main {
 }
 
 h1 {
-    font-size: 4rem;
+    font-size: var(--fs-h1);
-    color: #BA6FE8;
+    color: var(--clr-h1);
-    font-weight: normal;
+    font-weight: var(--fw-reg);
     letter-spacing: 0.08em;
     margin: 2rem 0;
     line-height: 1;
@@ -116,19 +131,28 @@ p {
 
 .index__link {
     text-decoration: none;
-    font-size: 2rem;
+    font-size: var(--fs-link-btn);
-    font-weight: 600;
+    font-weight: var(--fw-link-btn);
     border: none;
     border-radius: 0.6rem;
     padding: 1rem 1.25rem;
     margin: 0.5rem;
-    background: #7A37A3;
+    background: var(--clr-link-btn-bg);
-    color: white;
+    color: var(--clr-body-txt);
     text-transform: uppercase;
 }
 
 .index__link:hover {
     cursor: pointer;
-    background: #BA6FE8;
+    background: var(--clr-link-btn-hover);
     transition: 0.5s;
 }
+
+.index__link:focus {
+    outline-offset: 0.2rem;
+    outline: 0.2rem solid var(--clr-body-txt);
+}
+
+a:focus img {
+    outline: 0.2rem solid var(--clr-body-txt);
+}

css/style-main.css

@@ -173,6 +173,10 @@ strong {
     color: var(--clr-bold-txt);
 }
 
+:focus {
+    outline: 0.15rem solid var(--clr-body-txt);
+}
+
 a {
     font-weight: 700;
     color: var(--clr-link);
@@ -182,6 +186,14 @@ a:hover {
     color: var(--clr-link-hover);
 }
 
+a:not([class]):focus {
+    outline: 0.15rem solid var(--clr-link);
+}
+
+a:focus img {
+    outline: 0.2rem solid var(--clr-body-txt);
+}
+
 blockquote {
     margin: 1.5rem 0;
 	padding: 0.5rem 1rem;
@@ -193,6 +205,11 @@ button:hover {
     cursor: pointer;
 }
 
+button:focus,
+detail:focus {
+    outline-offset: 0.2rem;
+}
+
 pre {
     white-space: pre-wrap;
     overflow-x: auto;
@@ -258,6 +275,11 @@ summary {
     color: var(--clr-link-hover);
 }
 
+.navbar a:focus {
+    outline-offset: 0.3rem;
+    outline: 0.15rem solid var(--clr-navbar-link);
+}
+
 .nav__menu {
     list-style: none;
     padding: 0;
@@ -376,15 +398,14 @@ article, .content-container {
 /* CUSTOM CLASSES FOR SPECIAL ELEMENTS */
 .inline-code {
     font-family: monospace;
-    border: 0.06rem solid var(--clr-code-border);
+    border: 0.07rem solid var(--clr-code-border);
     padding: 0.125rem 0.3rem;
-    margin-left: 0.125rem;
+    margin: 0 0.125rem;
-    margin-right: 0.125rem;
+    background: var(--clr-code-bg);
-    background-color: var(--clr-code-bg);
 }
 
 .code-snippet {
-    background-color: var(--clr-code-bg);
+    background: var(--clr-code-bg);
     border: 0.08rem solid var(--clr-code-border);
     display: block;
     padding: 0.5em 0.8rem;
@@ -393,7 +414,7 @@ article, .content-container {
 }
 
 .text-box {
-    background-color: var(--clr-quote-bg);
+    background: var(--clr-quote-bg);
     border: 0.06rem solid var(--clr-main-heading);
     padding: 0.625rem;
     margin-bottom: 0.8rem;
@@ -407,7 +428,7 @@ article, .content-container {
     border-radius: 0.6rem;
     padding: 0.75rem 1rem;
     margin: 0.3rem;
-    background-color: var(--clr-link-btn-bg);
+    background: var(--clr-link-btn-bg);
     color: var(--clr-link-btn-txt);
     cursor: pointer;
     font-weight: 700;
@@ -422,10 +443,15 @@ article, .content-container {
 
 .link-btn:hover {
     cursor: pointer;
-    background-color: var(--clr-link-btn-hover);
+    background: var(--clr-link-btn-hover);
     transition: 0.5s;
 }
 
+.link-btn:focus {
+    outline-offset: 0.2rem;
+    outline: 0.15rem solid var(--clr-link);
+}
+
 /* Q&A accordion */
 .qna-accordion {
     padding: 1rem 0;

css/style-sitemap.css

@@ -9,6 +9,10 @@ main ul {
     list-style: none;
 }
 
+.link-list a:focus {
+    outline: 0.15rem solid var(--clr-link);
+}
+
 .link-list li {
     padding-left: 0.5em;
     align-items: start;

home.html

@@ -73,13 +73,16 @@
                             <li>Added link button for the site's RSS feed.</li>
                             <li>Fixed the overflow issue of header images.</li>
                             <li>Added custom style for the <a href="/sitemap.html">Site Map</a> page.</li>
+                            <li>Improved accessibility of the site's design by customising the CSS <code class="inline-code">:focus</code> selector.</li>
                         </ul>
                         <p><a href="/changelog">View all site changelog</a></p>
                     </div>
                     <p>You can subscribe to the <a href="feed.xml" target="blank">Leilukin's Hub RSS feed</a> or follow <a href="https://neocities.org/site/leilukin" target="_blank">my Neocities profile</a> to get notified of the updates on this website.</p>
-                    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
+                    <div class="web-btn-wrapper">
-                        <img src="/assets/rss-button.gif" alt="RSS feed button">
+                        <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
-                    </a>
+                            <img src="/assets/rss-button.gif" alt="RSS feed button">
+                        </a>
+                    </div>
                 </section>
 
                 <section class="content-section">