From 5ad2cb5fd0ff73db8263dda792e69508873f1de2 Mon Sep 17 00:00:00 2001 From: Sam Anthony Date: Sat, 23 Apr 2022 18:17:12 -0230 Subject: add index page --- htdocs/base.html | 8 +++- htdocs/css/style.css | 69 ++++++++++++++++++++++++++++++++++ htdocs/css/syntax.css | 19 ++++++++++ htdocs/index.html | 101 +++++++++++++++++++++++++++++++++++++++++++++++++- htdocs/style.css | 40 -------------------- 5 files changed, 194 insertions(+), 43 deletions(-) create mode 100644 htdocs/css/style.css create mode 100644 htdocs/css/syntax.css delete mode 100644 htdocs/style.css diff --git a/htdocs/base.html b/htdocs/base.html index cc85064..7a3c97f 100644 --- a/htdocs/base.html +++ b/htdocs/base.html @@ -7,10 +7,12 @@ {{ define "title" }}samanthony.xyz{{ end }} {{ template "title" }} + {{ define "style" }}{{ end }} {{ template "style" }} - + + - {{ template "body_content" }} +
+ {{ template "body_content" }} +
diff --git a/htdocs/css/style.css b/htdocs/css/style.css new file mode 100644 index 0000000..1c6db7c --- /dev/null +++ b/htdocs/css/style.css @@ -0,0 +1,69 @@ +:root { + --fg-color: white; + --bg-color: black; + --highlight-color: #4acaa4; +} + +/* General */ +body { + background-color: var(--bg-color); + color: var(--fg-color); + + font-family: sans-serif; +} + +.hanging-indent { + padding-left: 2em; + text-index: -2em; +} + +/* Links */ +a { + color: var(--highlight-color); + text-decoration: none; +} +a:hover { text-decoration: underline 0.055em; } + +/* Headers */ +header :first-child { margin-bottom: 0px; } +header hr { + margin: 0px; + color: var(--fg-color); +} + +/* Quotes */ +blockquote p { margin: 0px; } +blockquote p:first-child { font-style: italic; } +blockquote p:nth-child(2) { + text-indent: 2em; +} + +/* Lists */ +ul { padding-left: 2em; } + +/* Nav */ +body { margin: 0px; } +nav { background-color: var(--highlight-color); } +nav a { + margin-left: 0.2em; + + font-size: 1.6em; + font-weight: normal; + + color: var(--fg-color); +} +nav a:first-child .label { font-weight: bold; } +nav .label { font-size: 0.7em; } +nav .this-section { font-style: italic; } +nav hr { + margin: 0px; + color: var(--fg-color); +} + +/* Main page content */ +main { + margin: auto; + max-width: 80em; + padding-left: 1em; + padding-right: 1em; +} diff --git a/htdocs/css/syntax.css b/htdocs/css/syntax.css new file mode 100644 index 0000000..f425178 --- /dev/null +++ b/htdocs/css/syntax.css @@ -0,0 +1,19 @@ +code { + border: 0.055em solid var(--highlight-color); + border-radius: 0.5em; + padding-top: 0.2em; + padding-bottom: 0.1em; + padding-left: 0.5em; + padding-right: 0.5em; + + display: inline-block; + vertical-align: middle; + + background-color: #282828; +} + +/* HTML */ +/* Tag */ code[data-lang="html"] .t { color: var(--highlight-color); } +/* Element */ code[data-lang="html"] .e { color: #9b5712; } +/* AttributeName */ code[data-lang="html"] .an { color: #91931b; } +/* AttributeValue */ code[data-lang="html"] .av { color: red; } diff --git a/htdocs/index.html b/htdocs/index.html index ac2f7a6..e02436e 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -1,3 +1,102 @@ {{ define "body_content" }} -

Hello, world!

+
+

Why This Site Exists

+
+
+ +

+ Most of the modern Web sucks. This is my futile attempt at changing that. +

+ +

+ Many sites these days try to solve problems that don't exist using improper + tools and techniques to do so. The classic example is JavaScript; + client-side scripting can be quite useful in certain situations. + The problem, however, is that most situations are not these situations. +

+ +

+ The vast majority of websites could be simple HTML( + CSS) pages and gain all + the benefits that go along with that, namely simplicity, + speed/performance and + + reliability. + Instead, people choose to complicate things. +

+ +

"Install this plugin!"

+

"Use this framework!"

+ +

+ Rather than fixing the underlying problem by stripping back the layers to + find that we really just want to render some HTML, we instead pile more + on top, obscuring and worsening whatever problem we think we're trying to + solve. +

+ +
+

+ "Millions of jobs are based on outputting HTML in an inefficient way." +

+

— suckless.org

+
+ +

+ Some common excuses for "I need to use x:" +

+

+ +
+

What Can We Do?

+
+
+ +

+ Start your own website where you can complain about stuff too! Anyone can + and everyone should. With + all the information that's out there + it's never been easier to help fix the Web by creating your own site. + +

+ You can read the boring technical details of how this site is implemented + here. +

{{ end }} diff --git a/htdocs/style.css b/htdocs/style.css deleted file mode 100644 index d260d69..0000000 --- a/htdocs/style.css +++ /dev/null @@ -1,40 +0,0 @@ -/* General */ -body { - margin-left: 0px; - margin-right: 0px; - margin-top: 0px; - - background-color: black; - color: white; - - font-family: sans-serif; -} - -a { text-decoration: none; } -a:hover { - text-decoration: underline; - text-decoration-thickness: 0.055em; -} - -/* Navbar */ -nav { background-color: #4acaa4; } - -nav a { - margin-left: 0.2em; - - font-size: 1.6em; - font-weight: normal; - color: white; -} - -nav a:first-child .label { font-weight: bold; } - -nav .label { font-size: 0.7em; } - -nav .this-section { font-style: italic; } - -nav hr { - margin: 0px; - - color: white; -} -- cgit v1.2.3