summaryrefslogtreecommitdiff
path: root/includes
diff options
context:
space:
mode:
author53hornet <atc@53hor.net>2021-12-14 15:27:05 -0500
committer53hornet <atc@53hor.net>2021-12-14 15:27:05 -0500
commitf954585ea098ee5d6619c62a8fa48a904474ab3f (patch)
tree2d59dfcd46585cb4d4f83d8f980d23e639831f7d /includes
parent9f7c80247c8fe82acaff34bb88ecb0bfa5afe5b8 (diff)
download53hor-f954585ea098ee5d6619c62a8fa48a904474ab3f.tar.xz
53hor-f954585ea098ee5d6619c62a8fa48a904474ab3f.zip
refactor: move css to its own file
Diffstat (limited to 'includes')
-rw-r--r--includes/head.php188
-rw-r--r--includes/style.css181
2 files changed, 185 insertions, 184 deletions
diff --git a/includes/head.php b/includes/head.php
index 748e4b7..6e0bc4e 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -2,204 +2,24 @@
<html lang="en-US">
<head>
+ <title>53hornet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:description" content="The World Wide Web pages of Adam Carpenter" />
- <meta property="og:image" content="https://nextcloud.53hor.net/index.php/s/Nx9e7iHbw4t99wo/preview" />
+ <meta property="og:image" content="/assets/53hornet.svg" />
<meta property="og:site_name" content="53hor.net" />
<meta property="og:title" content="Adam Carpenter (53hornet)" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.53hor.net" />
<style>
- @font-face {
- font-family: "Iosevka Slab";
- font-display: swap;
- src: url("/assets/iosevka-slab-regular.woff2");
- }
-
- :root {
- --balboa: #195970;
- --ruby: #9b111e;
- --slate: #b9c2ca;
- --charcoal: #798d94;
- --white: white;
- --box-radius: 0.5em;
- --box-border: 0.5em solid var(--white);
- }
-
- body {
- font-family: "Iosevka Slab", monospace;
- font-size: 1.5em;
- background-color: var(--balboa);
- color: var(--white);
- max-width: 50em;
- margin: auto;
- padding: 1em;
- }
-
- hr {
- color: var(--white);
- }
-
- nav {
- list-style-type: none;
- text-align: center;
- }
-
- nav ul {
- padding: 0;
- margin: 0;
- }
-
- nav li {
- display: inline-block;
- margin: 0.5em;
- padding: 0.5em;
- }
-
- nav svg {
- padding-right: 0.5em;
- width: 24px;
- height: 24px;
- }
-
-
- nav svg path,
- nav svg rect {
- fill: var(--white);
- }
-
- nav a:link,
- nav a:visited,
- nav a:hover,
- nav a:active {
- display: flex;
- align-items: center;
- color: var(--white);
- text-decoration: none;
- }
-
- a:link {
- color: var(--slate);
- }
-
- a:visited {
- color: var(--charcoal);
- }
-
- pre {
- white-space: pre-wrap;
- display: block;
- background-color: var(--charcoal);
- padding: 1em;
- border-radius: var(--box-radius);
- border-left: var(--box-border);
- border-right: var(--box-border);
- overflow: auto;
- }
-
- .description {
- background-color: var(--ruby);
- padding: 1em;
- border-radius: var(--box-radius);
- border-left: var(--box-border);
- border-right: var(--box-border);
- }
-
- h1,
- blockquote {
- font-style: oblique;
- }
-
- header {
- text-align: center;
- }
-
- article ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
-
- article ul li {
- padding: 0.5em;
- }
-
- article ul li:before {
- content: "➙";
- padding-right: 0.5em;
- }
-
- article ol li {
- padding: 0.5em;
- }
-
- p img {
- display: block;
- margin-top: 1em;
- margin-left: auto;
- margin-right: auto;
- max-width: 75%;
- height: auto;
- border-radius: var(--box-radius);
- border-left: var(--box-border);
- border-right: var(--box-border);
- }
-
- iframe {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
-
- .list {
- overflow-x: auto;
- }
-
- .list table {
- width: 100%;
- }
-
- .list td,
- th {
- padding: 0.5em;
- text-align: left;
- border-bottom: 1px solid var(--charcoal);
- }
-
- .form {
- text-align: center;
- }
-
- .form input {
- font-size: 1em;
- margin-top: 1em;
- border-radius: 3em;
- box-sizing: border-box;
- padding: 0.5em;
- border: 0;
- }
-
- .form .description {
- display: none;
- }
+ <?php include('./includes/style.css'); ?>
</style>
- <?php
- if (isset($title)) {
- printf('<title>53hornet ➙ %s</title>', $title);
- } else {
- echo '<title>53hornet</title>';
- }
- ?>
-
<link rel="icon" href="/assets/53hornet.svg" type="image/svg+xml">
</head>
<body>
- <?php
- include('nav.php');
- ?>
+ <?php include('nav.php'); ?>
<article>
diff --git a/includes/style.css b/includes/style.css
new file mode 100644
index 0000000..e3189fd
--- /dev/null
+++ b/includes/style.css
@@ -0,0 +1,181 @@
+@font-face {
+ font-family: "Iosevka Slab";
+ font-display: swap;
+ src: url("/assets/iosevka-slab-regular.woff2");
+}
+
+:root {
+ --balboa: #195970;
+ --ruby: #9b111e;
+ --slate: #b9c2ca;
+ --charcoal: #798d94;
+ --white: white;
+ --box-radius: 0.25em;
+ --box-border: 0.5em solid var(--white);
+}
+
+body {
+ font-family: "Iosevka Slab", monospace;
+ font-size: 1.5em;
+ background-color: var(--balboa);
+ color: var(--white);
+ max-width: 50em;
+ margin: auto;
+ padding: 1em;
+}
+
+hr {
+ color: var(--white);
+}
+
+nav {
+ list-style-type: none;
+ text-align: center;
+}
+
+nav ul {
+ padding: 0;
+ margin: 0;
+}
+
+nav li {
+ display: inline-block;
+ margin: 0.5em;
+ padding: 0.5em;
+}
+
+nav svg {
+ padding-right: 0.5em;
+ width: 24px;
+ height: 24px;
+}
+
+nav svg path,
+nav svg rect {
+ fill: var(--white);
+}
+
+a:link {
+ color: var(--slate);
+ background-color: var(--balboa);
+ border-radius: var(--box-radius);
+}
+
+a:visited {
+ color: var(--charcoal);
+}
+
+a:hover {
+ transition: 0.25s;
+ background-color: var(--slate);
+ color: var(--balboa);
+ text-decoration: none;
+}
+
+nav a:link,
+nav a:visited,
+nav a:hover,
+nav a:active {
+ background-color: var(--balboa);
+ display: flex;
+ align-items: center;
+ color: var(--white);
+ text-decoration: none;
+}
+
+pre {
+ white-space: pre-wrap;
+ display: block;
+ background-color: var(--charcoal);
+ padding: 1em;
+ border-radius: var(--box-radius);
+ border-left: var(--box-border);
+ border-right: var(--box-border);
+ overflow: auto;
+}
+
+.description {
+ background-color: var(--ruby);
+ padding: 1em;
+ border-radius: var(--box-radius);
+ border-left: var(--box-border);
+ border-right: var(--box-border);
+}
+
+h1,
+blockquote {
+ font-style: oblique;
+}
+
+header {
+ text-align: center;
+}
+
+article ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+article ul li {
+ padding: 0.5em;
+}
+
+article ul li:before {
+ content: "➙";
+ padding-right: 0.5em;
+}
+
+article ol li {
+ padding: 0.5em;
+}
+
+p img {
+ display: block;
+ margin-top: 1em;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75%;
+ height: auto;
+ border-radius: var(--box-radius);
+ border-left: var(--box-border);
+ border-right: var(--box-border);
+}
+
+iframe {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.list {
+ overflow-x: auto;
+}
+
+.list table {
+ width: 100%;
+}
+
+.list td,
+th {
+ padding: 0.5em;
+ text-align: left;
+ border-bottom: 1px solid var(--charcoal);
+}
+
+.form {
+ text-align: center;
+}
+
+.form input {
+ font-size: 1em;
+ margin-top: 1em;
+ border-radius: 3em;
+ box-sizing: border-box;
+ padding: 0.5em;
+ border: 0;
+}
+
+.form .description {
+ display: none;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 00:50:10 +0000