diff --git a/Makefile b/Makefile
index c7e5724..9041251 100644
--- a/Makefile
+++ b/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)
diff --git a/style.css b/base.css
similarity index 69%
rename from style.css
rename to base.css
index 31a262f..e5c42e0 100644
--- a/style.css
+++ b/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 {
- 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) {
diff --git a/comms.css b/comms.css
index fe45cc0..5506d4c 100644
--- a/comms.css
+++ b/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;
+ }
}
diff --git a/comms.html b/comms.html
index 4697445..fa4aa17 100644
--- a/comms.html
+++ b/comms.html
@@ -7,36 +7,37 @@
commission info
+
+
-
+ commission info
-
+ flat
+ €YY
-
-
- - complex characters, backgrounds, etc, might cost extra. ask to make sure!
-
- blah blah
-
+ sketch
+ €ZZ
+
-
+
+ - complex characters, backgrounds, etc, might cost extra. ask to make sure!
+
- blah blah
+
+
+ main
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..733ec25
--- /dev/null
+++ b/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; }
diff --git a/index.html b/index.html
index 26e9b72..0f6c900 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
-
+
web site more like web shite haha gottem
diff --git a/media/comm-examples.kra b/media/comm-examples.kra
new file mode 100644
index 0000000..943b3fa
Binary files /dev/null and b/media/comm-examples.kra differ
diff --git a/media/comm-examples.png b/media/comm-examples.png
new file mode 100644
index 0000000..f43c848
--- /dev/null
+++ b/media/comm-examples.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5e50e1972519fdb5d5aa0d7a133a9a2a40bdfc67182a900aa5cd7f1c47e92e7a
+size 442433
diff --git a/where.css b/where.css
index d0a1f2b..7002661 100644
--- a/where.css
+++ b/where.css
@@ -1,4 +1,4 @@
-@import url(style.css);
+@import url(base.css);
main {
-