From e19b15ca321f88f12d80c09628e91c9e112f704d Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Tue, 7 Jun 2022 13:33:05 +0200 Subject: [PATCH] comm page stuff --- comms.css | 128 +++++++++++++++++++++++++++++++++++++++++++++++++---- comms.html | 111 +++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 220 insertions(+), 19 deletions(-) diff --git a/comms.css b/comms.css index 5506d4c..7cf6ea6 100644 --- a/comms.css +++ b/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 { font-size: 250%; --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 > * { height: var(--img-height); width: var(--img-width); @@ -38,6 +72,7 @@ h1 { border-radius: 1em; } + #examples dl { display: grid; grid-template-columns: 1fr 1fr 1fr; @@ -45,16 +80,16 @@ h1 { #examples dl > * { background: hsla(320deg, 40%, 20%, 60%); - font-size: 200%; - font-weight: 500; margin: 0; padding: 0.125em 0 0.25em; } -#examples dt { grid-area: 1; align-self: start; } -#examples dd { grid-area: 2; align-self: end; } +#examples :is(dt, dd) { text-align: center; } -#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 a { pointer-events: auto; } @@ -64,14 +99,91 @@ h1 { text-align: left; background: hsla(45deg, 90%, 98%, 75%); - color: black; + 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%); - 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%); } } diff --git a/comms.html b/comms.html index fa4aa17..4a1fa2e 100644 --- a/comms.html +++ b/comms.html @@ -19,25 +19,114 @@

commission info

+
coming soon!!
(maybe)
+
-
colour -
€XX +
colour +
€60 -
flat -
€YY +
flat +
€45 -
sketch -
€ZZ +
sketch +
€25
- +
+ thank you codl for being a wonderful model. click for + more examples of each type also - main +
+ more info + +
+

what to expect

+
+

sketches

+
    +
  • you send me your idea, image references for the character(s), + and an email address i can send a paypal invoice to +
      +
    • you can contact me over mastodon/twitter dm, telegram, or + email +
    • i’d prefer if you could be as detailed as you can in your + description +
    +
  • i tell you if i can accept, and if so i add you to + the queue +
  • when your turn comes, i will draw your sketch and send it to + you (with a big ugly watermark), as well as the invoice +
  • on receiving payment i will send you the non-watermarked + version(s) and the kra file to do + with as you wish +
+
+ +
+

full images

+
    +
  • you send me your idea, image references for the character(s), and + an email address i can send a paypal invoice to +
      +
    • you can contact me over mastodon/twitter dm, matrix, or + email +
    • i’d prefer if you could be as detailed as you can in your + description +
    +
  • i tell you if i can accept, and if so i add you to + the queue +
  • when i get to your commission, i will send you a sketch for + approval +
      +
    • if changes are necessary, i will send you a new version within + four days +
    • the first two pre-sketches are free; after that they will cost + 5% of the initial price each +
    +
  • once a sketch is approved i will send you an invoice; + and then the finished piece, and the + kra file to do with as you wish, + within a week of receiving payment +
+
+
+ +
+

extra costs, etc

+
    +
  • extra characters after the first cost 75% of the base price +
  • very complex characters (taurs, winged creatures, overly ornate + dragons, etc) may cost extra, depending on how complex +
  • complex/multiple characters might also need more time +
  • i’ll inform you of the total cost & time frame before starting +
  • if you have a specific deadline please let me know in advance. + also i am probably not the best choice if it is very soon +
+
+ +
+

i can’t/won’t draw

+
    +
  • humans (yet) +
  • violence +
  • +
    + nsfw/kink is usually fine, except: +
      +
    • the obvious (underage, etc) +
    • dubious or non-consent +
    • “bathroom stuff” +
    +
    +
  • there might be other stuff i’m forgetting +
+
+
+
+ + home