1
0
Fork 0

Compare commits

...

2 Commits

Author SHA1 Message Date
Rhiannon Morris 06b7ff54b6 more comm page stuff 2022-05-18 14:29:00 +02:00
Rhiannon Morris 1b9de6ce23 gallery sites 2022-05-18 05:12:13 +02:00
10 changed files with 208 additions and 177 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

BIN
media/comm-examples.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

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

View File

@ -91,5 +91,19 @@
<hr>
<h1>gallery sites</h1>
<dl>
<dt>html+rss <dd><a href=//gallery.niss.website>here</a>
<dt>weasyl <dd><a href=//www.weasyl.com/~niss>niss</a>
<dt>furaffinity <dd><a href=//furaffinity.net/user/niss>niss</a>
<dt>deviantart <dd><a href=//www.deviantart.com/2gecs>2gecs</a>
<dt>tumblr <dd><a href=//2gecsart.tumblr.com/>2gecsart</a>
<dt>telegram <dd><a href=//t.me/niss_art>niss_art</a>
<dt>ko-fi <dd><a href=//ko-fi.com/nissss>nissss</a>
</dl>
<hr>
<a href=/>main</a>
</main>