chris-website-content/public/static/style/base.css
2021-03-25 18:35:08 +01:00

317 lines
4.9 KiB
CSS

@media (max-width: 850px) {
body {
flex-wrap: wrap;
}
body > main {
box-sizing: border-box;
min-width: 100%;
}
body > section.header-navigation, body > footer {
width: 100%;
flex-grow: 1 !important;
}
.hide-small {
display: none;
}
.hide-big {
display: block !important;
}
}
.hide-big {
display: none;
}
:root {
font-family: "sans-serif";
--colour-bg: #f0f0f0;
--colour-bg-main: #ddd;
--colour-bg-code: #ccc;
--colour-bg-highlight: #f9f890;
--colour-fg: #000000;
--colour-fg-highlight: #7f0602;
--colour-fg-lineno: #111;
--colour-fg-code-number: #06027f;
--colour-fg-code-string: #027f06;
--colour-fg-code-fun: #7b7f02;
--colour-fg-code-com: #027b7f;
}
@media (prefers-color-scheme: dark) {
:root {
--colour-bg: #101010;
--colour-bg-main: #333;
--colour-bg-code: #222;
--colour-bg-highlight: #727000;
--colour-fg: #ffffff;
--colour-fg-highlight: #fc918d;
--colour-fg-lineno: #ccc;
--colour-fg-code-number: #918dfc;
--colour-fg-code-string: #8dfc91;
--colour-fg-code-fun: #f8fc8d;
--colour-fg-code-com: #8df8fc;
}
}
body {
background-color: #f0f0f0;
background-color: var(--colour-bg);
margin: 0;
display: flex;
justify-content: center;
min-height: 100vh;
color: #000000;
color: var(--colour-fg);
}
body > section.header-navigation {
flex: 0 0 200px;
padding: 2em;
}
@media (pointer: coarse) {
body > section.header-navigation li {
padding: 0.25em 0;
}
}
body > footer {
flex: 0 0 200px;
padding: 2em;
border: none;
}
body > section.header-navigation > header {
text-align: center;
}
body > section.header-navigation > header > img {
width: 100%;
max-width: 160px;
}
body > main {
flex: 1 1;
padding: 2em;
/* width: 600px; */
border-left: #7f0602 dotted 1px;
border-right: #7f0602 dotted 1px;
border-left: var(--colour-fg-highlight) dotted 1px;
border-right: var(--colour-fg-highlight) dotted 1px;
max-width: 600px;
background-color: #ddd;
background-color: var(--colour-bg-main);
}
h1, .title {
margin: 0;
/* font-size: 2em; */
}
.subtitle {
margin: 0;
font-size: 1rem;
font-weight: normal;
font-style: italic;
}
header {
border-bottom: 1px dotted #000000;
border-bottom: 1px dotted var(--colour-fg);
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
hr {
border: none;
border-top: 1px dotted #000000;
border-top: 1px dotted var(--colour-fg);
}
footer {
border-top: 1px dotted #000000;
border-top: 1px dotted var(--colour-fg);
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-top: 0.5em;
}
nav ul {
padding: 0em;
list-style: none;
}
/* PROJECT LIST */
.project-header {
display: flex;
align-items: center;
}
.project-header > div {
flex: 1 1;
}
.project-header > .project-icon {
margin: 0;
margin-right: 0.5em;
}
.project-icon {
width: 4.5em;
height: 4.5em;
float: left;
margin: 0.5em;
margin-left: 0;
}
.platforms-technologies {
margin: 0.5em 0;
}
dl.project-platforms-technologies {
padding: 0.5em 0;
border-top: 1px dotted #000000;
border-top: 1px dotted var(--colour-fg);
border-bottom: 1px dotted #000000;
border-bottom: 1px dotted var(--colour-fg);
}
dt + dd.tag {
margin-left: 40px;
}
.tag {
display: inline-block;
background-color: #ccc;
background-color: var(--colour-bg-code);
border-radius: 1em;
font-size: 0.75em;
padding: 0.5em;
margin: 0.25em;
}
.screenshots {
height: 400px;
width: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
@media (max-height: 800px) {
.screenshots {
height: 240px;
}
}
.screenshot {
display: inline-block;
height: 100%;
}
/* MARKDOWN */
:not(pre) > code {
background-color: #ccc;
background-color: var(--colour-bg-code);
padding: 0.2em 0.4em;
}
article :not(figure) > img {
float: right;
}
div.sourceCode, blockquote, .screenshots {
scrollbar-color: var(--colour-fg-highlight) var(--colour-bg-code);
/*scrollbar-width: thin;*/
background-color: #ccc;
background-color: var(--colour-bg-code);
}
pre.sourceCode {
}
pre, blockquote {
border-left: 1px solid #7f0602;
border-left: 1px solid var(--colour-fg-highlight);
padding-left: 1em;
padding-right: 1em;
margin-left: 1em;
margin-right: 1em;
clear: both;
}
blockquote footer {
text-align: right;
font-style: italic;
border: none;
}
figure {
background-color: var(--colour-bg-code);
margin: 0;
text-align: center;
}
figure > img {
max-width: 100%;
}
figure > figcaption {
padding: 0.5em;
}
a {
color: var(--colour-fg-highlight);
text-decoration: underline dotted;
}
a:hover {
color: var(--colour-fg);
text-decoration: underline solid;
}
@media print {
body {
background-color: initial;
flex-direction: column;
}
body > section.header-navigation {
display: none;
}
body > main {
max-width: 100%;
background-color: initial;
border: none;
}
div.sourceCode, .screenshots, figure {
background-color: initial;
}
.hide-big {
display: block !important;
}
.hide-small {
display: none !important;
}
a:after {
content: ' (' attr(href) ')';
}
.numberSource a:after {
content: ''
}
}