cleaned up

This commit is contained in:
Juli 2025-04-25 19:15:21 +03:00
parent 9ba6e838aa
commit 1e8e23b7cc
No known key found for this signature in database
3 changed files with 233 additions and 176 deletions

View file

@ -1,40 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<title>Juli's silly website</title>
<link rel="stylesheet" href="/style.css">
<meta charset="utf-8"/>
<meta name="author" content="Juli" />
<meta content="juli's page" property="og:title" />
<head>
<title>Juli's silly website</title>
<link rel="stylesheet" href="/style.css" />
<meta charset="utf-8" />
<meta name="author" content="Juli" />
<meta content="juli's page" property="og:title" />
<meta content="some furry's page" property="og:description" />
<meta content="#f5c2e7" data-react-helmet="true" name="theme-color"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="#f5c2e7" data-react-helmet="true" name="theme-color" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="twitter:site" content="https://julimiro.eu" />
<meta name="twitter:title" content="juli's website" />
<meta name="twitter:description" content="a silly fur's page" />
<meta name="twitter:title" content="juli's website" />
<meta name="twitter:description" content="a silly fur's page" />
<script src="/static/particle.js"></script>
<script defer src="https://anal.julimiro.eu/script.js" data-website-id="7b1c38af-a272-41c0-a55b-ddb34141166f"></script>
</head>
<body>
<noscript><style>.scriptonly {display: none;}</style></noscript>
<script
defer
src="https://anal.julimiro.eu/script.js"
data-website-id="7b1c38af-a272-41c0-a55b-ddb34141166f"
></script>
</head>
<body>
<noscript
><style>
.scriptonly {
display: none;
}
</style></noscript
>
<div id="particles-js"></div>
<div class="page">
<div class="content container">
<h1>Juli's about</h1>
<p>I am Juli, a Finnish pansexual genderfluid furry from '09(thats 15 years old). I go by Juli or Julimiro, I prefer it/its and she/her(in that order) but any are fine.</p>
<p>I have a few coding projects which are on my <a href="https://gitlab.com/julimiro-waf">Gitlab</a></p>
<div class="socials">
<a alt="Website" rel="me" target="_blank" href="https://julimiro.eu"><img alt="Website" title="Website" width=50px height=50px src="/static/icons/www.svg" /></a>
<a alt="Fediverse" rel="me" target="_blank" href="https://kitsunes.club/@juli"><img alt="Fediverse" title="Fediverse" width=50px height=50px src="/static/icons/fediverse.svg" /></a>
<a alt="Last.fm" rel="me" target="_blank" href="https://www.last.fm/user/Julimiro"><img alt="Last.fm" title="Last.fm" width=50px height=50px src="/static/icons/lastfm.svg" /></a>
<a alt="Pronouns-page" rel="me" target="_blank" href="https://en.pronouns.page/u/Julimiro"><img alt="Pronouns.page"title="prononuns.page" width=50px height=50px src="/static/icons/pronouns.svg" /></a>
</div>
</div>
</body>
<div id="particles-js"></div>
<div class="page">
<div class="content container">
<h1>Juli's about</h1>
<p>
I am Juli, a Finnish pansexual genderfluid furry from '09(thats 15
years old). I go by Juli or Julimiro, I prefer it/its and she/her(in
that order) but any are fine.
</p>
<p>
More links can be found at
<a href="https://links.julimiro.eu/">links.julimiro.eu</a>
</p>
<div class="socials">
<a alt="Website" rel="me" target="_blank" href="https://julimiro.eu"
><img
alt="Website"
title="Website"
width="50px"
height="50px"
src="/static/icons/www.svg"
/></a>
<a
alt="Fediverse"
rel="me"
target="_blank"
href="https://kitsunes.club/@juli"
><img
alt="Fediverse"
title="Fediverse"
width="50px"
height="50px"
src="/static/icons/fediverse.svg"
/></a>
<a
alt="Last.fm"
rel="me"
target="_blank"
href="https://www.last.fm/user/Julimiro"
><img
alt="Last.fm"
title="Last.fm"
width="50px"
height="50px"
src="/static/icons/lastfm.svg"
/></a>
<a
alt="Pronouns-page"
rel="me"
target="_blank"
href="https://en.pronouns.page/u/Julimiro"
><img
alt="Pronouns.page"
title="prononuns.page"
width="50px"
height="50px"
src="/static/icons/pronouns.svg"
/></a>
</div>
</div>
</div>
</body>
</html>
<!-- trans rights :3 -->
<!-- trans rights :3 -->

View file

@ -1,15 +1,19 @@
This repo is the source for [about.julimiro.eu](https://about.julimiro.eu/). Below is a copy of the about page but in markdown form.
juli@meowcity:~/about_me$ cat README.md
Hi!
I am Juli a Finnish furry from '09(thats 15 years old). I go by Juli or Julimiro, i go by any pronouns.
I am Juli, a Finnish pansexual genderfluid furry from '09(thats 15 years old). I go by Juli or Julimiro, I prefer it/its and she/her(in that order) but any are fine.
More links can be found at [links.julimiro.eu](https://links.julimiro.eu/)
<[https://julimiro.eu](https://julimiro.eu)>
<[https://pawb.social/u/Juli](https://pawb.social/u/Juli)>
<[https://eepykitty.lol/@juli](https://eepykitty.lol/@juli)>
<[https://www.last.fm/user/Julimiro](https://www.last.fm/user/Julimiro)>
<[@julikitsunes.club](https://kitsunes.club/@juli)>
<[https://www.last.fm/user/Julimiro](https://www.last.fm/user/Julimiro)>
Meow

269
style.css
View file

@ -1,168 +1,167 @@
@import url("https://api.fonts.coollabs.io/css2?family=Atkinson+Hyperlegible&display=swap");
@import url('https://api.fonts.coollabs.io/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
html, body{
padding: 0;
margin: 0;
height: 100%;
font-size: 1.1em;
@import url("https://api.fonts.coollabs.io/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
html,
body {
padding: 0;
margin: 0;
height: 100%;
font-size: 1.1em;
}
body {
color: #cdd6f4;
background-color: #1e1e2e;
font-family: 'Atkinson Hyperlegible', 'Roboto Mono', Arial, sans-serif;
color: #cdd6f4;
background-color: #1e1e2e;
font-family: "Atkinson Hyperlegible", "Roboto Mono", Arial, sans-serif;
}
a {
color: #f5c2e7;
color: #f5c2e7;
}
a:hover {
color: #f38ba8;
color: #f38ba8;
}
.page {
display: flex;
width: 65%;
margin: 0 auto;
align-items: start;
padding-top: 3em;
display: flex;
width: 65%;
margin: 0 auto;
align-items: start;
padding-top: 3em;
}
.page .content{
flex-grow: 7;
padding: 0.25em;
min-width: 68%;
.page .content {
flex-grow: 7;
padding: 0.25em;
min-width: 68%;
}
.page {
max-width: 100%;
text-align: center;
max-width: 100%;
text-align: center;
}
.content {
max-width: 100%;
max-width: 100%;
}
.page .sidebar {
flex-grow: 3;
min-width: 27%; /* this is highly cursed */
max-width: 40%;
flex-grow: 3;
min-width: 27%; /* this is highly cursed */
max-width: 40%;
}
.container {
border-color: #f5c2e7;
border-width: 2px;
border-style: solid;
margin: 1em;
background-color: #1e1e2e;
padding: 0.6em;
border-color: #f5c2e7;
border-width: 2px;
border-style: solid;
margin: 1em;
background-color: #1e1e2e;
padding: 0.6em;
}
/* time to fix these cursed media queries */
@media only screen and (min-width: 0px) and (max-width: 600px){
.page {
width: 100%;
margin-top: 0;
flex-direction: column-reverse;
}
.container {
margin: 0.5em;
}
.sidebar {
min-width: 95% !important;
/*max-width: 100% !important;*/
width: 100% !important;
}
.content {
min-width: 95% !important;
width: 100% !important;
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
.page {
width: 100%;
margin-top: 0;
flex-direction: column-reverse;
}
.container {
margin: 0.5em;
}
.sidebar {
min-width: 95% !important;
/*max-width: 100% !important;*/
width: 100% !important;
}
.content {
min-width: 95% !important;
width: 100% !important;
}
}
@media only screen and (min-width: 600px) and (max-width: 1000px){
.page {
margin-top: 0;
width: 85%;
}
@media only screen and (min-width: 600px) and (max-width: 1000px) {
.page {
margin-top: 0;
width: 85%;
}
}
.page .sidebar header{
text-align: right;
.page .sidebar header {
text-align: right;
}
canvas {
display: block;
vertical-align: bottom;
}
#particles-js {
z-index: -1;
position: fixed;
width: 100%;
height: 100%;
background-color: #1e1e2e;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
canvas {
display: block;
vertical-align: bottom;
}
.content hr:last-of-type {
display:none;
}
.socials {
background-color: #fff;
display: inline-block;
padding:5px;
padding-bottom: 0px;
border: 2px solid #f5c2e7;
margin-bottom: 1em;
}
#animal_img {
width: 100%;
height: auto;
}
#gif_buttons {
image-rendering: pixelated;
}
#particles-js {
z-index: -1;
position: fixed;
width: 100%;
height: 100%;
background-color: #1e1e2e;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.breakword {
word-wrap: break-word;
}
.content hr:last-of-type {
display: none;
}
.socials {
background-color: #fff;
display: inline-block;
padding: 5px;
padding-bottom: 0px;
border: 2px solid #f5c2e7;
margin-bottom: 1em;
}
#animal_img {
width: 100%;
height: auto;
}
#gif_buttons {
image-rendering: pixelated;
}
#analytics-iframe {
border: unset;
width: 100%;
height: 30vh;
}
.breakword {
word-wrap: break-word;
}
.qr {
width: 20%;
height: auto;
#analytics-iframe {
border: unset;
width: 100%;
height: 30vh;
}
.qr {
width: 20%;
height: auto;
}
#kofiframe {
overflow: hidden;
}
html.is-changing {
view-transition-name: main;
}
::view-transition-old(main) {
animation: fade 0.5s ease-in-out both;
}
::view-transition-new(main) {
animation: fade 0.5s ease-in-out both reverse;
}
@keyframes fade {
from {
opacity: 1;
}
#kofiframe {
overflow: hidden;
to {
opacity: 0;
}
html.is-changing {
view-transition-name: main;
}
::view-transition-old(main) {
animation: fade 0.5s ease-in-out both;
}
::view-transition-new(main) {
animation: fade 0.5s ease-in-out both reverse;
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0; }
}
html.is-changing:not(.swup-native) {
transition: 0.25s opacity;
opacity: 1;
}
html.is-animating:not(.swup-native) {
opacity: 0;
}
}
html.is-changing:not(.swup-native) {
transition: 0.25s opacity;
opacity: 1;
}
html.is-animating:not(.swup-native) {
opacity: 0;
}