- 
+
+
+
-
+
Archive: Latest | 2022 | Website Layouts
@@ -62,6 +62,7 @@
A Summer’s End — Hong Kong 1986 shrine: Updated the main page with information about the spiritual sequel In the Ocean I Learned to Float.
Cassette Beasts shrine: Adjusted header image and added more images to the home page.
Leilukin Hub now has an RSS feed.
+ Improved accessibility of the site's design by customising the CSS :focus selector.
August 26, 2023:
diff --git a/css/style-index.css b/css/style-index.css
index b1d87ffa..6039fbab 100644
--- a/css/style-index.css
+++ b/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;
- color: #BA6FE8;
- font-weight: normal;
+ font-size: var(--fs-h1);
+ color: var(--clr-h1);
+ 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-weight: 600;
+ font-size: var(--fs-link-btn);
+ font-weight: var(--fw-link-btn);
border: none;
border-radius: 0.6rem;
padding: 1rem 1.25rem;
margin: 0.5rem;
- background: #7A37A3;
- color: white;
+ background: var(--clr-link-btn-bg);
+ 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);
}
\ No newline at end of file
diff --git a/css/style-main.css b/css/style-main.css
index 78a7f65d..8d5e55bf 100644
--- a/css/style-main.css
+++ b/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-right: 0.125rem;
- background-color: var(--clr-code-bg);
+ margin: 0 0.125rem;
+ background: 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;
diff --git a/css/style-sitemap.css b/css/style-sitemap.css
index 529d9472..13731633 100644
--- a/css/style-sitemap.css
+++ b/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;
diff --git a/home.html b/home.html
index 5001d2c4..62b953ce 100644
--- a/home.html
+++ b/home.html
@@ -73,13 +73,16 @@
Added link button for the site's RSS feed.
Fixed the overflow issue of header images.
Added custom style for the Site Map page.
+ Improved accessibility of the site's design by customising the CSS :focus selector.
View all site changelog
You can subscribe to the Leilukin's Hub RSS feed or follow my Neocities profile to get notified of the updates on this website.
-