rhi
/
yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

start of comm page

This commit is contained in:
Rhiannon Morris 2022-05-18 04:44:15 +02:00
parent b8cabf2765
commit d6c63e4aaf
3 changed files with 114 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile
View File

@ -1,6 +1,6 @@
FONTS = $(shell find fonts -type f)
CSS = style.css where.css
PAGES = index.html where.html pubkey.txt
CSS = style.css where.css comms.css
PAGES = index.html where.html comms.html pubkey.txt
MEDIA = $(patsubst %,media/%, \
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 \

70
comms.css Normal file
View 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
View 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>