leilukin-site/main.css

301 lines
5.1 KiB
CSS
Raw Normal View History

2023-06-15 09:18:46 +00:00
:root {
--header-image: url('/assets/Leilukins-Hub-website-banner.png');
--body-bg-image: url('/assets/starsforever.gif');
--content: #43256E;
--title-border: #d3aad5;
--code-bg: #241445;
--code-border: #82668f;
}
@font-face {
font-family: 'Nunito';
src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format("truetype");
font-weight: 125 950;
font-stretch: 75% 125%;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url('/assets/fonts/Nunito-Italic-VariableFont_wght.ttf') format("truetype");
font-weight: 125 950;
font-stretch: 75% 125%;
font-style: italic;
}
html,
body {
scroll-behavior: smooth;
}
body {
font-family: 'Nunito', Arial, sans-serif;
font-size: 1rem; /* 16px */
2023-06-15 09:18:46 +00:00
margin: 0;
background-color: #08031A;
background-size: 4rem;
2023-06-15 09:18:46 +00:00
color: #fceaff;
background-image: var(--body-bg-image);
background-attachment: fixed;
line-height: 1.6;
}
* {
box-sizing: border-box;
}
h1 {
color: #ED64F5;
}
h2, h3 {
color: #e8b86f;
}
h1 {
font-size: 2.2rem;
border-bottom: 0.18rem solid var(--title-border);
padding-bottom: 0.5rem;
2023-06-15 09:18:46 +00:00
}
h1:not(:first-child) {
padding-top: 2rem;
2023-06-15 09:18:46 +00:00
}
h2 {
font-size: 1.7rem;
}
strong {
color: #ff9933;
}
span.monospace {
font-family: monospace;
border: 0.06rem solid var(--code-border);
padding: 0.125rem 0.3rem;
margin-left: 0.125rem;
margin-right: 0.125rem;
2023-06-15 09:18:46 +00:00
background-color: var(--code-bg);
}
.code-snippet {
background-color: var(--code-bg);
border: 0.06rem solid var(--code-border);
2023-06-15 09:18:46 +00:00
display: block;
padding: 0.5em;
overflow-x: auto;
word-break: break-all;
}
.box {
background-color: #13092D;
border: 0.06rem solid #ED64F5;
padding: 0.625rem;
2023-06-15 09:18:46 +00:00
}
.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%;
}
/* CONTAINER for wrapping the entire website */
#container {
max-width: 1100px;
/* the width of the layout */
/* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
margin: 0 auto;
/* this centers the entire page */
}
/* For all links on your page EXCEPT for the navigation */
#container a {
color: #ED64F5;
font-weight: bold;
}
#header {
width: 100%;
background-color: #13092D;
height: 22rem;
2023-06-15 09:18:46 +00:00
background-image: var(--header-image);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
/* NAVIGATION SECTION */
#navbar {
height: 2.5rem;
2023-06-15 09:18:46 +00:00
background-color: #13092D;
width: 100%;
}
#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding-top: 0.625rem;
2023-06-15 09:18:46 +00:00
}
#navbar li a {
color: #ED64F5;
/* navbar text color */
font-weight: 800;
text-decoration: none;
/* this removes the underline */
}
#navbar li a:hover {
color: #a49cba;
text-decoration: underline;
}
#flex {
display: flex;
}
/* EXTRAS */
#topBar {
width: 100%;
height: 1.875rem;
padding: 0.625rem;
2023-06-15 09:18:46 +00:00
font-size: smaller;
background-color: #13092D;
}
/* MAIN CONTENT AREA, between the sidebars */
main {
background-color: #3d2163;
font-size: 1.2rem;
flex: 1;
padding: 1.25rem;
2023-06-15 09:18:46 +00:00
order: 2;
}
/* This colors BOTH sidebars
If you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #241445;
width: 12.5rem;
2023-06-15 09:18:46 +00:00
padding: 20px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}
aside h1, aside h2, aside h3 {
margin-bottom: 0;
}
aside ul {
margin-top: 0.5rem;
}
aside .box ul {
padding-left: 0.625rem;
2023-06-15 09:18:46 +00:00
}
#leftSidebar {
order: 1;
}
#rightSidebar {
order: 3;
}
.sidebar-content {
position: sticky;
top: 0;
font-size: 0.9rem;
}
/* TABLE OF CONTENTS */
.toc-title {
font-size: 1.3rem;
font-weight: bold;
}
.toc-list {
list-style: none;
margin-left: 0;
padding-left: 0;
font-size: 1rem;
}
.toc-list li {
margin-bottom: 0.5em;
}
/* SIDEBAR NAVIGATION LINKS */
.nav-links {
padding-left: 1.25rem;
2023-06-15 09:18:46 +00:00
font-size: 1rem;
margin-top: 0;
list-style-image: url(./assets/arrow-list.png);
}
footer {
background-color: #13092D;
width: 100%;
height: 2.5rem;
padding: 0.625rem;
2023-06-15 09:18:46 +00:00
text-align: center;
margin-top: 0;
2023-06-15 09:18:46 +00:00
}
/* MEDIA QUERY STARTS HERE */
/* To keep things responsive,
if you want to change the width of your page,
take your new width of the #container, and then subtrack it by 100.
Use this new number as the "max-width" value below */
@media only screen and (max-width: 1000px) {
#flex {
flex-wrap: wrap;
}
aside {
width: 100%;
}
/* the order of the items is adjusted here for responsiveness.
since the sidebars would be too small on a mobile device. */
main {
order: 2;
}
#leftSidebar {
order: 3;
}
#rightSidebar {
order: 1;
}
#navbar ul {
flex-wrap: wrap;
}
}