diff options
Diffstat (limited to 'htdocs')
| -rw-r--r-- | htdocs/base.html | 46 | ||||
| -rw-r--r-- | htdocs/css/style.css | 83 | ||||
| -rw-r--r-- | htdocs/css/syntax.css | 19 | ||||
| -rw-r--r-- | htdocs/index.html | 97 | ||||
| -rw-r--r-- | htdocs/software/index.html | 20 | ||||
| -rw-r--r-- | htdocs/software/samanthony.xyz.html | 50 |
6 files changed, 315 insertions, 0 deletions
diff --git a/htdocs/base.html b/htdocs/base.html new file mode 100644 index 0000000..f96c9c7 --- /dev/null +++ b/htdocs/base.html @@ -0,0 +1,46 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- Child templates can choose to overwrite the default title --> + {{ define "title" }}<title>samanthony.xyz</title>{{ end }} + {{ template "title" }} + + <link rel="stylesheet" href="/css/style.css"> + <!-- Child templates can apply their own styles --> + {{ define "style" }}{{ end }} + {{ template "style" }} + <!-- Code syntax highlighting --> + <link rel="stylesheet" href="/css/syntax.css"> + </head> + <body> + <nav> + {{ $this_section := .Nav.ThisSection }} + {{ range .Nav.Links }} + {{ if eq .Href $this_section }} + <a class="this-section" href="{{ .Href }}"> + /<span class="label">{{ .Label }}</span> + </a> + {{else }} + <a href="{{ .Href }}"> + |<span class="label">{{ .Label }}</span> + </a> + {{ end }} + {{ end }} + <hr> + </nav> + <main> + {{ template "body_content" }} + </main> + <footer> + <hr> + <p>Copyright 2022 Sam Anthony</p> + <p> + samanthony.xyz is free software, licensed under the + <a href="https://www.gnu.org/licenses/gpl.txt"> + GNU GPL. + </a> + </p> + </body> +</html> diff --git a/htdocs/css/style.css b/htdocs/css/style.css new file mode 100644 index 0000000..325f87e --- /dev/null +++ b/htdocs/css/style.css @@ -0,0 +1,83 @@ +:root { + --fg-color: white; + --bg-color: black; + --highlight-color: #4acaa4; +} + +html { height: 100%; } + +body { + display: flex; + flex-direction: column; + height: 100%; + + background-color: var(--bg-color); + color: var(--fg-color); + + font-family: sans-serif; +} + +main { + margin-bottom: auto; + align-self: center; + max-width: 80em; + width: 95vw; +} + +.hanging-indent { + padding-left: 2em; + text-index: -2em; +} + +header :first-child { margin-bottom: 0px; } + +hr { + margin: 0px; + color: var(--fg-color); +} + +ul { padding-left: 2em; } + +/* Tables */ +table { padding-top: 1em; } +th { text-align: left; } +td:first-child { padding-right: 0.5em; } + +/* Links */ +a { + color: var(--highlight-color); + text-decoration: none; +} +a:hover { text-decoration: underline 0.055em; } + +/* Quotes */ +blockquote p { margin: 0px; } +blockquote p:first-child { font-style: italic; } +blockquote p:nth-child(2) { + text-indent: 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; } + +/* Footer */ +footer { + background-color: var(--highlight-color); + text-align: center; +} +footer a { + color: var(--fg-color); + font-style: italic; +} 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 new file mode 100644 index 0000000..821d693 --- /dev/null +++ b/htdocs/index.html @@ -0,0 +1,97 @@ +{{ define "body_content" }} + <header> + <h1>Why This Site Exists</h2> + <hr> + </header> + + <p> + Most of the modern Web sucks. This is my futile attempt at changing that. + </p> + + <p> + 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 <em>in certain situations</em>. + The problem, however, is that most situations are not these situations. + </p> + + <p> + The vast majority of websites could be simple HTML( + CSS) pages and gain all + the benefits that go along with that, namely <em>simplicity</em>, + <em>speed/performance</em> and + <a href="http://harmful.cat-v.org/Blog/2015/04/24/0/"> + <em>reliability</em></a>. + Instead, people choose to complicate things. + </p> + + <blockquote><p>"Install this plugin!"</p></blockquote> + <blockquote><p>"Use this framework!"</p></blockquote> + + <p> + 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. + </p> + + <blockquote cite="https://suckless.org/sucks/web/"> + <p> + "Millions of jobs are based on outputting HTML in an inefficient way." + </p> + <p>— <a href="https://suckless.org/sucks/web/">suckless.org</a></p> + </blockquote> + + <p> + Some common excuses for "I need to use x:" + <ul> + <li> + "It's responsive" + <br> + <p style="margin: 0px;" class="hanging-indent"> + Setting this meta tag: + <code data-lang="html"> + <span class="t"><<span class="e">meta</span> + <span class="an">name</span>=<span class="av">"viewport"</span> + <span class="an">content</span>=<span class="av">"width=device-width, initial-scale=1.0"</span>> + </span> + </code> + along with some very basic CSS is all that's required for a + responsive site that looks good on any screen. + </p> + </li> + <li> + "It looks nicer" + <p style="margin: 0px;" class="hanging-indent"> + Java<em>Script</em>. Cascading + <em>Style</em> Sheets. See the problem? + Don't use scripts for styling. Also, no, it doesn't look nicer. + </p> + </li> + <li> + "It's makes for a better user experience" + <p style="margin: 0px" class="hanging-indent"> + If you like waiting seconds for a page to load before scrolling an + entire screen height with a parallaxed background just to read two + words then yes, that is a good experience. + Personally, I would rather not have to hover my cursor through a maze + of eight nested, animated drop-down menus while being bombarded by + popups asking for personal information and telling me that the site + uses + <a href="https://lcamtuf.blogspot.com/2010/10/http-cookies-or-how-not-to-design.html"> + cookies</a>. + </p> + </li> + </ul> + </p> + + <header> + <h1>What Can We Do?</h1> + <hr> + </header> + + <p> + Start your own website where you can complain about stuff too! Anyone can + and everyone should. With + <a href="https://landchad.net">all the information that's out there</a> + it's never been easier to help fix the Web by creating your own site. +{{ end }} diff --git a/htdocs/software/index.html b/htdocs/software/index.html new file mode 100644 index 0000000..ecf8d95 --- /dev/null +++ b/htdocs/software/index.html @@ -0,0 +1,20 @@ +{{ define "title" }} + <title>software | samanthony.xyz</title> +{{ end }} + +{{ define "body_content" }} + <header> + <h1>Software Hosted Here</h1> + <hr> + </header> + <table> + <tr> + <th>name</th> + <th>description</th> + </tr> + <tr> + <td><a href="samanthony.xyz.html">samanthony.xyz</a></th> + <td>This website</th> + </tr> + </table> +{{ end }} diff --git a/htdocs/software/samanthony.xyz.html b/htdocs/software/samanthony.xyz.html new file mode 100644 index 0000000..dc0c38c --- /dev/null +++ b/htdocs/software/samanthony.xyz.html @@ -0,0 +1,50 @@ +{{ define "title" }} + <title>software | samanthony.xyz</title> +{{ end }} + +{{ define "style" }} +<style> + h1, h2 { margin-bottom: 0px; } + h2 { + margin-top: 0px; + padding-left: 1em; + color: grey; + } +</style> +{{ end }} + +{{ define "body_content" }} + <header> + <h1>samanthony.xyz</h1> + <h2>This website</h2> + <hr> + </header> + <p> + Get a copy of the source code with + <code>git clone git://samanthony.xyz/samanthony.xyz.git</code>. + </p> + <p> + The site uses HTML templates to avoid tedium and for the ability to make + small changes across the entire site without editing multiple files. It uses + the html/template package included in Go's standard library. + </p> + <p> + A server is required to serve these templates. Once again Go provides with + the built in http package. This makes writing a web server extremely easy. + All you have to do is write a function to handle incoming requests and call + http.ListenAndServe(). Painless. + </p> + <p> + Since I'm running OpenBSD, TLS can be dealt with external to the webserver + by using relayd. As an aside, I encourage anyone looking for an operating + system to give OpenBSD a look. It's been an absolute pleasure to work with + so far. As long as you don't expect it to be exactly like a Linux-based + system (it's not), then not only is it more secure, but also + <em>easier to use</em> than something Linux-based. Even for a noob like + myself. Sane design and good documentation go a long way. + </p> + <p> + Inspiration was taken from httpd and the server runs chroot'd. When + serving content it also drops down to an unprivileged user with setuid. + </p> +{{ end }} |