vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-13 21:13:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip: 2024-11-27T07:41:46+0100 (1732689706)

Browse source
This commit is contained in:
Victor Westerlund 2024-11-27 16:23:10 +01:00
parent 7ee2ba631d
commit b0ab6a4f5b
2 changed files with 28 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
public/assets/css/pages/playground/index.css
View file

@ -30,12 +30,11 @@ img {
/* ## Title */
section.title {
gap: var(--padding);
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: repeat(10, 1fr);
margin: 50px 0;
min-height: 50vw;
grid-template-columns: repeat(5, 1fr);
padding-bottom: var(--padding);
}
@ -43,8 +42,8 @@ section.title img {
--outline-width: 5px;
--outline-color: black;
width: 100%;
transform: translateY(-10px);
width: 10vw;
transform: translateY(-1vw);
animation: bouncy 1s infinite alternate ease-in-out;
filter:
drop-shadow(0 10px 0 blue)
@ -87,21 +86,16 @@ section.coffee img {
/* # Size queries */
@media (max-width: 700px) {
@media (min-width: 700px) {
section.title {
gap: 0;
margin: 0;
min-height: 50vw;
grid-template-columns: repeat(5, 1fr);
gap: var(--padding);
margin: 50px 0;
min-height: unset;
grid-template-columns: repeat(10, 1fr);
}
section.title img {
width: 10vw;
transform: translateY(-1vw);
}
@keyframes bouncy {
25% { transform: translateY(0); }
100% { transform: translateY(0); }
width: 100%;
transform: translateY(-10px);
}
}

21
public/assets/css/pages/playground/super-secret-settings.css
View file

@ -1,9 +1,11 @@
/* # Sections */
super-secret-settings {
--border-width: 5px;
position: fixed;
top: 5px;
left: 5px;
top: var(--border-width);
left: var(--border-width);
width: 400px;
fill: white;
color: white;
@ -11,8 +13,8 @@ super-secret-settings {
border: solid 1px white;
background-color: rgb(0, 102, 204);
box-shadow:
0 0 0 5px black,
0 0 40px 10px rgba(0, 0, 0, .4);
0 0 0 var(--border-width) black,
0 0 40px calc(var(--border-width) * 2) rgba(0, 0, 0, .4);
}
/* ## Header */
@ -60,4 +62,15 @@ super-secret-settings section.body {
super-secret-settings.collapsed section.body {
display: none;
}
/* # Size queries */
@media not (hover: hover), (max-width: 900px) {
super-secret-settings {
top: unset;
bottom: 5px;
width: calc(100% - (var(--border-width) * 2));
transform: translate(0, 0) !important;
}
}