Rearranged code & removed unnecessary code

This commit is contained in:
Helen Chong 2023-06-27 06:45:40 +08:00
parent 34b2eff15b
commit 81f75ee3ce
1 changed files with 93 additions and 94 deletions

159
main.css
View File

@ -7,7 +7,6 @@
--main-heading-color: #ED64F5; --main-heading-color: #ED64F5;
--sub-heading-color: #e8b86f; --sub-heading-color: #e8b86f;
--title-border-color: #d3aad5; --title-border-color: #d3aad5;
--bold-font-color: #ff9933; --bold-font-color: #ff9933;
--link-color: #ED64F5; --link-color: #ED64F5;
--link-hover-color: #c355c9; --link-hover-color: #c355c9;
@ -28,9 +27,6 @@
--nav-submenu-active: #111; --nav-submenu-active: #111;
--nav-item-hover: #ccc; --nav-item-hover: #ccc;
--top-btn-bg: #251347;
--top-btn-icon: #d3aad5;
--footer-bg: #13092D; --footer-bg: #13092D;
} }
@ -193,10 +189,15 @@ pre {
overflow-x: auto; overflow-x: auto;
} }
details {
cursor: pointer;
}
.bold-text { .bold-text {
font-weight: 700; font-weight: 700;
} }
/* ELEMENT STYLES WITH CUSTOM CLASSES */
.center-el { .center-el {
margin: 0 auto; margin: 0 auto;
} }
@ -210,15 +211,77 @@ pre {
color: var(--date-color); color: var(--date-color);
} }
/* HEADER */ /* CUSTOM CLASSES FOR SPECIAL ELEMENTS */
.inline-code {
font-family: monospace;
border: 0.06rem solid var(--code-border-color);
padding: 0.125rem 0.3rem;
margin-left: 0.125rem;
margin-right: 0.125rem;
background-color: var(--code-bg-color);
}
.code-snippet {
background-color: var(--code-bg-color);
border: 0.08rem solid var(--code-border-color);
display: block;
padding: 0.5em 0.8rem;
overflow-x: auto;
word-break: keep-all;
}
.text-box {
background-color: var(--quote-bg);
border: 0.06rem solid var(--main-heading-color);
padding: 0.625rem;
margin-bottom: 0.8rem;
}
.link-btn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
display: inline-block;
border: 0.15rem solid var(--link-btn-bg);
border-radius: 0.6rem;
padding: 0.75rem 1rem;
margin: 0.3rem;
background-color: var(--link-btn-bg);
color: var(--link-btn-text);
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.link-btn,
.link-btn:hover,
.link-btn:visited {
text-decoration: none;
}
.link-btn:hover {
cursor: pointer;
background-color: var(--link-btn-hover);
transition: 0.5s;
}
.full-width-youtube-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.full-width-youtube-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* HEADER COMPONENT */
header { header {
width: 100vw; width: 100vw;
max-height: 20rem; max-height: 20rem;
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
/* background: var(--header-img); */
background-repeat: no-repeat;
background-size: auto;
background-position: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -229,7 +292,7 @@ header img {
height: 100%; height: 100%;
} }
/* NAVIGATION BAR */ /* NAVIGATION BAR COMPONENT */
nav { nav {
background: var(--nav-bg); background: var(--nav-bg);
padding: 0 0.9rem; padding: 0 0.9rem;
@ -336,12 +399,14 @@ nav a {
top: 0; top: 0;
} }
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ /* Add some top padding to the page content to prevent sudden quick movement
as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky-nav + main { .sticky-nav + main {
padding-top: 3.75rem; padding-top: 3.75rem;
} }
/* Tablet nav__menu */ /* Tablet navigation menu */
@media all and (min-width: 43.75rem) { @media all and (min-width: 43.75rem) {
.nav__menu { .nav__menu {
justify-content: center; justify-content: center;
@ -358,7 +423,7 @@ nav a {
} }
} }
/* Desktop nav__menu */ /* Desktop navigation menu */
@media all and (min-width: 60rem) { @media all and (min-width: 60rem) {
.nav__menu { .nav__menu {
align-items: flex-start; align-items: flex-start;
@ -477,72 +542,6 @@ article, .content-container {
} }
} }
/* CONTENT ELEMENTS WITH CUSTOM CLASSES */
.inline-code {
font-family: monospace;
border: 0.06rem solid var(--code-border-color);
padding: 0.125rem 0.3rem;
margin-left: 0.125rem;
margin-right: 0.125rem;
background-color: var(--code-bg-color);
}
.code-snippet {
background-color: var(--code-bg-color);
border: 0.08rem solid var(--code-border-color);
display: block;
padding: 0.5em 0.8rem;
overflow-x: auto;
word-break: keep-all;
}
.text-box {
background-color: var(--quote-bg);
border: 0.06rem solid var(--main-heading-color);
padding: 0.625rem;
margin-bottom: 0.8rem;
}
.link-btn {
font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
display: inline-block;
border: 0.15rem solid var(--link-btn-bg);
border-radius: 0.6rem;
padding: 0.75rem 1rem;
margin: 0.3rem;
background-color: var(--link-btn-bg);
color: var(--link-btn-text);
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
.link-btn,
.link-btn:hover,
.link-btn:visited {
text-decoration: none;
}
.link-btn:hover {
cursor: pointer;
background-color: var(--link-btn-hover);
transition: 0.5s;
}
.full-width-youtube-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.full-width-youtube-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* TABLE OF CONTENTS */ /* TABLE OF CONTENTS */
.sidebar__toc { .sidebar__toc {
position: sticky; position: sticky;
@ -569,7 +568,7 @@ article, .content-container {
padding-left: 1.25rem; padding-left: 1.25rem;
} }
/* FOOTER */ /* FOOTER COMPONENT */
footer { footer {
background-color: var(--footer-bg); background-color: var(--footer-bg);
width: 100vw; width: 100vw;