more directory changes
This commit is contained in:
onomanapeia
parent
24f3cbaf63
commit
74e087cb77
22 changed files with 19 additions and 1634 deletions
2
404.html
2
404.html
|
|
@ -57,6 +57,6 @@ a:hover {
|
|||
let's go <a href="/"> back home</a>, shall we?</h3>
|
||||
<h4>if you believe you've reached this page in error, feel free to <a href="mailto:mana@peachmoon.moe?subject=404 error">contact me</a>.</h4>
|
||||
</div>
|
||||
<script src="/moji.js" defer></script>
|
||||
<script src="/js/moji.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
|
||||
<!-- This is a free layout for anyone to use!
|
||||
All I ask is that you keep this credit in-tact, or that you put my website link
|
||||
(https://nonkiru.art) somewhere on your site.
|
||||
|
||||
Otherwise, edit this as much as you'd like!
|
||||
|
||||
Last Updated: 8th December 2024 -->
|
||||
|
||||
<head>
|
||||
|
||||
<!-- These are tags for how the embded will look. -->
|
||||
<meta property="og:title" content="Website Title">
|
||||
<meta name="twitter:title" content="Website Title (For Twitter)">
|
||||
<!-- Update the image here with your embed! -->
|
||||
<meta property="og:image" content="embed_image.png">
|
||||
<!-- Image here, too! -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Description of your website.">
|
||||
<meta name="keywords" content="Keywords for your website.">
|
||||
<meta name="author" content="Name of who made this website.">
|
||||
<meta name="twitter:description" content="Description of your website (For Twitter).">
|
||||
<!-- Change the colour code to match your website. -->
|
||||
<meta content="#ffffff " data-react-helmet="true" name="theme-color">
|
||||
|
||||
<!-- Various other website settings. -->
|
||||
<!-- Keep this in-tact if you want to use unicode in text without it breaking. You shouldn't need to change this. -->
|
||||
<meta charset="utf-8">
|
||||
<!-- For setting the viewport for different screen sizes. You shouldn't need to change this. -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- If you change the name of the stylesheet, make sure to reflect it here. -->
|
||||
<link rel="stylesheet" href="/themes/cheesecake_style.css">
|
||||
<link rel="icon" type="image/x-icon" href="/img/cheesecake/favicon.gif">
|
||||
<title>{{ page.title }}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{ content }}
|
||||
|
||||
<footer>
|
||||
<a href="/" title="back?">
|
||||
<i class="ph ph-caret-left"></i>
|
||||
</a>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<!-- JQuery scripts. These are required for the draggable divs. -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var sectionCounter = 1; // Start at drag1 for the dynamic sections
|
||||
|
||||
$(".box").each(function() {
|
||||
var boxId = "drag" + sectionCounter; // Assign drag2, drag3, etc.
|
||||
|
||||
$("#" + boxId).draggable(); // Make the element with this ID draggable
|
||||
|
||||
sectionCounter++; // Increment the counter for the next section
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
|
||||
<!-- This is a free layout for anyone to use!
|
||||
All I ask is that you keep this credit in-tact, or that you put my website link
|
||||
(https://nonkiru.art) somewhere on your site.
|
||||
|
||||
Otherwise, edit this as much as you'd like!
|
||||
|
||||
Last Updated: 8th December 2024 -->
|
||||
|
||||
<head>
|
||||
|
||||
<!-- These are tags for how the embded will look. -->
|
||||
<meta property="og:title" content="Website Title">
|
||||
<meta name="twitter:title" content="Website Title (For Twitter)">
|
||||
<!-- Update the image here with your embed! -->
|
||||
<meta property="og:image" content="embed_image.png">
|
||||
<!-- Image here, too! -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Description of your website.">
|
||||
<meta name="keywords" content="Keywords for your website.">
|
||||
<meta name="author" content="Name of who made this website.">
|
||||
<meta name="twitter:description" content="Description of your website (For Twitter).">
|
||||
<!-- Change the colour code to match your website. -->
|
||||
<meta content="#ffffff " data-react-helmet="true" name="theme-color">
|
||||
|
||||
<!-- Various other website settings. -->
|
||||
<!-- Keep this in-tact if you want to use unicode in text without it breaking. You shouldn't need to change this. -->
|
||||
<meta charset="utf-8">
|
||||
<!-- For setting the viewport for different screen sizes. You shouldn't need to change this. -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- If you change the name of the stylesheet, make sure to reflect it here. -->
|
||||
<link rel="stylesheet" href="cheesecake_style.css">
|
||||
<link rel="icon" type="image/x-icon" href="img/favicon.gif">
|
||||
<title>Cheesecake</title>
|
||||
|
||||
<!-- JQuery scripts. These are required for the draggable divs. -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
|
||||
|
||||
<!-- If you want to add more draggable options, you need to add it here.
|
||||
To add another option, copy paste the following, and add it to the list:
|
||||
|
||||
$( function() {
|
||||
$( "#CHANGETHIS" ).draggable();
|
||||
});
|
||||
|
||||
The id must be unique!-->
|
||||
<script>
|
||||
|
||||
$( function() {
|
||||
$( "#drag1" ).draggable();
|
||||
});
|
||||
|
||||
$( function() {
|
||||
$( "#drag2" ).draggable();
|
||||
});
|
||||
|
||||
$( function() {
|
||||
$( "#drag3" ).draggable();
|
||||
});
|
||||
|
||||
$( function() {
|
||||
$( "#drag4" ).draggable();
|
||||
});
|
||||
|
||||
// $( function() {
|
||||
// $( "#Remove // before use, and make sure to change this id!" ).draggable();
|
||||
// });
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container" id="drag1">
|
||||
<!-- Header -->
|
||||
<div class="box_header">
|
||||
<header>
|
||||
<img style="float: left;" src="img/cheesecake.gif" alt="">
|
||||
Cheesecake
|
||||
<!-- These are the fake buttons at the end of the header. -->
|
||||
<img style="float: right;" src="img/button_3.gif" alt="">
|
||||
<img style="float: right;" src="img/button_2.gif" alt="">
|
||||
<img style="float: right;" src="img/button_1.gif" alt="">
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="box">
|
||||
<main>
|
||||
sample
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="drag2">
|
||||
<!-- Header -->
|
||||
<div class="box_header">
|
||||
<header>
|
||||
<img style="float: left;" src="img/cheesecake.gif" alt="">
|
||||
Links
|
||||
<!-- These are the fake buttons at the end of the header. -->
|
||||
<img style="float: right;" src="img/button_3.gif" alt="">
|
||||
<img style="float: right;" src="img/button_2.gif" alt="">
|
||||
<img style="float: right;" src="img/button_1.gif" alt="">
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!--Links -->
|
||||
<div class="box">
|
||||
<nav>
|
||||
<!-- Add as many links as you want here.
|
||||
Just copy-paste: <a href="">Link 1</a> -->
|
||||
<a href="">Link 1</a>
|
||||
☆
|
||||
<a href="">Link 2</a>
|
||||
☆
|
||||
<a href="">Link 3</a>
|
||||
☆
|
||||
<a href="">Link 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- You can also make images draggable! -->
|
||||
<!-- Please note that, if you place a draggable image within a div, things can get a bit wonky.
|
||||
I'd suggest placing it outside of a div! -->
|
||||
<img src="img/cheesecake_still.gif" id="drag3" alt="A cheesecake."
|
||||
style="
|
||||
position: absolute;
|
||||
top: 215px;
|
||||
left: 1200px;
|
||||
cursor: move;">
|
||||
|
||||
<div class="container" id="drag4">
|
||||
<!-- Header -->
|
||||
<div class="box_header">
|
||||
<header>
|
||||
<img style="float: left;" src="img/cheesecake.gif" alt="">
|
||||
Example Div
|
||||
<!-- These are the fake buttons at the end of the header. -->
|
||||
<img style="float: right;" src="img/button_3.gif" alt="">
|
||||
<img style="float: right;" src="img/button_2.gif" alt="">
|
||||
<img style="float: right;" src="img/button_1.gif" alt="">
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!--Links -->
|
||||
<div class="box">
|
||||
<section>
|
||||
|
||||
<!-- Header Example -->
|
||||
<h1>Element Showcase</h1>
|
||||
Text.
|
||||
<h2>Header 2</h2>
|
||||
Text.
|
||||
<h3>Header 3</h3>
|
||||
Text.
|
||||
|
||||
<br><br>I hope you have fun with this layout!
|
||||
<br><br>
|
||||
|
||||
<!-- Table Example -->
|
||||
<table>
|
||||
<tr>
|
||||
<th>Cell 1</th>
|
||||
<th>Cell 2</th>
|
||||
</tr>
|
||||
<td>Description 1</td>
|
||||
<td>Description 2</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<td>Description 3</td>
|
||||
<td>Description 4</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- List Example -->
|
||||
<ul>
|
||||
<li>Cheesecake!</li>
|
||||
<li>Shortcake!</li>
|
||||
<li>All the cake!</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
/* This is a free layout for anyone to use!
|
||||
All I ask is that you keep this credit in-tact, or that you put my website link
|
||||
(https://nonkiru.art) somewhere on your site.
|
||||
|
||||
Otherwise, edit this as much as you'd like!
|
||||
|
||||
Last Updated: 8th December 2024 */
|
||||
|
||||
/* These are the default colour codes for the layout.
|
||||
Changing the colour code here will update it for any element that uses it. */
|
||||
:root {
|
||||
/* Default: Pink */
|
||||
--primary: #ffc9c6;
|
||||
|
||||
/* Default: Light Pink */
|
||||
--primary_light: #ffedeb;
|
||||
|
||||
/* Default: Dark Pink */
|
||||
--primary_dark: #ee918c;
|
||||
|
||||
/* Default: White */
|
||||
--secondary: #fefbf5;
|
||||
|
||||
/* Default: Brown */
|
||||
--tertiary: #ad4944;
|
||||
|
||||
/* Default: Blue */
|
||||
--link: #2453d4;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--secondary);
|
||||
background-image: url(/img/cheesecake/bg.gif);
|
||||
color: var(--tertiary);
|
||||
font-size: 16px;
|
||||
font-family: MS Gothic, Verdana, sans-serif;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* Link Styling */
|
||||
a {
|
||||
color: var(--link);
|
||||
/* Adds a smooth effect to link hover. */
|
||||
transition: 0.1s all ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary_dark);
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 7px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 3px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Table Styling */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid var(--primary);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
table th {
|
||||
text-align: left;
|
||||
background-color: var(--primary_light);
|
||||
}
|
||||
|
||||
/* List Styling */
|
||||
ul {
|
||||
list-style-image: url('/img/cheesecake/heart_bullet.gif');
|
||||
list-style-position: inside;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--tertiary);
|
||||
border-radius: 2px;
|
||||
width: 800px;
|
||||
box-shadow: 2px 2px 0px var(--primary);
|
||||
margin: 5px auto;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid var(--primary);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.box_header {
|
||||
border: 1px solid var(--primary);
|
||||
background-color: var(--primary_light);
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
/* This centers the text vertically. */
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Changes the brightness of the fake buttons on hover. Also changes the cursor. */
|
||||
.box_header img:hover {
|
||||
filter: brightness(103%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Darkens and saturates the buttons on click. Also changes the cursor. */
|
||||
.box_header img:active {
|
||||
filter: brightness(97%) saturate(125%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Mobile Support */
|
||||
@media only screen and (max-width: 890px) {
|
||||
.container {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin: unset;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 1.5em;
|
||||
clear: both;
|
||||
text-align: right;
|
||||
margin: auto;
|
||||
position:sticky;
|
||||
padding-right: 10px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
footer {
|
||||
font-size: 2em;
|
||||
}
|
||||
footer a {
|
||||
background-color: var(--link);
|
||||
opacity: 0.25;
|
||||
border-radius: .25em;
|
||||
padding: .8rem;
|
||||
}
|
||||
footer a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🍑🌙</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<link rel="stylesheet" id="switcher-id" />
|
||||
<link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
|
||||
<script src="/theme.js"></script>
|
||||
<script src="/js/theme.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include layout/sidebar.html %}
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
<i class="ph ph-arrow-line-up"></i></a>
|
||||
</footer>
|
||||
{% endif %}
|
||||
<script src="/profile.js" defer></script>
|
||||
<script src="/js/profile.js" defer></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<script src="/menu.js" defer></script>
|
||||
<script src="/js/menu.js" defer></script>
|
||||
{% if page.url contains "now"%}
|
||||
<script src="/scrobble.js" defer></script>
|
||||
<script src="/js/scrobble.js" defer></script>
|
||||
<script src="https://status.cafe/current-status.js?name=mana" defer></script>
|
||||
<script data-goatcounter="https://peachmoon.goatcounter.com/count"
|
||||
async src="//gc.zgo.at/count.js"></script>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🍑🌙</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" id="switcher-id" href="style.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" id="switcher-id" href="/css/style.css">
|
||||
<link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
|
||||
<script src="/theme.js"></script>
|
||||
<script src="/js/theme.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include layout/sidebar.html %}
|
||||
|
|
@ -15,16 +15,16 @@
|
|||
<h1> {{ page.title }} </h1>
|
||||
<div class="peachmoon">
|
||||
<img src="/img/emoji/nowplaying.gif" alt="pastel music notes">
|
||||
<a href="peachmoon.mp3">
|
||||
<a href="/music/peachmoon.mp3">
|
||||
<i>sun-smudged peach moon softer than an ice cream cone in june</i>
|
||||
</a>
|
||||
<img src="/img/emoji/nowplaying.gif" alt="pastel music notes">
|
||||
</div>
|
||||
{{ content }}
|
||||
</article>
|
||||
<script src="/profile.js" defer></script>
|
||||
<script src="/js/profile.js" defer></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<script src="/menu.js" defer></script>
|
||||
<script src="/js/menu.js" defer></script>
|
||||
<script data-goatcounter="https://peachmoon.goatcounter.com/count"
|
||||
async src="//gc.zgo.at/count.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🍑🌙</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<link rel="stylesheet" id="switcher-id" />
|
||||
<link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
|
||||
<script src="/theme.js"></script>
|
||||
<script src="/js/theme.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include layout/sidebar.html %}
|
||||
|
|
@ -50,11 +50,11 @@
|
|||
<i class="ph ph-arrow-line-up"></i></a>
|
||||
</footer>
|
||||
{% endif %}
|
||||
<script src="/profile.js" defer></script>
|
||||
<script src="/js/profile.js" defer></script>
|
||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||
<script src="/menu.js" defer></script>
|
||||
<script src="/js/menu.js" defer></script>
|
||||
{% if page.url contains "now"%}
|
||||
<script src="/scrobble.js" defer></script>
|
||||
<script src="/js/scrobble.js" defer></script>
|
||||
<script src="https://status.cafe/current-status.js?name=mana" defer></script>
|
||||
<script data-goatcounter="https://peachmoon.goatcounter.com/count"
|
||||
async src="//gc.zgo.at/count.js"></script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ show_footer: true
|
|||
<figure style="float:right;">
|
||||
<img src="{% link /img/main/mana.png %}" alt="mana's fedicard" style="max-height: 900px;"></figure>
|
||||
|
||||
## mana<img src="/img/emoji/itunes.gif" onclick="playAudio('/mana.mp3')" style="padding: .25rem;" alt="hear mana pronounce their name"><img src="/img/emoji/mya.gif" onclick="playAudio('/mya.mp3')" style="padding: .25rem;" alt="hear mana meow">
|
||||
## mana<img src="/img/emoji/itunes.gif" onclick="playAudio('/music/mana.mp3')" style="padding: .25rem;" alt="hear mana pronounce their name"><img src="/img/emoji/mya.gif" onclick="playAudio('/music/mya.mp3')" style="padding: .25rem;" alt="hear mana meow">
|
||||
- **also known as**: momo, peach, makky, pulilith, hitsuji
|
||||
- **identities**: [sapphic](https://lgbtqia.wiki/wiki/Sapphic) [demipansexual](https://lgbtqia.wiki/wiki/Demipansexual); [gender](https://lgbtqia.wiki/wiki/Petalkitty) [is](https://lgbtqia.wiki/wiki/Cutecoric) [confusing](https://lgbtqia.wiki/wiki/Genderfae)
|
||||
- **pronouns**: she/they
|
||||
|
|
@ -109,4 +109,4 @@ OMG> AKR+++ BTAm+++ CCS++ CHOm+ CBB- DBZ-- EXS%+ FLCL%- FB% FY% 999> GITS++ G080
|
|||
- *omg cat sandwitch......* ― cheri
|
||||
- *whoa! a lil mew mew!* ― epsi
|
||||
|
||||
<script src="/soundbite.js" defer></script>
|
||||
<script src="/js/soundbite.js" defer></script>
|
||||
3
mana.mp3
3
mana.mp3
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2107461bfbc471409689b2745a58da92a63e725149c135065104f98da4c42ee1
|
||||
size 8448
|
||||
54
menu.js
54
menu.js
|
|
@ -1,54 +0,0 @@
|
|||
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
|
||||
function myFunction() {
|
||||
var x = document.getElementById("myLinks");
|
||||
if (x.style.display === "block") {
|
||||
x.style.display = "none";
|
||||
} else {
|
||||
x.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSubmenu(event) {
|
||||
event.preventDefault(); // Prevent the default anchor click behavior
|
||||
var submenu = event.target.nextElementSibling; // Get the submenu
|
||||
|
||||
if (submenu.style.display === "block") {
|
||||
submenu.style.display = "none";
|
||||
} else {
|
||||
submenu.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
// Function to keep the menu open based on the current URL
|
||||
function setActiveMenu() {
|
||||
const currentUrl = window.location.pathname; // Get current URL path
|
||||
const menuItems = document.querySelectorAll('.menu a');
|
||||
|
||||
menuItems.forEach(item => {
|
||||
// Check if the current item is the active one
|
||||
if (item.getAttribute('href') === currentUrl) {
|
||||
item.classList.add('active'); // Add active class to the current link
|
||||
const submenu = item.closest('.submenu'); // Get the closest submenu of this item
|
||||
|
||||
// If there's a submenu, show it
|
||||
if (submenu) {
|
||||
submenu.style.display = 'block'; // Open the submenu
|
||||
const parentMenuItem = submenu.previousElementSibling; // Get the parent menu item
|
||||
if (parentMenuItem) {
|
||||
parentMenuItem.classList.add('active'); // Highlight the parent item
|
||||
}
|
||||
}
|
||||
} else if (item.closest('.submenu') && item.getAttribute('href') === currentUrl) {
|
||||
// If this is a submenu item, add active class to the submenu item
|
||||
item.classList.add('active');
|
||||
|
||||
// Find the parent menu item and open the submenu
|
||||
const parentMenuItem = item.closest('.menu-item');
|
||||
parentMenuItem.querySelector('.submenu-toggle').classList.add('active'); // Highlight parent item
|
||||
const parentSubmenu = parentMenuItem.querySelector('.submenu'); // Get the submenu
|
||||
if (parentSubmenu) {
|
||||
parentSubmenu.style.display = 'block'; // Open parent submenu
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
2
moji.js
2
moji.js
|
|
@ -1,2 +0,0 @@
|
|||
var mojis = ["(ノ・∀・)ノ︵ ┻━┻", "(⁎˃ᆺ˂)💦", "｡゜(｀Д´)゜｡", "(ノಠ益ಠ)ノ︵ ┻━┻", "ლ(ಠ益ಠლ", "(´;ω;｀)", "｡･ﾟ’(*/益＼*) ‘ﾟ･｡", "(╥ᆺ╥；)", "(◞‸◟；)", ".˚‧º·(ฅωฅ*)‧º·˚.", "(*ﾉω・*)💦", "( ◕ᴗ◕)っ✂╰⋃╯", "｡*ﾟ+.*.｡(っ ᐛ )っ✂╰⋃╯"]
|
||||
document.getElementById("mojis").innerText = mojis[Math.floor(Math.random() * mojis.length)];
|
||||
3
mya.mp3
3
mya.mp3
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b60f13dd57041a7e42e34787da7128be754fbbdad821aeae8f1b91e59b6d50a0
|
||||
size 6361
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:101d4fa4141900b14bd98adbf456ad91b9e6e142e4ae6791a851d2157015bc55
|
||||
size 1940093
|
||||
16
profile.js
16
profile.js
|
|
@ -1,16 +0,0 @@
|
|||
function getRandomImage() {
|
||||
|
||||
var images = ['/img/picrew/058.png', '/img/picrew/057.jpg', '/img/picrew/056.png', '/img/picrew/055.png', '/img/picrew/053.png', '/img/picrew/052.jpg', '/img/picrew/050.png', '/img/picrew/048.png', '/img/picrew/045.png', '/img/picrew/043.jpg', '/img/picrew/042.png', '/img/picrew/039.png', '/img/picrew/037.png', '/img/picrew/036.png', '/img/picrew/030.jpg', '/img/picrew/029.png', '/img/picrew/028.png', '/img/picrew/010.png', '/img/picrew/007.png', '/img/picrew/005.png', '/img/picrew/004.png', '/img/picrew/003.png'];
|
||||
var image = images[Math.floor(Math.random()*images.length)];
|
||||
|
||||
return image;
|
||||
|
||||
}
|
||||
|
||||
function displayRandomImage() {
|
||||
|
||||
var htmlImage = document.getElementById("randomImage");
|
||||
htmlImage.src = getRandomImage();
|
||||
|
||||
}
|
||||
displayRandomImage();
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
let user = 'ameiro';
|
||||
let url = 'https://lastfm-last-played.biancarosa.com.br/' + user + '/latest-song';
|
||||
let song = document.querySelector('#song');
|
||||
fetch(url)
|
||||
.then(function (response) {
|
||||
return response.json()
|
||||
}).then(function (json) {
|
||||
song.innerHTML = json['track']['name'] + ' - ' + json['track']['artist']['#text'];
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
function playAudio(url) {
|
||||
new Audio(url).play();
|
||||
}
|
||||
837
style.css
837
style.css
|
|
@ -1,837 +0,0 @@
|
|||
:root {
|
||||
--bgColor: #FFFAFC;
|
||||
--fgColor: #6e5854;
|
||||
--metaColor: #FFEFF1;
|
||||
--headColor: #E05969;
|
||||
--linkColor: #BC2F3F;
|
||||
--hovColor: #e3868f;
|
||||
--bgSelect: #3a2930;
|
||||
--sidebarUrl: url("/img/theme/peach.jpeg") repeat;
|
||||
background-color: white;
|
||||
background-size: 10px 10px;
|
||||
background-image:
|
||||
linear-gradient(to right, #FFEFF1 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #FFEFF1 1px, transparent 1px);
|
||||
--bullet: url("/img/theme/kingluludeer_peach.png");
|
||||
--theme-image: url("/img/theme/kittea_paws.gif"); /* credit: https://www.deviantart.com/kittea-paws/art/kitten-floating-away-with-balloons-886993258 */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bgColor: #000040;
|
||||
--fgColor: #D8DAFF;
|
||||
--metaColor: #141C36;
|
||||
--headColor: #A0A8F4;
|
||||
--linkColor: #FF72F7;
|
||||
--hovColor: #6BB6E5;
|
||||
--bgSelect: #6c7086;
|
||||
--sidebarUrl: url("/img/theme/stars.gif") repeat;
|
||||
background-color: #030314;
|
||||
background-size: 10px 10px;
|
||||
background-image:
|
||||
linear-gradient(to right, #1C1736 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #1C1736 1px, transparent 1px);
|
||||
--bullet: url("/img/theme/pastelstar.gif");
|
||||
--theme-image: url("/img/theme/spaaace.gif");
|
||||
}
|
||||
|
||||
ul.update {
|
||||
list-style-image: url("/img/theme/upup.gif");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: vcr;
|
||||
src: url("/fonts/vcr.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: loveletter;
|
||||
src: url("/fonts/loveletter.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: starlight;
|
||||
src: url("/fonts/starlight.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: pixelegance;
|
||||
src: url("/fonts/pixelegance.ttf")
|
||||
}
|
||||
|
||||
html {
|
||||
font: .9rem 'vcr', monospace;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: 3.8em loveletter, monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: bold 2.75em pixelegance, monospace;
|
||||
line-height: 2.5rem;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: 2.2em starlight, monospace;
|
||||
line-height: 2rem;
|
||||
padding: .9rem 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: bold 1.75rem pixelegance, monospace;
|
||||
padding-top: 1rem;
|
||||
margin: 0.1rem 0.1rem 0.1rem 1.5rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font: 1rem courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Hez;
|
||||
src: url("/fonts/Hezaedrus.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: hylie;
|
||||
src: url("/fonts/Hylie.otf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: obliviate;
|
||||
src: url("/fonts/Obliviate.otf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: firstly;
|
||||
src: url("/fonts/Firstly.otf")
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: var(--metaColor);
|
||||
background: var(--bgSelect)
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--fgColor);
|
||||
background: var(--bgSelect)
|
||||
}
|
||||
|
||||
article {
|
||||
display:inline-block;
|
||||
margin-left: 220px;
|
||||
padding: 1px 20px;
|
||||
height: 100%;
|
||||
width: calc(100% - 270px);
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
width: 200px;
|
||||
background: var(--sidebarUrl);
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
overflow: auto;
|
||||
scrollbar-color: var(--hovColor) var(--bgColor);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
nav > * {
|
||||
padding: .4rem .25rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--fgColor);
|
||||
text-decoration: none;
|
||||
padding: .4rem .25rem;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
color: var(--linkColor);
|
||||
}
|
||||
nav a:hover:not(.active) {
|
||||
color: var(--fgColor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
nav {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
background-color: var(--metaColor);
|
||||
padding: 0;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
article {
|
||||
margin-left: 0; width: 94%;
|
||||
}
|
||||
.menu-toggle {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 1.5em;
|
||||
clear: both;
|
||||
text-align: right;
|
||||
margin: auto;
|
||||
position:sticky;
|
||||
padding-right: 10px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
footer {
|
||||
font-size: 2em;
|
||||
}
|
||||
footer a {
|
||||
background-color: var(--metaColor);
|
||||
opacity: 0.25;
|
||||
border-radius: .25em;
|
||||
padding: .8rem;
|
||||
}
|
||||
footer a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menu a {
|
||||
display: block
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: none;
|
||||
text-decoration: none;
|
||||
font-style: italic;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.menu-item a:hover {
|
||||
text-decoration: none;
|
||||
color: var(--fgColor);
|
||||
background-color: var(--bgSelect);
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
color: var(--linkColor)
|
||||
}
|
||||
|
||||
.menu-toggle, .menu {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
nav a {
|
||||
padding: 1rem;
|
||||
}
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.nav-icon i {
|
||||
padding: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.menu-toggle {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.nav-icon {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.peachmoon {
|
||||
text-align: center;
|
||||
font-size: .9em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.theme-image {
|
||||
content: var(--theme-image);
|
||||
float: left;
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
details a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
details {
|
||||
padding: .5rem 0 0 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
details summary > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
details {
|
||||
padding: .5rem 0;
|
||||
}
|
||||
details a {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: var(--hovColor) var(--bgColor);
|
||||
scrollbar-width: thin;
|
||||
font-size: 1em;
|
||||
font-style: normal;
|
||||
line-height: 1.2;
|
||||
margin: auto;
|
||||
overflow-wrap: break-word;
|
||||
background: var(--bgUrl);
|
||||
color: var(--fgColor);
|
||||
font-family: 'Hez', monospace;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0rem 1.5rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
p {
|
||||
margin: 1rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--linkColor)
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline dashed 2px;
|
||||
color: var(--hovColor)
|
||||
}
|
||||
|
||||
.ph {
|
||||
font-size: 1em;
|
||||
color: var(--linkColor);
|
||||
fill: var(--fgColor);
|
||||
background-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--headColor);
|
||||
font: 3.8em hylie, cursive;
|
||||
line-height: .8em;
|
||||
padding-top: .35em;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--headColor);
|
||||
font: 3.5em firstly, cursive;
|
||||
font-weight: bold;
|
||||
line-height: .7em;
|
||||
margin: 0.1rem 0.1rem 0.1rem 1.25rem;
|
||||
padding: .1rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--headColor);
|
||||
font: 2.6em obliviate, cursive;
|
||||
line-height: 2rem;
|
||||
margin: 0.1rem 0.1rem 0.1rem 1.5rem;
|
||||
padding: .4rem 0 .2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--headColor);
|
||||
font: bold 2.9rem firstly, cursive;
|
||||
margin: 0.1rem 0.1rem 0.1rem 1.5rem;
|
||||
padding-top: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-image: var(--bullet);
|
||||
font-size: 1em;
|
||||
line-height: 1.3em;
|
||||
margin: 0.1rem 0.1rem 0.1rem 1rem;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
|
||||
ul.fave {
|
||||
list-style-image: url("/img/main/heart.png");
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
ul p, ol p {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
ol {
|
||||
font-size: 1em;
|
||||
line-height: 1.2em;
|
||||
margin: 0.1rem 0.1rem 0.1rem 1.5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid var(--bgSelect);
|
||||
background-color: var(--bgColor);
|
||||
padding: 1rem;
|
||||
margin: 0 2rem 0.75rem;
|
||||
overflow-x: auto;
|
||||
font: 1.1em monospace;
|
||||
color: var(--fgColor);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-left: 1.5rem;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
time {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight:bold;
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
dt::before {
|
||||
content: "・"
|
||||
}
|
||||
|
||||
dd {
|
||||
font-style:italic;
|
||||
margin-left: 5em;
|
||||
padding-bottom: .7em;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border-radius: 1em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: .9em;
|
||||
font-style: italic;
|
||||
line-height: 1em;
|
||||
margin: auto;
|
||||
padding-top: .5em;
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: dashed 1px;
|
||||
color: var(--hovColor);
|
||||
width: 93%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
hr.blog {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
hr.blog {
|
||||
width: 99%;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-img img {
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-switches{
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.switch {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
margin: 0.2em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-style: normal;
|
||||
}
|
||||
.switch:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.switch {
|
||||
padding: 5px;
|
||||
font-size: 2.5rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.imgwall {
|
||||
font-size: 0;
|
||||
line-height: 0em;
|
||||
image-rendering: pixelated;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.imgwall > img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#padded img {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#nobutton {
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#userbox img {
|
||||
image-rendering: auto;
|
||||
vertical-align: middle;
|
||||
margin: .1rem;
|
||||
max-width: 239px;
|
||||
}
|
||||
|
||||
#stamp > img {
|
||||
image-rendering: auto;
|
||||
vertical-align: middle;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#stamp {
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
#blinkies img, #blinkies > img {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
#music {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#music a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.emote {
|
||||
font-size: 0;
|
||||
line-height: 0em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emote img {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.kaomoji {
|
||||
background-color: var(--metaColor);
|
||||
border-radius: 1em;
|
||||
padding: 0.3em;
|
||||
display: inline-flex;
|
||||
vertical-align: center;
|
||||
margin: 0.2em;
|
||||
}
|
||||
|
||||
.kaomoji:hover {
|
||||
background-color: var(--hovColor)
|
||||
}
|
||||
|
||||
.center {
|
||||
font-size: 0.9em;
|
||||
image-rendering: pixelated;
|
||||
text-align: center;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dotbox {
|
||||
max-width: fit-content;
|
||||
margin: 10px auto;
|
||||
padding: 1rem;
|
||||
border: var(--hovColor) dotted 2px;
|
||||
border-radius: 1.5em;
|
||||
background-color: var(--bgColor);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dotbox ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#tag-cloud:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#tag-cloud {
|
||||
display:block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
font-family: firstly, cursive;
|
||||
font-size: 1.5rem;
|
||||
padding: 0;
|
||||
border: dashed 1px;
|
||||
color: var(--headColor);
|
||||
background-color: var(--metaColor);
|
||||
border-radius: 2rem;
|
||||
width: fit-content;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
#tag-cloud > * {
|
||||
padding: 0.1rem 0.2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
#tag-cloud > * {
|
||||
padding: 0.25rem 0.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.site-tag a:hover {
|
||||
text-decoration: none;
|
||||
color: var(--headColor)
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
margin: 0;
|
||||
padding: .5em 0 0 0;
|
||||
}
|
||||
|
||||
#toc li {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#toc li::before {
|
||||
content: url(/img/main/tinystar.gif);
|
||||
padding-right: .5em;
|
||||
}
|
||||
|
||||
#toc li:last-child::after {
|
||||
content: url(/img/main/tinystar.gif);
|
||||
padding-left: .5em;
|
||||
}
|
||||
|
||||
.twocol {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.twocol > * {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.twocol ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.twocol .smolbox {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.smolbox {
|
||||
padding: 0.5em;
|
||||
background-color: var(--metaColor);
|
||||
border: 1px dashed var(--hovColor);
|
||||
border-radius: 1em;
|
||||
max-width: fit-content;
|
||||
text-align: left;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.threecol {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.threecol > * {
|
||||
margin: .5rem;
|
||||
max-width: calc(100% - .1rem);
|
||||
}
|
||||
|
||||
.threecol > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.threecol > .cover {
|
||||
align-content: center;
|
||||
text-align: right;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.threecol {
|
||||
justify-content: left;
|
||||
width: calc(100% - .2rem);
|
||||
}
|
||||
.threecol > .cover > img {
|
||||
width: calc(100% - .1rem);
|
||||
}
|
||||
}
|
||||
|
||||
#statuscafe {
|
||||
padding: .5em;
|
||||
background-color: azure;
|
||||
border: 1px solid midnightblue;
|
||||
}
|
||||
#statuscafe-username {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
#statuscafe-content {
|
||||
margin: 0 1em 0.5em 1em;
|
||||
}
|
||||
|
||||
.theme-credit {
|
||||
display: inline-flex;
|
||||
max-width: 95%;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.theme-credit > * {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.theme-credit h4 {
|
||||
padding: .1rem 0;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
width: 95%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill,minmax(350px, 1fr));
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box img {
|
||||
max-width: 380px
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.box img {
|
||||
max-width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.img-gallery {
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.masonry-container {
|
||||
column-count: 4; /* Number of columns */
|
||||
column-gap: .5rem; /* Spacing between columns */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.masonry-container > * {
|
||||
break-inside: avoid; /* Prevents items from breaking inside columns */
|
||||
margin-bottom: 10px; /* Space between items */
|
||||
}
|
||||
|
||||
.masonry-item img {
|
||||
max-width: 100%;
|
||||
height: auto; /* Maintains aspect ratio */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1200px) {
|
||||
.masonry-container {
|
||||
column-count: 3; /* 3 columns on medium screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.masonry-container {
|
||||
column-count: 2; /* 2 columns on smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.masonry-container {
|
||||
column-count: 1; /* 1 column on very small screens */
|
||||
}
|
||||
.masonry-container p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.masonry-container img {
|
||||
width: calc(100% - .2rem);
|
||||
}
|
||||
}
|
||||
22
theme.js
22
theme.js
|
|
@ -1,22 +0,0 @@
|
|||
window.addEventListener('load', function() {
|
||||
var prefersDarkScheme = window.matchMedia !== undefined && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
var DEFAULT_THEME = prefersDarkScheme ? 'moon' : 'peach';
|
||||
var THEMES = ["moon", "peach", "sakura", "honey"];
|
||||
|
||||
function setTheme(theme) {
|
||||
if (THEMES.indexOf(theme) < 0) theme = DEFAULT_THEME;
|
||||
document.getElementById('switcher-id').href = '/themes/' + theme + '.css';
|
||||
localStorage.setItem('style', theme);
|
||||
}
|
||||
|
||||
var savedTheme = localStorage.getItem('style');
|
||||
setTheme(savedTheme || DEFAULT_THEME);
|
||||
|
||||
const switches = document.getElementsByClassName('switch');
|
||||
for (const el of switches) {
|
||||
console.log(el);
|
||||
el.addEventListener('click', () => {
|
||||
setTheme(el.dataset.theme);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
:root {
|
||||
--bgColor: #FEDF9E;
|
||||
--fgColor: #5a4735;
|
||||
--metaColor: #fce699;
|
||||
--headColor: #705134;
|
||||
--linkColor: #ec5800;
|
||||
--hovColor: #d2691e;
|
||||
--bgSelect: #E5C589;
|
||||
background-color: #FEDF9E;
|
||||
background-size: 10px 10px;
|
||||
background-image:
|
||||
linear-gradient(to right, #fdd37f 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #fdd37f 1px, transparent 1px);
|
||||
--sidebarUrl: url("/img/theme/sunny_plaid_jonespatterns.jpg") repeat;
|
||||
--bullet: url("/img/theme/crepe.gif");
|
||||
--theme-image: url("/img/theme/pickebicke.gif");
|
||||
}
|
||||
|
||||
.peachmoon {
|
||||
text-align: center;
|
||||
font-size: .9em;
|
||||
padding: 0.75rem 0 1em 0;
|
||||
}
|
||||
|
||||
ul.update {
|
||||
list-style-image: url("/img/theme/new.gif");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: pointfree;
|
||||
src: url("/fonts/pointfree.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: cheese;
|
||||
src: url("/fonts/CheeseMatcha.otf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: kitto;
|
||||
src: url("/fonts/kitto.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
font: .85rem 'pointfree', monospace;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 2.25rem;
|
||||
padding-bottom: .25rem;
|
||||
font: 4.25em 'obliviate', cursive;
|
||||
letter-spacing: 0.25rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: bold 2.8rem 'kitto', monospace;
|
||||
line-height: 3rem;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: 2.8em 'cheese', monospace;
|
||||
line-height: 3rem;
|
||||
padding: .4rem 0 .2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: bold 2.9rem 'firstly', monospace;
|
||||
line-height: 2rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font: 1rem 'courier', monospace;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.theme-credit {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
:root {
|
||||
--bgColor: #000040;
|
||||
--fgColor: #D8DAFF;
|
||||
--metaColor: #141C36;
|
||||
--headColor: #A0A8F4;
|
||||
--linkColor: #FF72F7;
|
||||
--hovColor: #6BB6E5;
|
||||
--bgSelect: #453355;
|
||||
--sidebarUrl: url("/img/theme/stars.gif") repeat;
|
||||
background-color: #030314;
|
||||
background-size: 10px 10px;
|
||||
background-image:
|
||||
linear-gradient(to right, #1C1736 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #1C1736 1px, transparent 1px);
|
||||
--bullet: url("/img/theme/pastelstar.gif");
|
||||
--theme-image: url("/img/theme/spaaace.gif");
|
||||
}
|
||||
|
||||
ul.update {
|
||||
list-style-image: url("/img/theme/upup.gif");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: vcr;
|
||||
src: url("/fonts/vcr.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: loveletter;
|
||||
src: url("/fonts/loveletter.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: starlight;
|
||||
src: url("/fonts/starlight.ttf")
|
||||
}
|
||||
@font-face {
|
||||
font-family: pixelegance;
|
||||
src: url("/fonts/pixelegance.ttf")
|
||||
}
|
||||
|
||||
html {
|
||||
font: .9rem 'vcr', monospace;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: 3.8em loveletter, monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: bold 2.75em pixelegance, monospace;
|
||||
line-height: 2.5rem;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: 2.2em starlight, monospace;
|
||||
line-height: 2rem;
|
||||
padding: .9rem 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font: bold 1.75rem pixelegance, monospace;
|
||||
padding-top: 1rem;
|
||||
margin: 0.1vw 0.1vw 0.1vw 1.5vw;
|
||||
}
|
||||
|
||||
code {
|
||||
font: 1rem courier, monospace;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
:root {
|
||||
--bgColor: #FFFAFC;
|
||||
--fgColor: #6e5854;
|
||||
--metaColor: #FFEFF1;
|
||||
--headColor: #E05969;
|
||||
--linkColor: #BC2F3F;
|
||||
--hovColor: #e3868f;
|
||||
--bgSelect: #fab0b8;
|
||||
--sidebarUrl: url("/img/theme/peach.jpeg") repeat;
|
||||
--bullet: url("/img/theme/kingluludeer_peach.png");
|
||||
--theme-image: url("/img/theme/kittea_paws.gif");
|
||||
background-color: white;
|
||||
background-size: 10px 10px;
|
||||
background-image:
|
||||
linear-gradient(to right, #FFEFF1 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #FFEFF1 1px, transparent 1px);
|
||||
}
|
||||
|
||||
ul.update {
|
||||
list-style-image: url("/img/theme/loveup.gif");
|
||||
}
|
||||
|
||||
.theme-credit {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
:root {
|
||||
--bgColor: #F7DEE9;
|
||||
--fgColor: #626865;
|
||||
--metaColor: #F6E6E6;
|
||||
--headColor: #6caecf;
|
||||
--linkColor: #d36977;
|
||||
--hovColor: #FF5686;
|
||||
--bgSelect: #BAD4AF;
|
||||
--sidebarUrl: url("/img/theme/zeudontumblr.png");
|
||||
background-color: var(--bgColor);
|
||||
background-size: 10px 10px;
|
||||
background-image:
|
||||
linear-gradient(to right, #F2EAEA 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #F2EAEA 1px, transparent 1px);
|
||||
--bullet: url("/img/theme/acrylliaDA-sakurabulletdark.png");
|
||||
--theme-image: url("img/theme/nyanberri.png");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: dokidoki;
|
||||
src: url("/fonts/DokiDoki.otf")
|
||||
}
|
||||
|
||||
html {
|
||||
font: .9rem 'dokidoki', monospace;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline dotted 2px var(--hovColor);
|
||||
}
|
||||
|
||||
nav {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
ul.fave {
|
||||
list-style-image: url("/img/theme/tamagotchininja_heart.gif");
|
||||
}
|
||||
|
||||
ul.update {
|
||||
list-style-image: url("/img/theme/pinkarrow.gif");
|
||||
}
|
||||
|
||||
pre {
|
||||
font: .8rem 'dokidoki', monospace;
|
||||
}
|
||||
|
||||
.theme-credit {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue