New layout, uses nextjs

3 files changed, 232 insertions, 0 deletions

diff --git a/styles/index.module.css b/styles/index.module.css
new file mode 100644
index 0000000..2314363
--- /dev/null
+++ b/styles/index.module.css
@@ -0,0 +1,11 @@
+.glance {
+  margin: var(--text-padding);
+  display: grid;
+  grid-template-columns: fit-content(35%) 1fr;
+  grid-row-gap: calc(.5 * var(--text-padding));
+}
+
+.glance .label {
+  color: var(--text-dimmed);
+  margin-right: var(--text-padding);
+}
diff --git a/styles/layout.css b/styles/layout.css
new file mode 100644
index 0000000..f2b2dba
--- /dev/null
+++ b/styles/layout.css
@@ -0,0 +1,181 @@
+:root {
+  --header-height: 400px;
+  --header-overlap: 150px;
+  --header-bar-height: 48px;
+  --main-width: 600px;
+  --footer-spacing: 8px;
+  --page-background: #262626;
+  --main-background: #423c3c;
+  --text-bright:rgba(255,255,255,   1);
+  --text-medium:rgba(255,255,255, .75);
+  --text-dimmed:rgba(255,255,255, .55);
+  --text-padding: 16px;
+
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--page-background);
+}
+
+
+header {
+  height: calc(var(--header-height) - var(--header-overlap));
+  overflow-y: visible;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  padding: var(--text-padding);
+  padding-bottom: 0;
+  box-sizing: border-box;
+  align-items: start;
+  justify-items: flex-start;
+}
+
+header:not(.homepage) {
+  justify-content: space-between;
+}
+
+header.homepage {
+  flex-direction: column;
+  align-items: center;
+  height: calc(var(--header-height) - var(--header-overlap) + var(--header-bar-height));
+}
+
+header.homepage::before {
+  content: ' ';
+  flex: 1;
+}
+
+header .siteTitle {
+  margin: 0;
+}
+
+header.homepage .siteTitle {
+  font-size: 4em;
+}
+
+header:not(.homepage) .siteTitle {
+  font-size: 1.2em;
+}
+
+header nav {
+  display: block;
+  border: solid 5px transparent;
+}
+
+header nav a {
+  margin: 0 calc(1.5 * var(--text-padding));
+}
+
+header.homepage nav {
+  border: none;
+  background: var(--main-background);
+  height: var(--header-bar-height);
+  width: var(--main-width);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  border-bottom: solid 1px var(--text-dimmed);
+}
+
+header.homepage nav a {
+  height: 100%;
+  padding: 14px;
+  box-sizing: border-box;
+}
+
+
+header .headerBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 400px;
+  z-index: -1;
+  user-select: none;
+}
+
+header .headerBackground img {
+  z-index: -1;
+  object-fit: cover;
+  object-position: center 75%;
+}
+
+header .headerBackground::after {
+  content: ' ';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.35);
+}
+
+header:not(.homepage) + h1 {
+  width: var(--main-width);
+  margin: 0 auto;
+  padding: var(--text-padding);
+  box-sizing: border-box;
+  height: 80px;
+  margin-top: -80px;
+}
+
+main {
+  font-family: Arial, sans-serif;
+}
+
+main.mainColumn {
+  width: var(--main-width);
+  box-sizing: border-box;
+  padding: var(--text-padding);
+  margin: 0 auto;
+  background: var(--main-background);
+  min-height: calc(var(--header-overlap) + 100px);
+  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+}
+
+header.homepage + main.mainColumn {
+  min-height: calc(var(--header-overlap) + 100px - var(--header-bar-height));
+}
+
+main.mainColumn aside.infobar {
+  margin: calc(-1 * var(--text-padding));
+  margin-bottom: var(--text-padding);
+  padding: var(--text-padding);
+  background: var(--main-background);
+  height: var(--header-bar-height);
+  width: var(--main-width);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: solid 1px var(--text-dimmed);
+}
+
+main.mainColumn > p:first-child,
+main.mainColumn .infobar + p {
+  margin-top: 0;
+}
+
+footer {
+  flex: 1;
+  align-items: end;
+  box-sizing: border-box;
+  width: var(--main-width);
+  margin: 0 auto;
+  padding: var(--text-padding);
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--footer-spacing);
+}
+
+footer span {
+  flex: 1;
+}
+
+footer a {
+  margin-left: calc(2 * var(--text-padding));
+}
diff --git a/styles/text.css b/styles/text.css
new file mode 100644
index 0000000..93364a7
--- /dev/null
+++ b/styles/text.css
@@ -0,0 +1,40 @@
+body {
+  color: var(--text-medium);
+}
+
+a {
+  color: var(--text-bright);
+  font-family: 'Victor Mono Oblique', sans-serif;
+}
+
+.siteTitle {
+  font-family: 'Victor Mono';
+  opacity: .8;
+  font-style: italic;
+  text-decoration: none;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+h1, .pageTitle {
+  font-family: 'Victor Mono Oblique', sans-serif;
+  opacity: .8;
+}
+
+h2, h3, h4, h5 {
+  color: var(--text-bright);
+  font-family: 'Victor Mono Oblique', sans-serif;
+}
+
+em {
+  color: var(--text-bright);
+}
+
+main {
+  font-family: 'Victor Mono', sans-serif;
+}
+
+footer {
+  font-family: 'Victor Mono', sans-serif;
+  opacity: .5;
+}