alison/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixd mobile view, modified images, updated info

Browse source
This commit is contained in:
alison 2025-05-02 09:08:06 -07:00
parent 6fa309fe93
commit ddb0667b6e
158 changed files with 1304 additions and 691 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
main/comms/index.html
View file

@ -3,37 +3,66 @@
<head> <head>
<title>Alison's Commissions</title> <title>Alison's Commissions</title>
<link rel="stylesheet" href="./../style.css"> <link rel="stylesheet" href="./../style.css">
<link rel="icon" type="image/x-icon" href="./../images/svg/favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!---<meta property="og:image" content="./img/meta/commsmeta.webp" /> --->
<meta property="og:type" content="website" />
<meta property="og:title" content="Alison's Commissions" />
<meta property="og:url" content="https://alisonkira.art" />
<meta
name="description"
content="All the illustration services I provide as commissions."
/>
</head> </head>
<body> <body>
<div class="sidenav"> <div class="sidenav">
<a href="./../index.html">Home</a>
<a href="#top">Back to Top</a> <a href="#top">Back to Top</a>
<a href="#stickers">Stickers</a> <a href="#stickers">Stickers</a>
<a href="#icons">Icons</a>
<a href="#sketches">Sketches</a>
<a href="#portraits">Portraits</a> <a href="#portraits">Portraits</a>
<a href="#icons">Icons</a>
<a href="#badges">Badges</a>
<a href="#sketches">Sketches</a>
<a href="#refs">Ref Sheets</a> <a href="#refs">Ref Sheets</a>
<a href="#extras">Extras</a> <a href="#extras">Extras</a>
</div> </div>
<div class="main"> <div class="main">
<div id="top"> <div id="top">
<h3><a href="./../index.html">&gt;&gt;&gt;Back to the homepage</a></h3>
<h1>Commission Info!</h1> <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>Before commissioning, make sure to read the <a href="./../tos/">Terms of Service</a>.</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> <p>All commissions include a simple color background, and a free alt where there's a small change included (like a different palette swap, or shirt/shirtless variants).</p>
</div> </div>
<br>
<div id="stickers"> <div id="stickers">
<h2>Stickers</h2> <h2>Stickers/Emotes</h2>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<img src="./../images/stickers.webp"> <img src="./../images/comms/stickers.webp" alt="Various sticker and emote examples">
</div> </div>
<div class="column"> <div class="column">
<p>One Sticker: 20 USD</p> <p>One Sticker: 20 USD</p>
<p>Six Pack: 84 USD (14 each)</p> <p>Six Pack: 84 USD</p>
<p>Twelve Pack: 144 USD (12 each)</p> <p>Twelve Pack: 144 USD</p>
<ul> <p><i>Note: Stickers come in 2048x2048px size.</i></p>
<li>Stickers come in 2048x2048 size</li> </div>
</ul> </div>
</div>
<div id="portraits">
<h2>Portraits</h2>
<div class="row">
<div class="column">
<img src="./../images/comms/portraits.webp" alt="Various portrait illustration examples">
</div>
<div class="column">
<h3>Flat Color</h3>
<p>Half-Body: 39 USD</p>
<p>Full-Body: 69 USD</p>
<h3>Full Color (Lighting & Shading)</h3>
<p>Half-Body: 59 USD</p>
<p>Full-Body: 89 USD</p>
<p><i>Note: Half Body Portraits come in A4/Letter size, and Full Body Portraits come in A3/Tabloid size. You can request a similar size change if needed.</i></p>
</div> </div>
</div> </div>
</div> </div>
@ -42,42 +71,45 @@
<h2>Icons</h2> <h2>Icons</h2>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<img src="./../images/icons.webp"> <img src="./../images/comms/icons.webp" alt="Profile picture icon examples">
</div> </div>
<div class="column"> <div class="column">
<p>Flat Color: 20 USD</p> <p>Flat Color: 20 USD</p>
<p>Light + Shade: 30 USD</p> <p>Full Color: 30 USD</p>
<ul> <p><i>Note: Icons come in 2048x2048px size.</i></p>
<li>Icons come in 2048x2048 size</li> </div>
</ul> </div>
</div>
<div id="badges">
<h2>Badges</h2>
<div class="row">
<div class="column">
<img src="./../images/comms/badges.webp" alt="Badge illustration examples">
</div>
<div class="column">
<h3>Flat Color</h3>
<p>Half-Body: 39 USD</p>
<p>Full-Body: 69 USD</p>
<h3>Full Color (Lighting & Shading)</h3>
<p>Half-Body: 59 USD</p>
<p>Full-Body: 89 USD</p>
<p><i>Note: Badges are illustrated by default in A5 or half letter size.</i></p>
<p><i>Printing, laminating and shipping can be negotiated, and may include an additional fee.</i></p>
</div> </div>
</div> </div>
</div> </div>
<div id="sketches"> <div id="sketches">
<h2>Simple Sketches</h2> <h2>Sketches</h2>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<img src="./../images/sketches.webp"> <img src="./../images/comms/sketches.webp" alt="Sketch illustration examples">
</div> </div>
<div class="column"> <div class="column">
<p>Sketch Only: 20 USD</p> <p>Sketch Only: 20 USD</p>
<p>With Color: 30 USD</p> <p>With Flat Color: 30 USD</p>
<ul> <p><i>Note: Sketches come in A4/Letter size.</i></p>
</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>
</div> </div>
@ -86,48 +118,45 @@
<h2>Reference Sheets</h2> <h2>Reference Sheets</h2>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<img src="./../images/refs.webp"> <img src="./../images/comms/refs.webp" alt="Character Reference sheet closeups">
</div> </div>
<div class="column"> <div class="column">
<p>Front + Back: 120 USD</p> <p><b>Front + Back: </b>139 USD</p>
<p>Front + Back + Side: 160 USD</p> <p><b>Front + Back + Side: </b>159 USD</p>
<p>Includes:<ul> <p>Includes:</p><ul>
<li>Selected full body view angles</li> <li><b>Color palette</b></li>
<li>3 chibis for outfits</li> <li><b>Info Section </b>(Name, Height, Gender, Likes/Dislikes, etc.)</li>
<li>Color palette</li> <li><b>3 outfits </b>(chibis, or front view copies with an outfit)</li>
<li>Info box (Name, Height, Gender, Likes, Dislikes, etc.)</li> <li><b>3 Accessories </b>(Examples: Notebook, Handbag, Sword, etc.)</li>
<li>Accesories</li> <li><b>3 Body closeups </b>(Examples: Toungue, paws, eyes, etc.)</li></ul>
<li>Three body part closeups (Toungue/paws/eyes, etc)</li><ul> <p><i>Note: Reference sheets don't have lighting and shading, and come in A3/Tabloid size.</i></p>
<p>
</div> </div>
</div> </div>
</div> </div>
<div id="extras"> <div id="extras">
<h2>Extras</h2> <h2>Extras</h2>
<p>Extra character: +75% base price</p>
<p>Background: +75% base price</p>
<p>Extra alt: +10% base price</p> <p>Extra alt: +10% base price</p>
<p>Complex characters: +25% base price EXAMPLES:</p> <p>Background: +75% base price</p>
<p>Extra character: +75% base price</p>
<p><i>Note: Only applicable to characters added on the same canvas.</i></p>
<p>Complex characters: +25% base price</p>
<ul> <ul>
<li>Extra limbs</li> <li>Extra limbs</li>
<li>Large wings (bigger than 25% of the character's width)</li> <li>Large wings (bigger than the torso's width)</li>
<li>Tatoos</li> <li>Tatoos/Patterns</li>
<li>Patterns</li>
<li>Piercings covering more than 25% of the body</li>
<li>Highly detailed outfits</li> <li>Highly detailed outfits</li>
</ul> </ul>
<p>These traits don't count towards complex characters:</p> <p>These traits don't count towards complex characters:</p>
<ul> <ul>
<li>Muscular people</li>
<li>Fat people</li> <li>Fat people</li>
<li>People with missing limbs or disabilities</li> <li>People with missing limbs or disabilities</li>
<li>Few and small extra body parts like eyes, fingers, etc</li> <li>Few and small extra body parts (like a third eye, second toungue, etc)</li>
</ul> </ul>
</div> </div>
<div id="footer"> <div id="footer">
<p>Alison Kit 2024</p> <p>Alison Kira 2024</p>
</div> </div>
</div> </div>
</body> </body>

BIN
main/images/comms/badges.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 949 KiB

BIN
main/images/comms/icons.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 895 KiB

0
main/images/fullbody.webp → main/images/comms/portraits.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
main/images/comms/refs.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 975 KiB

0
main/images/sketches.webp → main/images/comms/sketches.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

0
main/images/stickers.webp → main/images/comms/stickers.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 852 KiB

After

Width:  |  Height:  |  Size: 852 KiB

0
main/images/akautomata.webp → main/images/gallery/akautomata.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 220 KiB

0
main/images/alisonterra.webp → main/images/gallery/alisonterra.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 518 KiB

After

Width:  |  Height:  |  Size: 518 KiB

0
main/images/fira.webp → main/images/gallery/fira.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 KiB

After

Width:  |  Height:  |  Size: 290 KiB

0
main/images/firawindow.webp → main/images/gallery/firawindow.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 407 KiB

After

Width:  |  Height:  |  Size: 407 KiB

BIN
main/images/gallery/float.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 579 KiB

0
main/images/mystfawf.webp → main/images/gallery/mystfawf.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 429 KiB

After

Width:  |  Height:  |  Size: 429 KiB

0
main/images/niko.webp → main/images/gallery/niko.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

0
main/images/nona.webp → main/images/gallery/nona.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 KiB

After

Width:  |  Height:  |  Size: 333 KiB

BIN
main/images/gallery/nuri3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 179 KiB

0
main/images/pueblomagico.webp → main/images/gallery/pueblomagico.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 244 KiB

0
main/images/sybil.webp → main/images/gallery/sybil.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 156 KiB

0
main/images/xenia.webp → main/images/gallery/xenia.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

0
main/images/xeniakiki.webp → main/images/gallery/xeniakiki.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 360 KiB

After

Width:  |  Height:  |  Size: 360 KiB

BIN
main/images/icons.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 508 KiB

BIN
main/images/refs.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 611 KiB

37
main/images/svg/favicon.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 512 512"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="favicon.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="px"
inkscape:zoom="1.0275289"
inkscape:cx="224.3246"
inkscape:cy="314.83301"
inkscape:current-layer="layer1" /><defs
id="defs1" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><path
style="display:inline;fill:#f5a397;fill-opacity:1;stroke:none;stroke-width:37.7953;stroke-dasharray:none"
d="m 418.53455,413.76195 c -41.57119,-34.61292 -84.42157,-67.75738 -124.07858,-104.60741 -22.79425,-2.91667 -23.08076,34.78341 -38.5802,47.43212 -15.46253,24.32599 -33.61216,49.89955 -61.6767,60.42157 -23.27145,-6.97264 -48.4641,-24.03974 -48.01847,-51.0721 0.53307,-10.61786 -2.11167,-30.78235 -11.0059,-12.45329 -19.24096,25.10544 -42.352773,55.25745 -76.812425,56.56221 -29.229032,-0.99157 -51.5857747,-32.02879 -44.705338,-60.20626 4.398597,-35.41164 29.449665,-63.12462 55.996184,-84.78588 26.459007,-23.31706 59.197179,-41.00197 94.492889,-45.03516 21.63057,-1.11585 43.0347,21.92467 33.79371,43.34697 -8.29228,24.88555 -11.46175,51.17731 -15.23666,77.08691 -0.41829,12.61625 -7.33504,46.82202 15.00863,36.61915 41.88772,-34.88715 63.6552,-86.86915 85.22616,-135.57512 21.14829,-46.03521 34.24494,-95.3815 42.82766,-145.054803 18.69532,-22.058602 22.63181,23.518973 18.32482,36.878823 -7.60094,36.9928 -17.76177,73.64266 -32.50883,108.48995 -3.27079,10.15195 -18.17626,34.68024 2.60918,21.60735 33.28898,-23.87259 64.93684,-50.08788 97.65155,-74.85643 21.86541,-15.72161 42.80319,-32.83441 64.33904,-48.87413 26.54165,-8.49597 19.93981,27.74144 4.30683,39.41888 -21.5863,16.68053 -42.17104,34.5281 -65.53371,48.66697 -27.12729,20.31467 -56.00591,37.95554 -85.90065,53.80891 -26.24322,10.69735 4.39969,27.3717 14.83147,38.27435 28.52651,23.852 60.52344,42.87852 92.56856,61.54485 8.61309,11.51652 47.66998,27.59744 21.06124,40.70007 -14.7208,5.87702 -28.2983,2.40636 -38.98046,-8.3385 z M 63.829241,378.72337 c 32.971864,-20.81422 56.792999,-53.12179 75.961839,-86.45268 8.47273,-13.62998 16.94594,-27.39945 22.8197,-42.39392 -23.25107,-2.35025 -44.85611,10.81189 -65.015717,20.57839 -29.168938,20.55462 -55.825531,53.00298 -52.428339,90.80077 1.542262,9.37651 6.314869,25.52831 18.662517,17.46744 z"
id="path2"
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccc" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

505
main/images/svg/logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 83 KiB

115
main/index.html
View file

@ -1,24 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alison Kira</title> <title>Alison Kira</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="images/svg/favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!---<meta property="og:image" content="./img/meta/homemeta.webp" /> --->
<meta property="og:type" content="website" />
<meta property="og:title" content="Alison Kira" />
<meta property="og:url" content="https://alisonkira.art" />
<meta
name="description"
content="Artist, Illustrator, Creator of Nuzzle."
/>
</head> </head>
<body> <body>
<!-- The sidebar --> <!-- The sidebar -->
<div class="sidenav"> <div class="sidenav">
<a href="#home">Home</a> <a href="#top">Back to Top</a>
<a href="#gallery">Gallery</a> <a href="#gallery">Gallery</a>
<a href="#about">About</a> <a href="#about">About</a>
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
<a href="/comms">Commissions</a> <a href="#comms">Commissions</a>
<a href="/live">Livestreams</a>
</div> </div>
<div class="main"><!-- container to push stuff aside from nav bar --> <div class="main"><!-- container to push stuff aside from nav bar -->
<!-- home --> <!-- home -->
<div id="home"> <div id="top">
<br> <br>
<h1>Alison Kira</h1> <h1>Alison Kira</h1>
<h2>My WAH-bsite!</h2> <h2>My WAH-bsite!</h2>
@ -28,49 +36,50 @@
<div id="gallery"> <div id="gallery">
<h2>Gallery</h2> <h2>Gallery</h2>
<div id="photos"> <div id="photos">
<a href="#img1"><img src="images/xenia.webp"></a> <a href="#img1"><img src="images/gallery/alisonterra.webp" alt="Alison as Terra from FFVI"></a>
<a href="#img2"><img src="images/niko.webp"></a> <a href="#img2"><img src="images/gallery/nona.webp" alt="Nona from Gunfire Reborn"></a>
<a href="#img3"><img src="images/nona.webp"></a> <a href="#img3"><img src="images/gallery/xenia.webp" alt="Xenia the Linux Fox"></a>
<a href="#img4"><img src="images/alisonterra.webp"></a> <a href="#img4"><img src="images/gallery/nuri3.webp" alt="NuriTheNurd lounging in a solarpunk place"></a>
<a href="#img5"><img src="images/sybil.webp"></a> <a href="#img5"><img src="images/gallery/sybil.webp" alt="Sybil from Pseudoregalia"></a>
<a href="#img6"><img src="images/pueblomagico.webp"></a> <a href="#img6"><img src="images/gallery/float.webp" alt="Alison holding pride hearts"></a>
<a href="#img7"><img src="images/mystfawf.webp"></a> <a href="#img7"><img src="images/gallery/mystfawf.webp" alt="Commission made as a gift"></a>
<a href="#img8"><img src="images/akautomata.webp"></a> <a href="#img2"><img src="images/gallery/niko.webp" alt="Niko from Oneshot"></a>
</div> </div>
</div> </div>
<!-- about--> <!-- about-->
<div id="about"> <div id="about">
<h2>About</h2> <h2>About</h2>
<ul> <ul>
<li><p>25, she/her</p></li> <li><p>she/her</p></li>
<li><p>Speak English, Spanish</p></li> <li><p>Speak English, Spanish</p></li>
<li><p>My character is a Red Panda</p></li> <li><p>My character is a Red Panda</p></li>
<li><p>Latine</p></li> <li><p>Latine</p></li>
<li><p>Very queer and neurodivergent</p></li> <li><p>My art is very queer and neurodivergent</p></li>
</ul> </ul>
<br> <br>
</div> </div>
<!-- Contact --> <!-- Contact -->
<div id="contact"> <div id="contact">
<h2>Contact</h2> <h2>Contact</h2>
<h3>Disclaimer: some links contain mature/NSFW content not appropriate for all ages.</h3> <h3>Disclaimer: some links contain mature/NSFW content not appropriate for people under 18 of age.</h3>
<p><a href="mailto:alisonkira@tuta.io">Mail</a> >>> for commission contact</p> <p><a href="mailto:alisonkira@tuta.io">Mail</a> >>> for commission contact</p>
<p><a href="https://ko-fi.com/alisonkira">Ko-Fi</a> >>> tip me!!!</p> <p><a href="https://ko-fi.com/alisonkira" target="_blank">Ko-Fi</a> >>> tip me!!!</p>
<p><a href="https://cohost.org/alisonkira">Cohost</a> >>> for thoughts</p> <p><a rel="me" href="https://mastodon.art/@alisonkit" target="_blank">Mastodon</a> >>> fedi!!!</p>
<p><a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a> >>> fedi!!!</p> <p><a href="https://bsky.app/profile/alisonkira.art" target="_blank">Bluesky</a> >>> basically a better twitter</p>
<p><a href="https://bsky.app/profile/alisonkira.art">Bluesky</a> >>> basically a better twitter</p> <p><a href="https://twitch.tv/alisonkira" target="_blank">Twitch</a> >>> Art Streams!</p>
<p><a href="https://twitch.tv/alisonkira">Twitch</a> >>> Art Streams!</p> <p><a href="https://discord.gg/t7X5uUEC/" target="_blank">Discord</a> >>> let's hang out!</p>
<p><a href="https://twitter.com/ayyalison">Twitter</a> ...why do we still use this</p> <p><a href="https://t.me/alisonkira_art/" target="_blank">Telegram</a> >>> art feed!</p>
<p><a href="https://discord.gg/t7X5uUEC/">Discord</a> >>> let's hang out!</p> <p><a href="live/">More info about my livestreams</a></p>
<p><a href="https://t.me/alisonkira_art/">Telegram</a> >>> art feed!</p>
<br> <br>
</div>
<!--Commissions-->
<div id="comms">
<h2>Commissions</h2>
<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.alisonkira.art/public/board/ee9ff691e7dc8704185c15717690cc1e57ef9eedfac575cd6cf0a21c5f14">Commission Queue</a> >>> for current commission schedule.</p> <p><a href="https://queue.alisonkira.art/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="comms/">Commission Info</a> >>> more detailed info about my commissions!</p>
<p><a href="tos/">Terms of Service</a> >>> read before commissioning!</p> <p><a href="tos/">Terms of Service</a> >>> read before commissioning!</p>
<h3>About my streams</h3>
<p><a href="live/">Visit this link to see more information about my streams.</a></p>
</div> </div>
<div id="footer"> <div id="footer">
<p>Alison Kira 2024</p> <p>Alison Kira 2024</p>
@ -82,36 +91,60 @@
<!-- LIGHTBOX --> <!-- LIGHTBOX -->
<div> <div>
<div class="lightbox" id="img1"> <div class="lightbox" id="img1">
<a href="#_"> <img src="images/xenia.webp" /></a> <img src="images/gallery/alisonterra.webp" alt="Alison as Terra from FFVI"/>
<p>Fanart of Xenia</p> <div id="textbox">
<p>Alison as Terra from Final Fantasy VI</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img2"> <div class="lightbox" id="img2">
<a href="#_"> <img src="images/niko.webp" /></a> <img src="images/gallery/nona.webp" alt="Nona from Gunfire Reborn"/>
<p>Fanart of Niko from Oneshot</p> <div id="textbox">
<p>Fanart of Nona from Gunfire Reborn</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img3"> <div class="lightbox" id="img3">
<a href="#_"> <img src="images/nona.webp" /></a> <img src="images/gallery/xenia.webp" alt="Xenia the Linux Fox"/>
<p>Fanart of Nona from Gunfire Reborn</p> <div id="textbox">
<p>Fanart of Xenia</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img4"> <div class="lightbox" id="img4">
<a href="#_"> <img src="images/alisonterra.webp" /></a> <img src="images/gallery/nuri3.webp" alt="NuriTheNurd lounging in a solarpunk place"/>
<p>Alison as Terra from Final Fantasy VI</p> <div id="textbox">
<p>NuriTheNurd lounging in a solarpunk setting</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img5"> <div class="lightbox" id="img5">
<a href="#_"> <img src="images/sybil.webp" /></a> <img src="images/gallery/sybil.webp" alt="Sybil from Pseudoregalia"/>
<div id="textbox">
<p>Fanart of Sybil from Pseudoregalia</p> <p>Fanart of Sybil from Pseudoregalia</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img6"> <div class="lightbox" id="img6">
<a href="#_"> <img src="images/pueblomagico.webp" /></a> <img src="images/gallery/float.webp" alt="Alison Holding Pride Hearts"/>
<p>A Mexican Town</p> <div id="textbox">
<p>Alison holding pride hearts</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img7"> <div class="lightbox" id="img7">
<a href="#_"> <img src="images/mystfawf.webp" /></a> <img src="images/gallery/mystfawf.webp" alt="Commission made asa gift"/>
<div id="textbox">
<p>Commission made as a gift</p> <p>Commission made as a gift</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
<div class="lightbox" id="img8"> <div class="lightbox" id="img8">
<a href="#_"> <img src="images/akautomata.webp" /></a> <img src="images/gallery/niko.webp" alt="Niko from Oneshot" />
<p>Alison as a Nier Android</p> <div id="textbox">
<p>Fanart of Niko from Oneshot</p>
<p><a href="#_">Close</a>
</div>
</div> </div>
</div><!-- end lightbox --> </div><!-- end lightbox -->
</body> </body>

51
main/live/index.html
View file

@ -1,14 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Alison Kira's Stream Info</title> <title>Alison Kira's Stream Info</title>
<link rel="stylesheet" href="./../style.css" type="text/css" media="screen"/> <link rel="stylesheet" href="./../style.css"/>
<link rel="icon" type="image/x-icon" href="./../images/svg/favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="See all the chat commands, info about redeems, and tools used on my livestreams."
/>
<!---<meta property="og:image" content="./img/meta/streammeta.webp" /> --->
<meta property="og:type" content="website" />
<meta property="og:title" content="Alison Kira's Stream Info" />
<meta property="og:url" content="https://alisonkira.art" />
</head> </head>
<body> <body>
<!-- The sidebar --> <!-- The sidebar -->
<div class="sidenav"> <div class="sidenav">
<a href="https://alisonkira.art">Home</a> <a href="#top">Back to Top</a>
<a href="#top">About</a>
<a href="#commands">Commands</a> <a href="#commands">Commands</a>
<a href="#bits">Bit Redeems</a> <a href="#bits">Bit Redeems</a>
<a href="#points">Channel Points</a> <a href="#points">Channel Points</a>
@ -16,6 +27,7 @@
</div> </div>
<div class="main"><!-- container to push stuff aside from nav bar --> <div class="main"><!-- container to push stuff aside from nav bar -->
<div id="top"> <div id="top">
<h3><a href="./../index.html">&gt;&gt;&gt;Back to the homepage</a></h3>
<h1>Alison's Livestream Info</h1><br> <h1>Alison's Livestream Info</h1><br>
<h2>About</h2> <h2>About</h2>
<p>I stream mainly art, ocasionally I will stream games too. I want to create a fun comfy and bizarre stream for you to enjoy.</p> <p>I stream mainly art, ocasionally I will stream games too. I want to create a fun comfy and bizarre stream for you to enjoy.</p>
@ -141,10 +153,6 @@
<b>!pipe <b>!pipe
</b> Metal Pipe SFX or Rich saying "Pipebombs" </b> Metal Pipe SFX or Rich saying "Pipebombs"
</li> </li>
<li>
<b>!egg
</b> Veggie Roland saying "Lay Egg NOW!"
</li>
<li> <li>
<b>!riff <b>!riff
</b> Weezer Buddy Holly Riff SFX </b> Weezer Buddy Holly Riff SFX
@ -157,10 +165,6 @@
<b>!boykisser <b>!boykisser
</b> boykisser dances (changes speed every time) </b> boykisser dances (changes speed every time)
</li> </li>
<li>
<b>!cringe
</b> Roland saying "cringe"
</li>
<li> <li>
<b>!avocados <b>!avocados
</b> "Avocados from Mexico" Jingle </b> "Avocados from Mexico" Jingle
@ -357,7 +361,7 @@
<li>Sofle RGB Split Keyboard</li> <li>Sofle RGB Split Keyboard</li>
</ul> </ul>
<h3>Software</h3> <h3>Software</h3>
<p>Many of the tools listed below are open source and maintained by talented programmers, and it would be awesome if you can help and contribute to these projects that make my stream (and many others) possible!</p> <p>Many of the tools listed below are open source and maintained by awesome developers, and it would be really nice if you can help and contribute to these projects that make my stream (and many others) possible!</p>
<h4>Main Software</h4> <h4>Main Software</h4>
<ul> <ul>
<li><a href="https://archlinux.org">Arch Linux</a> OS of choice</li> <li><a href="https://archlinux.org">Arch Linux</a> OS of choice</li>
@ -377,21 +381,23 @@
</ul> </ul>
<h4>OBS Plugins</h4> <h4>OBS Plugins</h4>
<ul> <ul>
<li><a href="https://obsproject.com/forum/resources/freeze-filter.950/">Freeze Filter</a></li> <li><a href="https://obsproject.com/forum/resources/move.913/">Move Plugin</a></li>
<li><a href="https://github.com/WarmUpTill/SceneSwitcher">Advanced Scene Switcher</a></li>
<li><a href="https://github.com/exeldro/obs-shaderfiltr">OBS Shaderfilter (Exeldro's Fork)</a></li>
<li><a href="https://github.com/nowrep/obs-vkcapture">OBS-VkCapture</a></li>
<li><a href="https://github.com/dimtpap/obs-pipewire-audio-capture">Pipewire Audio Capture</a></li>
<li><a href="https://github.com/obs-ai/obs-localvocal">LocalVocal</a></li>
<li><a href="https://github.com/phandasm/waveform">Waveform</a></li> <li><a href="https://github.com/phandasm/waveform">Waveform</a></li>
<li><a href="https://github.com/exeldro/obs-shaderfilter">OBS Shaderfilter (Exeldro's Fork)</a></li> <li><a href="https://obsproject.com/forum/resources/freeze-filter.950/">Freeze Filter</a></li>
<li><a href="https://obsproject.com/forum/resources/advanced-timer.637/">Countdown Timer</a></li> <li><a href="https://obsproject.com/forum/resources/advanced-timer.637/">Countdown Timer</a></li>
<li><a href="https://obsproject.com/forum/resources/tuna.843/">Tuna</a></li> <li><a href="https://obsproject.com/forum/resources/tuna.843/">Tuna</a></li>
<li><a href="https://github.com/obs-ai/obs-localvocal">LocalVocal</a></li>
<li><a href="https://github.com/dimtpap/obs-pipewire-audio-capture">Pipewire Audio Capture</a></li>
<li><a href="https://github.com/kkartaltepe/obs-text-pango">Pango Text</a></li> <li><a href="https://github.com/kkartaltepe/obs-text-pango">Pango Text</a></li>
<li><a href="https://github.com/nowrep/obs-vkcapture">OBS-VkCapture</a></li>
<li><a href="https://github.com/exeldro/obs-source-clone">Source Clone</a></li> <li><a href="https://github.com/exeldro/obs-source-clone">Source Clone</a></li>
<li><a href="https://obsproject.com/forum/resources/composite-blur.1780/">Composite Blur</a></li> <li><a href="https://obsproject.com/forum/resources/composite-blur.1780/">Composite Blur</a></li>
<li><a href="https://github.com/FiniteSingularity/obs-stroke-glow-shadow">Stroke Glow Shadow</a></li> <li><a href="https://github.com/FiniteSingularity/obs-stroke-glow-shadow">Stroke Glow Shadow</a></li>
<li><a href="https://github.com/WarmUpTill/SceneSwitcher">Advanced Scene Switcher</a></li>
<li><a href="https://github.com/univrsal/input-overlay">Input Overlay</a></li> <li><a href="https://github.com/univrsal/input-overlay">Input Overlay</a></li>
<li><a href="https://github.com/locaal-ai/obs-squawk>">Text to Speech</a><li> <li><a href="https://github.com/locaal-ai/obs-squawk>">Squawk</a><li>
</ul>
<!-- <!--
<li><a href="https://github.com/exeldro/obs-time-warp-scan">Scan</a></li> <li><a href="https://github.com/exeldro/obs-time-warp-scan">Scan</a></li>
<li><a href="https://obsproject.com/forum/resources/move.913/">Move</a></li> <li><a href="https://obsproject.com/forum/resources/move.913/">Move</a></li>
@ -399,10 +405,9 @@
<li><a href="https://obsproject.com/forum/resources/recursion-effect.1008/">Recursion Effect</a></li> <li><a href="https://obsproject.com/forum/resources/recursion-effect.1008/">Recursion Effect</a></li>
<li><a href="">Title</a></li> <li><a href="">Title</a></li>
--> -->
</ul> <h4>Twitch/OBS Browser Sources</h4>
<h4>Twitch/OBS Utilities</h4>
<ul> <ul>
<li><a href="https://github.com/sugoidogo/pngtube2">PNGTuber</a></li> <li><a href="https://github.com/sugoidogo/pngtube2">PNGTube2</a></li>
<li><a href="https://realityripple.com/Tools/Twitch/EmoteWall/index.php">Emote Wall</a></li> <li><a href="https://realityripple.com/Tools/Twitch/EmoteWall/index.php">Emote Wall</a></li>
<li><a href="https://forums.slime2.stream/resources/rounded-box-chat.18/">Slime Chat</a></li> <li><a href="https://forums.slime2.stream/resources/rounded-box-chat.18/">Slime Chat</a></li>
<li><a href="https://andylawton.com/home/bee-dice-roller">TTRPG Dice Rolling Widget</a></li> <li><a href="https://andylawton.com/home/bee-dice-roller">TTRPG Dice Rolling Widget</a></li>

1
main/robots.txt
View file

@ -1,2 +1,3 @@
#Pick up a pencil, coward.
User-agent: * User-agent: *
Disallow: / Disallow: /

120
main/style.css
View file

@ -18,13 +18,34 @@ h2{
} }
h3{ h3{
color: #f98498; color: #f98498;
}
p{
} }
a{ a{
color: #ef679b; color: #ef679b;
} }
.sidenav {
width: 150px;
position: fixed;
z-index: 1;
top: 25px;
left: 25px;
background: #6b3b46;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
color: #edd0db;
display: block;
}
.sidenav a:hover {
color: #ffffff;
background: #a06969;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
padding: 0px 10px;
}
.row { .row {
display: flex; display: flex;
} }
@ -37,50 +58,6 @@ a{
height:auto; height:auto;
transition:0.4s ease-in-out; transition:0.4s ease-in-out;
} }
.sidenav {
width: 150px;
position: fixed;
z-index: 1;
top: 25px;
left: 25px;
background: #6b3b46;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
color: #edd0db;
display: block;
}
.sidenav a:hover {
color: #af3d56;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
padding: 0px 10px;
}
/*
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*/
@media screen and (orientation: portrait) {
.sidenav {
position: sticky;
display: inline-flex;
width: max-content;
}
}
@media screen and (orientation: portrait) {
.main {
margin-left: 0px
}
}
#home { #home {
font-weight:bold; font-weight:bold;
} }
@ -115,6 +92,10 @@ a{
text-align:center; text-align:center;
font-weight:bold; font-weight:bold;
} }
#textbox {
background-color:rgba(0, 0, 0, 0);
margin: 4.5%;
}
.lightbox { .lightbox {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
display: none; display: none;
@ -123,24 +104,59 @@ a{
} }
.lightbox:target { .lightbox:target {
align-items: center; align-items: center;
bottom: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0;
} }
.lightbox img { .lightbox img {
border-radius: 1em; border-radius: 1em;
display: block; display: flex;
max-height: 80vh; max-height: 80vh;
} }
.lightbox p { .lightbox p {
display: block;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.lightbox a {
display: flex; @media screen and (orientation: portrait) {
margin: 4.5%; .row {
display: block;
}
.column {
padding:2vh 2vw;
}
.sidenav {
width: 100%;
position: static;
/*
position: sticky;
width: max-content;
display: inline-flex;
*/
}
.sidenav a {
padding: 6px 8px 6px 8px;
text-align: center; text-align: center;
}
.main {
margin-left: 0px;
}
.lightbox:target {
display: block;
}
.lightbox img {
max-width: 75%;
max-height: 75%;
display: block;
margin: auto;
margin-top: 8vw;
.lightbox p {
}
}
}
} }

33
main/tos/index.html
View file

@ -1,15 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Terms of Service</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="./../style.css">
<title> Terms of Service <link rel="icon" type="image/x-icon" href="./../images/svg/favicon.svg">
</title> <meta charset="UTF-8">
<meta name="generator" content="Org Mode" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../style.css" type="text/css" media="screen"/> <!---<meta property="og:image" content="./img/meta/tosmeta.webp" /> --->
</head> <meta property="og:type" content="website" />
<meta property="og:title" content="Terms Of Service" />
<meta property="og:url" content="https://alisonkira.art" />
<meta
name="description"
content="Terms of Service for Alison's Commissions. Please read before commissioning."
/>
</head>
<body> <body>
<div id="content" class="sidenav"> <div class="sidenav">
<a href="#top">Back to Top</a>
<a href="#org5cd1575">1. Definitions</a> <a href="#org5cd1575">1. Definitions</a>
<a href="#org6c844e6">2. General</a> <a href="#org6c844e6">2. General</a>
<a href="#org5a011af">3. Procedure</a> <a href="#org5a011af">3. Procedure</a>
@ -21,7 +29,10 @@
<a href="#org0d1b19d">9. I’ll refuse to draw</a> <a href="#org0d1b19d">9. I’ll refuse to draw</a>
</div> </div>
<div id="outline-container-org6f666c1" class="main"> <div id="outline-container-org6f666c1" class="main">
<div id="top">
<h3><a href="./../index.html">&gt;&gt;&gt;Back to the homepage</a></h3>
<h2 id="org6f666c1">Terms of Service</h2> <h2 id="org6f666c1">Terms of Service</h2>
</div>
<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">
@ -33,7 +44,7 @@
<ul class="org-li"> <ul class="org-li">
<li>“You, “Your”, “Client”, "Commissioner" refer to the individual or party obtaining a commission and/or merchandise from the artist. <li>“You, “Your”, “Client”, "Commissioner" refer to the individual or party obtaining a commission and/or merchandise from the artist.
</li> </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.net’’. <li>“I”, “Me”, “My”, “Myself” refer to the artist who goes by the alias &ldquo;Alison Kira&rdquo; and all of which are used across my social media accounts as described in the url ‘’alisonkira.art’’.
</li> </li>
<li>“Commission” refers to the exchange of the commissioner’s money and the work of art made by the artist. <li>“Commission” refers to the exchange of the commissioner’s money and the work of art made by the artist.
</li> </li>

43
nuzzle/about.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Nuzzle</title>
<!-- style -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- header -->
<div class="writeHeader"></div>
<div class="subPage clearfix">
<h1>About the Story</h1>
<p>Nuzzle is the story of Rocky's chance to fulfill her dream as an artist in a new town. Alongside her strange yet amazing friends, they all overcome the obstacles that lay upon them in life.</p>
<h1>About the Comic</h1>
<p>Nuzzle started serialization in January of 2022, new pages come on Saturdays at 12 PM Pacific. Nuzzle is a quirky slice-of-life story centered around school life, early adulthood, identity, responsibility and the meaning of family.</p>
<img src="img/alison.webp" alt="Alison the Author" class="clearfix leftPic"/>
<h1>About the Author</h1>
<p>Nuzzle is written and illustrated by Alison Kira, an artist from Baja California, Mexico. Alison has been drawing ever since they were little, and have been in the furry fandom since 2014.</p>
<h1>Special Thanks</h1>
<ul>
<li> Mystii (meowmaritus) for offering to do proofreading. </li>
</ul>
</div>
<!-- footer -->
<div class="writeFooter"></div>
<!-- at the end of this page we only call the header and footer scripts, because we don't need use any functions from the other scripts. -->
<script src="js/comic_header.js" defer></script>
<script src="js/comic_footer.js" defer></script>
</body>
</html>

40
nuzzle/archive.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<title>Archive | Nuzzle</title>
</head>
<body>
<!-- header -->
<div class="writeHeader"></div>
<div class="archivePage subPage" align="center">
<h1>Archive</h1>
<script>
indexPage = "index.html" //set which html page your comics are on, supremely important. archive system will break otherwise
</script>
<div class="chapter1">
<h2>Chapter 1: Life on Mars</h2>
</div>
<div class="chapter2">
<h2>Chapter 2: Walk on the Wild Side</h2>
</div>
</div>
<!-- footer-->
<div class="writeFooter"></div>
<!-- really important- every js script is called here, be sure to always put them just before the closing body tag, use a defer attribute, and call them in this specific order.-->
<script src="js/comic_header.js" defer></script>
<script src="js/comic_settings.js" defer></script>
<script src="js/comic_archive.js" defer></script>
<script src="js/comic_footer.js" defer></script>
</body>
</html>

76
nuzzle/characters.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Characters | Nuzzle</title>
<!-- style -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body align="center">
<!-- header -->
<div class="writeHeader"></div>
<!-- this character page kind of sucks, its more of an example of the kinds of supplementary pages you can potentially add-->
<div class="subPage clearfix" align="center">
<h1>Characters</h1>
<table class="charTable">
<!-- rocky -->
<tr>
<td>
<img src="img/characters/rocky.webp" alt="Rocky" class="clearfix rightPic"/>
<h2>Rocky</h2>
<p>Rocky is the protagonist of Nuzzle. She got a scholarship at BCAS (animation school) and she is aiming to succeed in it in order to start a career as an artist. Having moved to a different country alone, and away from the ambience she knew through all of her life, she is discovering and experiencing new things everyday. She is very shy and doesn’t get jokes or sarcasm that well, despite that she is open minded and willing to do anything for a friend. She likes animation, and any music from the 70’s.</p>
</td>
</tr>
<!-- hazel -->
<tr>
<td>
<img src="img/characters/hazel.webp" alt="Hazel" class="clearfix rightPic"/>
<h2>Hazel</h2>
<p>
Hazel is a student at BCAS, currently enrolled in game design. She met Rocky by complete accident and now they are very good friends, discovering more similarities about each other. She is very eccentric, teaseful, and may appear even wild at times, but deep down she tries her best to be a more responsible person. Her best friend since middle school is Tim. Despite her outward appereance, she is a big nerd and likes everything from 90s JRPG's, manga and tinkering with open source projects.
</p>
</td>
</tr>
<!-- tim -->
<tr>
<td>
<img src="img/characters/tim.webp" alt="Tim" class="clearfix rightPic"/>
<h2>Tim</h2>
<p>Tim is an animator and writer who is currently one of Rocky’s classmates at BCAS. Personality wise, he is basically a gremlin. He and his family moved to Canada from Singapore when he was a child, and since then, Hazel has been his best friend. He enjoys fighting games and Hip Hop. </p>
</td>
</tr>
<!-- leo -->
<tr>
<td>
<img src="img/characters/leo.webp" alt="Leo" class="clearfix rightPic"/>
<h2>Leo</h2>
<p>Leo is a songwriter and bassist from the band Margueritas, and shares a house with Rocky. </p>
</td>
</tr>
<!-- vera -->
<!-- vivi -->
<!-- sammy -->
<!-- joni -->
<!-- reed -->
<!-- mika -->
<!-- sammy -->
<!-- marcus -->
<!-- hazels mom -->
</table>
</div>
<!-- footer -->
<div class="writeFooter"></div>
<!-- at the end of this page we only call the header and footer scripts, because we don't need use any functions from the other scripts. -->
<script src="js/comic_header.js" defer></script>
<script src="js/comic_footer.js" defer></script>
</body>
</html>

207
nuzzle/css/style.css Normal file
View file

@ -0,0 +1,207 @@
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
body, div, main, section, article {
box-sizing: border-box;
}
/* universal background color */
body {
background-color: #DA5437;
}
/* header image */
header img {
width: 500px;
max-width: 98%;
}
/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*FONTS*/
/* header font */
#showComic, header, h1, h2, h3, h4, h5 {
font-family: 'Cherry Cream Soda', cursive;
}
/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
font-family: 'Open Sans', sans-serif;
font-size: large;
}
/* STYLING FOR SUBPAGES (about, characters, etc) */
/*general*/
.subPage {
width: 1000px;
max-width: 98%;
background-color: #ffffff;
outline: 3px solid #000000;
margin: auto;
margin-bottom: 10px;
padding: 0px 12px 12px;
}
.subPage:not(.archivePage) {
text-align: center;
}
/* for pictures displayed to the left */
.leftPic {
clear: left;
float:right;
margin-left:20px;
}
/* for pictures displayed to the left */
.rightPic {
clear: right;
float:left;
margin-left:20px;
}
/* specific to Characters */
.charTable, .charTable td {
width: 100%;
}
/* link colors */
a {
color: #000000;
}
a:hover {
color: #DA5437;
}
/* HEADER */
header #nav {
background-color: #ffffff;
outline: 3px solid #000000;
font-size: 20px;
width: 98%;
margin: auto;
}
/* HOMEPAGE */
/* style nav button images */
.comicNav {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding: 10px 0px;
}
.comicNav img {
width: 80px;
max-width: 98%;
padding-right: 30px;
}
/* style comic page image */
.comicPage img {
width: 900px;
max-width: 98%;
}
/* style author notes */
#authorNotes {
background-color:#ffffff;
outline: 3px solid #000000;
margin: auto;
padding: 3px;
padding-top: 0px;
width: 900px;
max-width: 98%;
}
/* ARCHIVE PAGE */
/* style table in which archive is displayed */
.archiveTable {
width: 90%;
border-collapse:collapse;
}
/* style archive table cells */
.archiveTable td {
padding: 3px;
vertical-align: center;
}
/* style table cell in which page title is displayed */
.archiveCellTitle:not(.leftAlignTableText) {
max-width: 300px;
text-align: center;
}
.archiveCellDate {
text-align: right;
min-width: 120px;
}
.archiveCellNum {
text-align: center;
min-width: 30px;
}
/* style the thumbnails on the archive page */
.archiveCellThumb {
width: 500px;
max-width: 60px;
}
.archiveCellThumb img{
max-width: 100%;
}
/* for left aligning the text in a table cell */
.leftAlignTableText td {
text-align: left;
}
/* highlight a table row and make pointer into hand when moused over */
.archiveRow:hover {
background-color: #DA5437;
cursor: pointer;
}
/* FOOTER */
footer {
color: #421a1a;
margin-top: 12px;
margin-bottom: 15px;
float: left;
width: 100%;
font-size: 12px;
text-align: center;
}
footer p {
margin: auto;
}
footer a {
color: #c8d32b;
}
footer a:hover {
color: #868d26
}
/* take away margins from the edges of the screen */
html, body {
margin: 0;
}

BIN
nuzzle/img/characters/hazel.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
nuzzle/img/characters/leo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
nuzzle/img/characters/rocky.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
nuzzle/img/characters/tim.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
nuzzle/img/comicnav/comicnav.clip Normal file
View file

Binary file not shown.

BIN
nuzzle/img/comicnav/nav_first.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
nuzzle/img/comicnav/nav_last.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
nuzzle/img/comicnav/nav_next.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
nuzzle/img/comicnav/nav_previous.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
nuzzle/img/comics/pg10_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 569 KiB

BIN
nuzzle/img/comics/pg10_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 604 KiB

BIN
nuzzle/img/comics/pg10_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 546 KiB

BIN
nuzzle/img/comics/pg10_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 575 KiB

BIN
nuzzle/img/comics/pg10_5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 342 KiB

BIN
nuzzle/img/comics/pg10_6.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
nuzzle/img/comics/pg10_7.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 544 KiB

BIN
nuzzle/img/comics/pg10_8.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 550 KiB

BIN
nuzzle/img/comics/pg11_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 572 KiB

BIN
nuzzle/img/comics/pg11_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 552 KiB

BIN
nuzzle/img/comics/pg11_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 470 KiB

BIN
nuzzle/img/comics/pg11_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 476 KiB

BIN
nuzzle/img/comics/pg11_5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 545 KiB

BIN
nuzzle/img/comics/pg11_6.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 543 KiB

BIN
nuzzle/img/comics/pg11_7.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 470 KiB

BIN
nuzzle/img/comics/pg11_8.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 413 KiB

BIN
nuzzle/img/comics/pg12_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 492 KiB

BIN
nuzzle/img/comics/pg12_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
nuzzle/img/comics/pg12_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 490 KiB

BIN
nuzzle/img/comics/pg12_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 517 KiB

BIN
nuzzle/img/comics/pg12_5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 528 KiB

BIN
nuzzle/img/comics/pg12_6.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 438 KiB

BIN
nuzzle/img/comics/pg12_7.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 377 KiB

BIN
nuzzle/img/comics/pg12_8.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 352 KiB

BIN
nuzzle/img/comics/pg13_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 386 KiB

BIN
nuzzle/img/comics/pg13_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 490 KiB

BIN
nuzzle/img/comics/pg13_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 546 KiB

BIN
nuzzle/img/comics/pg13_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 634 KiB

BIN
nuzzle/img/comics/pg14_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 553 KiB

BIN
nuzzle/img/comics/pg14_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 453 KiB

BIN
nuzzle/img/comics/pg14_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 476 KiB

BIN
nuzzle/img/comics/pg14_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 539 KiB

BIN
nuzzle/img/comics/pg1_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 263 KiB

BIN
nuzzle/img/comics/pg1_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 443 KiB

BIN
nuzzle/img/comics/pg1_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 548 KiB

BIN
nuzzle/img/comics/pg1_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 511 KiB

BIN
nuzzle/img/comics/pg1_5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 724 KiB

BIN
nuzzle/img/comics/pg1_6.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 353 KiB

BIN
nuzzle/img/comics/pg1_7.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 551 KiB

BIN
nuzzle/img/comics/pg1_8.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 420 KiB

BIN
nuzzle/img/comics/pg2_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 414 KiB

BIN
nuzzle/img/comics/pg2_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 328 KiB

BIN
nuzzle/img/comics/pg2_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 444 KiB

BIN
nuzzle/img/comics/pg2_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 254 KiB

BIN
nuzzle/img/comics/pg2_5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 460 KiB

BIN
nuzzle/img/comics/pg2_6.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 376 KiB

BIN
nuzzle/img/comics/pg2_7.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 480 KiB

BIN
nuzzle/img/comics/pg2_8.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 536 KiB

BIN
nuzzle/img/comics/pg3_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 490 KiB

BIN
nuzzle/img/comics/pg3_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 548 KiB

BIN
nuzzle/img/comics/pg3_3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 517 KiB

BIN
nuzzle/img/comics/pg3_4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 547 KiB

BIN
nuzzle/img/comics/pg3_5.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 502 KiB

BIN
nuzzle/img/comics/pg3_6.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 KiB

BIN
nuzzle/img/comics/pg3_7.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 391 KiB

BIN
nuzzle/img/comics/pg3_8.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 305 KiB

BIN
nuzzle/img/comics/pg4_1.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 446 KiB

BIN
nuzzle/img/comics/pg4_2.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 445 KiB

Some files were not shown because too many files have changed in this diff Show more