Customise CSS :focus selector
This commit is contained in:
Helen Chong
parent
d6b90271b8
commit
e1ce4f2a5b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue