Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Customise CSS :focus selector

This commit is contained in:
Helen Chong 2023-08-29 16:30:47 +08:00
parent d6b90271b8
commit e1ce4f2a5b
6 changed files with 86 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
changelog/2022.html
View File

@ -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>
<a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
<img src="/assets/rss-button.gif" alt="RSS feed button" class="center-el">
<div class="web-btn-wrapper">
<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">
</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>

9
changelog/index.html
View File

@ -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>
<a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
<img src="/assets/rss-button.gif" alt="RSS feed button" class="center-el">
<div class="web-btn-wrapper">
<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">
</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>

42
css/style-index.css
View File

@ -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);
}

42
css/style-main.css
View File

@ -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;

4
css/style-sitemap.css
View File

@ -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;

9
home.html
View File

@ -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">
<img src="/assets/rss-button.gif" alt="RSS feed button">
</a>
<div class="web-btn-wrapper">
<a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
<img src="/assets/rss-button.gif" alt="RSS feed button">
</a>
</div>
</section>
<section class="content-section">