1
0
Fork 0

comm stuff

This commit is contained in:
Rhiannon Morris 2022-08-04 23:18:00 +02:00
parent 85e0623e18
commit caed9fc65d
2 changed files with 32 additions and 202 deletions

111
comms.css
View File

@ -8,7 +8,6 @@
main { main {
max-width: calc(var(--img-width) + 150px); max-width: calc(var(--img-width) + 150px);
position: relative;
} }
h1 { h1 {
@ -16,26 +15,29 @@ h1 {
--around-image: url(media/sparkles.svg); --around-image: url(media/sparkles.svg);
} }
#status { #examples dt {
position: absolute; position: relative;
top: 1.25em; left: 1em; }
transform: rotate(-8deg);
z-index: 100;
padding: 0.5em 0.75em; .status {
display: inline-block;
transform: rotate(-8deg);
margin-left: 0.5em;
padding: 0.25em 0.75em;
border-radius: 0.3em; border-radius: 0.3em;
font-size: 120%; font-size: 1.2rem;
background: hsl(var(--hue), 80%, 80%); background: hsl(var(--hue), 80%, 80%);
border: 2px solid hsl(var(--hue), 80%, 35%); border: 2px solid hsl(var(--hue), 80%, 35%);
box-shadow: 0 0 20px 5px hsla(var(--hue), 50%, 95%, 40%); box-shadow: 8px 6px 5px hsla(0deg, 0%, 0%, 30%);
color: black; color: black;
text-shadow: none; text-shadow: none;
} }
#status.closed { --hue: 350deg; } .closed { --hue: 350deg; }
#status.soon { --hue: 55deg; } .soon { --hue: 55deg; }
#status.open { --hue: 110deg; } .open { --hue: 110deg; }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#status { #status {
@ -63,7 +65,7 @@ h1 {
margin: 0; margin: 0;
} }
#examples, #terms { #examples {
width: var(--img-width); width: var(--img-width);
box-sizing: border-box; box-sizing: border-box;
margin: 1em auto; margin: 1em auto;
@ -94,89 +96,6 @@ h1 {
#examples dl { pointer-events: none; } #examples dl { pointer-events: none; }
#examples a { pointer-events: auto; } #examples a { pointer-events: auto; }
#terms {
padding: 1.5em;
text-align: left;
background: hsla(45deg, 90%, 98%, 75%);
color: var(--text-col);
--text-col: black;
text-shadow: none;
font-weight: 400;
font-size: 1.1rem;
}
#terms > details {
margin-top: 1em;
}
#terms :is(h2, h3, h4, h5, h6, b) {
font-weight: 600;
}
#terms a {
color: hsl(330deg, 80%, 40%);
font-weight: 600;
}
:is(h2, h3, h4, h5, h6, #aaa) > a {
color: inherit;
font-weight: inherit;
}
:is(h2, h3, h4, h5, h6, #aaa) > a:hover::after {
content: '§';
margin-left: 1em;
font-size: 70%;
font-weight: 400;
}
summary {
cursor: pointer;
display: inline-block;
}
#more-info > summary {
font-weight: 600;
}
#more-info[open] > summary {
margin-bottom: 0.75em;
}
summary::after {
content: 'show';
margin-left: 0.5ch;
border: 1pt solid var(--text-col);
border-radius: 4px;
padding: 0 0.25em;
font-size: 80%;
font-weight: 500;
}
[open] > summary::after { content: 'hide'; }
ul > li {
list-style: '— ';
}
@media (prefers-contrast: high), (prefers-color-scheme: dark) {
#terms {
background: hsla(0deg, 0%, 0%, 65%);
--text-col: white;
}
#terms a {
color: hsl(330deg, 90%, 85%);
}
:is(h2, h3, h4, h5, h6, #aaa) > a {
color: inherit;
font-weight: inherit;
}
}
@media (prefers-reduced-transparency) { @media (prefers-reduced-transparency) {
#status { #status {

View File

@ -8,125 +8,36 @@
<title>commission info</title> <title>commission info</title>
<map name=example-links> <map name=example-links>
<area href='https://gallery.niss.website/main/#require_colourexample' <area href='//commiss.io/listings/OvOb' shape=rect coords='0,0,350,850'>
shape=rect coords='0,0,350,850'> <area href='//commiss.io/listings/DpnB' shape=rect coords='350,0,700,850'>
<area href='https://gallery.niss.website/main/#require_flatexample' <area href='//commiss.io/listings/r6pO' shape=rect coords='700,0,1050,850'>
shape=rect coords='350,0,700,850'>
<area href='https://gallery.niss.website/main/#require_sketchexample'
shape=rect coords='700,0,1050,850'>
</map> </map>
<main> <main>
<h1>commission info</h1> <h1>commission info</h1>
<div id=status class=soon>coming soon!! <br> (maybe)</div>
<section id=examples> <section id=examples>
<img src=media/comm-examples.png usemap=#example-links> <img src=media/comm-examples.png usemap=#example-links>
<dl> <dl>
<dt><a href='//gallery.niss.website/main/#require_colourexample'>colour</a> <dt>
<dd><a href='//gallery.niss.website/main/#require_colourexample'>€60</a> <a href='//commiss.io/listings/OvOb'>colour</a>
<span class='status closed'>closed</span>
<dd><a href='//commiss.io/listings/OvOb'>€60</a>
<dt><a href='//gallery.niss.website/main/#require_flatexample'>flat</a> <dt>
<dd><a href='//gallery.niss.website/main/#require_flatexample'>€45</a> <a href='//commiss.io/listings/DpnB'>flat</a>
<span class='status closed'>closed</span>
<dd>
<a href='//commiss.io/listings/DpnB'>€45</a>
<dt><a href='//gallery.niss.website/main/#require_sketchexample'>sketch</a> <dt>
<dd><a href='//gallery.niss.website/main/#require_sketchexample'>€25</a> <a href='//commiss.io/listings/r6pO'>sketch</a>
<span class='status soon'>soon!</span>
<dd>
<a href='//commiss.io/listings/r6pO'>€25</a>
</dl> </dl>
</section> </section>
<section id=terms>
thank you <a href=//codl.fr>codl</a> for being a wonderful model. click for
more examples of each type also
<details id=more-info>
<summary>more info</summary>
<section>
<h2 id=steps><a href=#steps>what to expect</a></h2>
<section>
<h3 id=sketches><a href=#sketches>sketches</a></h3>
<ul>
<li> you send me your idea, image references for the character(s),
and an email address i can send a paypal invoice to
<ul>
<li> you can contact me over mastodon/twitter dm, telegram, or
email
<li> id prefer if you could be as detailed as you can in your
description
</ul>
<li> i tell you if i can accept, and if so i add you to
<a href='https://trello.com/b/x9RgpixI/commissions'>the queue</a>
<li> when your turn comes, i will draw your sketch and send it to
you <i>(with a big ugly watermark)</i>, as well as the invoice
<li> on receiving payment i will send you the non-watermarked
version(s) and the <a href=https://krita.org>kra</a> file to do
with as you wish
</ul>
</section>
<section>
<h3 id=fullimages><a href=#fullimages>full images</a></h3>
<ul>
<li> you send me your idea, image references for the character(s), and
an email address i can send a paypal invoice to
<ul>
<li> you can contact me over mastodon/twitter dm, matrix, or
email
<li> id prefer if you could be as detailed as you can in your
description
</ul>
<li> i tell you if i can accept, and if so i add you to
<a href='https://trello.com/b/x9RgpixI/commissions'>the queue</a>
<li> when i get to your commission, i will send you a sketch for
approval
<ul>
<li> if changes are necessary, i will send you a new version within
four days
<li> the first two pre-sketches are free; after that they will cost
5% of the initial price each
</ul>
<li> once a sketch is approved i will send you an invoice;
and then the finished piece, and the
<a href=https://krita.org>kra</a> file to do with as you wish,
within a week of receiving payment
</ul>
</section>
</section>
<section>
<h2 id=extra-costs><a href=#extra-costs>extra costs, etc</a></h2>
<ul>
<li> extra characters after the first cost 75% of the base price
<li> very complex characters (taurs, winged creatures, overly ornate
dragons, etc) may cost extra, depending on <i>how</i> complex
<li> complex/multiple characters might also need more time
<li> ill inform you of the total cost &amp; time frame before starting
<li> <b>if you have a specific deadline please let me know in advance</b>.
also i am probably not the best choice if it is very soon
</ul>
</section>
<section>
<h2 id=cant-wont><a href=#cant-wont>i cant/wont draw</a></h2>
<ul>
<li> humans (yet)
<li> violence
<li>
<details>
<summary>nsfw/kink is usually fine, except:</summary>
<ul>
<li> the obvious (underage, etc)
<li> dubious or non-consent
<li> “bathroom stuff”
</ul>
</details>
<li> there might be other stuff im forgetting
</ul>
</section>
</details>
</section>
<a href=/>home</a> <a href=/>home</a>
</main> </main>