Rough mockup
This commit is contained in:
commit
2d524bc7d1
GPG key ID:
A12F2C2FFDC3D847
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal 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
BIN
generale-station.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
45
index.html
Normal file
45
index.html
Normal 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"><</a>
|
||||
</div>
|
||||
<div class="navsec">
|
||||
<a href="#prev-chapter"><<<</a>
|
||||
<a href="#prev-book"><|</a>
|
||||
<a href="#next-book">|></a>
|
||||
<a href="#next-chapter">>>></a>
|
||||
</div>
|
||||
<div class="navsec">
|
||||
<a href="#next-page">></a>
|
||||
</div>
|
||||
</nav>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
page0.webp
(Stored with Git LFS)
Normal file
BIN
page0.webp
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
page1.webp
(Stored with Git LFS)
Normal file
BIN
page1.webp
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
starstreak.woff2
(Stored with Git LFS)
Normal file
BIN
starstreak.woff2
(Stored with Git LFS)
Normal file
Binary file not shown.
76
style.sass
Normal file
76
style.sass
Normal 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")
|
||||
Loading…
Reference in a new issue