278 lines
No EOL
9.6 KiB
HTML
278 lines
No EOL
9.6 KiB
HTML
<!DOCTYPE html><html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>akira.pink</title>
|
|
<meta name="description" content="akirapink's website">
|
|
<meta name="keywords" content="marbelynrye,marbel,akirapink,akira,last human on the internet">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/x-icon" href="pfp.png"> <!--you-->
|
|
<style>
|
|
/* font imports */
|
|
@font-face {
|
|
font-family: "InterFrozen";
|
|
src: url("InterFrozen.ttf");
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "InterFrozen";
|
|
src: url("InterFrozen_Italic.ttf");
|
|
font-style: italic;
|
|
}
|
|
p,h1,h2,h3,h4,h4,h5,h6{
|
|
margin: 0;
|
|
/* i hate margins on text elements */
|
|
}
|
|
*{ /*important rule, this makes everything obey your exact width height specifications (don't think about it too much)*/
|
|
box-sizing: border-box;
|
|
}
|
|
body,html{
|
|
/* making the webpage screen-sized so the background isn't cut off */
|
|
width: 100%;
|
|
height: 100%;
|
|
/* default styling puts margins like documents in word (we don't need that) */
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
body{
|
|
font-family: "InterFrozen";
|
|
overflow-y: auto;
|
|
}
|
|
#header{
|
|
/* minimum height, if text starts to form new lines it will become taller to fit the bio and name */
|
|
/* squish the website sideways to test */
|
|
/* A little buggy? Last line clips into Last Updated text. I get why though
|
|
/* how about now */
|
|
/* Better!! but, weird: Now the polaroid stripes get cut off >< */
|
|
/* would you send a screenshot... */
|
|
/* Byeah. I feel like a professional "Ideas Perso" and it kind of sucks to be that */
|
|
/* , er*/
|
|
min-height: 232px;
|
|
background: blue;
|
|
background: url("bg.png") center/cover, darkviolet; /*blue fallback*/
|
|
image-rendering: optimizeQuality;
|
|
/* padding so the polaroid doesn't touch */
|
|
padding-left: 31px;
|
|
padding-bottom: 31px;
|
|
/* grid makes things go horisontally here (flex (or flexbox) can do it too but who cares!!) */
|
|
display: grid;
|
|
grid-template-columns: max-content auto max-content;
|
|
column-gap: 30px;
|
|
/* put a alpha mask to do the triangle cuts, this might not be supported in every browser, it will default to a regular square as a fallback */
|
|
mask-image: url("diamond.png"), linear-gradient(to bottom, white, white 0 calc(100% - 11px),transparent 0 100%);
|
|
mask-position: 9px 100%,top;
|
|
mask-repeat: repeat-x;
|
|
mask-mode: alpha;
|
|
mask-type: alpha;
|
|
/* main page overlay stuff */
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#polaroidContainer{
|
|
width: 105px;
|
|
/* the stripes, 56px wide */
|
|
background: linear-gradient(to right, #ff4de6 0 25%,#ffec4d 25% 50%,#ff955b 50% 75%,#886fed 75% 100%) center/56px 100% no-repeat;
|
|
/* convenient code that makes things inside centered */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* make it go beyond the padding-bottom */
|
|
margin-bottom: -31px;
|
|
}
|
|
#polaroid{
|
|
height: 126px;
|
|
width: 100%;
|
|
background: white;
|
|
padding: 5px;
|
|
image-rendering: optimizeQuality;
|
|
overflow: hidden;
|
|
}
|
|
#titles{
|
|
color: white;
|
|
height: 100%;
|
|
padding-top: 60px;
|
|
padding-bottom: 40px;
|
|
line-height: 1.1;
|
|
text-rendering: optimizeLegibility;
|
|
/* you might like this? */
|
|
text-shadow: 2px 2px 0 black;
|
|
z-index: 1;
|
|
}
|
|
#title{
|
|
font-size: 45px;
|
|
font-weight: 800;
|
|
}
|
|
#bio{
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
sub{
|
|
vertical-align: text-bottom;
|
|
font-size: 0.6em;
|
|
color: skyblue;
|
|
}
|
|
/* shrink title if screen is too tiny */
|
|
@media screen and not (min-width: 810px) {
|
|
#title{font-size: 6vw;}
|
|
}
|
|
#links{
|
|
display: flex;
|
|
flex-flow: column;
|
|
width: 202px;
|
|
height: 100%;
|
|
padding-top: 10px;
|
|
/* this gets rid of typical list item dots */
|
|
list-style: none;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
row-gap: 0.3em;
|
|
letter-spacing: -0.7px;
|
|
}
|
|
#links a{
|
|
/* make anchors (links) not make text blue */
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
#links>li{
|
|
/* variable for convenience */
|
|
--color: white;
|
|
color: var(--color);
|
|
border-bottom: 5px solid var(--color);
|
|
}
|
|
/* header stuff done! */
|
|
#main{
|
|
/* max width, it won't stretch the whole page but it will shrink for mobile devices (maybe) */
|
|
max-width: 500px;
|
|
min-height: 751px;
|
|
/* umm your paper png was way more beige for some reason so i put a filter and correction gradient */
|
|
background:
|
|
linear-gradient(to bottom,rgba(255,255,255,0.75),rgba(255,255,255,0.75)),
|
|
url("paper.png") top center/cover,
|
|
lightgray /*if the paper image fails to load it will be light gray this is helping me see right now*/ /*Thank you! I see + sorry*/ /**/
|
|
;
|
|
image-rendering: optimizeQuality;
|
|
filter: grayscale(1);
|
|
/* ancient and convenient way to center stuff horisontally */
|
|
margin: auto;
|
|
/* we need it to overlay the header */
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-top: -45px;
|
|
/* ... */
|
|
padding: 12px;
|
|
/* to fix #content not hitting height:100% ugh */
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: max-content auto;
|
|
}
|
|
#docheader{
|
|
width: 100%;
|
|
height: fit-content;
|
|
border: 1px solid gray;
|
|
display: grid;
|
|
grid-template-columns: max-content auto;
|
|
grid-template-rows: 50% 50%;
|
|
}
|
|
#docheader>p{
|
|
font-size: 20px;
|
|
line-height: 1.0;
|
|
padding: 3px;
|
|
letter-spacing: 1px;
|
|
}
|
|
#content{
|
|
border: 1px solid gray;
|
|
border-top: none;
|
|
padding: 3px;
|
|
font-size: 15px;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header id="header">
|
|
<div id="polaroidContainer">
|
|
<!-- hiiiiiiiiiiii fun fact ctrl + / makes comments -->
|
|
<!-- Oh right forgot about that -->
|
|
<!-- Does the theme I have on show up for you... -->
|
|
<!-- nope it's my regular dark mode thing -->
|
|
<!-- Okay! -->
|
|
<div id="polaroid">
|
|
<!-- you! older image but whatever -->
|
|
<img src="pfp.png" width="100%">
|
|
</div>
|
|
</div>
|
|
<div id="titles">
|
|
<header id="title">Akira Olivia Pink</header>
|
|
<p id="bio">
|
|
she/her · 25th Jun 2008 · <i>Homo sapiens sapiens</i><br>
|
|
The Last Human on the Internet<a href="https://en.wikipedia.org/wiki/Citation_needed"><sub><i>[citation needed]</i></sub></a>
|
|
</p>
|
|
<!-- <footer style="padding-top: 1.5em; font-size: 15px;">Last updated 24-06-2025 <a href="archive.html" style="color: lch(80% 100 80deg); /*try some hues yeah the hues try the hues see which is the brightest*/">(click me!)</a></footer>-->
|
|
<!-- Moving this to the top of the paper I think -->
|
|
<!-- below the hello world wide web? -->
|
|
<!-- No, above the paper. Should have worded that better -->
|
|
<!-- -->
|
|
<!-- ↑ Might need to make this a brighter color ↑ -->
|
|
<!-- it's pure white wdym-->
|
|
<!-- The "click me" link -->
|
|
<!-- oh -->
|
|
<!-- On further consideration maybe the date should be a link...Nevermind -->
|
|
<!-- colorimetrists say pure red is brighter than white -->
|
|
<!-- Interesting! Thank you for the share :) -->
|
|
<!-- i am going to tire you with these -->
|
|
<!-- 🛞 -->
|
|
|
|
</div>
|
|
<ul id="links">
|
|
<li style="--color:#ff4de6"><a href="#mrrp_meow">About me</a></li>
|
|
<li style="--color:#ffec4d"><a href="#mrrp_meow">Visual works</a></li>
|
|
<li style="--color:#ff955b"><a href="#mrrp_meow">Writings</a></li>
|
|
<li style="--color:#886fed"><a href="#mrrp_meow">Contact</a></li>
|
|
</ul>
|
|
</header>
|
|
<!-- text thingy (the paper) -->
|
|
<article id="main">
|
|
<!-- like this? yippe -->
|
|
<!-- Above the paper, sorry sorry sorry sorry sorry sorry sorry sorry -->
|
|
<!-- Yeah like that! ^^ -->
|
|
<!-- half of the bandwidth will be our silly ramblings in comments ahahaha -->
|
|
<!-- It's worth it, I think : ) -->
|
|
<!-- what else must be done? -->
|
|
<!-- do you want the styling to be moved away from here the "deviating" id is for nothing atm-->
|
|
<!-- I don't know, I'm not sure. I was about to ask to- nevermind I changed my mind about the other thing. But yeah IDK if I-Oh...hmm.. -->
|
|
<p style="
|
|
/*this element ignores grid positioning, and shoves itself above the margin out of border-box bounds (to clarify what is going on here)*/
|
|
position:absolute;
|
|
width:100%;
|
|
text-align: center;
|
|
margin-top:-25px;
|
|
color:white;
|
|
">
|
|
Last updated 24-06-2025
|
|
<a href="archive.html" style="color: lch(80% 100 80deg);">(click me!)</a>
|
|
</p>
|
|
<header id="docheader">
|
|
<!-- this is a year i think.. or you plan on making 9999 posts -->
|
|
<h1 style=" /*this is called inline styling, it's styling inside the html tag (no need to declare a class or id!)*/ /*Oh, yeah, I'm aware! I was a little surprised at first but I take it it's more of a matter of preference? i used it here because it's a single text header and like, who cares if it has an id or not*/
|
|
font-size: 40px;
|
|
line-height: 1;
|
|
grid-row: span 2;
|
|
border-right: 1px solid gray;
|
|
min-height: 51px;
|
|
min-width: 125px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
">0000</h1>
|
|
<p style="
|
|
border-bottom: 1px solid gray;
|
|
">
|
|
Hello World Wide Web!
|
|
</p>
|
|
<p></p>
|
|
</header>
|
|
<main id="content">
|
|
<!-- the <q> is very useful for screenreaders (maybe (it's just semantic html)) -->
|
|
what is <q>Lorem Ipsum</q>?
|
|
</main>
|
|
</article>
|
|
<!-- erm ignore the tracker -->
|
|
<script data-goatcounter="https://marbelynrye.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script></body></html> |