169 lines
3.1 KiB
CSS
169 lines
3.1 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Elsie&display=swap');
|
|
|
|
/* Variables. Feel free to edit these! */
|
|
:root {
|
|
--color-primary: #028090;
|
|
--color-secondary: #00A896;
|
|
|
|
--color-soft-white: #FFFFF0;
|
|
|
|
--color-soft-black: #444;
|
|
--color-hard-black: #222;
|
|
|
|
--color-special-todo: #790604;
|
|
|
|
--font-normal: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman";
|
|
--font-headings: 'Elsie', cursive;
|
|
|
|
--font-size-1: 33.57px;
|
|
--font-size-2: 26.86px;
|
|
--font-size-3: 21.48px;
|
|
--font-size-4: 17.19px;
|
|
|
|
--font-size-small: 11px;
|
|
}
|
|
|
|
/* Selection color */
|
|
::selection {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-soft-white);
|
|
}
|
|
|
|
/* Remove outer padding */
|
|
html, body{
|
|
margin: 0;
|
|
}
|
|
|
|
/* Heading styles */
|
|
h1, h2, h3, h4, h5, h6{
|
|
color: var(--color-hard-black);
|
|
font-family: var(--font-headings)
|
|
}
|
|
|
|
/* Scaled font sizes */
|
|
h1{font-size: var(--font-size-1);}
|
|
h2{font-size: var(--font-size-2);}
|
|
h3{font-size: var(--font-size-3);}
|
|
h3{font-size: var(--font-size-4);}
|
|
h4{font-size: var(--font-size-4);}
|
|
h5{font-size: var(--font-size-4);}
|
|
|
|
h1 > .subtitle{
|
|
font-size: 21.48px;
|
|
}
|
|
|
|
/* Normal text style(including code) */
|
|
p, pre, ol, ul, table, code{
|
|
color: #444;
|
|
font-size: var(--font-size-4);
|
|
font-family: var(--font-normal)
|
|
}
|
|
|
|
/* Better anchor tags */
|
|
a{
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover{
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
/* Force footer to bottom and center */
|
|
#postamble{
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#postamble > p{
|
|
display: inline;
|
|
}
|
|
|
|
.title{
|
|
padding: 2vh 5vw;
|
|
}
|
|
|
|
|
|
/* Responsive images */
|
|
img{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Responsive code blocks and tables */
|
|
pre, .outline-text-2, .outline-text-3, outline-text-4{
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Responsive content positioning */
|
|
@media only screen and (min-width: 750px) /* Large screens */
|
|
{
|
|
.outline-2{
|
|
padding: 2vh 20vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 750px) /* Small screens */
|
|
{
|
|
.outline-2{
|
|
padding: 2vh 5vw;
|
|
}
|
|
}
|
|
|
|
|
|
/* Code blocks */
|
|
.org-keyword{
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.org-rainbow-delimiters-depth-1{
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.org-org-meta-line{
|
|
color: var(--color-primary);
|
|
}
|
|
blockquote{
|
|
border-left:5px solid var(--color-primary);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.todo{
|
|
color: var(--color-special-todo);
|
|
}
|
|
|
|
.done{
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Tags.
|
|
The way org exports tags is a little strange.
|
|
They are exported as a span with class "tag" containing each
|
|
of the tags in its own span with class and contents equal to
|
|
the tags name. This is actually really useful as it allows
|
|
for targeting both the "tag group" and each tag individually */
|
|
|
|
.tag{
|
|
margin-top: 5px;
|
|
display: block;
|
|
color: var(--color-soft-white);
|
|
font-size: var(--font-size-small);
|
|
font-family: var(--font-normal)
|
|
|
|
}
|
|
|
|
.tag > span{
|
|
background-color: var(--color-secondary);
|
|
text-transform: uppercase;
|
|
border-radius: 2px;
|
|
width: fit-content;
|
|
height: auto;
|
|
padding: 1px 5px;
|
|
margin: 1px;
|
|
}
|
|
|
|
.underline{
|
|
text-decoration: underline;
|
|
}
|