zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

format css and js files with prettier

Browse Source
This commit is contained in:
emma 2025-02-10 06:52:25 -05:00
parent 7d4c77d187
commit 961679d419
3 changed files with 355 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
script/image-enlarger.js
View File

@ -30,7 +30,8 @@ enlargeImg.forEach((img) => {
div.append(image); div.append(image);
let paragraph = document.createElement("p"); let paragraph = document.createElement("p");
paragraph.textContent = "Click anywhere on the image or the black background to close. You can also press the x key on your keyboard."; paragraph.textContent =
"Click anywhere on the image or the black background to close. You can also press the x key on your keyboard.";
paragraph.style.color = "#FFFFFF"; paragraph.style.color = "#FFFFFF";
div.append(paragraph); div.append(paragraph);
// hide current page contents // hide current page contents

50
style/guestbook.css
View File

@ -1,9 +1,9 @@
:root { :root {
--pagebg:#232c2f; --pagebg: #232c2f;
--pagecolor: #DB7093; --pagecolor: #db7093;
--button-border-color: #DB7093; --button-border-color: #db7093;
--button-color: #FFB6C1; --button-color: #ffb6c1;
--border: #DB7093; --border: #db7093;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -15,33 +15,36 @@
--pagebg: #f1dac4; --pagebg: #f1dac4;
} }
input[type=submit] { input[type="submit"] {
color: #f1dac4; color: #f1dac4;
} }
} }
ul.pages { ul.pages {
list-style:none; list-style: none;
margin:auto; margin: auto;
margin-top: 1rem; margin-top: 1rem;
text-align:center; text-align: center;
} }
ul.pages li { display:inline; } ul.pages li {
display: inline;
}
ul.pages li a, ul.pages li.active { ul.pages li a,
ul.pages li.active {
font-size: 1.2rem; font-size: 1.2rem;
border: 1px solid var(--border); border: 1px solid var(--border);
padding:5px; padding: 5px;
margin:2px; margin: 2px;
transition:0.5s ease; transition: 0.5s ease;
text-decoration:none; text-decoration: none;
} }
ul.pages li.page a:hover { ul.pages li.page a:hover {
background:var(--pagecolor); background: var(--pagecolor);
color:var(--pagebg); color: var(--pagebg);
transition:0.5s ease; transition: 0.5s ease;
} }
ul.pages li.page a { ul.pages li.page a {
@ -50,8 +53,8 @@ ul.pages li.page a {
} }
ul.pages li.active { ul.pages li.active {
background:var(--pagecolor); background: var(--pagecolor);
color:var(--pagebg); color: var(--pagebg);
} }
.q { .q {
@ -69,7 +72,9 @@ ul.pages li.active {
border-bottom: 2px solid var(--border); border-bottom: 2px solid var(--border);
} }
h1, h3, p { h1,
h3,
p {
margin: 0.5rem; margin: 0.5rem;
} }
@ -77,7 +82,8 @@ main {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
input[type="text"], textarea { input[type="text"],
textarea {
width: 30vw; width: 30vw;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

91
style/style.css
View File

@ -9,30 +9,32 @@
} }
:root { :root {
--text-color: #0C0C0C; --text-color: #0c0c0c;
--background-color: #ffd4de; --background-color: #ffd4de;
--body-background-color: #ffcccc; --body-background-color: #ffcccc;
--scroll-gutter: #eb76ff88; --scroll-gutter: #eb76ff88;
--scroll-bar: #ffa8ec88; --scroll-bar: #ffa8ec88;
--link-hover: #FF1493; --link-hover: #ff1493;
--link-visited: #8A2BE2; --link-visited: #8a2be2;
--link-color: #4B0082; --link-color: #4b0082;
--border-color: #DB7093; --border-color: #db7093;
--bi-pride-pink-light: #D60270; --bi-pride-pink-light: #d60270;
--bi-pride-purple-light: #9B4F96; --bi-pride-purple-light: #9b4f96;
--bi-pride-blue-light: #0038A8; --bi-pride-blue-light: #0038a8;
--disability-pride-black-light: #595959; --disability-pride-black-light: #595959;
--disability-pride-red-light: #CF7280; --disability-pride-red-light: #cf7280;
--disability-pride-yellow-light: #EEDE77; --disability-pride-yellow-light: #eede77;
--disability-pride-white-light: #E8E8E8; --disability-pride-white-light: #e8e8e8;
--disability-pride-blue-light: #7BC2E0; --disability-pride-blue-light: #7bc2e0;
--disability-pride-green-light: #3BB07D; --disability-pride-green-light: #3bb07d;
--trans-pride-blue-light: #5BCEFA; --trans-pride-blue-light: #5bcefa;
--trans-pride-pink-light: #F5A9B8; --trans-pride-pink-light: #f5a9b8;
--trans-pride-white-light: #FFFFFF; --trans-pride-white-light: #ffffff;
} }
*, *::before, *::after { *,
*::before,
*::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
@ -57,11 +59,21 @@ body {
color: var(--text-color); color: var(--text-color);
} }
h1, h2, h3, h4, h5, h6, p, ul, figcaption, details { h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figcaption,
details {
margin: 0.5rem; margin: 0.5rem;
} }
main, nav { main,
nav {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
font-family: system-ui; font-family: system-ui;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
@ -92,7 +104,12 @@ header {
border-bottom: 10px solid; border-bottom: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to right, var(--bi-pride-pink-light) 0 33%, var(--bi-pride-purple-light) 33% 66%, var(--bi-pride-blue-light) 66%); border-image-source: linear-gradient(
to right,
var(--bi-pride-pink-light) 0 33%,
var(--bi-pride-purple-light) 33% 66%,
var(--bi-pride-blue-light) 66%
);
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 0.43rem; margin-top: 0.43rem;
} }
@ -108,13 +125,23 @@ footer {
border-top: 10px solid; border-top: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to right, var(--disability-pride-black-light) 0 35%, var(--disability-pride-red-light) 35% 41%, var(--disability-pride-yellow-light) 41% 47%, var(--disability-pride-white-light) 47% 53%, var(--disability-pride-blue-light) 53% 59%, var(--disability-pride-green-light) 59% 65%, var(--disability-pride-black-light) 65% 71%); border-image-source: linear-gradient(
to right,
var(--disability-pride-black-light) 0 35%,
var(--disability-pride-red-light) 35% 41%,
var(--disability-pride-yellow-light) 41% 47%,
var(--disability-pride-white-light) 47% 53%,
var(--disability-pride-blue-light) 53% 59%,
var(--disability-pride-green-light) 59% 65%,
var(--disability-pride-black-light) 65% 71%
);
font-family: system-ui; font-family: system-ui;
font-size: 1.3rem; font-size: 1.3rem;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
header, footer { header,
footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -135,7 +162,14 @@ nav {
border-right: 10px solid; border-right: 10px solid;
border-image-slice: 1; border-image-slice: 1;
border-width: 5px; border-width: 5px;
border-image-source: linear-gradient(to bottom, var(--trans-pride-blue-light) 0 20%, var(--trans-pride-pink-light) 20% 40%, var(--trans-pride-white-light) 40% 60%, var(--trans-pride-pink-light) 60% 80%, var(--trans-pride-blue-light) 80%); border-image-source: linear-gradient(
to bottom,
var(--trans-pride-blue-light) 0 20%,
var(--trans-pride-pink-light) 20% 40%,
var(--trans-pride-white-light) 40% 60%,
var(--trans-pride-pink-light) 60% 80%,
var(--trans-pride-blue-light) 80%
);
} }
section { section {
@ -179,7 +213,7 @@ section {
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.mobile-header { .mobile-header {
display: flex; display: flex;
height: 10vh; height: 10vh;
@ -279,16 +313,14 @@ main section ul li {
.logo { .logo {
font-family: pacifico; font-family: pacifico;
font-size: 1.35rem; font-size: 1.35rem;
letter-spacing: .1rem; letter-spacing: 0.1rem;
} }
.motto { .motto {
font-family: lato-regular; font-family: lato-regular;
letter-spacing: .05rem; letter-spacing: 0.05rem;
} }
.status .statuslol_container .statuslol { .status .statuslol_container .statuslol {
background: var(--background-color) !important; background: var(--background-color) !important;
} }
@ -306,7 +338,8 @@ main section ul li {
border-radius: 5%; border-radius: 5%;
} }
.picrew-gallery, .picrew-gallery-header { .picrew-gallery,
.picrew-gallery-header {
text-align: center; text-align: center;
} }