diff --git a/site/css/default.css b/site/css/default.css index 4261327..e6ff830 100644 --- a/site/css/default.css +++ b/site/css/default.css @@ -1,21 +1,26 @@ +:root { + --link-color: greenyellow; + --link-visited-color: lightsteelblue; +} + body { - color: black; - font-size: 14pt; - font-family: 'Didact Gothic'; + color: antiquewhite; + font-size: 12pt; + font-family: 'Tippa'; font-weight: normal; font-style: normal; - -webkit-font-smoothing: antialiased; margin: 0; display: grid; - grid-template-columns: [navcol] 300px [maincol] 1fr; - grid-template-rows: [headerrow] 90px [mainrow] 1fr [footerrow] auto; + grid-template-columns: [leftcol] 1fr [maincol] auto [rightcol] 1fr; + grid-template-rows: [headerrow] auto [mainrow] 1fr [footerrow] auto; grid-template-areas: - "header header" - "nav main" - "footer footer"; + "inlinks logo outlinks" + "main main main" + "plugs plugs extras"; justify-content: stretch; align-content: stretch; min-height: 100vh; + background-color: darkslategrey; } body::after { @@ -40,10 +45,10 @@ a { text-decoration: none; } a:link { - color: green; + color: var(--link-color); } a:visited { - color: darkgreen; + color: var(--link-visited-color); } img, video { @@ -62,17 +67,16 @@ hr { header { padding: 20px; - grid-area: header; } header a { - color: darkgreen; + color: var(--link-color); font-size: 18pt; font-weight: bold; } header a:visited { - color: darkgreen; + color: var(--link-color); } header > hr { @@ -81,10 +85,11 @@ header > hr { article { text-align: left; + margin: 0 auto 0; padding: 0 20px 0; overflow: auto; - max-width: 70em; grid-area: main; + max-width: 80em; } article a:hover{ @@ -116,106 +121,50 @@ article li { vertical-align: middle; } -.folders { - list-style: none; - margin: 0px; - height: 54px; +.inlinks { + grid-area: inlinks; + justify-content: flex-end; } -.folders a { - line-height: 33px; -} - -.rider { - display: inline-block; - border: 1px solid black; - border-bottom: none; - border-radius: 5px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - padding: 10px; - height: 34px; - vertical-align: bottom; -} - -.bloglink { - background-color: white; - color: black; - font-family: 'Didact Gothic'; - font-weight: normal; - font-style: normal; -} - -.bloglink > a, .bloglink > a:link, .bloglink > a:visited { - color: black; - text-decoration: none; -} - -.portfoliolink { - background-color: #161612; - font-family: 'SturkopfMedium'; - font-weight: normal; - font-style: normal; -} - -.portfoliolink > a, .portfoliolink > a:link, .portfoliolink > a:visited { - color: #efffbe; - text-decoration: none; -} - -.comicslink { - background-color: rgba(255, 255, 255, 0.8); - font-family: 'GrabsteinMedium'; - font-weight: normal; - font-style: normal; - background-image: linear-gradient(black, black), url(../images/paper.jpg); - background-repeat: no-repeat; - /*background-size: cover;*/ - /*background-attachment: fixed;*/ - background-origin: padding-box; - background-clip: border-box; - background-position: center; - background-blend-mode: saturation; - color: black; -} - -.comicslink > a, .comicslink > a:link, .comicslink > a:visited { - color: black; - text-decoration: none; -} - -.sidebar { - grid-area: nav; -} - -.navigation, .tags, .plugs, .tipjar { - background-color: rgba(0,0,0,0.1); - background: rgba(0,0,0,0.1); - border-radius: 5px; - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - padding: 20px 20px 20px 20px; - margin-top: 0; - margin-bottom: 10px; +.logo { + grid-area: logo; text-align: center; } -.tags p, .plugs p, .tipjar p { +.outlinks { + grid-area: outlinks; + justify-content: flex-start; +} + +.plugs { + grid-area: plugs; +} + +.extras { + grid-area: extras; +} + +.inlinks, .outlinks, .tags, .plugs { + padding: 20px 20px 20px 20px; +} + +.logo img { + width: 200px; +} + +.tags p, .plugs p { text-align: left; margin: 0; } -.navigation { - columns: 2; -} - -nav ul, .plugs ul, .tipjar ul { +.inlinks, .outlinks, .plugs ul { list-style: none; - margin-left: 0px; + margin: 0; + display: inline-block; } -nav li a:link { - color: darkgreen; +.inlinks li a:link, .outlinks li a:link { + color: var(--link-color); font-size: 16pt; font-weight: bold; margin: 0; @@ -223,52 +172,38 @@ nav li a:link { text-transform: uppercase; } -nav li a:visited { - color: darkgreen; +.inlinks li a:visited, .outlinks li a:visited { + color: var(--link-color); } -.plugs ul, .tipjar ul { - padding: 0; - margin: 0; +.inlinks, .outlinks, .plugs ul { display: flex; flex-direction: row; - justify-content: space-evenly; + align-items: center; } -.plugs li, .tipjar li { +.inlinks li, .outlinks li, .plugs li { display: inline-block; + margin: 20px; } -.plugs li a, .tipjar li a { +.plugs li a { display: inline-block; height: 40px; } -.plugs svg, .tipjar svg { +.plugs svg { width: 40px; height: 40px; } -footer { - color: #555; - font-size: 12pt; - text-align: right; - padding: 0 20px 5px; - grid-area: footer; -} - -footer ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; +.plugs ul, .extras ul { list-style: none; padding: 0; margin: 0; } -footer ul li { +.plugs li, .extras li { display: inline-block; text-align: center; width: auto; @@ -276,16 +211,6 @@ footer ul li { margin: 0; } -footer span img { - vertical-align: bottom; -} - -footer img { - float: none; - margin: 0; - width: 16px; -} - pre { border: dashed 1px #000000; border-radius: 5px; @@ -320,19 +245,13 @@ code { } h1 { - font-size: 24pt; + font-size: 42pt; } h2 { font-size: 20pt; } -.bitcoin { - display: inline-block; - margin-bottom: -2px; - fill: currentColor; -} - .pagination { display: inline-block; width: 100%; @@ -357,18 +276,6 @@ h2 { font-style: italic; } -.sidebar a { - display: inline-block; - padding: 5px; - transition: 0.5s; -} - -.sidebar a:hover { - background-color: white; - border-radius: 5px; - transition: 0.5s; -} - .tags a:before { display: inline-block; width: 2ex; @@ -380,10 +287,6 @@ h2 { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaGVpZ2h0PSIxMDAlIgogICB3aWR0aD0iMTAwJSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNDMwMyIKICAgdmlld0JveD0iMCAtMjU2IDE5NTAgMTk1MCI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNDMxMyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczQzMTEiIC8+CiAgPGcKICAgICBpZD0iZzQzMDUiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMjEuNjc4Nzg2LDEzOTIuODE5KSI+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yIgogICAgICAgaWQ9InBhdGg0MzA3IgogICAgICAgZD0ibSA0NDgsMTA4OCBxIDAsNTMgLTM3LjUsOTAuNSBRIDM3MywxMjE2IDMyMCwxMjE2IDI2NywxMjE2IDIyOS41LDExNzguNSAxOTIsMTE0MSAxOTIsMTA4OCAxOTIsMTAzNSAyMjkuNSw5OTcuNSAyNjcsOTYwIDMyMCw5NjAgcSA1MywwIDkwLjUsMzcuNSBRIDQ0OCwxMDM1IDQ0OCwxMDg4IHogTSAxNTE1LDUxMiBxIDAsLTUzIC0zNywtOTAgTCA5ODcsLTcwIHEgLTM5LC0zNyAtOTEsLTM3IC01MywwIC05MCwzNyBMIDkxLDY0NiBRIDUzLDY4MyAyNi41LDc0NyAwLDgxMSAwLDg2NCB2IDQxNiBxIDAsNTIgMzgsOTAgMzgsMzggOTAsMzggaCA0MTYgcSA1MywwIDExNywtMjYuNSA2NCwtMjYuNSAxMDIsLTY0LjUgbCA3MTUsLTcxNCBxIDM3LC0zOSAzNywtOTEgeiBtIDM4NCwwIHEgMCwtNTMgLTM3LC05MCBMIDEzNzEsLTcwIHEgLTM5LC0zNyAtOTEsLTM3IC0zNiwwIC01OSwxNCAtMjMsMTQgLTUzLDQ1IGwgNDcwLDQ3MCBxIDM3LDM3IDM3LDkwIDAsNTIgLTM3LDkxIGwgLTcxNSw3MTQgcSAtMzgsMzggLTEwMiw2NC41IC02NCwyNi41IC0xMTcsMjYuNSBoIDIyNCBxIDUzLDAgMTE3LC0yNi41IDY0LC0yNi41IDEwMiwtNjQuNSBsIDcxNSwtNzE0IHEgMzcsLTM5IDM3LC05MSB6IiAvPgogIDwvZz4KPC9zdmc+Cg==); } -.wrapper { - flex: 1; -} - .feed{ display: inline-block; margin-bottom: -2px; @@ -397,7 +300,6 @@ h2 { font-size: 12pt; font-weight: normal; font-style: normal; - -webkit-font-smoothing: antialiased; /* box shadow */ box-shadow: 5px 5px 10px #a1a1a1; /* bg-colour */ @@ -420,7 +322,6 @@ h2 { font-size: 65pt; font-weight: normal; font-style: normal; - -webkit-font-smoothing: antialiased; float: left; margin-top: 0.1ex; margin-right: 5px; @@ -443,7 +344,7 @@ h2 { text-align: center; } - .navigation{ + .inlinks{ border-radius: 5px; columns: auto; } diff --git a/site/css/font.css b/site/css/font.css index 1e292e4..592eeb0 100644 --- a/site/css/font.css +++ b/site/css/font.css @@ -32,3 +32,24 @@ font-weight: normal; font-style: normal; } + +@font-face { + font-family: 'Tippa'; + src: url('/font/Tippa.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Barloesius Schrift'; + src: url('/font/BarloesiusSchrift.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Gotisch Weiss A'; + src: url('/font/Gotisch Weiss a.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} diff --git a/site/font/BarloesiusSchrift.ttf b/site/font/BarloesiusSchrift.ttf new file mode 100644 index 0000000..5b475fc Binary files /dev/null and b/site/font/BarloesiusSchrift.ttf differ diff --git a/site/font/Gotisch Weiss a.ttf b/site/font/Gotisch Weiss a.ttf new file mode 100644 index 0000000..b38e47b Binary files /dev/null and b/site/font/Gotisch Weiss a.ttf differ diff --git a/site/font/Gotisch Weiss b.ttf b/site/font/Gotisch Weiss b.ttf new file mode 100644 index 0000000..6739de4 Binary files /dev/null and b/site/font/Gotisch Weiss b.ttf differ diff --git a/site/font/Tippa.ttf b/site/font/Tippa.ttf new file mode 100644 index 0000000..3de94e3 Binary files /dev/null and b/site/font/Tippa.ttf differ diff --git a/site/font/gtw.otf b/site/font/gtw.otf new file mode 100644 index 0000000..ed79bc8 Binary files /dev/null and b/site/font/gtw.otf differ diff --git a/site/images/nek0arts_logo.svg b/site/images/nek0arts_logo.svg new file mode 100644 index 0000000..fc2dddd --- /dev/null +++ b/site/images/nek0arts_logo.svg @@ -0,0 +1,123 @@ + + + + diff --git a/templates/default.html b/templates/default.html index 6589abd..7e0896a 100644 --- a/templates/default.html +++ b/templates/default.html @@ -24,74 +24,23 @@ -
- -
-
- +
+ $tags$ +
+