fixed bug in mobile layout, added comission info page, replaced pngs with webp, typos in TOS

This commit is contained in:
alisonkit 2024-07-03 18:27:11 -07:00
parent aba12c92a6
commit 0b89c52924
32 changed files with 179 additions and 42 deletions

View file

@ -1,15 +1,134 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <title>Alison's Commissions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Alison Kit</title>
<link rel="stylesheet" href="./../style.css"> <link rel="stylesheet" href="./../style.css">
</head> </head>
<body> <body>
<!--- <script src="index.js"></script> ---!> <div class="sidenav">
<h1>Page is a WIP!</h1> <a href="./../index.html">Home</a>
<p>Come back later!</p> <a href="#top">Back to Top</a>
<a href="#stickers">Stickers</a>
<a href="#icons">Icons</a>
<a href="#sketches">Sketches</a>
<a href="#portraits">Portraits</a>
<a href="#refs">Ref Sheets</a>
<a href="#extras">Extras</a>
</div>
<div class="main">
<div id="top">
<h1>Commission Info!</h1>
<p>Before commissioning, make sure to read the <a href="./../tos/">Terms of Service</a>, upon starting a commission process, you agree to these terms.</p>
<p>All commissions include a simple color background, and a free alt where there's a small change included, like a different palette or shirt/shirtless variants.</p>
</div>
<div id="stickers">
<h2>Stickers</h2>
<div class="row">
<div class="column">
<img src="./../images/stickers.webp">
</div>
<div class="column">
<p>One Sticker: 20 USD</p>
<p>Six Pack: 84 USD (14 each)</p>
<p>Twelve Pack: 144 USD (12 each)</p>
<ul>
<li>Stickers come in 2048x2048 size</li>
</ul>
</div>
</div>
</div>
<div id="icons">
<h2>Icons</h2>
<div class="row">
<div class="column">
<img src="./../images/icons.webp">
</div>
<div class="column">
<p>Flat Color: 20 USD</p>
<p>Light + Shade: 30 USD</p>
<ul>
<li>Icons come in 2048x2048 size</li>
</ul>
</div>
</div>
</div>
<div id="sketches">
<h2>Simple Sketches</h2>
<div class="row">
<div class="column">
<img src="./../images/sketches.webp">
</div>
<div class="column">
<p>Sketch Only: 20 USD</p>
<p>With Color: 30 USD</p>
<ul>
</ul>
</div>
</div>
</div>
<div id="portraits">
<h2>Full Body Portrait</h2>
<div class="row">
<div class="column">
<img src="./../images/fullbody.webp">
</div>
<div class="column">
<p>Flat Color: 69 USD</p>
<p>Light + Shade: 89 USD</p>
</div>
</div>
</div>
<div id="refs">
<h2>Reference Sheets</h2>
<div class="row">
<div class="column">
<img src="./../images/refs.webp">
</div>
<div class="column">
<p>Front + Back: 120 USD</p>
<p>Front + Back + Side: 160 USD</p>
<p>Includes:<ul>
<li>Selected full body view angles</li>
<li>3 chibis for outfits</li>
<li>Color palette</li>
<li>Info box (Name, Height, Gender, Likes, Dislikes, etc.)</li>
<li>Accesories</li>
<li>Three body part closeups (Toungue/paws/eyes, etc)</li><ul>
<p>
</div>
</div>
</div>
<div id="extras">
<h2>Extras</h2>
<p>Extra character: +75% base price</p>
<p>Background: +75% base price</p>
<p>Extra alt: +10% base price</p>
<p>Complex characters: +25% base price EXAMPLES:</p>
<ul>
<li>Extra limbs</li>
<li>Large wings (bigger than 25% of the character's width)</li>
<li>Tatoos</li>
<li>Patterns</li>
<li>Piercings covering more than 25% of the body</li>
<li>Highly detailed outfits</li>
</ul>
<p>These traits don't count towards complex characters:</p>
<ul>
<li>Muscular people</li>
<li>Fat people</li>
<li>People with missing limbs or disabilities</li>
<li>Few and small extra body parts like eyes, fingers, etc</li>
</ul>
</div>
<div id="footer">
<p>Alison Kit 2024</p>
</div>
</div>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 MiB

BIN
main/images/akautomata.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1,016 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 MiB

BIN
main/images/fira.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8 MiB

BIN
main/images/firawindow.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 407 KiB

BIN
main/images/fullbody.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
main/images/icons.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 508 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 MiB

BIN
main/images/mystfawf.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 429 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

BIN
main/images/niko.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 MiB

BIN
main/images/nona.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 MiB

BIN
main/images/refs.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 KiB

BIN
main/images/sketches.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

BIN
main/images/stickers.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
main/images/sybil.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

BIN
main/images/xenia.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 MiB

BIN
main/images/xeniakiki.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 KiB

View file

@ -26,14 +26,14 @@
<div id="gallery"> <div id="gallery">
<h2>Gallery</h2> <h2>Gallery</h2>
<div id="photos"> <div id="photos">
<img onclick="magnify($(this).attr('src'))" src="images/xenia.png"> <img src="images/xenia.webp">
<img onclick="magnify($(this).attr('src'))" src="images/niko.png"> <img src="images/niko.webp">
<img onclick="magnify($(this).attr('src'))" src="images/nona.png"> <img src="images/nona.webp">
<img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg"> <img src="images/alisonterra.webp">
<img onclick="magnify($(this).attr('src'))" src="images/sybil.png"> <img src="images/sybil.webp">
<img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png"> <img src="images/pueblomagico.webp">
<img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png"> <img src="images/mystfawf.webp">
<img onclick="magnify($(this).attr('src'))" src="images/akautomata.png"> <img src="images/akautomata.webp">
</div> </div>
</div> </div>
<!-- about--> <!-- about-->
@ -56,13 +56,15 @@
<p><a href="https://cohost.org/alisonkit">Cohost</a> >>> for thoughts</p> <p><a href="https://cohost.org/alisonkit">Cohost</a> >>> for thoughts</p>
<p><a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a> >>> fedi!!!</p> <p><a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a> >>> fedi!!!</p>
<p><a href="https://bsky.app/profile/alisonkit.net">Bluesky</a> >>> better twitter</p> <p><a href="https://bsky.app/profile/alisonkit.net">Bluesky</a> >>> better twitter</p>
<p><a href="https://twitch.tv/alison_kit">Twitch</a> >>> Art Streams!</p> <p><a href="https://twitch.tv/ayyalison">Twitch</a> >>> Art Streams!</p>
<p><a href="https://twitter.com/kittwah">Twitter</a> ...sigh</p> <p><a href="https://twitter.com/ayyalison">Twitter</a> ...sigh</p>
<p><a href="https://discord.gg/t7X5uUEC/">Discord</a> >>> let's hang out!</p> <p><a href="https://discord.gg/t7X5uUEC/">Discord</a> >>> let's hang out!</p>
<br> <br>
<h3>Commissions are open.</h3> <h3>Commissions are open.</h3>
<p>For current commission slot availability, check social media for any annoucements.</p> <p>For current commission slot availability, check social media for any annoucements.</p>
<p><a href="https://queue.alisonkit.net/public/board/ee9ff691e7dc8704185c15717690cc1e57ef9eedfac575cd6cf0a21c5f14">Commission Queue</a> >>> for current commission schedule.</p> <p><a href="https://queue.alisonkit.net/public/board/ee9ff691e7dc8704185c15717690cc1e57ef9eedfac575cd6cf0a21c5f14">Commission Queue</a> >>> for current commission schedule.</p>
<p><a href="comms/">Commission Info</a> >>> more detailed info about my commissions!</p>
<p><a href="tos/">Terms of Service</a> >>> read before commissioning!</p>
<h3>About my streams</h3> <h3>About my streams</h3>
<p><a href="live/">Visit this link to see more information about my streams.</a></p> <p><a href="live/">Visit this link to see more information about my streams.</a></p>
</div> </div>

View file

@ -25,6 +25,18 @@ p{
a{ a{
color: #ef679b; color: #ef679b;
} }
.row {
display: flex;
}
.column {
padding:2vh 2vw;
flex: 50%;
}
.column img { /*Sets size for images in columns*/
width:100%;
height:auto;
transition:0.4s ease-in-out;
}
.sidenav { .sidenav {
width: 150px; width: 150px;
position: fixed; position: fixed;
@ -51,11 +63,12 @@ a{
margin-left: 140px; /* Same width as the sidebar + left position in px */ margin-left: 140px; /* Same width as the sidebar + left position in px */
padding: 0px 10px; padding: 0px 10px;
} }
/*
#@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
# .sidenav {padding-top: 15px;} .sidenav {padding-top: 15px;}
# .sidenav a {font-size: 18px;} .sidenav a {font-size: 18px;}
#} }
*/
@media screen and (orientation: portrait) { @media screen and (orientation: portrait) {
.sidenav { .sidenav {
position: sticky; position: sticky;

View file

@ -11,17 +11,17 @@
<body> <body>
<div id="content" class="sidenav"> <div id="content" class="sidenav">
<a href="#org5cd1575">1. Definitions</a> <a href="#org5cd1575">1. Definitions</a>
<a href="#org6c844e6">2. Generals</a> <a href="#org6c844e6">2. General</a>
<a href="#org5a011af">3. Procedures</a> <a href="#org5a011af">3. Procedure</a>
<a href="#org6312c2f">4. Image rights</a> <a href="#org6312c2f">4. Image rights</a>
<a href="#org1d7bee2">5. Payments</a> <a href="#org1d7bee2">5. Payment</a>
<a href="#orgdeec50c">6. Refund polics</a> <a href="#orgdeec50c">6. Refund policy</a>
<a href="#org4411359">7. What I can draw</a> <a href="#org4411359">7. What I can draw</a>
<a href="#org3cade63">8. What I dont draw</a> <a href="#org3cade63">8. What I dont draw</a>
<a href="#org0d1b19d">9. Ill refuse to draw</a> <a href="#org0d1b19d">9. Ill refuse to draw</a>
</div> </div>
<div id="outline-container-org6f666c1" class="main"> <div id="outline-container-org6f666c1" class="main">
<h2 id="org6f666c1">Terms and Conditions</h2> <h2 id="org6f666c1">Terms of Service</h2>
<div class="outline-text-1" id="text-1"> <div class="outline-text-1" id="text-1">
</div> </div>
<div id="outline-container-org5cd1575" class="outline-3"> <div id="outline-container-org5cd1575" class="outline-3">
@ -31,9 +31,9 @@
</h3> </h3>
<div class="outline-text-2" id="text-1-1"> <div class="outline-text-2" id="text-1-1">
<ul class="org-li"> <ul class="org-li">
<li>I”, “Me”, “My” “Myself” refer to the artist who goes by the alias &ldquo;Alison Kit&rdquo; and all of which are used across my social media accounts as described in the url alisonkit.com. <li>You, “Your”, “Client”, "Commissioner" refer to the individual or party obtaining a commission and/or merchandise from the artist.
</li> </li>
<li>You, “Your”, “Client” refer to the individual or party obtaining a commission and/or merchandise from the artist. <li>I”, “Me”, “My”, “Myself” refer to the artist who goes by the alias &ldquo;Alison Kit&rdquo; and all of which are used across my social media accounts as described in the url alisonkit.net.
</li> </li>
<li>“Commission” refers to the exchange of the commissioners money and the work of art made by the artist. <li>“Commission” refers to the exchange of the commissioners money and the work of art made by the artist.
</li> </li>
@ -49,11 +49,13 @@
</h3> </h3>
<div class="outline-text-3" id="text-1-2"> <div class="outline-text-3" id="text-1-2">
<ul class="org-ul"> <ul class="org-ul">
<li>As the artist, I have the right to refuse any idea deemed not fit for it to be materialized through my art commission service. <li>As the artist, I have the right to refuse any idea deemed unfit for it to be materialized through my art commission service.
</li> </li>
<li>I reserve the right to cancel and refund a commission for any reason and at any time. <li>I reserve the right to cancel and refund a commission for any reason and at any time.
</li> </li>
<li>I reserve the right to decline refunds for finished commissions. <li>I reserve the right to decline refunds for finished commissions
</li>
<li> I will pursue action for fraudulent chargebacks in the case where the commissioner tries to manipulate payment proccessors like PayPal to get back their payment after the commission has been approved by the commissioner and delivered.
</li> </li>
<li>I reserve the right to decline any further modifications to a commission once it has already been finished and given to the commissioner. <li>I reserve the right to decline any further modifications to a commission once it has already been finished and given to the commissioner.
</li> </li>
@ -61,9 +63,7 @@
</li> </li>
<li>I will not draw intellectual property the comissioner has no rights to use (such as characters the commissioner doesnt have authorization to use) <li>I will not draw intellectual property the comissioner has no rights to use (such as characters the commissioner doesnt have authorization to use)
</li> </li>
<li>If the commissioner acts in a rude or uneducated manner, asks me to start the commission process before any payment is given, or begs for anything unlawful to be added to the commission, I will cancel the commission and send a note regarding the cancellation. <li>If the commissioner acts in a rude or uneducated manner, asks me to start the commission process before any payment is given, or insists on adding unlawful content to the commission, I will cancel the commission and send a note regarding the cancellation.
</li>
<li>The artwork is delivered through Arty.ooo
</li> </li>
</ul> </ul>
</div> </div>
@ -73,9 +73,12 @@
<div class="outline-text-3" id="text-1-3"> <div class="outline-text-3" id="text-1-3">
<ul class="org-ul"> <ul class="org-ul">
<li>The client will contact me via email with details regarding their idea for a commission. I will review it and we will start negotiating the commission details.</li> <li>The client will contact me via email with details regarding their idea for a commission. I will review it and we will start negotiating the commission details.</li>
<li>Once me and the commissioner agree on a price and idea, I send an invoice to the client, detailing the price, delivery time and terms of service. As soon as the client pays, I will start creating the artwork.</li> <li>Once me and the commissioner have discussed the details of the commission, I will send an invoice to the client, detailing the price, delivery time and terms of service (if it's physical art or merchandise, shipping details will be negotiated). As soon as the client pays, I will start creating the artwork.</li>
<li>The client has the right to request updates througout the commission process.</li> <li>The client has the right to request updates througout the commission process.</li>
<li>Once the artwork is complete, it will be sent digitally to the client. In the case where it&rsquo;s physical artwork, a digital copy will be sent and shipping details will be discussed so that the physical artwork can be sent.</li> <li>At some point during the commission process, I will send the client a layout sketch detailing the general visual idea of what the final product will look like. This is so that the client knows what they are obtaining and so that they can request any minor changes or mistakes to be fixed.</li>
<li>After this layout sketch has been approved, I will start rendering the final artwork, and any new change requests may be subject to additional fees since making new changes at this stage generally present more time and effort to incorporate.</li>
<li>Once the artwork is complete, it will be sent digitally to the client. In the case where it&rsquo;s physical artwork, a digital copy will be sent and the physical artwork/merchandise will be sent right after. After this the commission process has been completed.</li>
<li>If the client wishes to do so, they can request minor edits to the commission (no more than 15% of the artwork) after the commission process has finished.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -97,7 +100,7 @@
<h3 id="org1d7bee2"><span class="section-number-3">5.</span> Payment</h3> <h3 id="org1d7bee2"><span class="section-number-3">5.</span> Payment</h3>
<div class="outline-text-3" id="text-1-5"> <div class="outline-text-3" id="text-1-5">
<ul class="org-ul"> <ul class="org-ul">
<li>Payment is made through Arty. This allows the client to pay using PayPal or Credit/Debit Card.</li> <li>Payment is made through arty.ooo, a platform for managing commissions. This allows the client to pay using PayPal or a Credit/Debit Card.</li>
<li>Prices are not negotiable right after a set price has been established and approved by me and the client.</li> <li>Prices are not negotiable right after a set price has been established and approved by me and the client.</li>
<li>I reserve the right to add additional charges for extensive edits to a commissioned after the client has approved the initial layout sketch.</li> <li>I reserve the right to add additional charges for extensive edits to a commissioned after the client has approved the initial layout sketch.</li>
<li>Payment is accepted full-front only, given how Arty operates.</li> <li>Payment is accepted full-front only, given how Arty operates.</li>
@ -109,10 +112,10 @@
<h3 id="orgdeec50c"><span class="section-number-3">6.</span> Refund policy</h3> <h3 id="orgdeec50c"><span class="section-number-3">6.</span> Refund policy</h3>
<div class="outline-text-3" id="text-1-6"> <div class="outline-text-3" id="text-1-6">
<ul class="org-ul"> <ul class="org-ul">
<li>Commissioners may ask for a full refund If I fail to give the comission in the date of delivery (reasons upon failure of completion will be explained to the commissioner.)</li> <li>Commissioners may ask for a full refund If I fail to give the comission before the established date of delivery detailed in the invoice or any email communication made after (reasons upon failure of completion will be explained to the commissioner.)</li>
<li>Comissioners cannot ask for a refund after the comission process has been completed, and the artwork has been delivered and approved.</li> <li>Comissioners cannot ask for a refund after the comission process has been completed, since the artwork has been delivered and approved.</li>
<li>Refunds made through artwork paid through third party services like (arty.ooo) are processed according to their terms of service.</li> <li>Refunds requested through services like arty.ooo are processed according to their terms of service.</li>
<li>In any case where a physical item is damaged or lost during shipping, a replacement or refund may be negotiated.</li> <li>In any case where a physical item is damaged or lost during shipping, a replacement or refund can be negotiated.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -156,7 +159,7 @@
</div> </div>
</div> </div>
<div id="postamble" class="main"> <div id="postamble" class="main">
<p class="date">Last Updated: 2024-07-02 Tue 20:05</p> <p class="date">Last Updated: 2024-07-03 Wed 09:20</p>
</div> </div>
</body> </body>
</html> </html>