Rough mockup

This commit is contained in:
Emi Simpson 2023-10-31 10:43:53 -04:00
commit 2d524bc7d1
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
8 changed files with 138 additions and 0 deletions

2
.gitattributes vendored Normal file
View File

@ -0,0 +1,2 @@
*.woff2 filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text

BIN
generale-station.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

45
index.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title> Shapes Comic </title>
<link rel="stylesheet" href="style.css"/>
<link rel="preload" href="starstreak.woff2" as="font"/>
<link rel="preload" href="general-station.woff2" as="font"/>
<style>
</style>
</head>
<body>
<header>
<img src="logo.webp" alt="Shapes Comic"/>
<span class="subtitle">An interstellar story of life, death, love, and hate</span>
<nav>
<h3>// [comic] \\</h3>
<a href="#">Librarium</a>
<h3>// [general] \\</h3>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Support</a>
</nav>
</header>
<main>
<div>
<img src="page0.webp" alt="If you're hearing this, bug the comic creator about adding alt text"/>
<img src="page1.webp" alt="If you're hearing this, bug the comic creator about adding alt text"/>
</div>
<nav>
<div class="navsec">
<a href="/0">&lt;</a>
</div>
<div class="navsec">
<a href="#prev-chapter">&lt;&lt;&lt;</a>
<a href="#prev-book">&lt;|</a>
<a href="#next-book">|&gt;</a>
<a href="#next-chapter">&gt;&gt;&gt;</a>
</div>
<div class="navsec">
<a href="#next-page">&gt;</a>
</div>
</nav>
</main>
</body>
</html>

BIN
logo.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
page0.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
page1.webp (Stored with Git LFS) Normal file

Binary file not shown.

BIN
starstreak.woff2 (Stored with Git LFS) Normal file

Binary file not shown.

76
style.sass Normal file
View File

@ -0,0 +1,76 @@
body
background-color: #10011f
grid-template-columns: 500px 1fr
display: grid
color: white
font-family: "Generale Station"
padding-top: 30px
padding-right: 50px
header
display: grid
grid-template-rows: 0fr 0fr 1fr
text-align: center
justify-items: center
padding: 0 40px
.subtitle
text-transform: uppercase
font-family: "Starstreak"
font-size: 16px
margin-top: 10px
nav
background-color: #332044
display: flex
flex-direction: column
gap: 15px
margin-top: 30px
width: 100%
align-items: center
font-size: 1.2em
h3
text-align: center
a
text-align: left
width: 180px
color: #dbb7ff
&::before
content: "> "
main
& > div
display: grid
grid-template-columns: 1fr 1fr
gap: 10px
img
width: 100%
nav
display: flex
flex-direction: row
justify-content: center
gap: 24px
margin-top: 20px
.navsec
display: flex
flex-direction: row
gap: 24px
background-color: #332044
padding: 10px 20px
a
font-size: 2em
color: #dbb7ff
text-decoration: none
@font-face
font-family: Starstreak
src: url("starstreak.woff2") format("woff2")
@font-face
font-family: "Generale Station"
src: url("generale-station.woff2") format("woff2")