mirror of
https://github.com/ChronosX88/chronosx88.github.io.git
synced 2024-10-18 13:21:01 +00:00
70 lines
3.0 KiB
SCSS
70 lines
3.0 KiB
SCSS
|
---
|
||
|
|
# Style-Sheet
|
||
|
|
---
|
||
|
|
|
||
|
|
/* FONTS */
|
||
|
|
@charset "utf-8";
|
||
|
|
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700');
|
||
|
|
@import url('syntax-highlighting.css');
|
||
|
|
|
||
|
|
:root {
|
||
|
|
|
||
|
|
--main-color: white;
|
||
|
|
--bg-color: black;
|
||
|
|
|
||
|
|
--text-color: #DDD;
|
||
|
|
--pop-color: white;
|
||
|
|
--alt-color: #2ed573;
|
||
|
|
--light-alt-color: rgba(46, 213, 115);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* BASE */
|
||
|
|
body { background-color: var(--bg-color); color: var(--main-color); font-family: 'Roboto Mono', monospace; margin: 0 auto; width: 90%; max-width: 700px; line-height: 2em; font-size: 0.9em; }
|
||
|
|
h1, h2, h3, h4, h5, h6 { margin: 0px; margin-top: 22px; font-weight: bold; color: var(--pop-color); font-size: 1em; }
|
||
|
|
h1 { font-size: 1.3em; } // slightly customize font size of headers
|
||
|
|
h2 { font-size: 1.1em; }
|
||
|
|
p, ul, ol { font-size: 1em; color: var(--text-color); }
|
||
|
|
a { text-decoration: underline; color: var(--alt-color); }
|
||
|
|
a:hover { color: var(--bg-color); background-color: var(--alt-color); }
|
||
|
|
.primary-text { color: var(--main-color); }
|
||
|
|
@media only screen and (max-device-width: 500px) { * { font-size: 12px !important; } }
|
||
|
|
b, strong { color: var(--main-color); }
|
||
|
|
.invert { color: var(--bg-color); background-color: var(--main-color); padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 1px; }
|
||
|
|
|
||
|
|
/* SMALL FONT OVERRIDE */
|
||
|
|
body.large { line-height: 2em; font-size: 1em; }
|
||
|
|
|
||
|
|
/* LAYOUT */
|
||
|
|
.container { margin-right: auto; margin-left: auto; }
|
||
|
|
p { word-wrap: break-word; word-break: break-word; white-space: pre-wrap; }
|
||
|
|
footer { color: var(--text-color); border-top: dashed 1px rgba(219, 219, 219, 0.9); margin: 20px auto 15px; padding-top: 10px; text-align: right; }
|
||
|
|
header { margin-top: 25px; margin-bottom: 10px; }
|
||
|
|
header p { text-align: left; margin: 0; }
|
||
|
|
footer { margin-bottom: 20px; }
|
||
|
|
img.home_header { width: 100%; margin-top: 5%; margin-bottom: 5%; }
|
||
|
|
img.detail_header { width: 100%; }
|
||
|
|
|
||
|
|
/* LISTS */
|
||
|
|
:not(.menu) > ul { list-style: none; padding-left: 1em; }
|
||
|
|
ul :not(.menu) > ul { list-style: none; padding-left: 3em; margin-top: 0.5em; margin-bottom: 0.7em; }
|
||
|
|
:not(.menu) > ul { list-style-type: none; }
|
||
|
|
:not(.menu) > ul > li:before { content: "-"; margin-right: 9px; }
|
||
|
|
ul :not(.menu) > ul > li:before { content: "*"; margin-right: 9px; }
|
||
|
|
|
||
|
|
/* NAVIGATION */
|
||
|
|
.menu { border-top: dashed 1px rgba(219, 219, 219, 0.9); border-bottom: dashed 1px rgba(219, 219, 219, 0.9); margin-bottom: 25px; }
|
||
|
|
.menu ul { margin-top: 12px; margin-bottom: 12px; padding-left: 0px; list-style-type: none; text-align: right; }
|
||
|
|
.menu ul li { display: inline; margin-left: 10px; }
|
||
|
|
.menu ul li a { text-decoration: none; color: var(--text-color); }
|
||
|
|
.menu ul li a:hover { text-decoration: none; color: var(--bg-color); background-color: var(--main-color); }
|
||
|
|
.menu ul li.page_title { text-align: left; margin-left: 10px; float: left; font-weight: bold; color: var(--main-color) }
|
||
|
|
|
||
|
|
|
||
|
|
/* ERROR PAGES */
|
||
|
|
|
||
|
|
div.error_box { margin: 100px; text-align: center; }
|
||
|
|
div.error_box h1 { font-size: 2em; }
|
||
|
|
|
||
|
|
*::selection { background-color: var(--light-alt-color); color: black; }
|