Create main.css

Author: kylereddoch

assets/kylestechkorner/main.css

@@ -0,0 +1,183 @@
+@import url('https://cdn.cache.lol/profiles/themes/css/dracula.css');
+
+:root {
+    --foreground: #d8dee9;
+    --background: #2E3440;
+    --link: #5e81ac;
+    --accent: #868e96;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Mint Grotesk', sans-serif;
+    font-size: 120%;
+    color: var(--foreground);
+    background: var(--background);
+}
+
+header nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+header nav li {
+    display: inline-block;
+}
+
+header nav li a {
+    display: block;
+    text-decoration: none;
+    margin-right: 1em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Mint Grotesk', sans-serif;
+    margin: 1rem 0;
+}
+
+p,
+li {
+    line-height: 160%;
+}
+
+.profile-picture {
+    border-radius: 100%;
+    height: 8.7em;
+}
+
+header {
+    max-width: 60em;
+    margin: 2em auto;
+    padding: 0 1em;
+}
+
+footer {
+    margin-top: 5em;
+    max-width: 60em;
+    padding: 2em;
+}
+
+footer ul {
+    list-style: none;
+    margin: 0;
+}
+
+footer li {
+    display: inline;
+}
+
+.center {
+    text-align: center;
+}
+
+header {
+    margin-top: 4em;
+    text-align: center;
+}
+
+footer p {
+    font-size: 90%;
+    text-align: center;
+}
+
+a:link {
+    color: var(--link);
+}
+
+a:visited {
+    color: var(--link);
+}
+
+a:hover {
+    color: var(--link);
+}
+
+a:active {
+    color: var(--link);
+}
+
+.post-info,
+.post-tags {
+    font-size: 85%;
+    color: var(--accent);
+    text-align: left;
+}
+
+.post-info i:nth-child(2) {
+    margin-left: .75em;
+}
+
+.tag {
+    background: var(--accent);
+    color: var(--background) !important;
+    padding: .3em .4em;
+    margin: .8em 0 0 .4em;
+    border-radius: .5em;
+    text-decoration: none;
+    display: inline-block;
+}
+
+hr {
+    height: 1px;
+    border-width: 0;
+    color: var(--accent);
+    background-color: var(--accent);
+    margin: 2em 0;
+}
+
+code {
+    padding: .2em .3em;
+    border: 1px solid var(--accent);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+pre,
+code {
+    font-family: 'MD IO 0.4';
+    font-size: 90%;
+}
+
+pre code {
+    background: #000;
+    color: #eee;
+    display: inline-block;
+    padding: 1em;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+img {
+    max-width: 100%;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+td,
+th {
+    padding: .75em;
+    text-align: left;
+    border: 1px solid var(--accent);
+}
+
+.weblog-title a {
+    text-decoration: none !important;
+    color: var(--foreground);
+}
+
+.previous-page+.next-page::before {
+    content: "\2022";
+    color: #ccc;
+    margin: 0 0.75em;
+}