diff options
Diffstat (limited to 'includes')
-rw-r--r-- | includes/head.php | 188 | ||||
-rw-r--r-- | includes/style.css | 181 |
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; +} |