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-face {
|
||||||
font-family: "Selectric Serif";
|
font-family: "Selectric Serif";
|
||||||
src: local("Selectric Serif"),
|
src: local("Selectric Serif"),
|
||||||
url("../fonts/Selectric Serif.woff") format("woff");
|
url("../fonts/SelectricRoman.woff") format("woff");
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,40 +15,6 @@ body {
|
||||||
box-sizing: border-box;
|
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 {
|
.hidden {
|
||||||
clip: rect(0 0 0 0);
|
clip: rect(0 0 0 0);
|
||||||
clip-path: inset(50%);
|
clip-path: inset(50%);
|
||||||
|
@ -72,6 +38,85 @@ div:focus-visible {
|
||||||
outline: none;
|
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 -------
|
/* ------- Eye -------
|
||||||
CSS blinking eye animation from
|
CSS blinking eye animation from
|
||||||
https://codepen.io/creme/pen/rdjXav
|
https://codepen.io/creme/pen/rdjXav
|
||||||
|
@ -220,6 +265,6 @@ https://codepen.io/creme/pen/rdjXav
|
||||||
|
|
||||||
.eye .iris:hover,
|
.eye .iris:hover,
|
||||||
.eye .iris:focus {
|
.eye .iris:focus {
|
||||||
cursor: pointer;
|
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,13 +2,14 @@ html {
|
||||||
/* Typography */
|
/* Typography */
|
||||||
--font-serif: "Selectric Serif", sans-serif;
|
--font-serif: "Selectric Serif", sans-serif;
|
||||||
|
|
||||||
--font-size--default: 2.5rem;
|
--font-size--default: 1.2rem;
|
||||||
--font-size--small: 1.2rem;
|
--font-size--small: 1rem;
|
||||||
--font-size--medium: 2.2rem;
|
--font-size--medium: 1.1rem;
|
||||||
--font-size--large: 2.5rem;
|
--font-size--large: 1.3rem;
|
||||||
|
|
||||||
/* Colours */
|
/* Colours */
|
||||||
--black: #393144;
|
--black: #393144;
|
||||||
|
--grey: #505050;
|
||||||
--beige: #F2EEE9;
|
--beige: #F2EEE9;
|
||||||
--white: #DEE7E8;
|
--white: #DEE7E8;
|
||||||
--lightBlue: #85C1FF;
|
--lightBlue: #85C1FF;
|
||||||
|
|
70
index.html
70
index.html
|
@ -50,121 +50,121 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main>
|
<main class="home">
|
||||||
<a href="/test">
|
<a href="001.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">001</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris lightBlue indigo"></div>
|
<div class="iris lightBlue indigo"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="002.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">002</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris pink purple"></div>
|
<div class="iris pink purple"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="003.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">003</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris green black"></div>
|
<div class="iris green black"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="004.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">004</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris black mint"></div>
|
<div class="iris black mint"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="005.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">005</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris yellow tan"></div>
|
<div class="iris yellow tan"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="006.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">006</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris orange black"></div>
|
<div class="iris orange black"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="007.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">007</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris navy white"></div>
|
<div class="iris navy white"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="008.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">008</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris red lightBlue"></div>
|
<div class="iris red lightBlue"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="009.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">009</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris purple mint"></div>
|
<div class="iris purple mint"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="010.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">010</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris tan red"></div>
|
<div class="iris tan red"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="011.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">011</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris nude red"></div>
|
<div class="iris nude red"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="012.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">012</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris blue yellow"></div>
|
<div class="iris blue yellow"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="013.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">013</span>
|
||||||
<div class="eye"><div class="iris pink darkBlue">
|
<div class="eye"><div class="iris pink darkBlue">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="014.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">014</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris lightGreen green"></div>
|
<div class="iris lightGreen green"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="015.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">015</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris red pink"></div>
|
<div class="iris red pink"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="016.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">016.html</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris purple lightBlue"></div>
|
<div class="iris purple lightBlue"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/test">
|
<a href="017.html">
|
||||||
<span class="hidden">This is a link</span>
|
<span class="hidden">017</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris yellow rose"></div>
|
<div class="iris yellow rose"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue