more comm page stuff
This commit is contained in:
parent
1b9de6ce23
commit
06b7ff54b6
9 changed files with 194 additions and 177 deletions
3
Makefile
3
Makefile
|
|
@ -1,10 +1,11 @@
|
|||
FONTS = $(shell find fonts -type f)
|
||||
CSS = style.css where.css comms.css
|
||||
CSS = base.css index.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 \
|
||||
niss-nisse.mp3 niss-nisse.ogg \
|
||||
comm-examples.png \
|
||||
) \
|
||||
$(wildcard media/*.svg)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import url(fonts/muller/muller.css);
|
||||
@import url(fonts/noto/noto.css);
|
||||
|
||||
body {
|
||||
:root {
|
||||
--gradient:
|
||||
linear-gradient(135deg,
|
||||
hsl(42deg, 92%, 70%),
|
||||
|
|
@ -13,6 +13,8 @@ body {
|
|||
);
|
||||
--size: 1.75rem;
|
||||
--weight: 600;
|
||||
--link-color: hsl(196deg, 100%, 85%);
|
||||
--hover-color: hsl(50deg, 100%, 82%);
|
||||
|
||||
background:
|
||||
-webkit-image-set(url(media/bg.png) 1x,
|
||||
|
|
@ -60,10 +62,7 @@ main {
|
|||
--glow-col: hsla(318deg, 100%, 98%, 100%);
|
||||
border: 1px solid var(--glow-col);
|
||||
box-shadow: 0 0 25px var(--glow-col) inset;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 35em;
|
||||
padding: 1em;
|
||||
margin: 0 auto 1em;
|
||||
}
|
||||
|
|
@ -85,44 +84,6 @@ b {
|
|||
font-weight: 800;
|
||||
}
|
||||
|
||||
#mlem {
|
||||
margin: 36px auto -50px;
|
||||
position: relative;
|
||||
height: 219px;
|
||||
width: 420px;
|
||||
}
|
||||
.mlem-text {
|
||||
font-size: var(--size);
|
||||
position: absolute;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
.niss { bottom: 100%; left: 20px; }
|
||||
.nisse { bottom: 85%; right: 0; }
|
||||
/* doing this to an animation might be too much
|
||||
#mlem picture {
|
||||
filter: drop-shadow(0 0 30px var(--glow-col));
|
||||
}
|
||||
*/
|
||||
#mlem img {
|
||||
/* firefox doesn't support "pixelated" but does treat "crisp-edges"
|
||||
* to mean that */
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
ruby-position: under;
|
||||
}
|
||||
header h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
rt {
|
||||
font-size: 60%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 4px;
|
||||
width: 75%;
|
||||
|
|
@ -133,49 +94,20 @@ hr {
|
|||
margin: 20px auto;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-row-gap: 6px;
|
||||
}
|
||||
|
||||
dt {
|
||||
text-align: right;
|
||||
}
|
||||
dd {
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (hover) {
|
||||
[title] {
|
||||
text-decoration: dotted underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
[title]::after {
|
||||
content: url(media/info.svg);
|
||||
display: inline-block;
|
||||
width: 0.75em; height: 0.75em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
[title]::after {
|
||||
content: attr(title);
|
||||
font-size: 75%;
|
||||
font-weight: var(--weight);
|
||||
display: inline-block;
|
||||
}
|
||||
.ipa {
|
||||
font-family: NotoSans;
|
||||
font-weight: 900;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: hsl(196deg, 100%, 85%);
|
||||
color: var(--link-color);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
a[href]:where(:hover,:focus) {
|
||||
color: hsl(50deg, 100%, 82%);
|
||||
color: var(--hover-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -188,49 +120,6 @@ a[href]:where(:hover,:focus) {
|
|||
content: var(--around-image);
|
||||
}
|
||||
|
||||
rt { --around-image: url(media/star.svg); }
|
||||
h1, h2 { --around-image: url(media/sparkles.svg); }
|
||||
|
||||
|
||||
.emojo, [href='#listen']::before {
|
||||
vertical-align: middle;
|
||||
height: 1.2em; width: 1.2em;
|
||||
}
|
||||
|
||||
[href='#listen']::before {
|
||||
content: url(media/speaker.svg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#links .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
filter: drop-shadow(0 0 10px var(--glow-col));
|
||||
}
|
||||
|
||||
|
||||
.ipa {
|
||||
font-family: NotoSans;
|
||||
font-weight: 900;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
#links ul {
|
||||
display: grid;
|
||||
grid-column-gap: 1em;
|
||||
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
|
||||
|
||||
max-width: 85%;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
#links li { list-style: none; }
|
||||
|
||||
|
||||
/* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */
|
||||
@media (-moz-touch-enabled) {
|
||||
65
comms.css
65
comms.css
|
|
@ -1,4 +1,4 @@
|
|||
@import url(style.css);
|
||||
@import url(base.css);
|
||||
|
||||
:root {
|
||||
--img-width: 1050px;
|
||||
|
|
@ -6,22 +6,31 @@
|
|||
}
|
||||
|
||||
|
||||
main {
|
||||
max-width: calc(var(--img-width) + 150px);
|
||||
main { max-width: calc(var(--img-width) + 150px); }
|
||||
|
||||
h1 {
|
||||
font-size: 250%;
|
||||
--around-image: url(media/sparkles.svg);
|
||||
}
|
||||
|
||||
#examples, #examples > * {
|
||||
height: var(--img-height);
|
||||
width: var(--img-width);
|
||||
}
|
||||
|
||||
#examples {
|
||||
height: var(--img-height);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
filter: drop-shadow(0 0 30px var(--glow-col));
|
||||
#examples > * {
|
||||
position: absolute;
|
||||
top: 0px; left: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#examples, #terms {
|
||||
width: var(--img-width);
|
||||
padding: 1.5em;
|
||||
box-sizing: border-box;
|
||||
margin: 1em auto;
|
||||
|
||||
|
|
@ -29,42 +38,40 @@ main {
|
|||
border-radius: 1em;
|
||||
}
|
||||
|
||||
#examples section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
#examples dl {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
h2::before, h2::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#examples section > * {
|
||||
#examples dl > * {
|
||||
background: hsla(320deg, 40%, 20%, 60%);
|
||||
font-size: 200%;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 0.125em 0 0.25em;
|
||||
}
|
||||
|
||||
#terms { background: hsla(0deg, 0%, 100%, 75%); }
|
||||
#examples dt { grid-area: 1; align-self: start; }
|
||||
#examples dd { grid-area: 2; align-self: end; }
|
||||
|
||||
#examples a { font-weight: 600; }
|
||||
|
||||
#examples dl { pointer-events: none; }
|
||||
#examples a { pointer-events: auto; }
|
||||
|
||||
#terms {
|
||||
padding: 1.5em;
|
||||
text-align: left;
|
||||
|
||||
background: hsla(45deg, 90%, 98%, 75%);
|
||||
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; }
|
||||
#terms {
|
||||
background: hsla(0deg, 0%, 0%, 65%);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
51
comms.html
51
comms.html
|
|
@ -7,36 +7,37 @@
|
|||
|
||||
<title>commission info</title>
|
||||
|
||||
<map name=example-links>
|
||||
<area href='https://gallery.niss.website/main/#require_colourexample'
|
||||
shape=rect coords='0,0,350,850'>
|
||||
<area href='https://gallery.niss.website/main/#require_flatexample'
|
||||
shape=rect coords='350,0,700,850'>
|
||||
<area href='https://gallery.niss.website/main/#require_sketchexample'
|
||||
shape=rect coords='700,0,1050,850'>
|
||||
</map>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>commission info</h1>
|
||||
</header>
|
||||
<h1>commission info</h1>
|
||||
|
||||
<div id=examples>
|
||||
<section>
|
||||
<p>sketch</p>
|
||||
<p class=price>€25
|
||||
</section>
|
||||
<section id=examples>
|
||||
<img src=media/comm-examples.png usemap=#example-links>
|
||||
|
||||
<section>
|
||||
<p>flat</p>
|
||||
<p class=price>€45
|
||||
</section>
|
||||
<dl>
|
||||
<dt><a href='https://gallery.niss.website/main/#require_colourexample'>colour</a>
|
||||
<dd><a href='https://gallery.niss.website/main/#require_colourexample'>€XX</a>
|
||||
|
||||
<section>
|
||||
<p>shaded</p>
|
||||
<p class=price>€60
|
||||
</section>
|
||||
</div>
|
||||
<dt><a href='https://gallery.niss.website/main/#require_flatexample'>flat</a>
|
||||
<dd><a href='https://gallery.niss.website/main/#require_flatexample'>€YY</a>
|
||||
|
||||
<section id=terms>
|
||||
<ul>
|
||||
<li>complex characters, backgrounds, etc, might cost extra. ask to make sure!
|
||||
<li>blah blah
|
||||
</ul>
|
||||
<dt><a href='https://gallery.niss.website/main/#require_sketchexample'>sketch</a>
|
||||
<dd><a href='https://gallery.niss.website/main/#require_sketchexample'>€ZZ</a>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<nav>
|
||||
<a href=/>main</a>
|
||||
</nav>
|
||||
<ul id=terms>
|
||||
<li>complex characters, backgrounds, etc, might cost extra. ask to make sure!
|
||||
<li>blah blah
|
||||
</ul>
|
||||
|
||||
<a href=/>main</a>
|
||||
</main>
|
||||
|
|
|
|||
116
index.css
Normal file
116
index.css
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
@import url(base.css);
|
||||
|
||||
main {
|
||||
max-width: 35em;
|
||||
}
|
||||
|
||||
|
||||
#mlem {
|
||||
margin: 36px auto -50px;
|
||||
position: relative;
|
||||
height: 219px;
|
||||
width: 420px;
|
||||
}
|
||||
.mlem-text {
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
.niss { bottom: 100%; left: 20px; }
|
||||
.nisse { bottom: 85%; right: 0; }
|
||||
/* doing this to an animation might be too much
|
||||
#mlem picture {
|
||||
filter: drop-shadow(0 0 30px var(--glow-col));
|
||||
}
|
||||
*/
|
||||
#mlem img {
|
||||
/* firefox doesn't support "pixelated" but does treat "crisp-edges"
|
||||
* to mean that */
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
ruby-position: under;
|
||||
}
|
||||
header h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
rt {
|
||||
font-size: 60%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-row-gap: 6px;
|
||||
}
|
||||
|
||||
dt {
|
||||
text-align: right;
|
||||
}
|
||||
dd {
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (hover) {
|
||||
[title] {
|
||||
text-decoration: dotted underline;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
[title]::after {
|
||||
content: url(media/info.svg);
|
||||
display: inline-block;
|
||||
width: 0.75em; height: 0.75em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
[title]::after {
|
||||
content: attr(title);
|
||||
font-size: 75%;
|
||||
font-weight: var(--weight);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
rt { --around-image: url(media/star.svg); }
|
||||
h1, h2 { --around-image: url(media/sparkles.svg); }
|
||||
|
||||
|
||||
.emojo, [href='#listen']::before {
|
||||
vertical-align: middle;
|
||||
height: 1.2em; width: 1.2em;
|
||||
}
|
||||
|
||||
[href='#listen']::before {
|
||||
content: url(media/speaker.svg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#links .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
filter: drop-shadow(0 0 10px var(--glow-col));
|
||||
}
|
||||
|
||||
#links ul {
|
||||
display: grid;
|
||||
grid-column-gap: 1em;
|
||||
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
|
||||
|
||||
max-width: 85%;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
#links li { list-style: none; }
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<link rel=icon href=media/icon.svg>
|
||||
|
||||
<link rel=stylesheet href=style.css>
|
||||
<link rel=stylesheet href=index.css>
|
||||
<title>web site more like web shite haha gottem</title>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
BIN
media/comm-examples.kra
Normal file
BIN
media/comm-examples.kra
Normal file
Binary file not shown.
BIN
media/comm-examples.png
(Stored with Git LFS)
Normal file
BIN
media/comm-examples.png
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -1,4 +1,4 @@
|
|||
@import url(style.css);
|
||||
@import url(base.css);
|
||||
|
||||
|
||||
main {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue