summaryrefslogtreecommitdiff
path: root/themes/conspiracy/assets/css
diff options
context:
space:
mode:
authorjaseg <git@jaseg.de>2023-03-19 15:27:45 +0100
committerjaseg <git@jaseg.de>2023-03-19 15:27:45 +0100
commit77469be23fe1777d776c0b0abd4c77f6e4080196 (patch)
treeb7fe0fbfb7c688837d491af89101d85614447ccf /themes/conspiracy/assets/css
parent92e3b5f49f6f5336530988e7839ab3ed283b86e4 (diff)
downloadblog-77469be23fe1777d776c0b0abd4c77f6e4080196.tar.gz
blog-77469be23fe1777d776c0b0abd4c77f6e4080196.tar.bz2
blog-77469be23fe1777d776c0b0abd4c77f6e4080196.zip
Make site mobile-friendly, make code listings pretty
Diffstat (limited to 'themes/conspiracy/assets/css')
-rw-r--r--themes/conspiracy/assets/css/style.css183
1 files changed, 179 insertions, 4 deletions
diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 9ab9203..c3afe86 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -16,6 +16,57 @@
font-style: italic;
}
+@font-face {
+ font-family: "Bodoni Moda";
+ src: url("{{ (resources.Get "fonts/bodoni_moda/static/BodoniModa_18pt/BodoniModa_18pt-Medium.ttf").RelPermalink }}");
+}
+
+@font-face {
+ font-family: "Fira Code";
+ src: url("{{ (resources.Get "fonts/fira_code/FiraCode-VariableFont_wght.ttf").RelPermalink }}") format("truetype-variations");
+ font-weight: 300 400 500 600 700;
+}
+
+html, body {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ font-family: "Roboto Slab";
+ font-weight: 350;
+ color: #d0d0d0;
+ background-color: #0d1015;
+}
+
+strong {
+ font-family: "Bodoni Moda";
+ font-style: italic;
+}
+
+a:hover, a:visited, a:active, a:link {
+ color: #ff9449;
+ text-decoration: none;
+}
+
+a:hover {
+ background: #fc0daf;
+ color: #d0d0d0;
+}
+
+nav {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ overflow-x: scroll;
+ background-color: #272c35;
+ box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.8);
+ padding: 0 10px 0 10px;
+}
html, body {
border: 0;
margin: 0;
@@ -92,21 +143,33 @@ main {
align-self: center;
margin-top: -100px;
padding: 100px 100px 40px 100px;
- max-width: 40em;
+ max-width: min(100%, 60em);
+ box-sizing: border-box;
background-color: #272c35;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
text-align: justify;
hyphens: auto;
}
+@media (max-width: 30em) {
+ main {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+}
+
main > .intro {
margin-top: 40px;
}
h1, h2, h3, h4, h5, h6 {
- font-family: "Manuskript Gothisch";
margin-top: 50px;
margin-bottom: 8px;
+ font-family: "Bodoni Moda";
+}
+
+h1 {
+ font-family: "Manuskript Gothisch";
}
body > header {
@@ -190,13 +253,13 @@ main.cards {
}
tt {
- font-family: monospace;
+ font-family: "Fira Code";
font-weight: bold;
font-size: 14px;
}
cite {
- font-family: monospace;
+ font-family: "Fira Code";
font-weight: bold;
font-size: 14px;
font-style: normal;
@@ -262,8 +325,120 @@ img {
display: block;
}
+.code {
+ font-family: "Fira Code";
+ font-size: 13px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow-x: auto;
+ display: grid;
+ align-items: start;
+ grid-template-columns: min-content 1fr;
+}
+
+.code > .line {
+ padding-left: calc(2em + 5px);
+ text-indent: -2em;
+ padding-top: 2px;
+ min-width: 15em;
+}
+
+/* Make individual syntax tokens wrap anywhere */
+.code > .line > span {
+ overflow-wrap: anywhere;
+ white-space: pre-wrap;
+}
+
+.code > .lineno {
+ counter-increment: lineno;
+ word-break: keep-all;
+ margin: 0;
+ padding-left: 15px;
+ padding-right: 5px;
+ overflow: clip;
+ position: relative;
+ text-align: right;
+ color: #a0a0a0;
+ border-right: 1px solid #e0e0e0;
+ align-self: stretch;
+}
+
+.code > .lineno::after {
+ position: absolute;
+ right: 5px;
+ content: "\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳";
+ white-space: pre;
+ color: #a0a0a0;
+}
+
+.code > .lineno::before {
+ content: counter(lineno);
+}
+
+.code::before {
+ counter-reset: lineno;
+}
+
footer {
margin-top: 30px;
align-self: center;
margin-bottom: 10px;
+ text-align: center;
}
+
+body .hll { background-color: #404040 }
+body .c { color: #d0d0d0 } /* Comment */
+body .err { color: #ffffff } /* Error */
+body .k { color: #ffffff } /* Keyword */
+body .l { color: #ffffff } /* Literal */
+body .n { color: #d0d0d0 } /* Name */
+body .o { color: #d0d0d0 } /* Operator */
+body .cm { color: #d0d0d0 } /* Comment.Multiline */
+body .cp { color: #d0d0d0 } /* Comment.Preproc */
+body .c1 { color: #d0d0d0 } /* Comment.Single */
+body .cs { color: #d0d0d0 } /* Comment.Special */
+body .kc { color: #ffffff } /* Keyword.Constant */
+body .kd { color: #ffffff } /* Keyword.Declaration */
+body .kn { color: #ffffff } /* Keyword.Namespace */
+body .kp { color: #ffffff } /* Keyword.Pseudo */
+body .kr { color: #ffffff } /* Keyword.Reserved */
+body .kt { color: #ffffff } /* Keyword.Type */
+body .na { color: #ffffff } /* Name.Attribute */
+body .nb { color: #ffffff } /* Name.Builtin */
+body .nc { color: #ffffff } /* Name.Class */
+body .no { color: #ffffff } /* Name.Constant */
+body .nd { color: #d0d0d0 } /* Name.Decorator */
+body .ni { color: #ffffff } /* Name.Entity */
+body .ne { color: #ffffff } /* Name.Exception */
+body .nf { color: #ffffff } /* Name.Function */
+body .nl { color: #ffffff } /* Name.Label */
+body .nn { color: #d0d0d0 } /* Name.Namespace */
+body .nx { color: #ffffff } /* Name.Other */
+body .py { color: #ffffff } /* Name.Property */
+body .nt { color: #ffffff } /* Name.Tag */
+body .nv { color: #ffffff } /* Name.Variable */
+body .ow { color: #ffffff } /* Operator.Word */
+body .bp { color: #ffffff } /* Name.Builtin.Pseudo */
+body .vc { color: #d0d0d0 } /* Name.Variable.Class */
+body .vg { color: #d0d0d0 } /* Name.Variable.Global */
+body .vi { color: #d0d0d0 } /* Name.Variable.Instance */
+body .ld { color: #d0d0d0; font-weight: 600 } /* Literal.Date */
+body .m { color: #d0d0d0; font-weight: 600 } /* Literal.Number */
+body .s { color: #d0d0d0; font-weight: 600 } /* Literal.String */
+body .mb { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Bin */
+body .mf { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Float */
+body .mh { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Hex */
+body .mi { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Integer */
+body .mo { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Oct */
+body .sb { color: #d0d0d0; font-weight: 600 } /* Literal.String.Backtick */
+body .sc { color: #d0d0d0; font-weight: 600 } /* Literal.String.Char */
+body .sd { color: #d0d0d0; font-weight: 600 } /* Literal.String.Doc */
+body .s2 { color: #d0d0d0; font-weight: 600 } /* Literal.String.Double */
+body .se { color: #d0d0d0; font-weight: 600 } /* Literal.String.Escape */
+body .sh { color: #d0d0d0; font-weight: 600 } /* Literal.String.Heredoc */
+body .si { color: #d0d0d0; font-weight: 600 } /* Literal.String.Interpol */
+body .sx { color: #d0d0d0; font-weight: 600 } /* Literal.String.Other */
+body .sr { color: #d0d0d0; font-weight: 600 } /* Literal.String.Regex */
+body .s1 { color: #d0d0d0; font-weight: 600 } /* Literal.String.Single */
+body .ss { color: #d0d0d0; font-weight: 600 } /* Literal.String.Symbol */
+body .il { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Integer.Long */