diff --git a/001.html b/001.html
new file mode 100644
index 0000000..e8d26d3
--- /dev/null
+++ b/001.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ 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 @@
-