168 lines
3.6 KiB
CSS
168 lines
3.6 KiB
CSS
:root {
|
|
--background-colour: #fff;
|
|
--text-colour: #222;
|
|
--php: rgb(136, 146, 191);
|
|
--javascript: #83CD29;
|
|
--go: #00ADD8;
|
|
--flutter: #02569B;
|
|
--clojure: #62B132;
|
|
--rust: #DEA584;
|
|
--python: #4584B6;
|
|
--svelte: #ff3e00;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-colour: #202225;
|
|
--text-colour: #dcddde;
|
|
--flutter: #0175C2;
|
|
--python: #FFDE57;
|
|
}
|
|
.language {
|
|
border: 1px solid var(--text-colour);
|
|
background-color: var(--background-colour);
|
|
color: var(--text-colour);
|
|
}
|
|
.php {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--php);
|
|
color: var(--php);
|
|
}
|
|
.javascript {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--javascript);
|
|
color: var(--javascript);
|
|
}
|
|
.go {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--go);
|
|
color: var(--go);
|
|
}
|
|
.flutter {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--go);
|
|
color: var(--go);
|
|
}
|
|
.clojure {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--clojure);
|
|
color: var(--clojure);
|
|
}
|
|
.rust {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--rust);
|
|
color: var(--rust);
|
|
}
|
|
.python {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--python);
|
|
color: var(--python);
|
|
}
|
|
.svelte {
|
|
background-color: var(--background-colour);
|
|
border-color: var(--svelte);
|
|
color: var(--svelte);
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-size: 62.5%;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;
|
|
color: var(--text-colour);
|
|
font-size: 1.8em;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
background-color: var(--background-colour);
|
|
}
|
|
|
|
main {
|
|
margin: auto;
|
|
padding: 2rem;
|
|
max-width: 72ch;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 2rem;
|
|
font-weight: 300; }
|
|
h1 { font-size: 4.0rem; line-height: 1.2; font-weight: 500; }
|
|
h2 { font-size: 3.6rem; line-height: 1.25; }
|
|
h3 { font-size: 3.0rem; line-height: 1.3; font-weight: 500; }
|
|
h4 { font-size: 2.4rem; line-height: 1.35; }
|
|
h5 { font-size: 1.8rem; line-height: 1.5; }
|
|
h6 { font-size: 1.5rem; line-height: 1.6; }
|
|
|
|
a, a:visited {
|
|
color: var(--text-colour);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.language {
|
|
border: 1px solid var(--text-colour);
|
|
font-size: 65%;
|
|
padding: 0 10px;
|
|
margin: 0 1px;
|
|
vertical-align: middle;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
background-color: var(--text-colour);
|
|
color: var(--background-colour);
|
|
}
|
|
|
|
.project {
|
|
margin: 0 0 5px 0;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.project h4, .project p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.php {
|
|
background-color: var(--php);
|
|
border-color: var(--php);
|
|
color: var(--background-colour);
|
|
}
|
|
.javascript {
|
|
background-color: var(--javascript);
|
|
border-color: var(--javascript);
|
|
color: var(--background-colour);
|
|
}
|
|
.go {
|
|
background-color: var(--go);
|
|
border-color: var(--go);
|
|
color: var(--background-colour);
|
|
}
|
|
.flutter {
|
|
background-color: var(--flutter);
|
|
border-color: var(--flutter);
|
|
color: var(--background-colour);
|
|
}
|
|
.clojure {
|
|
background-color: var(--clojure);
|
|
border-color: var(--clojure);
|
|
color: var(--background-colour);
|
|
}
|
|
.rust {
|
|
background-color: var(--rust);
|
|
border-color: var(--rust);
|
|
color: var(--background-colour);
|
|
}
|
|
.python {
|
|
background-color: var(--python);
|
|
border-color: var(--python);
|
|
color: var(--background-colour);
|
|
}
|
|
.svelte {
|
|
background-color: var(--svelte);
|
|
border-color: var(--svelte);
|
|
color: var(--background-colour);
|
|
}
|