shannon/shannonkay.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update of book friends page, coffee page, and pinkbooks.coffee

Browse source
This commit is contained in:
Shannon Kay 2025-08-03 17:46:03 -07:00
parent d63bf87936
commit eb857d2109
18 changed files with 994 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bookfriends/home.css
View file

@ -1,6 +1,6 @@
@import url("https://use.typekit.net/ozy6rdy.css");
@import "https://www.shannonkay.com/fontawesome/css/fontawesome.css";
@import "/fontawesome/css/fontawesome.css";
@import "/fontawesome/css/brands.css";
@import "/fontawesome/css/solid.css";

32
bookfriends/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -39,7 +39,7 @@
<p>If you're seeing this page, it probably means that I met you at a book-related event. My name is Shannon, and
I go by <span class="username">shannonkay</span> on most of the internet, and sometimes <span class="username">pinkbookscoffee</span> in bookish and other cozy spaces. </p>
<p>You might want to friend or follow me on <a class="username" href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i>GoodReads</a> and <a class="username" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="../storygraph.svg">StoryGraph</a>. Let's <a href="https://www.goodreads.com/user/compare/198969">compare books</a>! </p>
<p>You might want to friend or follow me on <a href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i>GoodReads</a> and <a href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="../storygraph.svg">StoryGraph</a>. Let's <a href="https://www.goodreads.com/user/compare/198969">compare books</a>! </p>
<p>You can follow me on the fediverse on Mastodon <a class="username"href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i>@shannonkay@bookstodon.com</a> or even join the great book-themed server I'm on, <a href="https://bookstodon.com">Bookstodon.com</a>. </p>
@ -64,12 +64,34 @@
<img class="profilepic" id="pinkbookscoffeepic" src="pinkbookscoffee-profile.jpg" />
<figcaption class="caption">@pinkbookscoffee profile picture</figcaption>
</figure></p>
</section>
</section>
<section id="recap" class="text">
<section id="recap">
<h2>Past Events</h2>
<ul>
<li><a href="/yallwest24/index.html">yallwest 2024</a></li>
<li><a href="https://blog.shannonkay.com/2025/07-24-SarahAndSangu/">July 23, 2025 - Sarah Beth Durst and Sangu Mandanna at The Ripped Bodice.</a><br>
<figure>
<a href="https://photo.shannonkay.com/Web/Books/n-qvkxHX/i-5Rdq54f/A"><img src="https://photos.smugmug.com/photos/i-5Rdq54f/0/KRPRRwc48MSg2bKhWPzs54FBr2kmkt6BcxVWBS2bh/X3/i-5Rdq54f-X3.jpg" class="photo" alt="Sarah Beth Durst, Me(Shannon), and Sangu Mandanna at The Ripped Bodice in LA."></a>
<figcaption class="caption">Sarah Beth Durst, Me(Shannon), and Sangu Mandanna at The Ripped Bodice in LA.</figcaption>
</figure>
</li>
<li>October 2, 2024 - Ally Carter for The Most Wonderful Crime of the Year, at Warwick's book store in La Jolla, California.<br>
<figure>
<a href="https://photo.shannonkay.com/Web/Books/n-qvkxHX/i-qzmgPKx/A"><img src="https://photos.smugmug.com/photos/i-qzmgPKx/0/LVZQVs2hpSnVcMTbPXCfrVBnvvPmMZJJH7STQBQxW/X3/i-qzmgPKx-X3.jpg" class="photo" alt="Meeting Ally Carter"></a>
<figcaption class="caption">Ally Carter and Shannon</figcaption>
</figure>
</li>
<li>
<figure>August 9, 2024 - Rainbow Rowell at The Grove for Slow Dance<br>
<a href="https://photo.shannonkay.com/Web/Books/n-qvkxHX/i-xRXsZNL/A"><img src="https://photos.smugmug.com/photos/i-xRXsZNL/0/MtSX8bHnK2tv576RHvx76jSvZWggMnsVwvTDT9Jrm/X3/i-xRXsZNL-X3.jpg" class="photo" alt="Rainbow Rowell Book Event"></a>
<figcaption class="caption">Shannon and Rainbow Rowell at The Grove</figcaption>
</figure>
</li>
<li><a href="/yallwest24/index.html">yallwest 2024 (April 6, 2024)</a><br>
<a href="https://blog.shannonkay.com/2024/04-06-yallwest/">yallwest 2024 Blog Post</a>
</li>
</ul>
</section>

31
bookfriends/yallwest.css
View file

@ -80,14 +80,37 @@ hr {
}
a {
/* hightlighter style skewed underline style*/
a, a:visited {
color: #4e4560;
font-weight: bold;
text-decoration: underline;
text-decoration-color: #ffe2ef;
text-decoration-skip-ink: none;
text-decoration-thickness: .5em;
text-underline-offset: -.25em;
transition: text-decoration .3s;
}
a:hover, a:active {
color: #4e4560;
font-weight: bold;
text-decoration: underline;
text-decoration-color: #fcacc1;
text-decoration-skip-ink: none;
text-decoration-thickness: .5em;
text-underline-offset: -.15em;
transition: text-decoration .3s;
}
/* a {
color: #fb6f92;
}
a:hover, a:active {
color: #ffffff;
background: linear-gradient(183deg, #f9c2cc 10%, #FC8EAC 70%);
}
} */
a.username, a:visited.username {
text-decoration: none;
font-weight: bold;
@ -241,6 +264,9 @@ nav a:hover, nav a:active
.social-icons {
font-size: 1.5rem;
}
.social-icons a, .social-icons a:visited {
color: #f87dac;
}
#follow-icons {
margin-bottom: 5pt;
@ -253,7 +279,6 @@ img.photo {
.photo {
align-content: center;
text-align: center;
width: 600px;
height: auto;
max-width: 90%;
}

BIN
coffee/IMG_0149.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 843 KiB

BIN
coffee/IMG_0162.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 639 KiB

BIN
coffee/IMG_2515.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 528 KiB

BIN
coffee/IMG_8264.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 704 KiB

134
coffee/index.html
View file

@ -1,10 +1,12 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<title>Coffee (Shannon Kay)</title>
<meta charset="utf-8">
<title>Shannon Kay 💕☕️</title>
<meta name="description" content="I share my love of coffee. My coffee order, favorite coffee shops in Southern California, Coffee recipes including a Cold Brew recipe and AeroPress recipe, Favorite coffee beans and coffee gear.">
<meta name="keywords" content="Coffee, Cold Brew, AeroPress, Coffe Shops, Coffee Recipes, Coffee Beans, Coffee Gear, pink">
<meta name="author" content="Shannon Kay">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css">
@ -12,29 +14,127 @@
<body>
<header><h1><a href="../index.html">Shannon Kay</a> <i class="fa-solid fa-heart"></i> Coffee</h1></header>
<header><h1><a href="../index.html">Shannon Kay</a> 🩷 Coffee</h1></header>
<main>
<section class="text">
<p>I love coffee. <i class="fa-solid fa-heart"></i></p>
<p><figure class="photo"><img src="heartmugpinkbook.jpg" alt="coffee in a pink mug next to a pink book" style="max-width:70%;height:auto;">
<p>I love coffee.&nbsp;💕☕️</p>
<blockquote>
<p>
Brewing the coffee<br>
Heavenly fragrance, inhale<br>
Sipping, delicious<br>
</p>
</blockquote>
<nav>
<a href="#order">Order</a>
<a href="#shops">Coffee Shops</a>
<a href="#recipes">Recipes</a>
<a href="#coldbrew">Cold Brew</a>
<a href="#aeropress">AeroPress</a>
<a href="#icedpourover">Iced Pour-Over</a>
<a href="#beans">Beans</a>
<a href="#gear">Gear</a>
</nav>
<p><figure class="photo"><img src="heartmugpinkbook.jpg" alt="coffee in a pink mug next to a pink book" style="max-width:70%;height:auto;">
</figure></p>
<h3 id="coffee">Coffee Links</h3>
<ul>
<li><a href="https://aeropress.com">AeroPress</a></li>
<li><a href="https://bluebottlecoffee.com/us/eng/subscriptions?tb=coffee-subscriptions">Blue Bottle Coffee Single Origin Subscription</a></li>
<li><a href="https://fellowproducts.com/products/stagg-ekg-electric-pour-over-kettle?variant=31212444811364">Fellow Stagg EKG Electric Kettle</a></li>
<li><a href="https://www.oxo.com/cold-brew-coffee-maker.html">OXO Cold Brew Maker</a></li>
<li><a href="https://drops.fellowproducts.com">Fellow Drops</a></li>
</ul>
<h3 id="order"><a href="#order">My Coffee Order</a></h3>
<ul>
<li>Most places: cold brew coffee, black with ice</li>
<li>If they don't have cold brew: Iced Americano, black<br />
I like coffees with fruity tasting notes the most.</li>
</ul>
<h3 id="shops"><a href="#shops">Favorite Coffee Shops</a></h3>
<ul>
<li><a href="https://reborncoffee.com">Reborn Coffee Roasters</a> - I usually go to their Brea cafe, but they have several more locations throughout Southern California. They roast their beans in Brea, California. I usually get the Ethiopia Cold Brew.</li>
<li><a href="https://www.caffe-incoffeeco.com">Caffe In Coffee Co</a> in Anaheim, California, or the <a href="https://www.caffe-in-coffee.com">original Caffe In Coffee in Tustin</a>, California.</li>
<li><a href="https://www.portolacoffee.com">Portola Coffee</a> - I used to visit their Tustin location when my daughter used to have a dance class nearby. That location is gone, but they have another one in Costa Mesa, California.</li>
</ul>
<hr>
<h2 id="recipes"><a href="#recipes">Coffee Recipes</a></h2>
<h3 id="coldbrew"><a href="#coldbrew">Cold Brew Coffee Recipe</a></h3>
<p>I use the <a href="https://www.oxo.com/cold-brew-coffee-maker.html">OXO Cold Brew Maker</a> and make my cold brew at a 1:8 ratio, which is basically double strength. That means that whatever amount of coffee I use, I use eight times that amount of water. For drinking, I dilute with about half cold brew and half water. </p>
<h4 id="directions">Directions</h4>
<ol>
<li>Grind 5oz of coffee at the coarsest setting and put it in the cold brewing container.</li>
<li>Pour in 40oz of water and stir a little.</li>
<li>Leave it on the counter to brew for 24 hours. There's some wiggle room with the time, but 24 hours is usually the best. I find the magic starts to happen at around 20 hours of brew time. </li>
<li>When it's finished brewing, strain out the coffee (with the dripper valve if you're using the oxo brewer) and put the finished cold brew coffee in the refrigerator. </li>
<li>This cold brew is double strength, so mix even amounts of it with water for drinking. </li>
</ol>
<p><figure class="photo"><img src="../20210715.09.46-06.jpg" alt="coffee" style="max-width:100%;height:auto;">
<figcaption class="caption">Cold brew coffee.</figcaption>
</figure></p>
<h3 id="aeropress"><a href="#aeropress">AeroPress Coffee Recipe</a></h3>
<ul>
<li>20g coffee, ground medium-fine (level 4 on Ode Gen 2 grinder)</li>
<li>water at 203°F</li>
</ul>
<h4 id="directions">Directions</h4>
<ol>
<li>Set up AeroPress for <a href="https://aeropress.com/pages/how-to-use">standard brewing</a>, with a paper filter and on top of a carafe or mug and place on a scale set to grams. </li>
<li>Pour the ground coffee into the AeroPress and tare/zero out the scale.</li>
<li>Pour 200g of water into the AeroPress</li>
<li>Stir a few times, back and forth, with the paddle stirrer</li>
<li>Pour water to 280g</li>
<li>Remove from scale before pressing slowly with the plunger</li>
<li>When all the coffee is pressed, remove the AeroPress.</li>
<li>If brewed into a carafe, pour into a mug.</li>
<li>Add a splash of cold water </li>
<li>Enjoy!</li>
</ol>
<h3 id="icedpourover"><a href="#icedpourover">Iced Pour-Over Coffee Recipe</a></h3>
<p>This recipe is from this <a href="https://fellowproducts.com/blogs/brew-talks/fellows-take-on-the-future-grape-soda-black-white">Fellow Brew Guide</a>(<a href="https://web.archive.org/web/20250619224111/https://fellowproducts.com/blogs/brew-talks/fellows-take-on-the-future-grape-soda-black-white">archive</a>). After ordering the coffee it's written for, I started trying the iced recipe right away, to be ready for when those special coffee beans arrived. I really liked the recipe, and kept using it for iced coffee when I didn't have cold brew ready but wanted something iced. </p>
<p><strong>Supplies</strong>: Flat-bottom dripper(I use Stagg XF) with a paper filter and a carafe</p>
<ul>
<li>25g coffee, ground at medium setting (4 on Ode Gen 2)</li>
<li>125g ice in carafe (I sometimes pour 125g water into my carafe in the morning and put it in the freezer, and it's frozen by the afternoon.)</li>
<li>250g of hot water, 202°F</li>
</ul>
<ol>
<li>Put 125g ice into the carafe.</li>
<li>Put the ground coffee into a paper filter, and put the filter in the dripper.</li>
<li>Put the dripper on top of the carafe which has the ice in it.</li>
<li>Put everything on top of the scale and zero/tare the scale.</li>
<li>To bloom, pour the hot water to <strong>75g</strong> and wait 45 seconds.</li>
<li>Pour to <strong>160g</strong> and wait for it to be mostly drained.</li>
<li>Pour to <strong>250g</strong> and swirl it when it's not too close to the top of the filter.</li>
<li>Wait for the coffee to finish dripping, then remove the dripper.</li>
<li>Swirl the carafe until all of the ice is melted. The coffee should be cold now.</li>
<li>Pour over fresh ice to serve.</li>
</ol>
<hr>
<h2 id="beans"><a href="#beans">Coffee Beans</a></h2>
<ul>
<li><a href="https://www.yesplz.coffee">Yes Plz Coffee Subscription</a></li>
<li><a href="https://drops.fellowproducts.com">Fellow Drops</a></li>
<li><a href="https://www.brandywinecoffeeroasters.com">Brandywine Coffee Roasters</a> - This roaster is far from me, but every time Fellow Drops has one of their coffees, I order it. I've ordered directly from them a couple times too, and I've also tried their tea. I especially enjoy their co-ferment coffees. </li>
</ul>
<h2 id="gear"><a href="#gear">Coffee Gear</a></h2>
<ul>
<li><a href="https://aeropress.com">AeroPress</a> - the <a href="https://aeropress.com/products/aeropress-clear?view=sl-C7AC606F&variant=46221586071795">AeroPress Pink Clear</a> is my favorite!</li>
<li><a href="https://fellowproducts.com/products/staggdripper?variant=18635550949491">Stagg XF Pour-Over Dripper</a></li>
<li><a href="https://fellowproducts.com/products/stagg-ekg-electric-pour-over-kettle?variant=31212444811364">Fellow Stagg EKG Electric Kettle</a> - I have the Warm Pink color</li>
<li><a href="https://www.oxo.com/cold-brew-coffee-maker.html">OXO Cold Brew Maker</a></li>
<li><a href="https://fellowproducts.com/products/ode-brew-grinder-gen-2?variant=40978992529508">Fellow Ode Gen 2 Grinder</a></li>
<li><a href="https://fellowproducts.com/products/mighty-small-glass-carafe">Fellow Mighty Small Glass Carafe</a></li>
<li><a href="https://www.amazon.com/dp/B0007GAWZ0">Escali Primo Digital Food Scale</a> (pink) (Amazon link)</li>
<li><a href="https://www.amazon.com/dp/B07K51BD8F">These Desert/Coffee demitasse spoons</a> (Amazon link) </li>
</ul>
</section>
</main>

199
grid-layout-homepage.html Normal file
View file

@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shannon Kay [Shannon's Homepage]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<meta name="description" content="This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to persons all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. ">
<meta name="keywords" content="Personal Sites, Personal Web, Small Web, Books, Coffee, Webrings, Now Page, Hello Page, Homepage, Classic Homepage, Classic Homepage Project">
<meta name="author" content="Shannon Kay">
<link rel="stylesheet" href="home.css">
<link rel="webmention" href="https://webmention.io/www.shannonkay.com/webmention">
<link rel="pingback" href="https://webmention.io/www.shannonkay.com/xmlrpc">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="me" href="https://bookstodon.com/@shannonkay">
<link rel="me" href="https://social.vivaldi.net/@shannonkay">
<link rel="me" href="https://github.com/shannonkay">
<link rel="me" href="https://www.threads.net/@shannonkay">
<script defer src="https://umami.cozycastle.net/script.js" data-website-id="2710bc63-7601-4b29-991f-5ce98e29dce4"></script>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px 3rem 1fr 5rem;
gap: 0.3rem;
grid-template-areas:
'header header'
'nav nav'
'sidebar main'
'footer footer';
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
#sidebar {
grid-area: sidebar;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="wrapper">
<header><h1>Shannon Kay</h1></header>
<nav class="pages">
<a href="now/index.html">Now</a>
<a href="me.html">Me</a>
<a href="hello/index.html">Hello</a>
<a href="uses/index.html">Uses</a>
<a href="you/index.html">You</a>
<a href="homepage/index.html">Classic Homepage</a>
<a href="projects/index.html">Projects</a>
<a href="books/index.html">Books</a>
<a href="follow/index.html">Follow</a>
<a href="blank/index.html">Blank</a>
<a href="directory/index.html">Directory</a>
<a href="https://photo.shannonkay.com" rel="me">Photos</a>
<a href="https://blog.shannonkay.com" rel="me">Blog</a>
<a href="https://guestbook.shannonkay.com">Guestbook</a>
</nav>
<section id="sidebar">
<a href="now/index.html">Now</a>
<a href="me.html">Me</a>
<a href="hello/index.html">Hello</a>
<a href="uses/index.html">Uses</a>
<a href="you/index.html">You</a>
<a href="homepage/index.html">Classic Homepage</a>
<a href="projects/index.html">Projects</a>
<a href="books/index.html">Books</a>
<a href="follow/index.html">Follow</a>
<a href="blank/index.html">Blank</a>
<a href="directory/index.html">Directory</a>
<a href="https://photo.shannonkay.com" rel="me">Photos</a>
<a href="https://blog.shannonkay.com" rel="me">Blog</a>
<a href="https://guestbook.shannonkay.com">Guestbook</a>
</section>
<main>
<section id="welcome" class="blurb">
<section class="social-icons" id="follow-icons">
<a rel="me" href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i></a>
<a href="https://bsky.app/profile/shannonkay.com"><i class="fa-brands fa-bluesky"></i></a>
<a href="https://instagram.com/shannonkay"><i class="fa-brands fa-instagram"></i></a>
<a rel="me" href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i></a>
<a rel="me" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="icons/storygraph-fb6f92.png" alt="Storygraph"></a>
<a href="mailto:homepage25@shannonkay.me"><i class="fa-solid fa-envelope"></i></a>
<a href="follow/index.html">&hellip;</a>
</section>
<section id="intro">
<h2>Welcome to my homepage!</h2>
<p>This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to <em>persons</em> all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. There was a time when starting your website with "Welcome to my website" was dismissed as too cliche. I feel like reclaiming that, and welcoming you to my homepage.</p></section>
<p>I invite you to 💗<a href="https://guestbook.shannonkay.com">Sign My Guestbook</a>📚.</p>
<p>
<blockquote>Handwriting plain HTML and CSS websites again has made me feel creatively revitalized. I think this might be how some people feel when they go back to handwriting a journal. It's like I'm getting in touch with my inner tween.</blockquote>
<picture>
<source srcset="coffeeloveblinkie-shannon.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="coffeeloveblinkie-shannon-still.gif"
alt="coffee blinkie Shannon">
</picture>
</p>
<p>Visit my other website, <a href="https://www.pixelshannon.com">Pixel Shannon</a>, for guides and articles about the web, including <a href="https://web.pixelshannon.com/make/">Make Your Own Website</a>.</p>
<section id="emoji">
<p>
<img src="emoji/EmojiBlitz/Titanic/Rose/EmojiBlitzRoseTitanic1.webp" class="emoji" alt="emoji depicting Rose in her traveling outfit with the hat from the 1997 film titled Titanic">
<img src="emoji/minniebow.png" class="emoji" alt="Minnie Bow">
<img src="emoji/dolewhip.png" class="emoji" alt="Dole Whip Emoji">
<img src="emoji/princesshatemoji.png" class="emoji" alt="Princess Hat">
<img src="emoji/spacemountain.png" class="emoji" alt="space mountain">
</p>
</section>
<p>
<picture>
<source srcset="beauty-reading_001.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="beauty-reading_001-still.gif"
alt="Beauty and the Beast reading scene">
</picture>
</p>
<hr>
<section id="webrings">
<h3>Webrings</h3>
<p>
<a href="https://hotlinewebring.club/shannonkay/previous">←</a> <a href="https://hotlinewebring.club">Hotline Webring</a> <a href="https://hotlinewebring.club/shannonkay/next">→</a>
</p>
<p>
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/previous">←</a>
An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/next">→</a>
</p>
</section>
<section id="cliques">
<h3>Cliques</h3>
<p>
<a href="https://sanguineroyal.com/extra/barbieland" target="_new">Barbieland</a> :: This Barbie is me! <img src="emoji/HashtagBarbie.png" alt="Hashtag Barbie" class="emoji">
</p>
</section>
<hr>
<section class="bio">
<span class="h-card">
<img class="u-photo" src="ShannonKay2017.jpg" >
<p><a href="https://www.shannonkay.com" class="u-url u-uid p-name">Shannon Kay</a></p>
<p class="p-note">
I'm a Californian early millennial, mom of 3.
I love books, coffee, tech, and making things pink.
</p>
<p><a rel="me" href="https://blog.shannonkay.com" class="u-url">Blog</a></p>
<p><abbr class="p-region" title="California">CA</abbr>
<a rel="me" href="https://bookstodon.com/@shannonkay" class="u-url"><i class="fa-brands fa-mastodon"></i></a>
<a rel="me" href="https://instagram.com/shannonkay" class="u-url"><i class="fa-brands fa-instagram"></i></a>
<a rel="me" href="https://shannonkay.tumblr.com" class="u-url"><i class="fa-brands fa-tumblr"></i></a>
<a href="https://bsky.app/profile/shannonkay.com" class="u-url"><i class="fa-brands fa-bluesky"></i></a>
<a rel="me" href="https://www.reddit.com/user/shannonkaypink" class="u-url"><i class="fa-brands fa-reddit"></i></a>
</p>
</span>
</section>
</section>
</main>
<footer>
<p>Shannon's Homepage by Shannon Kay</p>
<p class="updated"><a href="log/index.html">Updated</a> April 11, 2025 | Created August 15, 2021</p>
</footer>
</div>
</body>
</html>

217
homepage-grid.html Normal file
View file

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shannon Kay [Shannon's Homepage]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<meta name="description" content="This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to persons all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. ">
<meta name="keywords" content="Personal Sites, Personal Web, Small Web, Books, Coffee, Webrings, Now Page, Hello Page, Homepage, Classic Homepage, Classic Homepage Project">
<meta name="author" content="Shannon Kay">
<link rel="stylesheet" href="home.css">
<link rel="webmention" href="https://webmention.io/www.shannonkay.com/webmention">
<link rel="pingback" href="https://webmention.io/www.shannonkay.com/xmlrpc">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="me" href="https://bookstodon.com/@shannonkay">
<link rel="me" href="https://social.vivaldi.net/@shannonkay">
<link rel="me" href="https://github.com/shannonkay">
<link rel="me" href="https://www.threads.net/@shannonkay">
<script defer src="https://umami.cozycastle.net/script.js" data-website-id="2710bc63-7601-4b29-991f-5ce98e29dce4"></script>
<style>
#homepagewrapper {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 2rem 1fr 0.5fr 250px;
gap: 0.3rem;
grid-template-areas:
'sidebar follow-icons'
'sidebar welcome'
'sidebar internet'
'sidebar bio';
}
#sidebar {
grid-area: sidebar;
}
#follow-icons {
grid-area: follow-icons;
}
#welcome {
grid-area: welcome;
}
#internet {
grid-area: internet;
}
.bio {
grid-area: bio;
}
@media screen and (max-width: 450px)
{
#homepagewrapper {
display: grid;
gap: 0.2rem;
grid-template-rows: 2rem 1fr 1fr 0.5fr 250px;
grid-template-areas:
'follow-icons'
'welcome'
'sidebar'
'internet'
'bio'
}
}
</style>
</head>
<body>
<header><h1>Shannon Kay</h1></header>
<main>
<nav class="pages">
<a href="now/index.html">Now</a>
<a href="me.html">Me</a>
<a href="hello/index.html">Hello</a>
<a href="uses/index.html">Uses</a>
<a href="you/index.html">You</a>
<a href="homepage/index.html">Classic Homepage</a>
<a href="projects/index.html">Projects</a>
<a href="books/index.html">Books</a>
<a href="follow/index.html">Follow</a>
<a href="blank/index.html">Blank</a>
<a href="directory/index.html">Directory</a>
<a href="https://photo.shannonkay.com" rel="me">Photos</a>
<a href="https://blog.shannonkay.com" rel="me">Blog</a>
<a href="https://guestbook.shannonkay.com">Guestbook</a>
</nav>
<div id="homepagewrapper" class="blurb">
<section id="sidebar">
<a href="now/index.html">Now</a>
<a href="me.html">Me</a>
<a href="hello/index.html">Hello</a>
<a href="uses/index.html">Uses</a>
<a href="you/index.html">You</a>
<a href="homepage/index.html">Classic Homepage</a>
<a href="projects/index.html">Projects</a>
<a href="books/index.html">Books</a>
<a href="follow/index.html">Follow</a>
<a href="blank/index.html">Blank</a>
<a href="directory/index.html">Directory</a>
<a href="https://photo.shannonkay.com" rel="me">Photos</a>
<a href="https://blog.shannonkay.com" rel="me">Blog</a>
<a href="https://guestbook.shannonkay.com">Guestbook</a>
</section>
<section class="social-icons" id="follow-icons">
<a rel="me" href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i></a>
<a href="https://bsky.app/profile/shannonkay.com"><i class="fa-brands fa-bluesky"></i></a>
<a href="https://instagram.com/shannonkay"><i class="fa-brands fa-instagram"></i></a>
<a rel="me" href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i></a>
<a rel="me" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="icons/storygraph-fb6f92.png" alt="Storygraph"></a>
<a href="mailto:homepage25@shannonkay.me"><i class="fa-solid fa-envelope"></i></a>
<a href="follow/index.html">&hellip;</a>
</section>
<section id="welcome">
<section id="intro">
<h2>Welcome to my homepage!</h2>
<p>This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to <em>persons</em> all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. There was a time when starting your website with "Welcome to my website" was dismissed as too cliche. I feel like reclaiming that, and welcoming you to my homepage.</p></section>
<p>I invite you to 💗<a href="https://guestbook.shannonkay.com">Sign My Guestbook</a>📚.</p>
<section id="frontpage">
<p>
<blockquote>Handwriting plain HTML and CSS websites again has made me feel creatively revitalized. I think this might be how some people feel when they go back to handwriting a journal. It's like I'm getting in touch with my inner tween.</blockquote>
<picture>
<source srcset="coffeeloveblinkie-shannon.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="coffeeloveblinkie-shannon-still.gif"
alt="coffee blinkie Shannon">
</picture>
</p>
<p>Visit my other website, <a href="https://www.pixelshannon.com">Pixel Shannon</a>, for guides and articles about the web, including <a href="https://web.pixelshannon.com/make/">Make Your Own Website</a>.</p>
</section>
<section id="emoji">
<p>
<img src="emoji/EmojiBlitz/Titanic/Rose/EmojiBlitzRoseTitanic1.webp" class="emoji" alt="emoji depicting Rose in her traveling outfit with the hat from the 1997 film titled Titanic">
<img src="emoji/minniebow.png" class="emoji" alt="Minnie Bow">
<img src="emoji/dolewhip.png" class="emoji" alt="Dole Whip Emoji">
<img src="emoji/princesshatemoji.png" class="emoji" alt="Princess Hat">
<img src="emoji/spacemountain.png" class="emoji" alt="space mountain">
</p>
<p>
<picture>
<source srcset="beauty-reading_001.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="beauty-reading_001-still.gif"
alt="Beauty and the Beast reading scene">
</picture>
</p>
<hr>
</section>
</section>
<!-- end welcome section -->
<section id="internet">
<section id="webrings">
<h3>Webrings</h3>
<p>
<a href="https://hotlinewebring.club/shannonkay/previous">←</a> <a href="https://hotlinewebring.club">Hotline Webring</a> <a href="https://hotlinewebring.club/shannonkay/next">→</a>
</p>
<p>
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/previous">←</a>
An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/next">→</a>
</p>
</section>
<section id="cliques">
<h3>Cliques</h3>
<p>
<a href="https://sanguineroyal.com/extra/barbieland" target="_new">Barbieland</a> :: This Barbie is me! <img src="emoji/HashtagBarbie.png" alt="Hashtag Barbie" class="emoji">
</p>
</section>
<hr>
</section>
<section class="bio">
<span class="h-card">
<img class="u-photo" src="ShannonKay2017.jpg" >
<p><a href="https://www.shannonkay.com" class="u-url u-uid p-name">Shannon Kay</a></p>
<p class="p-note">
I'm a Californian early millennial, mom of 3.
I love books, coffee, tech, and making things pink.
</p>
<p><a rel="me" href="https://blog.shannonkay.com" class="u-url">Blog</a></p>
<p><abbr class="p-region" title="California">CA</abbr>
<a rel="me" href="https://bookstodon.com/@shannonkay" class="u-url"><i class="fa-brands fa-mastodon"></i></a>
<a rel="me" href="https://instagram.com/shannonkay" class="u-url"><i class="fa-brands fa-instagram"></i></a>
<a rel="me" href="https://shannonkay.tumblr.com" class="u-url"><i class="fa-brands fa-tumblr"></i></a>
<a href="https://bsky.app/profile/shannonkay.com" class="u-url"><i class="fa-brands fa-bluesky"></i></a>
<a rel="me" href="https://www.reddit.com/user/shannonkaypink" class="u-url"><i class="fa-brands fa-reddit"></i></a>
</p>
</span>
</section>
</div>
</main>
<footer>
<p>Shannon's Homepage by Shannon Kay</p>
<p class="updated"><a href="log/index.html">Updated</a> April 11, 2025 | Created August 15, 2021</p>
</footer>
</body>
</html>

209
homepage.html Normal file
View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shannon Kay [Shannon's Homepage]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<meta name="description" content="This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to persons all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. ">
<meta name="keywords" content="Personal Sites, Personal Web, Small Web, Books, Coffee, Webrings, Now Page, Hello Page, Homepage, Classic Homepage, Classic Homepage Project">
<meta name="author" content="Shannon Kay">
<link rel="stylesheet" href="home.css">
<link rel="webmention" href="https://webmention.io/www.shannonkay.com/webmention">
<link rel="pingback" href="https://webmention.io/www.shannonkay.com/xmlrpc">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="me" href="https://bookstodon.com/@shannonkay">
<link rel="me" href="https://social.vivaldi.net/@shannonkay">
<link rel="me" href="https://github.com/shannonkay">
<link rel="me" href="https://www.threads.net/@shannonkay">
<script defer src="https://umami.cozycastle.net/script.js" data-website-id="2710bc63-7601-4b29-991f-5ce98e29dce4"></script>
<style>
#homepage {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr;
}
#homepagemain {
grid-column: 1;
}
#homepageside {
grid-column: 2;
grid-row: 1 / 4;
}
/* #intro {
grid-column: 1;
grid-row: 1;
}
#emoji {
grid-column: 1;
grid-row: 2;
order: 1;
}
#webrings {
grid-column: 1;
grid-row: 3;
}
#cliques {
grid-column: 1;
grid-row: 4;
} */
</style>
</head>
<body>
<header><h1>Shannon Kay</h1></header>
<main>
<nav class="pages">
<a href="now/index.html">Now</a>
<a href="me.html">Me</a>
<a href="hello/index.html">Hello</a>
<a href="uses/index.html">Uses</a>
<a href="you/index.html">You</a>
<a href="homepage/index.html">Classic Homepage</a>
<a href="projects/index.html">Projects</a>
<a href="books/index.html">Books</a>
<a href="follow/index.html">Follow</a>
<a href="blank/index.html">Blank</a>
<a href="directory/index.html">Directory</a>
<a href="https://photo.shannonkay.com" rel="me">Photos</a>
<a href="https://blog.shannonkay.com" rel="me">Blog</a>
<a href="https://guestbook.shannonkay.com">Guestbook</a>
</nav>
<section id="welcome" class="blurb">
<section class="social-icons" id="follow-icons">
<a rel="me" href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i></a>
<a href="https://bsky.app/profile/shannonkay.com"><i class="fa-brands fa-bluesky"></i></a>
<a href="https://instagram.com/shannonkay"><i class="fa-brands fa-instagram"></i></a>
<a rel="me" href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i></a>
<a rel="me" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="icons/storygraph-fb6f92.png" alt="Storygraph"></a>
<a href="mailto:homepage25@shannonkay.me"><i class="fa-solid fa-envelope"></i></a>
<a href="follow/index.html">&hellip;</a>
</section>
<h2>Welcome to my homepage!</h2>
<!-- column layout -->
<div id="homepage">
<div id="homepagemain">
<section id="intro">
<p>This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to <em>persons</em> all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. There was a time when starting your website with "Welcome to my website" was dismissed as too cliche. I feel like reclaiming that, and welcoming you to my homepage.</p></section>
<p>I invite you to 💗<a href="https://guestbook.shannonkay.com">Sign My Guestbook</a>📚.</p>
<p>
<blockquote>Handwriting plain HTML and CSS websites again has made me feel creatively revitalized. I think this might be how some people feel when they go back to handwriting a journal. It's like I'm getting in touch with my inner tween.</blockquote>
<picture>
<source srcset="coffeeloveblinkie-shannon.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="coffeeloveblinkie-shannon-still.gif"
alt="coffee blinkie Shannon">
</picture>
</p>
<p>Visit my other website, <a href="https://www.pixelshannon.com">Pixel Shannon</a>, for guides and articles about the web, including <a href="https://web.pixelshannon.com/make/">Make Your Own Website</a>.</p>
<section id="emoji">
<p>
<img src="emoji/EmojiBlitz/Titanic/Rose/EmojiBlitzRoseTitanic1.webp" class="emoji" alt="emoji depicting Rose in her traveling outfit with the hat from the 1997 film titled Titanic">
<img src="emoji/minniebow.png" class="emoji" alt="Minnie Bow">
<img src="emoji/dolewhip.png" class="emoji" alt="Dole Whip Emoji">
<img src="emoji/princesshatemoji.png" class="emoji" alt="Princess Hat">
<img src="emoji/spacemountain.png" class="emoji" alt="space mountain">
</p>
</section>
<p>
<picture>
<source srcset="beauty-reading_001.gif"
media="(prefers-reduced-motion: no-preference)">
<img src="beauty-reading_001-still.gif"
alt="Beauty and the Beast reading scene">
</picture>
</p>
<hr>
<section id="webrings">
<h3>Webrings</h3>
<p>
<a href="https://hotlinewebring.club/shannonkay/previous">←</a> <a href="https://hotlinewebring.club">Hotline Webring</a> <a href="https://hotlinewebring.club/shannonkay/next">→</a>
</p>
<p>
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/previous">←</a>
An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/next">→</a>
</p>
</section>
<section id="cliques">
<h3>Cliques</h3>
<p>
<a href="https://sanguineroyal.com/extra/barbieland" target="_new">Barbieland</a> :: This Barbie is me! <img src="emoji/HashtagBarbie.png" alt="Hashtag Barbie" class="emoji">
</p>
</section>
</div>
<div id="homepageside">
<h3>Sidebar</h3>
<a href="now/index.html">Now</a>
<a href="me.html">Me</a>
<a href="hello/index.html">Hello</a>
<a href="uses/index.html">Uses</a>
<a href="you/index.html">You</a>
<a href="homepage/index.html">Classic Homepage</a>
<a href="projects/index.html">Projects</a>
<a href="books/index.html">Books</a>
<a href="follow/index.html">Follow</a>
<a href="blank/index.html">Blank</a>
<a href="directory/index.html">Directory</a>
<a href="https://photo.shannonkay.com" rel="me">Photos</a>
<a href="https://blog.shannonkay.com" rel="me">Blog</a>
<a href="https://guestbook.shannonkay.com">Guestbook</a>
</div>
</div>
<hr>
<section class="bio">
<span class="h-card">
<img class="u-photo" src="ShannonKay2017.jpg" >
<p><a href="https://www.shannonkay.com" class="u-url u-uid p-name">Shannon Kay</a></p>
<p class="p-note">
I'm a Californian early millennial, mom of 3.
I love books, coffee, tech, and making things pink.
</p>
<p><a rel="me" href="https://blog.shannonkay.com" class="u-url">Blog</a></p>
<p><abbr class="p-region" title="California">CA</abbr>
<a rel="me" href="https://bookstodon.com/@shannonkay" class="u-url"><i class="fa-brands fa-mastodon"></i></a>
<a rel="me" href="https://instagram.com/shannonkay" class="u-url"><i class="fa-brands fa-instagram"></i></a>
<a rel="me" href="https://shannonkay.tumblr.com" class="u-url"><i class="fa-brands fa-tumblr"></i></a>
<a href="https://bsky.app/profile/shannonkay.com" class="u-url"><i class="fa-brands fa-bluesky"></i></a>
<a rel="me" href="https://www.reddit.com/user/shannonkaypink" class="u-url"><i class="fa-brands fa-reddit"></i></a>
</p>
</span>
</section>
</section>
</main>
<footer>
<p>Shannon's Homepage by Shannon Kay</p>
<p class="updated"><a href="log/index.html">Updated</a> April 11, 2025 | Created August 15, 2021</p>
</footer>
</body>
</html>

3
homepage/index.html
View file

@ -39,7 +39,6 @@
<li><a href="https://bryanlrobinson.com/blog/bring-fansites-back-to-the-web/">Let's Bring Fansites and Webrings Back</a> </li>
<li><a href="https://matthiasott.com/notes/the-year-of-the-personal-website">The Year of the Personal Website</a></li>
<li><a href="https://localghost.dev/blog/building-a-website-like-it-s-1999-in-2022">Building a website like it's 1999... in 2022</a></li>
<li><a href="https://foreverliketh.is/blog/exploring-the-personal-web">Exploring the Personal Web</a></li>
<li><a href="https://whimsical.club">The Whimsical Web</a> - Websites that spark joy.</li>
<li><a href="https://stackingthebricks.com/how-blogs-broke-the-web/">How the Blog Broke the Web</a></li>
<li><a href="https://joelhooks.com/digital-garden">My blog is a digital garden, not a blog</a></li>
@ -53,7 +52,7 @@
<li><a href="https://web.pixelshannon.com">The Web (Pixel Shannon)</a> - My web-related resources</li>
<li><a href="/pixelshannon/web/freehosts/index.html">Testing Free Website Hosts</a> - I test a bunch of free website hosts and give little reviews and mini tutorials.</li>
<li><a href="https://neocities.org">Neocities</a> - "Neocities is a social network of&nbsp;websites that are bringing back the lost individual creativity of the web. We offer free static web hosting and tools that allow you to create your own web site."</li>
<li><a href="https://nekoweb.org">Nekoweb</a> - Free website community similar to Neocities. Upload or edit your website in the browser. Their <a href="https://nekoweb.org/donate">donator tier</a> offers custom domain support, more space and some other perks.</li>
<li><a href="https://nekoweb.org">Nekoweb</a> - Free website community similar to Neocities. Upload or edit your website in the browser. Upgrade to their <a href="https://nekoweb.org/upgrade">Nekoweb Cute kitty tier</a> for custom domain support, more space and some other perks.</li>
<li><a href="https://porkbun.com/">Buy a Domain Name at PorkBun.com</a>&nbsp;- currently my favorite domain name registrar, with included WHOIS privacy, free SSL certificates, and great prices.</li>
<li><a href="https://yay.boo">Yay.Boo</a> - simple free web hosting, just upload your files</li>
<li><a href="https://home.omg.lol/">omg.lol</a> - paid service includes internet address, profile page, website hosting, and more</li>

7
index.html
View file

@ -5,11 +5,14 @@
<title>Shannon Kay [Shannon's Homepage]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<meta name="description" content="This personal website was made by me, Shannon Kay. I am participating in the poetic ideal of the world wide web; Using the internet to connect to persons all around the world. I have a personal website because I am a person. This is my place on the web to have fun and be creative. ">
<meta name="keywords" content="Personal Sites, Personal Web, Small Web, Books, Coffee, Webrings, Now Page, Hello Page, Homepage, Classic Homepage, Classic Homepage Project">
<meta name="author" content="Shannon Kay">
<link rel="stylesheet" href="home.css">
<link rel="webmention" href="https://webmention.io/www.shannonkay.com/webmention" />
<link rel="pingback" href="https://webmention.io/www.shannonkay.com/xmlrpc" />
<link rel="webmention" href="https://webmention.io/www.shannonkay.com/webmention">
<link rel="pingback" href="https://webmention.io/www.shannonkay.com/xmlrpc">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

65
layout.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 3rem 1fr 5rem;
gap: 0.3rem;
grid-template-areas:
'header header'
'nav nav'
'sidebar main'
'footer footer';
}
/* .parent {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 3rem 1fr;
gap: 0.3rem;
grid-template-areas:
'nav nav'
'sidebar main';
} */
header {
grid-area: header;
}
nav {
background-color: yellow;
grid-area: nav;
}
#sidebar {
background-color: peachpuff;
grid-area: sidebar;
}
main {
background-color: pink;
grid-area: main;
}
footer {
grid-area: footer;
}
/* #four {
background-color: aqua;
} */
</style>
</head>
<body>
<div class="wrapper">
<header>Header</header>
<!-- <div class="parent"> -->
<nav>1 Nav</nav>
<section id="sidebar">2 Sidebar</section>
<main>3 Main</main>
<!-- <section id="four">4</section> -->
<!-- </div> -->
<footer>Footer</footer>
</div>
</body>
</html>

13
log/index.html
View file

@ -21,6 +21,19 @@
<p>This is a <a href="https://www.etymonline.com/word/log#etymonline_v_12388">log</a> of updates and changes to my website. Not to be confused with my <a href="https://blog.shannonkay.com">blog</a>.</p>
<hr>
<!-- update template
<p id="DATE">
<a href="#DATE">DATE or Title</a><br>
</p>
<hr>
-->
<p id="20250716">
<a href="#20250716">July 16, 2025</a><br>
I made a new <a href="../coffee/index.html">Coffee</a> page.
</p>
<hr>
<p id="20250411">
<a href="#20250411">April 11, 2025</a><br>
<ul>

34
pinkbookscoffee/home.css
View file

@ -376,11 +376,18 @@ ul {
.photo img {
border: solid white 2pt;
}
.photo a, .photo a:visited, .photo a:active, .photo a:hover {
border: solid white 2pt;
}
.photo {
align-content: center;
text-align: center;
max-width: 100%;
max-height: 100vw;
/* border: solid 1pt #a48ac9; */
}
.screenshot img {
width: 360px;
max-width: 90%;
@ -393,8 +400,16 @@ ul {
height: auto;
}
figure {
background-color: white;
border: solid 1pt #a48ac9;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.caption {
text-align: center;
font-size: 1rem;
font-style: italic;
}
.bio {
@ -430,7 +445,8 @@ ul {
}
blockquote {
font-style: normal;
background-color: #f4ebeb;
/* background-color: #f4ebeb; */
background: linear-gradient(180deg, #fcf6f6, #f4ebeb 100%);
font-weight: 400;
color: #594f67;
font-family: "ivyjournal", "adobe-garamond-pro", Georgia, Garamond, Baskerville, serif;
@ -499,24 +515,8 @@ footer {
@media(prefers-color-scheme: dark) {
body {
background-color: #4e4560;
background: linear-gradient(to bottom, #454860, #4e4560 );
/* color: #f9e7e9; */
color: #f9e7e9;
}
/* pink gradient text */
p {
background: linear-gradient(120deg, #f9e7e9, #ffb9d4, #fc94bc, #f4bdff 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
strong, b {
background: linear-gradient(90deg, #fb6ca3, #fb9bbf, #f97bac 100%);
/* display: block; */
padding: 0.1rem;
color: #ffffff;
}
}
/* Custom Icons */

BIN
pinkbookscoffee/icons/hardcoverapp-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

140
pinkbookscoffee/index.html
View file

@ -7,6 +7,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="home.css">
<meta name="description" content="This is the link in bio homepage for PinkBooksCoffee, aka Shannon.">
<meta name="keywords" content="books, bookstagram, pink, coffee, link in bio">
<meta name="author" content="Shannon">
<meta property="og:image" content="https://photos.smugmug.com/photos/i-bJhGHsj/0/MkzX592S85CTX4mCG5PJFNk8C9vX36Vmz5ftHVS5X/X4/i-bJhGHsj-X4.jpg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -23,6 +27,7 @@
<section class="blurb">
<section class="social-icons">
<a href="https://www.shannonkay.com"><span class="icon">🏠</span></a>
<a rel="me" href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i></a>
<a href="https://instagram.com/pinkbookscoffee"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.threads.net/@pinkbookscoffee"><i class="fa-brands fa-threads"></i></a>
@ -30,31 +35,75 @@
<a href="https://bsky.app/profile/shannonkay.com"><i class="fa-brands fa-bluesky"></i></a>
<a href="https://shannonkay.tumblr.com"><i class="fa-brands fa-tumblr"></i></a>
<a rel="me" href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i></a>
<a rel="me" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="icons/storygraph.svg"></a>
<a rel="me" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="icons/storygraph.svg"></a>
<a rel="me" href="https://hardcover.app/@pinkbookscoffee"><img class="icon" src="icons/hardcoverapp-icon.png"></a>
<a rel="me" href="https://www.bookwormreads.co/profile/pinkbookscoffee"><img class="icon" src="icons/bookwormreads.co.png"></a>
</section>
<p><a href="https://blog.shannonkay.com/2025/05-31-SummerReading2025/">Shannon's Summer reading list for 2025</a>
<section id="top">
<ul>
<li><a href="https://blog.shannonkay.com/2025/05-31-SummerReading2025/">Shannon's Summer reading list for 2025</a></li>
<li><a href="https://yourownwebsite.org">Your Own Website</a> - <a href="https://yourownwebsite.org/have/">Have your own website!</a> <a href="https://make.yourownwebsite.org">Make your own website!</a></li>
<li><a href="https://yourownwebsite.org/startablog/">Start a Blog</a></li>
<li><a href="https://blog.shannonkay.com/2024/05-25-PhotosinGoodReads/">How to Use Photos in GoodReads Reviews</a> - use your nice Bookstagram photos in more places!</li>
<li><a href="https://www.pixelshannon.com/socialposting/index.html">About Social Posting (2024 Edition)</a> - <i class="fa-brands fa-mastodon"></i> Mastodon vs <i class="fa-brands fa-bluesky"></i> Bluesky vs <i class="fa-brands fa-threads"></i> Threads comparison and guide</li>
</ul>
<!-- If you can pay for a service, <a href="https://micro.blog">Micro.blog</a> is a low-cost blog host which also interacts with and cross-posts to social media and you have your own copy of all your posts on your blog. -->
<p><a href="#tips">Jump to Tips</a></p>
<p>📬 <a href="mailto:reply25@pinkbooks.coffee?subject=%5BReply%5D%20PinkBooks.Coffee">send an email reply</a></p>
<hr>
</section>
<section id="bookevents">
<p>
<a href="https://blog.shannonkay.com/2025/07-24-SarahAndSangu/">July 23, 2025 - Sarah Beth Durst and Sangu Mandanna at The Ripped Bodice.</a><br>
<figure>
<a href="https://photo.shannonkay.com/Web/Books/n-qvkxHX/i-5Rdq54f/A"><img src="https://photos.smugmug.com/photos/i-5Rdq54f/0/KRPRRwc48MSg2bKhWPzs54FBr2kmkt6BcxVWBS2bh/X3/i-5Rdq54f-X3.jpg" class="photo" alt="Sarah Beth Durst, Me(Shannon), and Sangu Mandanna at The Ripped Bodice in LA."></a>
<figcaption class="caption">Sarah Beth Durst, Me(Shannon), and Sangu Mandanna at The Ripped Bodice in LA.</figcaption>
</figure>
</p>
<p><a href="https://www.pixelshannon.com/socialposting/index.html">About Social Posting (2024 Edition)</a> - <i class="fa-brands fa-mastodon"></i> Mastodon vs <i class="fa-brands fa-bluesky"></i> Bluesky vs <i class="fa-brands fa-threads"></i> Threads comparison and guide</p>
<h3>Tips for Bookstagram and Bookthreads friends looking for alternative platforms</h3>
<ul>
<li><a href="https://thenest.owlcrate.com">The Nest</a> is a book community run by OwlCrate. <a href="https://thenest.owlcrate.com/profile/16204">Here's my profile on The Nest</a>.</li>
<li>The Mastodon instance I'm on is book themed. Try it at <a href="https://bookstodon.com">Bookstodon.com</a>. </li>
<li><a href="https://pixelfed.org">Pixelfed</a> is a photo-centric platform similar to Instagram. I have a <a rel="me" href="https://pixelfed.social/pinkbookscoffee">mirror of my booksta account on Pixelfed</a>.</li>
<li>I'm also starting to post my <a href="https://bsky.app/profile/pinkbooks.coffee">PinkBooksCoffee content on Bluesky</a> and hang out over there more. I <a href="https://github.com/marcomaroni-github/instagram-to-bluesky">imported</a> my booksta posts to a Bluesky account.</li>
<li>You can use the <a href="https://pinksky.app">Pinksky</a> app for a more Instagram-style experience on Bluesky.</li>
<li>Use <a href="https://openvibe.social">OpenVibe</a> or <a href="https://croissantapp.com">Croissant</a> to cross-post between Threads, Mastodon, and Bluesky.</li>
</ul>
<hr>
</section>
<p>I encourage you to <a href="https://web.pixelshannon.com">have your own website.</a>
<section id="currentread">
<h4>Currently Reading</h4>
<p></p>
<style type="text/css" media="screen">
.gr_grid_container1 {
/* customize grid container div here. eg: width: 500px; */
}
<!-- If you can pay for a service, <a href="https://micro.blog">Micro.blog</a> is a low-cost blog host which also interacts with and cross-posts to social media and you have your own copy of all your posts on your blog. -->
</p>
.gr_grid_book_container1 {
/* customize book cover container div here */
width: 98px;
height: 160px;
padding: 2pt;
overflow: hidden;
}
</style>
<div id="gr_grid_widget_1674899180">
<!-- Show static html as a placeholder in case js is not enabled - javascript include will override this if things work -->
<div class="gr_grid_container1">
<div class="gr_grid_book_container1"><a title="The Last Fallen Star (Gifted Clans, #1)" rel="nofollow" href="https://www.goodreads.com/book/show/55277625-the-last-fallen-star"><img alt="The Last Fallen Star" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1601319805l/55277625._SX98_.jpg" /></a></div>
<noscript><br/>Share <a rel="nofollow" href="/">book reviews</a> and ratings with Shannon, and even join a <a rel="nofollow" href="/group">book club</a> on Goodreads.</noscript>
</div>
</div>
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
<p>If there's nothing here, it means I'm between books.</p>
<p><a href="mailto:reply25@pinkbooks.coffee?subject=%5BReply%5D%20PinkBooks.Coffee">Reply by email</a></p>
<hr>
</section>
<h2>Book Links</h2>
<section id="booklinks">
<h2>Book Links</h2>
<p class="link"><a href="https://blog.shannonkay.com/books">Book Blogging on Shannon's Blog</a></p>
<p class="link"><a class="link" rel="me" href="https://app.thestorygraph.com/profile/pinkbookscoffee"><img class="icon" src="icons/storygraph.svg"> StoryGraph</a></p>
<p class="link"><a class="link" rel="me" href="https://www.goodreads.com/shannonkay"><i class="fa-brands fa-goodreads-g"></i> GoodReads</a></p>
@ -62,44 +111,45 @@
<p class="link"><a class="link" rel="me" href="https://pixelfed.social/pinkbookscoffee">Pixelfed @pinkbookscoffee@pixelfed.social</a></p>
<p class="link"><a class="link" rel="me" href="https://bsky.app/profile/pinkbooks.coffee"><i class="fa-brands fa-bluesky"></i> Bluesky @pinkbooks.coffee</a> </p>
<p class="link"><a class="link" rel="me" href="https://bsky.app/profile/shannonkay.com"><i class="fa-brands fa-bluesky"></i> Bluesky @shannonkay.com</a> </p>
<p class="link"><a rel="me" href="https://hardcover.app/@pinkbookscoffee"><img class="icon" src="icons/hardcoverapp-icon.png"> Hardcover.app</a></p>
<p class="link"><a class="link" rel="me" href="https://bookrastinating.com/user/shannonkay"><img class="icon" src="/icons/bookrastinating.png"> BookWyrm @shannonkay@bookrastinating.com</a></p>
<p class="link"><a class="link" rel="me" href="https://www.instagram.com/pinkbookscoffee">"Bookstagram" <i class="fa-brands fa-instagram"></i> @pinkbookscoffee</a></p>
<p class="link"><a class="link" rel="me" href="https://www.threads.net/@pinkbookscoffee"><i class="fa-brands fa-threads"></i> @pinkbookscoffee on Threads</a></p>
<hr>
</section>
<section id="currentread">
<h4>Currently Reading</h4>
<p></p>
<style type="text/css" media="screen">
.gr_grid_container1 {
/* customize grid container div here. eg: width: 500px; */
}
.gr_grid_book_container1 {
/* customize book cover container div here */
width: 98px;
height: 160px;
padding: 2pt;
overflow: hidden;
}
</style>
<div id="gr_grid_widget_1674899180">
<!-- Show static html as a placeholder in case js is not enabled - javascript include will override this if things work -->
<div class="gr_grid_container1">
<div class="gr_grid_book_container1"><a title="The Last Fallen Star (Gifted Clans, #1)" rel="nofollow" href="https://www.goodreads.com/book/show/55277625-the-last-fallen-star"><img alt="The Last Fallen Star" border="0" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1601319805l/55277625._SX98_.jpg" /></a></div>
<noscript><br/>Share <a rel="nofollow" href="/">book reviews</a> and ratings with Shannon, and even join a <a rel="nofollow" href="/group">book club</a> on Goodreads.</noscript>
</div>
<section id="tips">
<h2><a href="#tips">Tips</a></h2>
<h3 id="goodreads-export"><a href="#goodreads-export">Export from GoodReads</a></h3>
<p>If you want to try a GoodReads alternative, or just back up your data, you can export from GoodReads. On the GoodReads website, go to <a href="https://www.goodreads.com/review/import">My Books &#62; Import/Export</a> and export a <code>.csv</code> file of your library. You can import that file into other places, like <a href="https://thestorygraph.com">Storygraph</a>.</p>
<hr>
<h3 id="ownwebsite"><a href="#ownwebsite">Have Your Own Website</a></h3>
<p>What's your link in bio? A link tree is a website. A blog is a website. If you don't have a website, you can make one! You can make it however you want, and put whatever you like on it.</p>
<ul>
<li><a href="https://yourownwebsite.org">Your Own Website</a> - Have your own website</li>
<li><a href="https://yourownwebsite.org/startablog/">Start a Blog</a> - Easy ways to start a blog, good for beginners.</li>
<li><a href="https://make.yourownwebsite.org">Make your own website!</a> - A beginners guide to making a website with HTML and CSS.</li>
</ul>
<hr>
<h3 id="alternatives"><a href="#alternatives">Tips for Bookstagram and Bookthreads friends looking for alternative platforms</a></h3>
<ul>
<li><a href="https://thenest.owlcrate.com">The Nest</a> is a book community run by OwlCrate. <a href="https://thenest.owlcrate.com/profile/16204">Here's my profile on The Nest</a>.</li>
<li>The Mastodon instance I'm on is book themed. Try it at <a href="https://bookstodon.com">Bookstodon.com</a>. </li>
<li><a href="https://pixelfed.org">Pixelfed</a> is a photo-centric platform similar to Instagram. I have a <a rel="me" href="https://pixelfed.social/pinkbookscoffee">mirror of my booksta account on Pixelfed</a>.</li>
<li>I'm also starting to post my <a href="https://bsky.app/profile/pinkbooks.coffee">PinkBooksCoffee content on Bluesky</a> and hang out over there more. I <a href="https://github.com/marcomaroni-github/instagram-to-bluesky">imported</a> my booksta posts to a Bluesky account.</li>
<li>You can use the <a href="https://pinksky.app">Pinksky</a> app for a more Instagram-style experience on Bluesky.</li>
<li>Use <a href="https://openvibe.social">OpenVibe</a> or <a href="https://croissantapp.com">Croissant</a> to cross-post between Threads, Mastodon, and Bluesky.</li>
</ul>
<hr>
</section>
</div>
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
<p>If there's nothing here, it means I'm between books.</p>
<hr>
<p><figure class="photo"><img src="heartmugpinkbook.jpg" alt="coffee in a pink mug next to a pink book" style="max-width:70%;height:auto;">
<figcaption>I love coffee. &#129655;&#9749;</figcaption>
</figure></p>
<p>I love coffee. &#129655;&#9749;</p>
<h3 id="coffee">Coffee Links</h3>
<ul>