chris-website/public/static/style/base.css

245 lines
3.6 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-fg: #000000;
--colour-fg-highlight: #7f0602;
}
@media (prefers-color-scheme: dark) {
:root {
--colour-bg: #101010;
--colour-bg-main: #333;
--colour-bg-code: #222;
--colour-fg: #ffffff;
--colour-fg-highlight: #fc918d;
}
}
body {
background-color: var(--colour-bg);
margin: 0;
display: flex;
justify-content: center;
min-height: 100vh;
color: var(--colour-fg);
}
body > section.header-navigation {
flex: 0 0 200px;
padding: 2em;
}
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: var(--colour-fg-highlight) dotted 1px;
border-right: var(--colour-fg-highlight) dotted 1px;
max-width: 600px;
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 var(--colour-fg);
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
hr {
border: none;
border-top: 1px dotted var(--colour-fg);
}
footer {
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 var(--colour-fg);
border-bottom: 1px dotted var(--colour-fg);
}
.tag {
display: inline-block;
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: 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: var(--colour-bg-code);
}
pre.sourceCode {
}
pre, blockquote {
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;
}