175 lines
2.8 KiB
CSS
175 lines
2.8 KiB
CSS
:root {
|
|
--bg: #282c34;
|
|
--bg-secondary: #474d57;
|
|
--bg-grad-1: #484e58;
|
|
--bg-grad-2: #4e5560;
|
|
--bg-grad-3: #59616d;
|
|
--bg-grad-4: #606a7b;
|
|
--bg-grad-5: #606978;
|
|
--input: #4e5560;
|
|
--fg: #ABB2BF;
|
|
--header: #E06C75;
|
|
--link: #FFF;
|
|
--hover: #888;
|
|
|
|
--green: #98C379;
|
|
--red: #E06C75;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
font-size: 160%;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.navbar {
|
|
flex: 0 1 auto;
|
|
padding: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Navbar styling*/
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 120%;
|
|
}
|
|
|
|
nav form {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-bar {
|
|
padding: .25rem;
|
|
margin-top: .25rem;
|
|
font-size: 1rem;
|
|
width: 15rem;
|
|
border: none;
|
|
transition: width 0.4s ease-in-out;
|
|
background-color: var(--fg);
|
|
}
|
|
|
|
@media (min-width:1500px) {
|
|
.search-bar:focus {
|
|
width: 30rem;
|
|
}
|
|
}
|
|
|
|
.search-button {
|
|
padding: .25rem .5rem;
|
|
margin-top: .25rem;
|
|
margin-right: .5rem;
|
|
background: #ddd;
|
|
font-size: 1rem;
|
|
border: none;
|
|
background-color: orange;
|
|
}
|
|
|
|
.sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: -2rem;
|
|
}
|
|
|
|
#logo {
|
|
width: 8rem;
|
|
height: auto;
|
|
}
|
|
|
|
*::-webkit-scrollbar,
|
|
*::-webkit-scrollbar-thumb {
|
|
width: 26px;
|
|
border-radius: 13px;
|
|
background-clip: padding-box;
|
|
border: 10px solid transparent;
|
|
color: var(--fg);
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover{
|
|
color: var(--link);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
box-shadow: inset 0 0 0 10px;
|
|
}
|
|
|
|
@media (max-width:1000px) {
|
|
.not-required {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
position: relative;
|
|
color: var(--link);
|
|
white-space: nowrap;
|
|
transition: 0.4s;
|
|
align-content: center;
|
|
}
|
|
|
|
a:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 15%;
|
|
width: 0%;
|
|
border-bottom: 2px solid var(--fg);
|
|
transition: 0.4s;
|
|
}
|
|
|
|
a:hover:after {
|
|
width: 70%;
|
|
color: var(--hover);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--hover);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--header);
|
|
}
|
|
|
|
.categories {
|
|
background-color: var(--bg);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.category {
|
|
margin: .5rem 0rem;
|
|
padding: 0rem 1rem;
|
|
border-left: .125rem solid var(--fg);
|
|
}
|
|
|
|
.category:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.container {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 1rem;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
height: 1%;
|
|
}
|