feat: add subpages
This commit is contained in:
parent
5a75c33ee6
commit
b0620e7d70
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="robots" content="noai, noimageai">
|
||||
<title>some eyes see you (some eyes do not see you)</title>
|
||||
<link rel="preload" as="font" href="/assets/fonts/SelectricRoman.woff" type="font/woff" crossorigin="anonymous">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<!--
|
||||
Hello, Navi
|
||||
** * * *
|
||||
*** *
|
||||
*
|
||||
*
|
||||
|
||||
**
|
||||
|
||||
* * *
|
||||
**
|
||||
|
||||
* *
|
||||
*
|
||||
...
|
||||
.**o° .oo####O@*
|
||||
°Oo°.oOOO@O ..****O* .o@@
|
||||
*@ *oO**° .*O#° °#@
|
||||
°@. °#.oo°. .*O*#@#*.
|
||||
.O#O. °.oo#@#@#@###@@@@@@@O
|
||||
*o°°°##@@@@@@@@@@@*°###@@@@@
|
||||
#@°O@@#oo°. ° @@ .O@@@°oo#@o
|
||||
@@@° . O#o@o@@ .°o@@@@@#.
|
||||
.o.@@°*@@* @@@o °O@ O@@
|
||||
O@°@@@@@. * .. .° *@#@@*
|
||||
o@@@@o . @O *@. °@@#
|
||||
@@o# .@@@° **. °@@o @@@
|
||||
#@ °O**@° #@o@O@@
|
||||
o@°@O *°**o#oo*.*°°°@o*##**@@
|
||||
@@@@@@@.@ O.o*#@*#@@@Oo**#@@@
|
||||
°o@@@@@@° .# °o ** o*#@@@@°
|
||||
*@@@@O@@ °o@@@.** **OO#Oo
|
||||
.*@@@@#@@@@@###O#o#O°
|
||||
.... .....
|
||||
ᜋᜌ᜔ᜉᜄᜐᜉᜊ © 2024 E.L. Guerrero
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="subpage">
|
||||
<div class="eye">
|
||||
<div class="iris lightBlue indigo"></div>
|
||||
</div>
|
||||
<article>
|
||||
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.
|
||||
</article>
|
||||
<p>
|
||||
<a href="/">☜ What else do you want to see?</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
70
index.html
70
index.html
|
@ -50,121 +50,121 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<main class="home">
|
||||
<a href="001.html">
|
||||
<span class="hidden">001</span>
|
||||
<div class="eye">
|
||||
<div class="iris lightBlue indigo"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="002.html">
|
||||
<span class="hidden">002</span>
|
||||
<div class="eye">
|
||||
<div class="iris pink purple"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="003.html">
|
||||
<span class="hidden">003</span>
|
||||
<div class="eye">
|
||||
<div class="iris green black"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="004.html">
|
||||
<span class="hidden">004</span>
|
||||
<div class="eye">
|
||||
<div class="iris black mint"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="005.html">
|
||||
<span class="hidden">005</span>
|
||||
<div class="eye">
|
||||
<div class="iris yellow tan"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="006.html">
|
||||
<span class="hidden">006</span>
|
||||
<div class="eye">
|
||||
<div class="iris orange black"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="007.html">
|
||||
<span class="hidden">007</span>
|
||||
<div class="eye">
|
||||
<div class="iris navy white"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="008.html">
|
||||
<span class="hidden">008</span>
|
||||
<div class="eye">
|
||||
<div class="iris red lightBlue"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="009.html">
|
||||
<span class="hidden">009</span>
|
||||
<div class="eye">
|
||||
<div class="iris purple mint"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="010.html">
|
||||
<span class="hidden">010</span>
|
||||
<div class="eye">
|
||||
<div class="iris tan red"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="011.html">
|
||||
<span class="hidden">011</span>
|
||||
<div class="eye">
|
||||
<div class="iris nude red"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="012.html">
|
||||
<span class="hidden">012</span>
|
||||
<div class="eye">
|
||||
<div class="iris blue yellow"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="013.html">
|
||||
<span class="hidden">013</span>
|
||||
<div class="eye"><div class="iris pink darkBlue">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="014.html">
|
||||
<span class="hidden">014</span>
|
||||
<div class="eye">
|
||||
<div class="iris lightGreen green"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="015.html">
|
||||
<span class="hidden">015</span>
|
||||
<div class="eye">
|
||||
<div class="iris red pink"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="016.html">
|
||||
<span class="hidden">016.html</span>
|
||||
<div class="eye">
|
||||
<div class="iris purple lightBlue"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/test">
|
||||
<span class="hidden">This is a link</span>
|
||||
<a href="017.html">
|
||||
<span class="hidden">017</span>
|
||||
<div class="eye">
|
||||
<div class="iris yellow rose"></div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue