more comm page stuff

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)
 

base.css

@@ -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 {
+.ipa {
-  display: grid;
+  font-family: NotoSans;
-  grid-template-columns: repeat(4, auto);
+  font-weight: 900;
-  grid-row-gap: 6px;
+  font-size: 90%;
-}
-
-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;
-  }
 }
 
 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) {

comms.css

@@ -1,4 +1,4 @@
-@import url(style.css);
+@import url(base.css);
 
 :root {
   --img-width: 1050px;
@@ -6,22 +6,31 @@
 }
 
 
-main {
+main { max-width: calc(var(--img-width) + 150px); }
-    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;
+#examples > * {
-  grid-template-columns: 1fr 1fr 1fr;
+  position: absolute;
-
+  top: 0px; left: 0px;
-  filter: drop-shadow(0 0 30px var(--glow-col));
+  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 {
+#examples dl {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: 1fr 1fr 1fr;
-  justify-content: space-between;
 }
 
-h2::before, h2::after {
+#examples dl > * {
-  content: none;
-}
-
-#examples section > * {
   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 {
-  #terms { color: white; }
+    background: hsla(0deg, 0%, 0%, 65%);
+    color: white;
+  }
 }

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>
-    <h1>commission info</h1>
-  </header>
 
-  <div id=examples>
+  <section id=examples>
-    <section>
+    <img src=media/comm-examples.png usemap=#example-links>
-      <p>sketch</p>
-      <p class=price>€25
-    </section>
 
-    <section>
+    <dl>
-      <p>flat</p>
+      <dt><a href='https://gallery.niss.website/main/#require_colourexample'>colour</a>
-      <p class=price>€45
+      <dd><a href='https://gallery.niss.website/main/#require_colourexample'>€XX</a>
-    </section>
 
-    <section>
+      <dt><a href='https://gallery.niss.website/main/#require_flatexample'>flat</a>
-      <p>shaded</p>
+      <dd><a href='https://gallery.niss.website/main/#require_flatexample'>€YY</a>
-      <p class=price>€60
-    </section>
-  </div>
 
-  <section id=terms>
+      <dt><a href='https://gallery.niss.website/main/#require_sketchexample'>sketch</a>
-    <ul>
+      <dd><a href='https://gallery.niss.website/main/#require_sketchexample'>€ZZ</a>
-      <li>complex characters, backgrounds, etc, might cost extra. ask to make sure!
+    </dl>
-      <li>blah blah
-    </ul>
   </section>
 
-  <nav>
+  <ul id=terms>
-    <a href=/>main</a>
+    <li>complex characters, backgrounds, etc, might cost extra. ask to make sure!
-  </nav>
+    <li>blah blah
+  </ul>
+
+  <a href=/>main</a>
 </main>

index.css

@@ -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; }

index.html

@@ -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>

where.css

@@ -1,4 +1,4 @@
-@import url(style.css);
+@import url(base.css);
 
 
 main {