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

Renamed custom CSS properties

This commit is contained in:
Helen Chong 2023-07-26 16:44:57 +08:00
parent 82d8f0a75e
commit 7168a0f55d
5 changed files with 100 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog/index.html
View File

@ -44,6 +44,7 @@
<li>Leilukin's Hub now has a site button for you to link to!</li> <li>Leilukin's Hub now has a site button for you to link to!</li>
<li>Restructured the navigation bar.</li> <li>Restructured the navigation bar.</li>
<li>Rearranged CSS and JavaScript file directories.</li> <li>Rearranged CSS and JavaScript file directories.</li>
<li>Renamed custom CSS properties.</li>
</ul> </ul>
<p class="date-style">July 25, 2023:</p> <p class="date-style">July 25, 2023:</p>

118
css/style-main.css
View File

@ -1,33 +1,31 @@
:root { :root {
--body-bg-color: #08031A; --clr-body-bg: #08031A;
--body-bg-image: url('/assets/starsforever.gif'); --img-body-bg: url('/assets/starsforever.gif');
--body-font-color: #fceaff; --clr-body-txt: #fceaff;
--content-bg-color: #3d2163; --clr-content-bg: #3d2163;
--main-heading-color: #ED64F5; --clr-main-heading: #ED64F5;
--sub-heading-color: #e8b86f; --clr-sub-heading: #e8b86f;
--title-border-color: #d3aad5; --clr-title-border: #d3aad5;
--bold-font-color: #ff9933; --clr-bold-txt: #ff9933;
--link-color: #ED64F5; --clr-link: #ED64F5;
--link-hover-color: #c355c9; --clr-link-hover: #c355c9;
--quote-bg: #13092D; --clr-quote-bg: #13092D;
--quote-border-color: #999999; --clr-quote-border: #999999;
--code-bg-color: #241445; --clr-code-bg: #241445;
--code-border-color: #82668f; --clr-code-border: #82668f;
--date-color: rgb(158, 203, 255); --clr-dates: rgb(158, 203, 255);
--link-btn-bg: #873eb5; --clr-link-btn-bg: #873eb5;
--link-btn-text: white; --clr-link-btn-txt: white;
--link-btn-hover: #241445; --clr-link-btn-hover: #241445;
--header-bg-color: black; --clr-header-bg: black;
--nav-bg: #222; --clr-nav-bg: #222;
--nav-link: white; --clr-nav-link: white;
--nav-submenu-active: #111;
--nav-item-hover: #ccc;
--footer-bg: #13092D; --clr-footer-bg: #13092D;
} }
@font-face { @font-face {
@ -128,14 +126,14 @@ body {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
font-family: 'Nunito'; font-family: 'Nunito';
color: var(--body-font-color); color: var(--clr-body-txt);
background-color: var(--body-bg-color); background-color: var(--clr-body-bg);
background-image: var(--body-bg-image); background-image: var(--img-body-bg);
background-attachment: fixed; background-attachment: fixed;
} }
h1 { h1 {
color: var(--main-heading-color); color: var(--clr-main-heading);
} }
h1 { h1 {
@ -143,12 +141,12 @@ h1 {
} }
h2, h3 { h2, h3 {
color: var(--sub-heading-color); color: var(--clr-sub-heading);
} }
h1 { h1 {
font-size: 2.2rem; font-size: 2.2rem;
border-bottom: 0.18rem solid var(--title-border-color); border-bottom: 0.18rem solid var(--clr-title-border);
} }
h2 { h2 {
@ -166,23 +164,23 @@ p {
} }
strong { strong {
color: var(--bold-font-color); color: var(--clr-bold-txt);
} }
a { a {
font-weight: 700; font-weight: 700;
color: var(--link-color); color: var(--clr-link);
} }
a:hover { a:hover {
color: var(--link-hover-color); color: var(--clr-link-hover);
} }
blockquote { blockquote {
margin: 1.5rem 0; margin: 1.5rem 0;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-inline-start: 0.1rem solid var(--main-heading-color); border-inline-start: 0.1rem solid var(--clr-main-heading);
background-color: var(--quote-bg); background-color: var(--clr-quote-bg);
} }
button:hover { button:hover {
@ -213,14 +211,14 @@ summary {
.date-style { .date-style {
font-weight: 700; font-weight: 700;
color: var(--date-color); color: var(--clr-dates);
} }
/* HEADER COMPONENT */ /* HEADER COMPONENT */
header { header {
width: 100%; width: 100%;
max-height: 20rem; max-height: 20rem;
background-color: var(--header-bg-color); background-color: var(--clr-header-bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -233,14 +231,14 @@ header img {
/* NAVIGATION BAR COMPONENT */ /* NAVIGATION BAR COMPONENT */
nav { nav {
background: var(--nav-bg); background: var(--clr-nav-bg);
padding: 0 0.6rem; padding: 0 0.6rem;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
} }
nav a { nav a {
color: var(--nav-link); color: var(--clr-nav-link);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@ -254,14 +252,6 @@ nav a {
gap: 0.5rem; gap: 0.5rem;
} }
.nav__item {
padding: 0.5rem;
}
.nav__item a:hover {
color: var(--nav-item-hover);
}
/* Added to the navbar with JS when it reaches its scroll position */ /* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav { .sticky-nav {
position: fixed; position: fixed;
@ -293,7 +283,7 @@ main {
article:not(.divided-article), article:not(.divided-article),
.content-section, .content-section,
.qna-section { .qna-section {
background-color: var(--content-bg-color); background-color: var(--clr-content-bg);
padding: 1.35rem; padding: 1.35rem;
} }
@ -304,7 +294,7 @@ article:not(.divided-article),
aside { aside {
padding: 1rem; padding: 1rem;
font-size: 0.9rem; font-size: 0.9rem;
background-color: var(--content-bg-color); background-color: var(--clr-content-bg);
} }
article, .content-container { article, .content-container {
@ -371,16 +361,16 @@ article, .content-container {
/* CUSTOM CLASSES FOR SPECIAL ELEMENTS */ /* CUSTOM CLASSES FOR SPECIAL ELEMENTS */
.inline-code { .inline-code {
font-family: monospace; font-family: monospace;
border: 0.06rem solid var(--code-border-color); border: 0.06rem solid var(--clr-code-border);
padding: 0.125rem 0.3rem; padding: 0.125rem 0.3rem;
margin-left: 0.125rem; margin-left: 0.125rem;
margin-right: 0.125rem; margin-right: 0.125rem;
background-color: var(--code-bg-color); background-color: var(--clr-code-bg);
} }
.code-snippet { .code-snippet {
background-color: var(--code-bg-color); background-color: var(--clr-code-bg);
border: 0.08rem solid var(--code-border-color); border: 0.08rem solid var(--clr-code-border);
display: block; display: block;
padding: 0.5em 0.8rem; padding: 0.5em 0.8rem;
overflow-x: auto; overflow-x: auto;
@ -388,8 +378,8 @@ article, .content-container {
} }
.text-box { .text-box {
background-color: var(--quote-bg); background-color: var(--clr-quote-bg);
border: 0.06rem solid var(--main-heading-color); border: 0.06rem solid var(--clr-main-heading);
padding: 0.625rem; padding: 0.625rem;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
@ -398,12 +388,12 @@ article, .content-container {
.link-btn { .link-btn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif; font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
display: inline-block; display: inline-block;
border: 0.15rem solid var(--link-btn-bg); border: 0.15rem solid var(--clr-link-btn-bg);
border-radius: 0.6rem; border-radius: 0.6rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
margin: 0.3rem; margin: 0.3rem;
background-color: var(--link-btn-bg); background-color: var(--clr-link-btn-bg);
color: var(--link-btn-text); color: var(--clr-link-btn-txt);
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
@ -417,7 +407,7 @@ article, .content-container {
.link-btn:hover { .link-btn:hover {
cursor: pointer; cursor: pointer;
background-color: var(--link-btn-hover); background-color: var(--clr-link-btn-hover);
transition: 0.5s; transition: 0.5s;
} }
@ -463,13 +453,13 @@ article, .content-container {
height: 2.5rem; height: 2.5rem;
font-size: 0.75rem; font-size: 0.75rem;
background-color:black; background-color:black;
color: var(--body-font-color); color: var(--clr-body-txt);
} }
.copy-txt-btn { .copy-txt-btn {
border: none; border: none;
background: var(--link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--body-font-color); color: var(--clr-body-txt);
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.9rem; font-size: 0.9rem;
@ -477,7 +467,7 @@ article, .content-container {
} }
.copy-txt-btn:hover { .copy-txt-btn:hover {
background: var(--link-hover-color); background: var(--clr-link-hover);
} }
/* TABLE OF CONTENTS */ /* TABLE OF CONTENTS */
@ -508,7 +498,7 @@ article, .content-container {
/* FOOTER COMPONENT */ /* FOOTER COMPONENT */
footer { footer {
background-color: var(--footer-bg); background-color: var(--clr-footer-bg);
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
text-align: center; text-align: center;

1
home.html
View File

@ -69,6 +69,7 @@
<li>Leilukin's Hub now has a site button for you to link to!</li> <li>Leilukin's Hub now has a site button for you to link to!</li>
<li>Restructured the navigation bar.</li> <li>Restructured the navigation bar.</li>
<li>Rearranged CSS and JavaScript file directories.</li> <li>Rearranged CSS and JavaScript file directories.</li>
<li>Renamed custom CSS properties.</li>
</ul> </ul>
</div> </div>
<a href="/changelog">View all site changelog</a> <a href="/changelog">View all site changelog</a>

45
shrines/asummersend/asummersend.css
View File

@ -1,34 +1,33 @@
@import url(/css/style-main.css); @import url(/css/style-main.css);
:root { :root {
--body-bg-color: #1f0033; --clr-body-bg: #1f0033;
--body-bg-image: none; --img-body-bg: none;
--body-font-color: #fceaff; --clr-body-txt: #fceaff;
--content-bg-color: #000000; --clr-content-bg: #000000;
--main-heading-color: #FF29D8; --clr-main-heading: #FF29D8;
--sub-heading-color: #FF29D8; --clr-sub-heading: #FF29D8;
--title-border-color: #d3aad5; --clr-title-border: #d3aad5;
--bold-font-color: #ff9933; --clr-bold-txt: #ff9933;
--link-color: #d270ff; --clr-link: #d270ff;
--link-hover-color: #7E4197; --clr-link-hover: #7E4197;
--quote-bg: #222121; --clr-quote-bg: #222121;
--quote-border-color: #4d4385; --clr-quote-border: #4d4385;
--code-bg-color: #241445; --clr-code-bg: #241445;
--code-border-color: #82668f; --clr-code-border: #82668f;
--clr-dates: rgb(158, 203, 255);
--link-btn-bg: #873eb5; --clr-link-btn-bg: #873eb5;
--link-btn-text: white; --clr-link-btn-txt: white;
--link-btn-hover: #241445; --clr-link-btn-hover: #241445;
--header-bg-color: black; --clr-header-bg: black;
--nav-bg: #101010; --clr-nav-bg: #101010;
--nav-link: white; --clr-nav-link: white;
--nav-submenu-active: #111;
--nav-item-hover: #ccc;
--footer-bg: #101010; --clr-footer-bg: #101010;
} }
header { header {

45
shrines/starwarskotor/starwarskotor.css
View File

@ -1,34 +1,33 @@
@import url(/css/style-main.css); @import url(/css/style-main.css);
:root { :root {
--body-bg-color: #212121; --clr-body-bg: #212121;
--body-bg-image: none; --img-body-bg: none;
--body-font-color: #fceaff; --clr-body-txt: #fceaff;
--content-bg-color: #000000; --clr-content-bg: #000000;
--main-heading-color: #ffc400; --clr-main-heading: #ffc400;
--sub-heading-color: #ffc400; --clr-sub-heading: #ffc400;
--title-border-color: #ffe387; --clr-title-border: #ffe387;
--bold-font-color: #ff9933; --clr-bold-txt: #ff9933;
--link-color: #bb9671; --clr-link: #bb9671;
--link-hover-color: #94575a; --clr-link-hover: #94575a;
--quote-bg: #2f2d2d; --clr-quote-bg: #2f2d2d;
--quote-border-color: #4d4385; --clr-quote-border: #4d4385;
--code-bg-color: #241445; --clr-code-bg: #241445;
--code-border-color: #e4dbbe; --clr-code-border: #e4dbbe;
--clr-dates: rgb(158, 203, 255);
--link-btn-bg: #873eb5; --clr-link-btn-bg: #873eb5;
--link-btn-text: white; --clr-link-btn-txt: white;
--link-btn-hover: #241445; --clr-link-btn-hover: #241445;
--header-bg-color: black; --clr-header-bg: black;
--nav-bg: #1c1c1c; --clr-nav-bg: #1c1c1c;
--nav-link: white; --clr-nav-link: white;
--nav-submenu-active: #111;
--nav-item-hover: #ccc;
--footer-bg: #1c1c1c; --clr-footer-bg: #1c1c1c;
} }
header img { header img {