1 files changed, 196 insertions, 0 deletions

diff --git a/css/header.css b/css/header.css
new file mode 100755
index 0000000..67a9548
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,196 @@
+:root {
+  --heading-height: 13.25em;
+}
+header {
+  pointer-events: none;
+  position: fixed;
+  width: 100%;
+  height: var(--heading-height);
+}
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --header-border-color: black;
+  --header-border-thickness: 0.3em;
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --header-border-color: white;
+    --header-border-thickness: 0.2em;
+  }
+}
+
+[data-theme="dark"] {
+  --header-border-color: white;
+  --header-border-thickness: 0.2em;
+}
+
+header::before {
+  pointer-events: all;
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: 6em;
+  width: 1024px;
+  height: calc(var(--heading-height) + 10em);
+  z-index: -1;
+  transform: skewY(-3.5deg);
+  background: 
+    linear-gradient(225deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 100%),
+    var(--banner-url) no-repeat center var(--scroll-percent);
+  background-size: cover;
+  border-bottom: var(--header-border-thickness) solid var(--header-border-color);
+}
+
+
+@media only screen and (min-width: 1024px) {
+  header::before {
+    width: 100%;
+  } 
+}
+
+h1 {
+  font-size: calc(0.8em + 2.6vw);
+  font-weight: 700;
+  letter-spacing: .01em;
+  text-shadow: .05em .05em #111;
+  color: #fff;
+}
+
+body {
+    min-height: 100vh;
+}
+
+body > main {
+  padding: calc(var(--heading-height) - 2em) 4em 0;
+}
+
+/*
+.site-title a {
+  margin: 0;
+  color: var(--pico-secondary);
+  transition-duration: 0.25s;
+}
+
+.site-title a:hover {
+  color: var(--pico-contrast-hover);
+}
+
+.site-title a span {
+  color: var(--pico-contrast-hover);
+}
+
+.site-title a[aria-current="page"] {
+  color: var(--pico-secondary-hover);
+  font-weight: bold;
+}
+
+.site-title a[aria-current="page"]:hover {
+  color: var(--pico-contrast-hover);
+}
+
+.site-title a[aria-current="page"] span {
+  color: var(--pico-primary-hover);
+}
+  */
+
+.site-title a {
+  color: var(--pico-secondary-hover);
+  font-weight: bold;
+}
+
+.site-title a {
+  color: var(--pico-contrast-hover);
+}
+
+.site-title a span {
+  color: var(--pico-primary-hover);
+}
+
+.nav-list {
+  list-style: none;
+  display: flex;
+  gap: 1.5rem;
+  padding: 0;
+  margin: 0;
+}
+
+.header-aside {
+  margin-left: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.theme-dropdown summary {
+  cursor: pointer;
+}
+
+.header-inner {
+  pointer-events: all;
+  display: flex;
+  justify-content: space-between;
+  align-items: top;
+  position: relative;
+
+}
+
+.header-main {
+  display: flex;
+  flex-direction: column;
+}
+
+.main-nav {
+  margin-top: -0.5rem;
+}
+
+.main-nav ul li a {
+  text-decoration: none;
+}
+
+.dropdown-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown summary {
+  border: none;
+}
+
+nav.theme-selector {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.theme-selector details summary {
+  border-width: 2px;
+}
+
+.theme-selector {
+  margin-top: 1em;
+}
+
+@media (max-width: 500px) {
+  nav.theme-selector {
+    position: fixed;
+    top: 2px;
+    right: 2px;
+  }
+}
+
+.pico-delinkify {
+  text-decoration: none;
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+}
+
+footer p {
+  display: inline-block;
+}
\ No newline at end of file