Fix CSS and some other stuff (debug session w ari)'
This commit is contained in:
parent
08fb70152a
commit
1816f483b2
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2026 ImBadAtThisStuff
|
||||
Copyright (c) 2026 git.gay/ari
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 361 B |
Binary file not shown.
|
|
@ -2,25 +2,36 @@
|
|||
@import url(theme-switcher.css);
|
||||
@import url("picker.css");
|
||||
@import url(themes/mocha.css);
|
||||
@import url(themes/macciato.css);
|
||||
@import url(themes/macchiato.css);
|
||||
@import url(themes/frappe.css);
|
||||
@import url(themes/latte.css);
|
||||
|
||||
|
||||
|
||||
html, body {
|
||||
background-color: var(--base);
|
||||
color: var(--text);
|
||||
html,
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1.5rem 1rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'Comic Code', sans-serif;
|
||||
overflow-x: hidden;
|
||||
max-width: 100vw;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html {
|
||||
background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
|
||||
}
|
||||
|
||||
.hub {
|
||||
position: relative;
|
||||
position: auto;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
|
|
@ -45,10 +56,21 @@ html {
|
|||
margin: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--accent-rgb));
|
||||
transition: color 0.6s ease;
|
||||
}
|
||||
|
||||
.hey {
|
||||
color: #ffffff
|
||||
}
|
||||
|
||||
.name {
|
||||
color: rgb(var(--accent-rgb))
|
||||
}
|
||||
|
||||
.name::before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.tagline {
|
||||
margin: 0.35rem 0 0;
|
||||
color: var(--subtext-0);
|
||||
|
|
@ -65,12 +87,6 @@ html {
|
|||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Estrogen watermark blended into the background */
|
||||
body::before {
|
||||
content: "";
|
||||
|
|
@ -83,40 +99,43 @@ body::before {
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
/* this is the weird css */
|
||||
.intro {
|
||||
margin-top: 20vh;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
padding: 5vh
|
||||
.badges {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.4rem;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.intro-header {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-0);
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
||||
color: var(--subtext-1);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
transition: border-color 0.6s ease, box-shadow 0.6s ease;
|
||||
}
|
||||
|
||||
.HiIm {
|
||||
color: var(--text);
|
||||
display: inline-block;
|
||||
.badge:hover {
|
||||
border-color: rgb(var(--accent-rgb));
|
||||
box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb), 0.5);
|
||||
}
|
||||
|
||||
.name {
|
||||
color: var(--mauve);
|
||||
display: inline-block;
|
||||
.badge-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
|
||||
}
|
||||
|
||||
.pronouns {
|
||||
font-size: 1.6rem;
|
||||
color: var(--overlay-1);
|
||||
display: inline-block;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
padding: 1vh;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
@ -133,10 +152,6 @@ body::before {
|
|||
}
|
||||
}
|
||||
|
||||
.desktop-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.desktop-break {
|
||||
display: block;
|
||||
|
|
|
|||
348
css/picker.css
348
css/picker.css
|
|
@ -3,63 +3,333 @@
|
|||
|
||||
/* https://github.com/doughmination/oneko.clove.is-a.dev/releases/tag/v1.0.0 */
|
||||
|
||||
#oneko { position: fixed; width: 32px; height: 32px; image-rendering: pixelated;
|
||||
z-index: 2147483647; pointer-events: none; }
|
||||
#oneko {
|
||||
position: fixed;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
image-rendering: pixelated;
|
||||
z-index: 2147483647;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cat-picker {
|
||||
position: fixed; inset: 0; z-index: 2147483646;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(17, 17, 27, 0.72); backdrop-filter: blur(4px); padding: 20px;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2147483646;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(17, 17, 27, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 20px;
|
||||
}
|
||||
.cat-picker[hidden] { display: none; }
|
||||
|
||||
.cat-picker[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cat-picker-panel {
|
||||
background: #181825; color: #cdd6f4; border: 1px solid #313244;
|
||||
border-radius: 14px; width: min(720px, 100%); max-height: 82vh;
|
||||
display: flex; flex-direction: column; font-family: system-ui, sans-serif;
|
||||
background: #181825;
|
||||
color: #cdd6f4;
|
||||
border: 1px solid #313244;
|
||||
border-radius: 14px;
|
||||
width: min(720px, 100%);
|
||||
max-height: 82vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: system-ui, sans-serif;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.cat-picker-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 16px 20px; border-bottom: 1px solid #313244; font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #313244;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cat-picker-close {
|
||||
background: none; border: none; color: #a6adc8; font-size: 1.5rem;
|
||||
line-height: 1; cursor: pointer; padding: 0 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a6adc8;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.cat-picker-close:hover { color: #f38ba8; }
|
||||
.cat-grid { overflow-y: auto; padding: 18px 20px; }
|
||||
.cat-section { margin-bottom: 18px; }
|
||||
|
||||
.cat-picker-close:hover {
|
||||
color: #f38ba8;
|
||||
}
|
||||
|
||||
.cat-grid {
|
||||
overflow-y: auto;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.cat-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.cat-section-title {
|
||||
margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: #cba6f7;
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #cba6f7;
|
||||
}
|
||||
|
||||
.cat-section-items {
|
||||
display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
|
||||
}
|
||||
|
||||
.cat-option {
|
||||
background: #1e1e2e; border: 1px solid #313244; border-radius: 10px;
|
||||
padding: 10px 6px 8px; cursor: pointer; color: inherit;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
background: #1e1e2e;
|
||||
border: 1px solid #313244;
|
||||
border-radius: 10px;
|
||||
padding: 10px 6px 8px;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: border-color .12s, transform .1s, background .12s;
|
||||
}
|
||||
.cat-option:hover { border-color: #cba6f7; transform: translateY(-2px); background: #313244; }
|
||||
.cat-option.current { border-color: #cba6f7; background: #313244; box-shadow: inset 0 0 0 1px #cba6f7; }
|
||||
|
||||
.cat-option:hover {
|
||||
border-color: #cba6f7;
|
||||
transform: translateY(-2px);
|
||||
background: #313244;
|
||||
}
|
||||
|
||||
.cat-option.current {
|
||||
border-color: #cba6f7;
|
||||
background: #313244;
|
||||
box-shadow: inset 0 0 0 1px #cba6f7;
|
||||
}
|
||||
|
||||
.cat-option .cat-preview {
|
||||
width: 32px; height: 32px; image-rendering: pixelated;
|
||||
background-repeat: no-repeat; border-radius: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
image-rendering: pixelated;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.cat-option .cat-name { font-size: 0.68rem; color: #bac2de; text-align: center; line-height: 1.1; word-break: break-word; }
|
||||
.cat-hint { margin: 0; padding: 12px 20px; border-top: 1px solid #313244;
|
||||
font-size: 0.78rem; color: #a6adc8; text-align: center; }
|
||||
.cat-hide-btn { background: none; border: none; color: #f38ba8; cursor: pointer;
|
||||
font-size: 0.78rem; padding: 0; }
|
||||
.cat-hide-btn:hover { text-decoration: underline; }
|
||||
|
||||
.cat-option .cat-name {
|
||||
font-size: 0.68rem;
|
||||
color: #bac2de;
|
||||
text-align: center;
|
||||
line-height: 1.1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cat-hint {
|
||||
margin: 0;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #313244;
|
||||
font-size: 0.78rem;
|
||||
color: #a6adc8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cat-hide-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #f38ba8;
|
||||
cursor: pointer;
|
||||
font-size: 0.78rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cat-hide-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.oneko-show-btn {
|
||||
position: fixed; left: 14px; bottom: 14px; z-index: 2147483646;
|
||||
background: #1e1e2e; color: #bac2de; border: 1px solid #313244; border-radius: 999px;
|
||||
padding: 7px 14px; font-size: 0.8rem; cursor: pointer; opacity: 0.85;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.35); font-family: system-ui, sans-serif;
|
||||
position: fixed;
|
||||
left: 14px;
|
||||
bottom: 14px;
|
||||
z-index: 2147483646;
|
||||
background: #1e1e2e;
|
||||
color: #bac2de;
|
||||
border: 1px solid #313244;
|
||||
border-radius: 999px;
|
||||
padding: 7px 14px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.oneko-show-btn:hover {
|
||||
opacity: 1;
|
||||
border-color: #cba6f7;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: #313244;
|
||||
border: 1px solid #585b70;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 6px;
|
||||
padding: .05em .45em;
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.cat-toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 4.5rem;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
z-index: 2147483647;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
background: var(--crust);
|
||||
border: 1px solid var(--pink);
|
||||
color: var(--text);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.cat-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.cat-picker {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2147483646;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: rgba(17, 17, 27, 0.65);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.cat-picker[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cat-picker-panel {
|
||||
width: min(94vw, 430px);
|
||||
max-height: 82vh;
|
||||
overflow-y: auto;
|
||||
background: var(--base);
|
||||
border: 1px solid var(--surface-1);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.cat-picker-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--pink);
|
||||
}
|
||||
|
||||
.cat-picker-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--subtext-0);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.cat-picker-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cat-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cat-section-title {
|
||||
margin: 0 0 0.55rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mauve);
|
||||
border-bottom: 1px solid var(--surface-1);
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.cat-section-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.cat-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.75rem 0.4rem 0.6rem;
|
||||
border-radius: 12px;
|
||||
background: var(--surface-0);
|
||||
border: 1px solid var(--surface-1);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.74rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.cat-option:hover:not(.locked) {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--pink);
|
||||
}
|
||||
|
||||
.cat-option.current {
|
||||
border-color: var(--pink);
|
||||
box-shadow: inset 0 0 0 1px var(--pink);
|
||||
}
|
||||
|
||||
.cat-option.locked {
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.cat-preview {
|
||||
/* 30px window + the -97px,-97px position = the idle frame inset 1px on
|
||||
every side, so no preview can catch pixels from neighbouring frames */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 7px 1px 11px;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: pixelated;
|
||||
transform: scale(1.7);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cat-hint {
|
||||
margin: 0.85rem 0 0;
|
||||
font-size: 0.68rem;
|
||||
color: var(--subtext-0);
|
||||
text-align: center;
|
||||
}
|
||||
.oneko-show-btn:hover { opacity: 1; border-color: #cba6f7; color: #cdd6f4; }
|
||||
kbd { background:#313244; border:1px solid #585b70; border-bottom-width:2px;
|
||||
border-radius:6px; padding:.05em .45em; font-size:.85em; }
|
||||
|
|
|
|||
17
index.html
17
index.html
|
|
@ -1,11 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
|
||||
<!-- Page Title -->
|
||||
<title>Ari</title>
|
||||
<link rel="icon" type="image/png" href="/assets/media/favicon.png" />
|
||||
<script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="Personal Site for Ari on git.gay" />
|
||||
|
|
@ -23,6 +26,7 @@
|
|||
<meta name="theme-color" content="#cba6f7" />
|
||||
|
||||
<!-- Open Graph / Discord / Facebook -->
|
||||
<meta property="og:image" content="/assets/media/favicon.png" />
|
||||
<meta property="og:site_name" content="Ari">
|
||||
<meta property="og:title" content="Ari" />
|
||||
<meta property="og:description" content="Personal Site for Ari on git.gay" />
|
||||
|
|
@ -31,25 +35,32 @@
|
|||
<meta property="og:locale" content="en_GB" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:image" content="/assets/media/favicon.png">
|
||||
<meta name="twitter:card" content="summary_image" />
|
||||
<meta name="twitter:title" content="Ari Stuff" />
|
||||
<meta name="twitter:description" content="Personal Site for Ari on git.gay" />
|
||||
<link href="css/index.css" rel="stylesheet" />
|
||||
<link href="css/picker.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="intro">
|
||||
<header class="hub-header">
|
||||
<img class="pfp" src="assets/media/avatar.png" alt="Ari avatar">
|
||||
<div class="HiIm">Hi, I'm</div> <h1>Ari</h1>
|
||||
<div>
|
||||
<h1 class="hey">Hi, I'm<span class="name">Ari</span></h1>
|
||||
</div>
|
||||
<h2 class="pronouns">(She/They)</h2>
|
||||
<div class="intro-text">
|
||||
A 17 Year Old developer from <b>England, United Kingdom</b> who rarely actually does development work, and just tries to help out whenever she can.
|
||||
A 17 Year Old developer from <b>England, United Kingdom</b> who rarely actually does development work,
|
||||
and just tries to help out whenever she can.
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="js/index.js"></script>
|
||||
<script src="js/flavors.js"></script>
|
||||
<script src="js/cat.js"></script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue