Renamed custom CSS properties
This commit is contained in:
parent
82d8f0a75e
commit
7168a0f55d
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue