blog-static/page2/index.html
2024-09-08 13:58:55 +00:00

2493 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta
name="viewport"
content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
><!-- Setup Open Graph image -->
<!-- Begin Jekyll SEO tag v2.8.0 -->
<meta name="generator" content="Jekyll v4.3.3" />
<meta property="og:title" content="Quinns Bookshelf" />
<meta property="og:locale" content="en" />
<meta name="description" content="A blog about LGBTQ+ reflections, gender, mental health and writing." />
<meta property="og:description" content="A blog about LGBTQ+ reflections, gender, mental health and writing." />
<link rel="canonical" href="https://bookshelf.thequinn.fr/page2/" />
<meta property="og:url" content="https://bookshelf.thequinn.fr/page2/" />
<meta property="og:site_name" content="Quinns Bookshelf" />
<meta property="og:type" content="website" />
<link rel="prev" href="https://bookshelf.thequinn.fr/" />
<link rel="next" href="https://bookshelf.thequinn.fr/page3" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Quinns Bookshelf" />
<meta name="twitter:site" content="@twitter_username" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"A blog about LGBTQ+ reflections, gender, mental health and writing.","headline":"Quinns Bookshelf","url":"https://bookshelf.thequinn.fr/page2/"}</script>
<!-- End Jekyll SEO tag -->
<title>Quinn's Bookshelf
</title>
<!--
The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
Generated by: https://realfavicongenerator.net/
-->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/img/favicons/site.webmanifest">
<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Quinn's Bookshelf">
<meta name="application-name" content="Quinn's Bookshelf">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Resource Hints -->
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="dns-prefetch" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com" >
<link rel="preconnect" href="https://cdn.jsdelivr.net" >
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" >
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css">
<!-- Web Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css">
<!-- 3rd-party Dependencies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css">
<!-- JavaScript -->
<!-- Switch the mode between dark and light. -->
<script type="text/javascript">
class ModeToggle {
static get MODE_KEY() {
return 'mode';
}
static get MODE_ATTR() {
return 'data-mode';
}
static get DARK_MODE() {
return 'dark';
}
static get LIGHT_MODE() {
return 'light';
}
static get ID() {
return 'mode-toggle';
}
constructor() {
let self = this;this.sysDarkPrefers.addEventListener('change', () => {
if (self.hasMode) {
self.clearMode();
}
self.notify();
});
if (!this.hasMode) {
return;
}
if (this.isDarkMode) {
this.setDark();
} else {
this.setLight();
}
}
get sysDarkPrefers() {
return window.matchMedia('(prefers-color-scheme: dark)');
}
get isPreferDark() {
return this.sysDarkPrefers.matches;
}
get isDarkMode() {
return this.mode === ModeToggle.DARK_MODE;
}
get hasMode() {
return this.mode != null;
}
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}get modeStatus() {
if (this.hasMode) {
return this.mode;
} else {
return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE;
}
}
setDark() {
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
}
setLight() {
document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
}
clearMode() {
document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}notify() {
window.postMessage(
{
direction: ModeToggle.ID,
message: this.modeStatus
},
'*'
);
}
flipMode() {
if (this.hasMode) {
this.clearMode();
} else {
if (this.isPreferDark) {
this.setLight();
} else {
this.setDark();
}
}
this.notify();
}
}
const modeToggle = new ModeToggle();
</script>
<!-- A placeholder to allow defining custom metadata -->
</head>
<body>
<!-- The Side Bar -->
<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
<header class="profile-wrapper">
<a href="/" id="avatar" class="rounded-circle"><img src="/commons/avatar.jpg" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a>
<h1 class="site-title">
<a href="/">Quinn's Bookshelf</a>
</h1>
<p class="site-subtitle fst-italic mb-0">LGBTQ+ poems, essays and short stories</p>
</header>
<!-- .profile-wrapper -->
<nav class="flex-column flex-grow-1 w-100 ps-0">
<ul class="nav">
<!-- home -->
<li class="nav-item active">
<a href="/" class="nav-link">
<i class="fa-fw fas fa-home"></i>
<span>HOME</span>
</a>
</li>
<!-- the real tabs -->
<li class="nav-item">
<a href="/categories/" class="nav-link">
<i class="fa-fw fas fa-stream"></i>
<span>CATEGORIES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/tags/" class="nav-link">
<i class="fa-fw fas fa-tags"></i>
<span>TAGS</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/archives/" class="nav-link">
<i class="fa-fw fas fa-archive"></i>
<span>ARCHIVES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/about/" class="nav-link">
<i class="fa-fw fas fa-info-circle"></i>
<span>ABOUT</span>
</a>
</li>
<!-- .nav-item -->
</ul>
</nav>
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
<button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
<i class="fas fa-adjust"></i>
</button>
<span class="icon-border"></span>
<a
href="javascript:location.href = 'mailto:' + ['quinn.morrigan','proton.me'].join('@')"
aria-label="email"
>
<i class="fas fa-envelope"></i>
</a>
<a
href="https://courgett.es/@cookie"
aria-label="mastodon"
target="_blank"
rel="noopener noreferrer me"
>
<i class="fab fa-mastodon"></i>
</a>
<a
href="/feed.xml"
aria-label="rss"
>
<i class="fas fa-rss"></i>
</a>
</div>
<!-- .sidebar-bottom -->
</aside>
<!-- #sidebar -->
<div id="main-wrapper" class="d-flex justify-content-center">
<div class="container d-flex flex-column px-xxl-5">
<!-- The Top Bar -->
<header id="topbar-wrapper" aria-label="Top Bar">
<div
id="topbar"
class="d-flex align-items-center justify-content-between px-lg-3 h-100"
>
<nav id="breadcrumb" aria-label="Breadcrumb">
<!-- index page -->
<span>Home</span>
</nav>
<!-- endof #breadcrumb -->
<button type="button" id="sidebar-trigger" class="btn btn-link">
<i class="fas fa-bars fa-fw"></i>
</button>
<div id="topbar-title">
Quinn's Bookshelf
</div>
<button type="button" id="search-trigger" class="btn btn-link">
<i class="fas fa-search fa-fw"></i>
</button>
<search id="search" class="align-items-center ms-3 ms-lg-0">
<i class="fas fa-search fa-fw"></i>
<input
class="form-control"
id="search-input"
type="search"
aria-label="search"
autocomplete="off"
placeholder="Search..."
>
</search>
<button type="button" class="btn btn-link text-decoration-none" id="search-cancel">Cancel</button>
</div>
</header>
<div class="row flex-grow-1">
<main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
<!-- Refactor the HTML structure -->
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
<!-- Change the icon of checkbox -->
<!-- Handle images -->
<!-- take out classes -->
<!-- lazy-load images -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- Add header for code snippets -->
<!-- Create heading anchors -->
<!-- return -->
<!-- Get pinned posts -->
<!-- Get default posts -->
<div id="post-list" class="flex-grow-1 px-xl-1">
<article class="card-wrapper card">
<a href="/posts/i-forgot-all-of-their-names/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">I forgot all of their names</h1>
<div class="card-text content mt-0 mb-3">
<p>I had come home for just a week
I didnt put my bags down
I was afraid that if I stopped
I would lose my momentum and
I would fall
I looked at the picture in a drawer
I hadnt opened in a while
I...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1676729940"
data-df="ll"
>
Feb 18, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Poetry
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/journaling-donts/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">Journaling don'ts - Journaling Guide: part 4</h1>
<div class="card-text content mt-0 mb-3">
<p>In the previous article, weve gone through all the things you can do to help your journaling practice. In this article, well do the opposite, looking at the things you probably shouldnt do or ex...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1676639220"
data-df="ll"
>
Feb 17, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Reflections
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/shame/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">Why is no one talking about the shame?</h1>
<div class="card-text content mt-0 mb-3">
<p>As Contrapoints said, shame is intertwined with my identity as a queer person. In this article I explore my own relationship with shame and pride in relation to my sexual orientation.</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1676034780"
data-df="ll"
>
Feb 10, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Reflections
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/start-journaling/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">Everything you need to know to start journaling - Journaling Guide: part 3</h1>
<div class="card-text content mt-0 mb-3">
<p>In this article, I present some guidelines that can help you get started on your own journaling journey. When should you journal? Should you do it digitally or in a physical notebook? Let&#39;s have a ...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1674913860"
data-df="ll"
>
Jan 28, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Reflections
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/after-the-party/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">After the party</h1>
<div class="card-text content mt-0 mb-3">
<p></p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1674316020"
data-df="ll"
>
Jan 21, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Gallery
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/why-should-you-journal/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">Why should you try journaling? - Journaling Guide: part 2</h1>
<div class="card-text content mt-0 mb-3">
<p>In the previous post weve seen my personal experience with journaling. That should have shown you a pretty good overview of what I get out of journaling, and why I keep coming back to it even afte...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1674312120"
data-df="ll"
>
Jan 21, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Reflections
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/what-i-learned-from-journaling/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">What I learned from journaling for more than a decade - Journaling guide: part 1</h1>
<div class="card-text content mt-0 mb-3">
<p>In these articles, I will share all my tips and tricks for how to journal, what it brought me and what it can bring you. There is not one perfect way to journal that works for everyone. Journaling ...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1673152020"
data-df="ll"
>
Jan 8, 2023
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Reflections
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/a-warm-memory/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">There's nothing colder than a warm memory</h1>
<div class="card-text content mt-0 mb-3">
<p></p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1670341200"
data-df="ll"
>
Dec 6, 2022
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Gallery
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/a-difficult-child/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-12">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">A difficult child</h1>
<div class="card-text content mt-0 mb-3">
<p>The other day, I bought some queer books, and I suddenly felt invincible. I wanted to shout how proud I was on the street while walking home. My heart burst out from love and kinship for my fellow ...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1669797900"
data-df="ll"
>
Nov 30, 2022
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
English,
Poetry
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
<article class="card-wrapper card">
<a href="/posts/representations-non-binaires/" class="post-preview row g-0 flex-md-row-reverse">
<div class="col-md-5">
<div class="preview-img shimmer"><img src="/assets/img/20221121.jpg" alt="Une rose un peu fanée devant un fond sombre." loading="lazy"></div>
</div>
<div class="col-md-7">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">Où sont les vie.ille.ux non-binaires?</h1>
<div class="card-text content mt-0 mb-3">
<p>Récemment, je me suis rappelé.e dune histoire que lon raconte souvent dans ma famille. Il faut savoir que ma grand-mère peut être très maladroite dans ses interactions avec les autres. Je voyais ...</p>
</div>
<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1669033320"
data-df="ll"
>
Nov 21, 2022
</time>
<!-- categories -->
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
Français,
Réflexions
</span>
</div>
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
</div>
<!-- #post-list -->
<!-- The paginator for post list on HomgPage. -->
<nav aria-label="Page Navigation">
<ul class="pagination align-items-center mt-4 mb-0">
<!-- left arrow -->
<li class="page-item ">
<a class="page-link" href="/" aria-label="previous-page">
<i class="fas fa-angle-left"></i>
</a>
</li>
<!-- page numbers -->
<!-- show number -->
<li class="page-item ">
<a
class="page-link"
href="/"
>1</a>
</li>
<!-- show number -->
<li class="page-item active">
<a
class="page-link"
href="/page2"
>2</a>
</li>
<!-- show number -->
<li class="page-item ">
<a
class="page-link"
href="/page3"
>3</a>
</li>
<!-- mobile pagination -->
<li class="page-index align-middle">
<span>2</span>
<span class="text-muted">/ 3</span>
</li>
<!-- right arrow -->
<li class="page-item ">
<a class="page-link" href="/page3" aria-label="next-page">
<i class="fas fa-angle-right"></i>
</a>
</li>
</ul>
</nav>
<!-- .pagination -->
</main>
<!-- panel -->
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
<div class="access">
<!-- Get 5 last posted/updated posts -->
<section id="access-lastmod">
<h2 class="panel-heading">Recently Updated</h2>
<ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
<li class="text-truncate lh-lg">
<a href="/posts/eras-tour/">Taylor Swift: le consumérisme au service du female gaze?</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/writing-like-colleen-hoover/">Writing like Colleen Hoover, what makes a great opening line, and Nanowrimo's stance on AI</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/should-i-be-on-social-media/">As an artist, should I be on social media?</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/enterrements/">Enterrements</a>
</li>
<li class="text-truncate lh-lg">
<a href="/posts/des-mots-sur-un-muret/">Des mots sur un muret</a>
</li>
</ul>
</section>
<!-- #access-lastmod -->
<!-- The trending tags list -->
<section>
<h2 class="panel-heading">Trending Tags</h2>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/emotions/">emotions</a>
<a class="post-tag btn btn-outline-primary" href="/tags/relations/">relations</a>
<a class="post-tag btn btn-outline-primary" href="/tags/genre/">genre</a>
<a class="post-tag btn btn-outline-primary" href="/tags/coming-out/">coming-out</a>
<a class="post-tag btn btn-outline-primary" href="/tags/journaling/">journaling</a>
<a class="post-tag btn btn-outline-primary" href="/tags/self-acceptance/">self-acceptance</a>
<a class="post-tag btn btn-outline-primary" href="/tags/tech/">tech</a>
<a class="post-tag btn btn-outline-primary" href="/tags/writing/">writing</a>
<a class="post-tag btn btn-outline-primary" href="/tags/food/">food</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gender/">gender</a>
</div>
</section>
</div>
</aside>
</div>
<div class="row">
<!-- tail -->
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
<!-- The Footer -->
<footer
aria-label="Site Info"
class="
d-flex flex-column justify-content-center text-muted
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
"
>
<p>©
<time>2024</time>
<a href="https://courgett.es/@cookie">cookie</a>.
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author."
>Some rights reserved.</span>
</p>
<p>Using the <a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="v7.1.0"
href="https://github.com/cotes2020/jekyll-theme-chirpy"
target="_blank"
rel="noopener"
>Chirpy</a> theme for <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>.
</p>
</footer>
</div>
</div>
<!-- The Search results -->
<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
<div class="col-11 content">
<div id="search-hints">
<!-- The trending tags list -->
<section>
<h2 class="panel-heading">Trending Tags</h2>
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
<a class="post-tag btn btn-outline-primary" href="/tags/emotions/">emotions</a>
<a class="post-tag btn btn-outline-primary" href="/tags/relations/">relations</a>
<a class="post-tag btn btn-outline-primary" href="/tags/genre/">genre</a>
<a class="post-tag btn btn-outline-primary" href="/tags/coming-out/">coming-out</a>
<a class="post-tag btn btn-outline-primary" href="/tags/journaling/">journaling</a>
<a class="post-tag btn btn-outline-primary" href="/tags/self-acceptance/">self-acceptance</a>
<a class="post-tag btn btn-outline-primary" href="/tags/tech/">tech</a>
<a class="post-tag btn btn-outline-primary" href="/tags/writing/">writing</a>
<a class="post-tag btn btn-outline-primary" href="/tags/food/">food</a>
<a class="post-tag btn btn-outline-primary" href="/tags/gender/">gender</a>
</div>
</section>
</div>
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
</div>
</div>
</div>
<aside aria-label="Scroll to Top">
<button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
</aside>
</div>
<div id="mask"></div>
<aside
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<button
type="button"
class="btn-close ms-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body text-center pt-0">
<p class="px-2 mb-3">A new version of content is available.</p>
<button type="button" class="btn btn-primary" aria-label="Update">
Update
</button>
</div>
</aside>
<!-- JavaScripts -->
<!-- JS selector for site. -->
<!-- commons -->
<!-- layout specified -->
<script src="https://cdn.jsdelivr.net/combine/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js,npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js,npm/dayjs@1.11.13/dayjs.min.js,npm/dayjs@1.11.13/locale/en.js,npm/dayjs@1.11.13/plugin/relativeTime.js,npm/dayjs@1.11.13/plugin/localizedFormat.js"></script>
<script src="/assets/js/dist/home.min.js"></script>
<!-- Pageviews -->
<!--
Jekyll Simple Search loader
See: <https://github.com/christian-fei/Simple-Jekyll-Search>
-->
<script>SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/assets/js/data/search.json',
searchResultTemplate: ' <article class="px-1 px-sm-2 px-lg-4 px-xl-0"> <header> <h2><a href="{url}">{title}</a></h2> <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags} </div> </header> <p>{snippet}</p> </article>',
noResultsText: '<p class="mt-5">Oops! No results found.</p>',
templateMiddleware: function(prop, value, template) {
if (prop === 'categories') {
if (value === '') {
return `${value}`;
} else {
return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
}
}
if (prop === 'tags') {
if (value === '') {
return `${value}`;
} else {
return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
}
}
}
});
</script>
</body>
</html>