<!--
PAGE 2: CALLISTO by starlightthemes
A navigation page designed to match Theme 5: Jupiter.
Search "CUSTOMIZE" to jump to editable sections.
Credits:
Tippy.js tooltips by atomiks: https://atomiks.github.io/tippyjs
Cappuccicons by Suiomi: https://cappuccicons.com/
Dark/light mode 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
Masonry by David DeSandro: https://masonry.desandro.com
Last updated 16 Dec 2024.
-->
<!DOCTYPE html>
<html lang="en" class="">
<head>
<!-- BASIC META TAGS -->
<meta charset="utf-8">
<title>{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}">
<!-- Theme styles -->
<!-- Standardization -->
<link rel="stylesheet" href="https://wovenstarlight.github.io/tumblr-themes/normalize.min.css">
<!-- Resource imports -->
<!-- Cappuccicons by suiomi -->
<script src="//pull.cappuccicons.com/cpf.js"></script>
<!-- Google fonts import -->
<link href="//fonts.googleapis.com/css2?family=Lora&family=Bitter" rel="stylesheet">
<style>
/** CUSTOMIZE: GENERAL APPEARANCE
1. Replace the main theme icon
- Ctrl+H to open the Find/Replace menu
- Search for "flash-o"
- Replace All with icon name of your choice from the Cappuccicons page
Example: When replacing the theme icon with the icon "yarn", this: <i class="cp cp-flash-o"></i>
...should have changed to this: <i class="cp cp-yarn"></i>
2. Replace fonts
- Body font: Search/Replace All "Bitter"
- Title/headings font: Search/Replace All "Lora"
You can check "font-family" and "--title-font" below to see if these were correctly replaced.
3. Edit other layout/color options just below this
- font-size, post-width: Self-explanatory. Measured in px values.
*/
html {
font-size: 16px;
--post-width: 500px;
font-family: "Bitter", serif; /* General */
--title-font: "Lora", serif; /* Headings */
/** COLORS SECTION 1
Dark mode colors (if you choose to have two color palettes), OR
General page colors (if not).
Choose in hex values (#123abc) or RGB values (rgb(255, 255, 255)).
*/
--text: #dddddd;
--headings: #ffc436; /* Page title and section headings */
--links: #f9ca21;
--links-hover: #ffe86d;
--bold: #ff8cf7;
--italics: #ff5fba;
--post: #3c1916; /* Content background */
--bg: #170903; /* Page background */
--accent: #ffbf00;
--highlight: #ffeb9e; /* Highlighted text */
--highlight-bg: #230011; /* Highlighted text background */
}
html.light {
/** COLORS SECTION 2
Light mode colors (if you chose to have two color palettes; ignore otherwise.)
Same annotations as above apply.
*/
--text: #190809;
--headings: #a90057;
--links: #ab004d;
--links-hover: #ff007b;
--bold: #a13600;
--italics: #ae6200;
--post: #eadfb6;
--bg: #f7f5e8;
--accent: #e661ac;
--highlight: #3c000a;
--highlight-bg: #f79ebf;
}
/* Custom CSS */
{CustomCSS}
</style>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://wovenstarlight.github.io/tumblr-themes/pages/page2/page2.min.css">
<style>
/** CUSTOMIZE: GENERAL APPEARANCE (contd.)
4. Add background images
- If you want 1 background image on both color palettes (or if you want a background image and no color palette option), replace {HeaderImage} for "html body" and delete the line with "html.light body".
- If you want 1 background image on only one color palette, and a flat color background on the other, replace {HeaderImage} for "html.light body" and delete the line with "html body".
- If you want 2 separate images for each color palette, replace both {HeaderImage} instances, putting the Light mode image in front of "html.light body".
- If you don't want background images at all, delete both lines below.
*/
html body { background-image: url("{HeaderImage}") }
html.light body { background-image: url("{HeaderImage}") }
</style>
<!-- jQuery CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- Tippy.js tooltips by atomiks -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<!-- Scroll to top button -->
<script src="https://wovenstarlight.github.io/tumblr-themes/scrolltotop.min.js"></script>
<!-- Masonry by David DeSandro -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>
<body>
<!-- Accessibility: SKIP TO MAIN -->
<a href="#main" id="skip">Skip to main content</a>
{block:HideTitle}<h1 id="hiddentitle">{Title}</h1>{/block:HideTitle}
<header>
<div id="left">
<div class="planet">
<div class="ring"></div>
<img src="{PortraitURL-128}"/>
</div>
<!-- CUSTOMIZE: TITLE
Generally, this will inherit the settings of your blog, including what your title actually is and if you've set it to show or not.
However, if you'd like, you can replace this text and add a custom heading!
To do so, replace everything from {block:ShowTitle} to {/block:ShowTitle} with the following line:
<a id="title"><h1>YOUR TEXT HERE</h1></a>
-->
{block:ShowTitle}<a href="/" id="title"><h1>{Title}</h1></a>{/block:ShowTitle}
</div>
<nav>
<a href="/" data-tippy-content="{lang:Home}"><i class="cp cp-home-o"></i></a>
{block:AskEnabled}<a href="/ask" id="asklink" data-tippy-content="{AskLabel}"><i class="cp cp-envelope-o"></i></a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit" id="submitlink" data-tippy-content="{SubmitLabel}"><i class="cp cp-gift-o"></i></a>{/block:SubmissionsEnabled}
<!-- CUSTOMIZE: DARK/LIGHT MODE TOGGLE
If you want two color palettes, leave this part as is.
If you only want one color palette, delete everything from START HERE to END HERE.
-->
<!-- START HERE -->
<a id="darklight" tabindex="0" data-tippy-content="Toggle color mode">
<i class="cp cp-moon-o"></i>
<i class="cp cp-sun"></i>
</a>
<!-- END HERE -->
<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
<a href="https://starlightthemes.tumblr.com/pg2" id="creditlink" data-tippy-content="Page by starlightthemes"><i class="cp cp-code"></i></a>
<!-- DO NOT REMOVE CREDIT. LEAVE THIS INTACT. -->
</nav>
</header>
<main id="main">
<section class="posts">
<!-- CUSTOMIZE: LINK SECTIONS
To add more sections, copy the "article" below (START and END markers are provided).
You can add sections in any order; just make sure they aren't overlapping (i.e. each section's "END" marker should be BEFORE the next one's "START" marker, and vice versa).
-->
<!-- START OF SECTION -->
<article class="post frame">
<h2 class="title"><a>
<!-- SECTION TITLE
Add your title on the next line!
If you don't want a title, delete everything from <h2 ...> on the line above to </h2> a few lines below.
And if you want the section title to link to a page, too:
- change the <a> just above to read <a href="/">
- replace the / with your URL.
-->
Category one
</a></h2>
<ul class="links">
<!-- LINKS LIST
To add a link, copy/paste the following line:
<li><a href="/">ABC</a></li>
Then replace "ABC" with the link text,
and "/" with the URL of the page you want this to link to.
Add your links AFTER this line! -->
<li><a href="https://starlightpreviews.tumblr.com"><i class="cp cp-link"></i>Link one</a></li>
<li><a href="/"><i class="cp cp-link"></i>Link two</li>
<li><a href="/"><i class="cp cp-link"></i>Link three</li>
<!-- Add your links BEFORE this line! -->
</ul>
</article>
<!-- END OF SECTION -->
<!-- START OF SECTION -->
<article class="post frame">
<h2 class="title"><a href="/">
Category two
</a></h2>
<ul class="links">
<li><a href="/">Link one</a></li>
<li><a href="/">Link two</a></li>
<li><a href="/">Link three</a></li>
</ul>
</article>
<!-- END OF SECTION -->
</section>
</main>
<!-- BACK TO TOP BUTTON -->
<div id="scrolltotop_parent" tabindex="0" style="display: none;" data-tippy-content="{lang:Back to top}" data-tippy-placement="left">
<div id="scrolltotop_arrow">
<i class="cp cp-chevron-up"></i>
</div>
</div>
<script>
// Masonry
$('.posts').masonry({
// options
itemSelector: '.post',
gutter: 32,
fitWidth: true,
transitionDuration: 0
});
// set up tooltips
tippy("[data-tippy-content]", {
theme: 'standard'
});
// Color mode on first load
let currTheme = localStorage.getItem("theme"),
body = $("html");
if ( currTheme == "light" ) {
body.addClass("light");
}
// Color mode button click
$("#darklight").on("click keypress", function() {
body.toggleClass("light");
var newTheme = "dark";
if (body.hasClass("light")) {
newTheme = "light";
}
localStorage.setItem("theme", newTheme);
});
</script>
</body>
</html>