ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

broken but cool htmx! also improved templating

Browse source 
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-22 07:30:22 +00:00
parent 5c59348362
commit c1ff03c4e5
18 changed files with 297 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

27
public/style/main.css
View file

@ -1,6 +1,7 @@
@import url("/style/colours.css");
@import url("/style/header.css");
@import url("/style/footer.css");
@import url("/style/prideflag.css");
@font-face {
font-family: "Monaspace Argon";
@ -42,6 +43,32 @@ span.newchar {
animation: newchar 0.25s;
}
a#backtotop {
position: fixed;
left: 50%;
transform: translateX(-50%);
padding: .5em .8em;
display: block;
border-radius: 2px;
border: 1px solid transparent;
text-decoration: none;
opacity: .5;
transition-property: opacity, transform, border-color, background-color, color;
transition-duration: .2s;
}
a#backtotop.active {
top: 4rem;
}
a#backtotop:hover {
color: #eee;
border-color: #eee;
background-color: var(--links);
box-shadow: 0 0 1em var(--links);
opacity: 1;
}
@keyframes newchar {
from {
background: #fff8;

3
public/style/music-gateway.css
View file

@ -241,7 +241,7 @@ div#info p {
#title {
margin: 0;
line-height: 1em;
font-size: 3em;
font-size: 2.5em;
}
#year {
@ -571,6 +571,7 @@ footer a:hover {
}
div#info > div {
min-width: auto;
min-height: auto;
padding: 0;
margin: 0;

9
public/style/music.css
View file

@ -1,5 +1,12 @@
@import url("/style/index.css");
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
margin: 0 auto 2rem auto;
padding-top: 4rem;
}
div.music {
margin-bottom: 1rem;
padding: 1.5rem;
@ -114,7 +121,7 @@ h2.question {
cursor: pointer;
}
.collapse {
div.answer {
margin: -1rem 0 1rem 0;
padding: .5em 1.5em;
border-radius: 4px;

25
public/style/prideflag.css Normal file
View file

@ -0,0 +1,25 @@
#prideflag svg {
position: fixed;
top: 0;
right: 0;
width: 120px;
transform-origin: 100% 0%;
transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
z-index: 8008135;
pointer-events: none;
}
#prideflag svg:hover {
transform: scale(110%);
}
#prideflag svg:active {
transform: scale(110%);
}
#prideflag svg * {
pointer-events: all;
}
@media screen and (max-width: 950px) {
#prideflag {
display: none;
}
}