98 lines
1.4 KiB
CSS
98 lines
1.4 KiB
CSS
|
/**** Global ****/
|
||
|
|
:root {
|
||
|
|
/* Gruvbox colors https://github.com/morhetz/gruvbox */
|
||
|
|
--background: #282828;
|
||
|
|
--foreground: #ebdbb2;
|
||
|
|
--gray: #928374;
|
||
|
|
--gray-light: #a89984;
|
||
|
|
--red: #cc241d;
|
||
|
|
--red-light: #fb4934;
|
||
|
|
--green: #98921a;
|
||
|
|
--green-light: #b8bb26;
|
||
|
|
--yellow: #d79921;
|
||
|
|
--yellow-light: #fabd2f;
|
||
|
|
--blue: #458588;
|
||
|
|
--blue-light: #83a598;
|
||
|
|
--purple: #b16286;
|
||
|
|
--purple-light: #d3869b;
|
||
|
|
--aqua: #679d6a;
|
||
|
|
--aqua-light: #8ec07c;
|
||
|
|
--orange: #d65d0e;
|
||
|
|
--orange-light: fe8019;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--background);
|
||
|
|
color: var(--foreground);
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:link {
|
||
|
|
color: var(--green);
|
||
|
|
}
|
||
|
|
|
||
|
|
a:visited {
|
||
|
|
color: var(--aqua);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/**** Title Bar ****/
|
||
|
|
.titlebar {
|
||
|
|
border-bottom: var(--foreground) solid 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/**** Navbar ****/
|
||
|
|
.navbar {
|
||
|
|
padding-right: 1rem;
|
||
|
|
border-right: var(--foreground) solid 1px;
|
||
|
|
width: 10rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar ul {
|
||
|
|
padding-left: 0.5rem;
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar li {
|
||
|
|
padding: 0.125rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar li:hover {
|
||
|
|
background-color: var(--gray);
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--foreground);
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-selected {
|
||
|
|
color: var(--green);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**** Page ****/
|
||
|
|
.page {
|
||
|
|
padding-left: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/**** Footer *****/
|
||
|
|
.footer {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--orange);
|
||
|
|
}
|