From d62f4b119544313977428e23ad4d68e4264a97ab Mon Sep 17 00:00:00 2001 From: Jan Danielzick Date: Wed, 12 Feb 2020 04:40:36 +0100 Subject: [PATCH] added code blocks and changed background color handling from a class to apply to the whole page --- content/style.css | 180 ++++++++++++++++++++++++++++++---------------- 1 file changed, 120 insertions(+), 60 deletions(-) diff --git a/content/style.css b/content/style.css index ece1cf1..c3d02ba 100644 --- a/content/style.css +++ b/content/style.css @@ -1,61 +1,121 @@ -@media only screen and (min-width: 721px) { - .container{ - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 100px; - grid-template-columns: 1fr 1fr 1fr; - grid-auto-rows: minmax(100px, auto); - } - - div.item-1 { - grid-column: 2 / 3; - grid-row: 1; - } - - div.item-2 { - grid-column: 2 / 3; - grid-row: 2; - } - - div.item-3 { - grid-column: 2 / 3; - grid-row: 3; - } -} - - -@media only screen and (max-width: 720px) { - .container{ - display: grid; - grid-template-columns: repeat(1, 1fr); - grid-template-rows: 100px; - grid-template-columns: 1fr; - grid-auto-rows: minmax(100px, auto); - } - - div.item-1 { - grid-column: 1 / 1; - grid-row: 1; - } - - div.item-2 { - grid-column: 1 / 1; - grid-row: 2; - } - - div.item-3 { - grid-column: 1 / 1; - grid-row: 3; - } -} - -div.round-border { - border: 1px solid; - padding: 0.01em 16px; - border-radius: 16px; -} - -.bg { - background-color:#feffef; - color:#00000; +/* optimized for desktop users */ +@media only screen and (min-width: 721px) { + .container{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 100px; + grid-template-columns: 1fr 1fr 1fr; + grid-auto-rows: minmax(100px, auto); + } + + div.item-1 { + grid-column: 2 / 3; + grid-row: 1; + } + + div.item-2 { + grid-column: 2 / 3; + grid-row: 2; + } + + div.item-3 { + grid-column: 2 / 3; + grid-row: 3; + } +} + +/* optimized for mobile users */ +@media only screen and (max-width: 720px) { + .container{ + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-template-rows: 100px; + grid-template-columns: 1fr; + grid-auto-rows: minmax(100px, auto); + } + + div.item-1 { + grid-column: 1 / 1; + grid-row: 1; + } + + div.item-2 { + grid-column: 1 / 1; + grid-row: 2; + } + + div.item-3 { + grid-column: 1 / 1; + grid-row: 3; + } +} + +div.round-border { + border: 1px solid; + padding: 0.01em 16px; + border-radius: 16px; +} + +body { + background-color:#feffef; + color:#00000; +} + + +/* code blocks */ +pre { + margin-left: 20px; + margin-right: 20px; + margin-top: 0px; + background-color: white; + border-style: solid; + border-color: #888A85; + border-width: 1px; + font-size: 11pt; + font-family: monospace; +} + +pre.commandLine { + background-color: #2E3436; + color: #C3F097; +} + +span.structure { + color: #FCAF3E; + font-weight: bold; +} +span.primitive { + color: #729FCF; + font-weight: bold; +} +span.className { + color: #8AE234; + font-weight: bold; +} + +span.type { + color: #729FCF; +} +span.value { + color: #C17D11; +} +span.function { + color: #75507B; +} +span.name { + color: #8AE234; +} +span.comment { + color: #888A85; +} +/* in-line code block */ +span.codeBlockInText{ + background-color: white; + border-color: black; + border-style: solid; + border-width: 1px; + font-size: 11pt; + font-family: monospace; + padding-left: 5px; + padding-right: 5px; } \ No newline at end of file