From b0620e7d70c1130f770fe3eaab0fd2bd23a1cc6d Mon Sep 17 00:00:00 2001 From: "E.L. Guerrero" Date: Sun, 30 Jun 2024 05:25:12 -0400 Subject: [PATCH] feat: add subpages --- 001.html | 66 ++++++++++++++++++++++ assets/css/font.css | 2 +- assets/css/main.css | 115 +++++++++++++++++++++++++++------------ assets/css/variables.css | 9 +-- index.html | 70 ++++++++++++------------ 5 files changed, 187 insertions(+), 75 deletions(-) create mode 100644 001.html diff --git a/001.html b/001.html new file mode 100644 index 0000000..e8d26d3 --- /dev/null +++ b/001.html @@ -0,0 +1,66 @@ + + + + + + + some eyes see you (some eyes do not see you) + + + + + + + + + + +
+
+
+
+
+ There's nothing we really need to do that isn't dangerous. Eighth Street artists knew this years ago : constantly spoke of risk. But what's meant by risk? Lose something? Property, life? Principles? The way to lose our principles is to examine them, to give them an airing. +
+

+ ☜ What else do you want to see? +

+
+ + + diff --git a/assets/css/font.css b/assets/css/font.css index e9fbc49..4f8ea15 100644 --- a/assets/css/font.css +++ b/assets/css/font.css @@ -2,6 +2,6 @@ @font-face { font-family: "Selectric Serif"; src: local("Selectric Serif"), - url("../fonts/Selectric Serif.woff") format("woff"); + url("../fonts/SelectricRoman.woff") format("woff"); font-display: swap; } diff --git a/assets/css/main.css b/assets/css/main.css index 01f666a..6ed85f4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -15,40 +15,6 @@ body { box-sizing: border-box; } -/* ------- Main ------- */ -main { - margin: auto; - display: grid; - grid-template-columns: repeat(4, 25%); - position: relative; - width: 80%; - height: 100vh; -} - -main > a:nth-child(3n+1) { - position: relative; - bottom: calc(10% - 120px); - left: 25px; - width: 220px; - justify-self: center; -} - -main > a:nth-child(3n+2) { - position: relative; - bottom: calc(25% - 40px); - right: 20px; - width: 220px; - justify-self: start; -} - -main > a:nth-child(3n+3) { - position: relative; - bottom: calc(30% - 200px); - left: -30px; - width: 220px; - justify-self: end; -} - .hidden { clip: rect(0 0 0 0); clip-path: inset(50%); @@ -72,6 +38,85 @@ div:focus-visible { outline: none; } +/* ------- Main ------- */ +main.home { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 25%); + position: relative; + width: 80%; + height: 100vh; +} + +main.home a:nth-child(3n+1) { + position: relative; + bottom: calc(10% - 120px); + left: 25px; + width: 220px; + justify-self: center; +} + +main.home a:nth-child(3n+2) { + position: relative; + bottom: calc(25% - 40px); + right: 20px; + width: 220px; + justify-self: start; +} + +main.home a:nth-child(3n+3) { + position: relative; + bottom: calc(30% - 200px); + left: -30px; + width: 220px; + justify-self: end; +} + +/* ------- Subpages ------- */ +main.subpage { + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + width: 60%; + height: 100%; + font-family: var(--font-serif); +} + +main.subpage .eye .iris:hover, +main.subpage .eye .iris:focus { + height: 70px; + cursor: auto; +} + +main.subpage article { + position: relative; + font-size: var(--font-size--default); + color: var(--grey); +} + +main.subpage p { + margin-top: 1.5rem; + align-self: start; + font-size: var(--font-size--medium); +} + +main.subpage a, +main.subpage a:visited { + text-decoration: underline; + text-underline-offset: 4px; + text-decoration-style: wavy; + text-decoration-thickness: 1px; + color: var(--grey); +} + +main.subpage a:hover, +main.subpage a:focus { + text-decoration-color: var(--orange); +} + /* ------- Eye ------- CSS blinking eye animation from https://codepen.io/creme/pen/rdjXav @@ -220,6 +265,6 @@ https://codepen.io/creme/pen/rdjXav .eye .iris:hover, .eye .iris:focus { - cursor: pointer; height: 20px; + cursor: pointer; } diff --git a/assets/css/variables.css b/assets/css/variables.css index 1c9e108..4853ca8 100644 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -2,13 +2,14 @@ html { /* Typography */ --font-serif: "Selectric Serif", sans-serif; - --font-size--default: 2.5rem; - --font-size--small: 1.2rem; - --font-size--medium: 2.2rem; - --font-size--large: 2.5rem; + --font-size--default: 1.2rem; + --font-size--small: 1rem; + --font-size--medium: 1.1rem; + --font-size--large: 1.3rem; /* Colours */ --black: #393144; + --grey: #505050; --beige: #F2EEE9; --white: #DEE7E8; --lightBlue: #85C1FF; diff --git a/index.html b/index.html index c86061e..75ac186 100644 --- a/index.html +++ b/index.html @@ -50,121 +50,121 @@ -
- - +
+ +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +