comm page stuff
This commit is contained in:
parent
52b184fb4d
commit
e19b15ca32
128
comms.css
128
comms.css
|
@ -6,13 +6,47 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
main { max-width: calc(var(--img-width) + 150px); }
|
main {
|
||||||
|
max-width: calc(var(--img-width) + 150px);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 250%;
|
font-size: 250%;
|
||||||
--around-image: url(media/sparkles.svg);
|
--around-image: url(media/sparkles.svg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.25em; left: 1em;
|
||||||
|
transform: rotate(-8deg);
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
padding: 0.5em 0.75em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
font-size: 120%;
|
||||||
|
|
||||||
|
background: hsl(var(--hue), 80%, 80%);
|
||||||
|
border: 2px solid hsl(var(--hue), 80%, 35%);
|
||||||
|
box-shadow: 0 0 20px 5px hsla(var(--hue), 50%, 95%, 40%);
|
||||||
|
color: black;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status.closed { --hue: 350deg; }
|
||||||
|
#status.soon { --hue: 55deg; }
|
||||||
|
#status.open { --hue: 110deg; }
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
#status {
|
||||||
|
background: hsl(var(--hue), 90%, 30%);
|
||||||
|
border: 2px solid hsl(var(--hue), 80%, 15%);
|
||||||
|
box-shadow: 0 0 20px 5px hsla(var(--hue), 50%, 95%, 10%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#status.soon { --hue: 50deg; }
|
||||||
|
}
|
||||||
|
|
||||||
#examples, #examples > * {
|
#examples, #examples > * {
|
||||||
height: var(--img-height);
|
height: var(--img-height);
|
||||||
width: var(--img-width);
|
width: var(--img-width);
|
||||||
|
@ -38,6 +72,7 @@ h1 {
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#examples dl {
|
#examples dl {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
@ -45,16 +80,16 @@ h1 {
|
||||||
|
|
||||||
#examples dl > * {
|
#examples dl > * {
|
||||||
background: hsla(320deg, 40%, 20%, 60%);
|
background: hsla(320deg, 40%, 20%, 60%);
|
||||||
font-size: 200%;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.125em 0 0.25em;
|
padding: 0.125em 0 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#examples dt { grid-area: 1; align-self: start; }
|
#examples :is(dt, dd) { text-align: center; }
|
||||||
#examples dd { grid-area: 2; align-self: end; }
|
|
||||||
|
|
||||||
#examples a { font-weight: 600; }
|
#examples dt { grid-area: 1; align-self: start; font-size: 200%; }
|
||||||
|
#examples dd { grid-area: 2; align-self: end; font-size: 300%; }
|
||||||
|
|
||||||
|
#examples a { font-weight: 700; }
|
||||||
|
|
||||||
#examples dl { pointer-events: none; }
|
#examples dl { pointer-events: none; }
|
||||||
#examples a { pointer-events: auto; }
|
#examples a { pointer-events: auto; }
|
||||||
|
@ -64,14 +99,91 @@ h1 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
background: hsla(45deg, 90%, 98%, 75%);
|
background: hsla(45deg, 90%, 98%, 75%);
|
||||||
color: black;
|
color: var(--text-col);
|
||||||
|
--text-col: black;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
font-weight: 400;
|
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) {
|
@media (prefers-contrast: high), (prefers-color-scheme: dark) {
|
||||||
#terms {
|
#terms {
|
||||||
background: hsla(0deg, 0%, 0%, 65%);
|
background: hsla(0deg, 0%, 0%, 65%);
|
||||||
color: white;
|
--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) {
|
||||||
|
#status {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#examples dl > * {
|
||||||
|
background: hsl(20deg, 35%, 25%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
111
comms.html
111
comms.html
|
@ -19,25 +19,114 @@
|
||||||
<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='https://gallery.niss.website/main/#require_colourexample'>colour</a>
|
<dt><a href='//gallery.niss.website/main/#require_colourexample'>colour</a>
|
||||||
<dd><a href='https://gallery.niss.website/main/#require_colourexample'>€XX</a>
|
<dd><a href='//gallery.niss.website/main/#require_colourexample'>€60</a>
|
||||||
|
|
||||||
<dt><a href='https://gallery.niss.website/main/#require_flatexample'>flat</a>
|
<dt><a href='//gallery.niss.website/main/#require_flatexample'>flat</a>
|
||||||
<dd><a href='https://gallery.niss.website/main/#require_flatexample'>€YY</a>
|
<dd><a href='//gallery.niss.website/main/#require_flatexample'>€45</a>
|
||||||
|
|
||||||
<dt><a href='https://gallery.niss.website/main/#require_sketchexample'>sketch</a>
|
<dt><a href='//gallery.niss.website/main/#require_sketchexample'>sketch</a>
|
||||||
<dd><a href='https://gallery.niss.website/main/#require_sketchexample'>€ZZ</a>
|
<dd><a href='//gallery.niss.website/main/#require_sketchexample'>€25</a>
|
||||||
</dl>
|
</dl>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<ul id=terms>
|
<section id=terms>
|
||||||
<li>complex characters, backgrounds, etc, might cost extra. ask to make sure!
|
thank you <a href=//codl.fr>codl</a> for being a wonderful model. click for
|
||||||
<li>blah blah
|
more examples of each type also
|
||||||
</ul>
|
|
||||||
|
|
||||||
<a href=/>main</a>
|
<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> i’d 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> i’d 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> i’ll inform you of the total cost & 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 can’t/won’t 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 i’m forgetting
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<a href=/>home</a>
|
||||||
</main>
|
</main>
|
||||||
|
|
Loading…
Reference in New Issue