knights/some-eyes-see-you
knights
/
some-eyes-see-you
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add subpages

This commit is contained in:
E.L. Guerrero 2024-06-30 05:25:12 -04:00
parent 5a75c33ee6
commit b0620e7d70
Signed by: knights
GPG Key ID: 6201533059C29A0F
5 changed files with 187 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
001.html Normal file
View File

@ -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="/">&#9756 What else do you want to see?</a>
</p>
</main>
</body>
</html>

2
assets/css/font.css
View File

@ -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;
} }

115
assets/css/main.css
View File

@ -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;
} }

9
assets/css/variables.css
View File

@ -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
View File

@ -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>