<!--
PAGE 4: ARCHIVIST by starlightthemes
An about/navigation page designed to match Theme 11: Archive Of Your Own.
Search "CUSTOMIZE" to jump to editable sections.
Credits:
Layout and design by Archive of Our Own: https://archiveofourown.org
Style My Tooltips by malihu: http://manos.malihu.gr/style-my-tooltips-jquery-plugin
Palette toggle by eggdesign: https://eggdesign.tumblr.com/post/186889223257/day-night-mode-tutorial-after-featuring-a
Scroll to top by Fabian Lins: https://github.com/FabianLins/scrolltotop_arrow_jquery
Last updated 16 Dec 2024.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
<meta name="description" content="{MetaDescription}">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="{Favicon}">
<link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<!-- Standardization of theme styles -->
<link rel="stylesheet" href="https://wovenstarlight.github.io/tumblr-themes/normalize.min.css">
<!-- Resource imports -->
<!-- Phosphor Icons -->
<script src="https://unpkg.com/phosphor-icons"></script>
<!-- Google fonts import -->
<link href="https://fonts.googleapis.com/css2?family=BODYFONT&family=TITLEFONT" rel="stylesheet">
<style>
/** CUSTOMIZE: GENERAL APPEARANCE
1. Replace fonts
Choose your fonts from https://fonts.google.com.
- Body font: Search/Replace All "BODYFONT"
- Title/headings font: Search/Replace All "TITLEFONT"
You can check "--bfont" and "--tfont" below to see if these were correctly replaced.
2. Edit other layout/color options just below this
- font-size: Self-explanatory. Measured in px values.
- tweight: Whether the title is bolded or not. Choose between "normal" or "bold".
- See below for color customization.
*/
html {
--font-size: 14px;
--tfont: 'TITLEFONT', Georgia, serif;
--tweight: normal;
--bfont: 'BODYFONT', 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}
/** COLORS SECTION 1
Default palette colors (if you choose to have two color palettes), OR
General page colors (if not).
*/
html:not(.alt) {
/* These top 4 colors can be in either hex format (#abc123) or RGB format (rgb(1, 2, 3)) */
--text: #2a2a2a;
--bg: #ffffff;
--bg2: #d6d6d6;
--accent: #990000;
}
/** COLORS SECTION 2
Alternate palette colors (if you chose to have two color palettes; ignore otherwise.)
Same annotations as above apply.
*/
html.alt {
--text: #eeeeee;
--bg: #333333;
--bg2: #1e1e1e;
--accent: #5998d6;
}
</style>
<link rel="stylesheet" href="https://wovenstarlight.github.io/tumblr-themes/pages/page4/page4.min.css">
<style>{CustomCSS}</style>
<!-- jQuery CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- Style-my-tooltips by malihu -->
<script src="https://wovenstarlight.github.io/jquery-style-my-tooltips/minified/jquery.style-my-tooltips.min.js"></script>
<!-- Scroll to top button -->
<script src="https://wovenstarlight.github.io/tumblr-themes/scrolltotop.min.js"></script>
<script src="https://wovenstarlight.github.io/tumblr-themes/theme11/theme11.min.js"></script>
</head>
<!--
CUSTOMIZE: SPECIAL TEXT CASING
If you want to make special text (including all headings) lowercase, change the line below to read <body class="lower">
If you want to make special text uppercase, change the line below to read <body class="upper">
Otherwise, leave it unchanged.
-->
<body class="">
<!-- Accessibility: SKIP TO MAIN -->
<a href="#page" id="skip">Skip to main content</a>
{block:HideTitle}
<!-- Accessibility: HIDDEN TITLE -->
<h1 id="hiddentitle">{Title}</h1>
{/block:HideTitle}
<!--
CUSTOMIZE: SPECIAL NAVBAR COLORATION
If you want to invert the colors of your navbar for your default theme palette, change the line below to read <div id="body" class="invert">
If you want to invert your navbar colors for your alternate palette, change the line below to read <div id="body" class="altinvert">
If you want to invert the navbar colors on both palettes, change the line below to read <div id="body" class="invert altinvert">
Otherwise, leave it unchanged.
-->
<div id="body" class="">
<header id="header">
<a href="/" id="title">
<!--
CUSTOMIZE: PAGE HEADER
By default, your avatar and title will show/not show depending on the settings of your base blog.
If you'd rather hide one of them while ignoring the settings of your blog:
- TO HIDE AVATAR: delete the line below, from {block:ShowAvatar} to {/block:ShowAvatar}.
- TO HIDE TITLE: delete the second line below, from {block:ShowTitle} to {/block:ShowTitle}.
If you'd like to insert an image as a "logo", copy+paste the following line BETWEEN the Avatar and Title lines:
<img src="https://YOUR-URL-HERE.com" id="logo" class="" />
And replace https://YOUR-URL-HERE.com with the link to your image.
If you'd like to add padding (spacing) around your avatar or your logo:
- FOR AVATAR: change class="{AvatarShape}" to class="{AvatarShape} padded"
- FOR LOGO: change class="" to class="padded"
-->
{block:ShowAvatar}<img src="{PortraitURL-128}" id="avatar" class="{AvatarShape}" />{/block:ShowAvatar}
{block:ShowTitle}<h1>{Title}</h1>{/block:ShowTitle}
</a>
<section id="links-search">
<!-- BLOG NAVIGATION -->
<nav id="links">
<div id="mobnav" class="{block:AskEnabled}a{/block:AskEnabled} {block:SubmissionsEnabled}s{/block:SubmissionsEnabled}">
<span>{lang:Navigate}</span>
<div class="dropdown">
{block:AskEnabled}<a href="/ask" class="asklink {block:AskPage}current-page{/block:AskPage}">{AskLabel}</a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit" class="submitlink {block:SubmitPage}current-page{/block:SubmitPage}">{SubmitLabel}</a>{/block:SubmissionsEnabled}
</div>
</div>
{block:HasPages}
<!-- CUSTOM PAGES -->
<div id="pages">
<span>{lang:Pages}</span>
<div class="dropdown">{block:Pages}<a href="{URL}" class="{CurrentState}">{Label}</a>{/block:Pages}</div>
</div>
{/block:HasPages}
</nav>
<!-- SEARCH BAR -->
<form action="/search" method="get" id="search">
<label for="q">{lang:Search}</label>
<input id="q" type="text" name="q" value="{SearchQuery}"/>
<input class="button" type="submit" value="{lang:Search}">
</form>
</section>
</header>
<section id="page">
<!--
CUSTOMIZE: ICON AND NAME
To change the icon, replace {PortraitURL-128} with the link to your icon image,
and delete any instances of {block:ShowAvatar} or {/block:ShowAvatar}.
(Make sure not to delete the text *between* these {block}s!)
To remove the icon, delete the two blocks of text wrapped in {block:ShowAvatar} ... {/block:ShowAvatar}.
To change the "user" name (your blog username by default), replace {Name}.
-->
<header id="phead" {block:ShowAvatar}class="avatar"{/block:ShowAvatar}>
{block:ShowAvatar}<a href="/"><img class="{AvatarShape}" src="{PortraitURL-128}"></a>{/block:ShowAvatar}
<h2>{Name}</h2>
</header>
<div id="actions">
<!-- BACK TO TOP BUTTON -->
<div id="scrolltotop_parent" tabindex="0" style="display: none;">
<div id="scrolltotop_arrow" class="button">↑ Top</div>
</div>
<!--
CUSTOMIZE: ACTIONS MENU
If you don't want two color palettes, remove the first <a>...</a> below.
If you don't want a follow or message link, remove the second or third <a>...</a> below, respectively.
You can add more links by copying/pasting the following:
<a href="https://YOUR-URL-HERE.com" class="button">LABEL HERE</a>
-->
<a id="palette" tabindex="0" class="button">Toggle Palette</a>
<a href="//tumblr.com/follow/{Name}" class="button">{lang:Follow}</a>
<a href="//tumblr.com/message/{Name}" class="button">Message</a>
</div>
<aside>
<!--
CUSTOMIZE: PERSONAL DATA
As you can see below, the personal stats section is written in the following format:
<dt>Label here</dt>
<dd>Corresponding value here</dd>
A template has been given below, in the format of AO3's actual profile page.
You can edit both the labels and tags to say whatever you want, and add as many extra stats as you'd like.
- You don't need to add a colon (:) to the end of the labels; the page code will handle that automatically.
- To bold a label/value, add class="warning" to the opening dt/dd element tag- for example, <dt> ... </dt> would become <dt class="warning"> ... </dt>
- To add a link, either to a label or a value, write it as follows:
<a href="https://YOUR-URL-HERE.com">YOUR TEXT HERE</a>
Examples can be seen in the "My pseuds" field.
(You can also link to other pages on your blog by omitting the "https://YOUR-USERNAME-HERE.tumblr.com" part of the url, and just writing "/pagename". For example, if I was using this page on https://starlightpreviews.tumblr.com, and I wanted to link to https://starlightpreviews.tumblr.com/theme11, I would write <a href="/theme11">TEXT HERE</a> )
- Add new labels and tags by adding more <dt></dt> <dd></dd> pairs. Make sure they're added ABOVE the </dl></aside> tags!
See below for additional notes.
-->
<dl id="mystats">
<!-- Add new labels/values BELOW this line! -->
<dt>My pseuds</dt>
<dd><a href="//wovenstarlight.tumblr.com">wovenstarlight</a>, <a href="//starlightthemes.tumblr.com">starlightthemes</a>, <a href="//starlightpreviews.tumblr.com">starlightpreviews</a></dd>
<dt>I joined on</dt>
<dd>2021-06-10</dd>
<!-- Add new labels/values ABOVE this line! -->
</dl>
</aside>
<section id="bio">
<!--
CUSTOMIZE: BIO
Change or remove the heading on the line immediately after this comment, and add whatever content you'd like to the "body" section!
-->
<h3>Bio</h3>
<div class="body"> <!-- Add your bio text below this line! -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div> <!-- Add your bio text above this line! -->
</section>
<aside id="left">
<!--
CUSTOMIZE: LINKS SIDEBAR
Add or remove link sections by copying/pasting one of the following sections (from the "starts here" line to the "ends here" line).
Add or remove a header for each section by adding/deleting the <h3>YOUR TITLE HERE</h3> at the top of the section.
Add or remove links from each section by adding/deleting the following: <a href="https://YOUR-URL-HERE.com" title="HOVER TEXT HERE">LABEL HERE</a>
Add all link sections below this line.
-->
<!-- Section starts here -->
<div>
<a href="#" title="example">Link</a>
<a href="#" title="example">Link</a>
<a href="#" title="example">Link</a>
</div>
<!-- Section ends here -->
<!-- Section starts here -->
<div>
<h3>Sample header</h3>
<a href="#" title="example">Link</a>
<a href="#" title="example">Link</a>
<a href="#" title="example">Link</a>
</div>
<!-- Section ends here -->
<!-- Add all link sections above this line. -->
</aside>
</section>
<footer id="footer">
<!--
CUSTOMIZE: PERSONAL LINKS
Theme 11 has a lot of custom link options in the footer (including the ask/submit links, depending on whether your blog has asks/submissions enabled). They've been provided here as defaults; you can choose whether or not to keep them, and if you'd like, you can replace them with entirely different links. All links follow the same <a href="https://YOUR-LINK-HERE.com">Text here</a> format.
If you're removing a link, delete that full line. If this leaves the section empty i.e. there is only the <h3>Section Heading</h3> and the empty inner <div></div> left, then delete the entire outer <div id="SECTION-NAME">...</div>.
-->
<div id="contact">
<h3>Contact</h3>
<div>
{block:AskEnabled}<a href="/ask" class="asklink">{AskLabel}</a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit" class="submitlink">{SubmitLabel}</a>{/block:SubmissionsEnabled}
<a href="mailto:YOUR-MAIL@PROVIDER.COM">{lang:Send me an email}</a>
</div>
</div>
<div id="social">
<h3>{lang:Follow}</h3>
<div>
<a href="https://YOUR-LINK-HERE.com">Personal website</a>
<a href="https://archiveofourown.org/users/USERNAME">Archive of Our Own</a>
<a href="https://www.fanfiction.net/u/USER-ID">Fanfiction.net</a>
<a href="https://twitter.com/USERNAME">Twitter</a>
<a href="https://www.reddit.com/user/USERNAME">{lang:Reddit}</a>
<a href="https://www.facebook.com/USERNAME">{lang:Facebook}</a>
<a href="https://instagram.com/USERNAME">Instagram</a>
<a href="https://www.youtube.com/channel/CHANNEL-ID">YouTube</a>
<a href="https://YOUR-LINK-HERE.com">{lang:Subscribe via RSS}</a>
</div>
</div>
<div id="development">
<h3>Development</h3>
<div>
<span>{Name} © {CopyrightYears}</span>
<span>{lang:Powered by Tumblr 2}</span>
<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
<a id="credit" href="https://starlightthemes.tumblr.com/pg4">Page by starlightthemes</a>
<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
</div>
</div>
</footer>
</div>
</body>
</html>