start of comm page
This commit is contained in:
parent
b8cabf2765
commit
d6c63e4aaf
3 changed files with 114 additions and 2 deletions
4
Makefile
4
Makefile
|
@ -1,6 +1,6 @@
|
||||||
FONTS = $(shell find fonts -type f)
|
FONTS = $(shell find fonts -type f)
|
||||||
CSS = style.css where.css
|
CSS = style.css where.css comms.css
|
||||||
PAGES = index.html where.html pubkey.txt
|
PAGES = index.html where.html comms.html pubkey.txt
|
||||||
MEDIA = $(patsubst %,media/%, \
|
MEDIA = $(patsubst %,media/%, \
|
||||||
bg.png bg_2x.png bg_dim.png bg_2x_dim.png snugl.png \
|
bg.png bg_2x.png bg_dim.png bg_2x_dim.png snugl.png \
|
||||||
mlem.gif mlem_static.png cybre.png donphan.png types.png \
|
mlem.gif mlem_static.png cybre.png donphan.png types.png \
|
||||||
|
|
70
comms.css
Normal file
70
comms.css
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
@import url(style.css);
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--img-width: 1050px;
|
||||||
|
--img-height: 875px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: calc(var(--img-width) + 150px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#examples {
|
||||||
|
height: var(--img-height);
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|
||||||
|
filter: drop-shadow(0 0 30px var(--glow-col));
|
||||||
|
}
|
||||||
|
|
||||||
|
#examples, #terms {
|
||||||
|
width: var(--img-width);
|
||||||
|
padding: 1.5em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 1em auto;
|
||||||
|
|
||||||
|
border: 3px solid var(--glow-col);
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#examples section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2::before, h2::after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#examples section > * {
|
||||||
|
background: hsla(320deg, 40%, 20%, 60%);
|
||||||
|
font-size: 200%;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#terms { background: hsla(0deg, 0%, 100%, 75%); }
|
||||||
|
|
||||||
|
#terms {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
color: black;
|
||||||
|
text-shadow: none;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary > * {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-contrast: high), (prefers-color-scheme: dark) {
|
||||||
|
#terms { background: hsla(0deg, 0%, 0%, 65%); }
|
||||||
|
#terms { color: white; }
|
||||||
|
}
|
42
comms.html
Normal file
42
comms.html
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang=en>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
|
||||||
|
<link rel=icon href=media/icon.svg>
|
||||||
|
<link rel=stylesheet href=comms.css>
|
||||||
|
|
||||||
|
<title>commission info</title>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<h1>commission info</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id=examples>
|
||||||
|
<section>
|
||||||
|
<p>sketch</p>
|
||||||
|
<p class=price>€25
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>flat</p>
|
||||||
|
<p class=price>€45
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p>shaded</p>
|
||||||
|
<p class=price>€60
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section id=terms>
|
||||||
|
<ul>
|
||||||
|
<li>complex characters, backgrounds, etc, might cost extra. ask to make sure!
|
||||||
|
<li>blah blah
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href=/>main</a>
|
||||||
|
</nav>
|
||||||
|
</main>
|
Loading…
Add table
Reference in a new issue