format css and js files with prettier
This commit is contained in:
parent
7d4c77d187
commit
961679d419
@ -9,55 +9,56 @@ const header = document.querySelector("header");
|
||||
const footer = document.querySelector("footer");
|
||||
|
||||
enlargeImg.forEach((img) => {
|
||||
img.style.cursor = "pointer";
|
||||
img.style.cursor = "pointer";
|
||||
|
||||
img.addEventListener("click", () => {
|
||||
// make background for image
|
||||
let div = document.createElement("div");
|
||||
div.style.display = "flex";
|
||||
div.style.flexDirection = "column";
|
||||
div.style.alignItems = "center";
|
||||
div.style.justifyContent = "center";
|
||||
div.style.height = "100vh";
|
||||
div.style.width = "auto";
|
||||
div.style.backgroundColor = "#000000";
|
||||
img.addEventListener("click", () => {
|
||||
// make background for image
|
||||
let div = document.createElement("div");
|
||||
div.style.display = "flex";
|
||||
div.style.flexDirection = "column";
|
||||
div.style.alignItems = "center";
|
||||
div.style.justifyContent = "center";
|
||||
div.style.height = "100vh";
|
||||
div.style.width = "auto";
|
||||
div.style.backgroundColor = "#000000";
|
||||
|
||||
// image element
|
||||
let image = document.createElement("img");
|
||||
image.src = img.src;
|
||||
image.style.height = "80%";
|
||||
image.style.width = "auto";
|
||||
div.append(image);
|
||||
// image element
|
||||
let image = document.createElement("img");
|
||||
image.src = img.src;
|
||||
image.style.height = "80%";
|
||||
image.style.width = "auto";
|
||||
div.append(image);
|
||||
|
||||
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.style.color = "#FFFFFF";
|
||||
div.append(paragraph);
|
||||
// hide current page contents
|
||||
main.style.display = "none";
|
||||
nav.style.display = "none";
|
||||
footer.style.display = "none";
|
||||
header.style.display = "none";
|
||||
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.style.color = "#FFFFFF";
|
||||
div.append(paragraph);
|
||||
// hide current page contents
|
||||
main.style.display = "none";
|
||||
nav.style.display = "none";
|
||||
footer.style.display = "none";
|
||||
header.style.display = "none";
|
||||
|
||||
// remove display: grid from body and append div with enlarged image
|
||||
body.style.display = "block";
|
||||
body.append(div);
|
||||
// remove display: grid from body and append div with enlarged image
|
||||
body.style.display = "block";
|
||||
body.append(div);
|
||||
|
||||
const removeDiv = () => {
|
||||
div.remove();
|
||||
body.style.display = "grid";
|
||||
main.style.display = "block";
|
||||
nav.style.display = "block";
|
||||
header.style.display = "flex";
|
||||
footer.style.display = "flex";
|
||||
};
|
||||
const removeDiv = () => {
|
||||
div.remove();
|
||||
body.style.display = "grid";
|
||||
main.style.display = "block";
|
||||
nav.style.display = "block";
|
||||
header.style.display = "flex";
|
||||
footer.style.display = "flex";
|
||||
};
|
||||
|
||||
div.addEventListener("click", removeDiv);
|
||||
div.addEventListener("click", removeDiv);
|
||||
|
||||
body.addEventListener("keydown", (e) => {
|
||||
if (e.key === "x") {
|
||||
removeDiv();
|
||||
}
|
||||
});
|
||||
});
|
||||
body.addEventListener("keydown", (e) => {
|
||||
if (e.key === "x") {
|
||||
removeDiv();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,89 +1,95 @@
|
||||
:root {
|
||||
--pagebg:#232c2f;
|
||||
--pagecolor: #DB7093;
|
||||
--button-border-color: #DB7093;
|
||||
--button-color: #FFB6C1;
|
||||
--border: #DB7093;
|
||||
--pagebg: #232c2f;
|
||||
--pagecolor: #db7093;
|
||||
--button-border-color: #db7093;
|
||||
--button-color: #ffb6c1;
|
||||
--border: #db7093;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--border: #474973;
|
||||
--pagecolor: #474973;
|
||||
--button-border-color: #474973;
|
||||
--button-color: #474973;
|
||||
--pagebg: #f1dac4;
|
||||
}
|
||||
:root {
|
||||
--border: #474973;
|
||||
--pagecolor: #474973;
|
||||
--button-border-color: #474973;
|
||||
--button-color: #474973;
|
||||
--pagebg: #f1dac4;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
color: #f1dac4;
|
||||
}
|
||||
input[type="submit"] {
|
||||
color: #f1dac4;
|
||||
}
|
||||
}
|
||||
|
||||
ul.pages {
|
||||
list-style:none;
|
||||
margin:auto;
|
||||
margin-top: 1rem;
|
||||
text-align:center;
|
||||
list-style: none;
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.pages li { display:inline; }
|
||||
ul.pages li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
ul.pages li a, ul.pages li.active {
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid var(--border);
|
||||
padding:5px;
|
||||
margin:2px;
|
||||
transition:0.5s ease;
|
||||
text-decoration:none;
|
||||
ul.pages li a,
|
||||
ul.pages li.active {
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid var(--border);
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
transition: 0.5s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.pages li.page a:hover {
|
||||
background:var(--pagecolor);
|
||||
color:var(--pagebg);
|
||||
transition:0.5s ease;
|
||||
background: var(--pagecolor);
|
||||
color: var(--pagebg);
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
ul.pages li.page a {
|
||||
background: var(--pagebg);
|
||||
color: var(--pagecolor);
|
||||
background: var(--pagebg);
|
||||
color: var(--pagecolor);
|
||||
}
|
||||
|
||||
ul.pages li.active {
|
||||
background:var(--pagecolor);
|
||||
color:var(--pagebg);
|
||||
background: var(--pagecolor);
|
||||
color: var(--pagebg);
|
||||
}
|
||||
|
||||
.q {
|
||||
border-bottom: 2px solid var(--border);
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.a {
|
||||
padding-left: 2rem;
|
||||
border-left: 8px double var(--border);
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 2rem;
|
||||
border-left: 8px double var(--border);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.guestbook-text {
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--border);
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
|
||||
h1, h3, p {
|
||||
margin: 0.5rem;
|
||||
h1,
|
||||
h3,
|
||||
p {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
input[type="text"], textarea {
|
||||
width: 30vw;
|
||||
margin-bottom: 0.5rem;
|
||||
input[type="text"],
|
||||
textarea {
|
||||
width: 30vw;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--button-color);
|
||||
border-color: var(--button-border-color);
|
||||
padding: 0.5rem;
|
||||
background-color: var(--button-color);
|
||||
border-color: var(--button-border-color);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
475
style/style.css
475
style/style.css
@ -1,343 +1,376 @@
|
||||
@font-face {
|
||||
font-family: lato-regular;
|
||||
src: url("../site-resources/fonts/lato-regular.woff2");
|
||||
font-family: lato-regular;
|
||||
src: url("../site-resources/fonts/lato-regular.woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: pacifico;
|
||||
src: url("../site-resources/fonts/pacifico.woff2");
|
||||
font-family: pacifico;
|
||||
src: url("../site-resources/fonts/pacifico.woff2");
|
||||
}
|
||||
|
||||
:root {
|
||||
--text-color: #0C0C0C;
|
||||
--background-color: #ffd4de;
|
||||
--body-background-color: #ffcccc;
|
||||
--scroll-gutter: #eb76ff88;
|
||||
--scroll-bar: #ffa8ec88;
|
||||
--link-hover: #FF1493;
|
||||
--link-visited: #8A2BE2;
|
||||
--link-color: #4B0082;
|
||||
--border-color: #DB7093;
|
||||
--bi-pride-pink-light: #D60270;
|
||||
--bi-pride-purple-light: #9B4F96;
|
||||
--bi-pride-blue-light: #0038A8;
|
||||
--disability-pride-black-light: #595959;
|
||||
--disability-pride-red-light: #CF7280;
|
||||
--disability-pride-yellow-light: #EEDE77;
|
||||
--disability-pride-white-light: #E8E8E8;
|
||||
--disability-pride-blue-light: #7BC2E0;
|
||||
--disability-pride-green-light: #3BB07D;
|
||||
--trans-pride-blue-light: #5BCEFA;
|
||||
--trans-pride-pink-light: #F5A9B8;
|
||||
--trans-pride-white-light: #FFFFFF;
|
||||
--text-color: #0c0c0c;
|
||||
--background-color: #ffd4de;
|
||||
--body-background-color: #ffcccc;
|
||||
--scroll-gutter: #eb76ff88;
|
||||
--scroll-bar: #ffa8ec88;
|
||||
--link-hover: #ff1493;
|
||||
--link-visited: #8a2be2;
|
||||
--link-color: #4b0082;
|
||||
--border-color: #db7093;
|
||||
--bi-pride-pink-light: #d60270;
|
||||
--bi-pride-purple-light: #9b4f96;
|
||||
--bi-pride-blue-light: #0038a8;
|
||||
--disability-pride-black-light: #595959;
|
||||
--disability-pride-red-light: #cf7280;
|
||||
--disability-pride-yellow-light: #eede77;
|
||||
--disability-pride-white-light: #e8e8e8;
|
||||
--disability-pride-blue-light: #7bc2e0;
|
||||
--disability-pride-green-light: #3bb07d;
|
||||
--trans-pride-blue-light: #5bcefa;
|
||||
--trans-pride-pink-light: #f5a9b8;
|
||||
--trans-pride-white-light: #ffffff;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
background-color: var(--body-background-color);
|
||||
background-image: url("../img/site/assets/sakura.webp");
|
||||
display: grid;
|
||||
grid-template-columns: 20vw 60vw;
|
||||
grid-template-rows: 6vh 85vh 6vh;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
color: var(--text-color);
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
background-color: var(--body-background-color);
|
||||
background-image: url("../img/site/assets/sakura.webp");
|
||||
display: grid;
|
||||
grid-template-columns: 20vw 60vw;
|
||||
grid-template-rows: 6vh 85vh 6vh;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
|
||||
margin: 0.5rem;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
figcaption,
|
||||
details {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
main, nav {
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: system-ui;
|
||||
letter-spacing: 0.05rem;
|
||||
main,
|
||||
nav {
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: system-ui;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: var(--background-color);
|
||||
height: 85vh;
|
||||
width: 60vw;
|
||||
padding-left: 2.5rem;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
|
||||
grid-column: 2/3;
|
||||
grid-row: 2/3;
|
||||
align-self: end;
|
||||
padding-top: 0.5rem;
|
||||
background-color: var(--background-color);
|
||||
height: 85vh;
|
||||
width: 60vw;
|
||||
padding-left: 2.5rem;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
|
||||
grid-column: 2/3;
|
||||
grid-row: 2/3;
|
||||
align-self: end;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--background-color);
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/3;
|
||||
height: 6vh;
|
||||
width: 80vw;
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom: 10px solid;
|
||||
border-image-slice: 1;
|
||||
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%);
|
||||
font-size: 1.4rem;
|
||||
margin-top: 0.43rem;
|
||||
background-color: var(--background-color);
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/3;
|
||||
height: 6vh;
|
||||
width: 80vw;
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom: 10px solid;
|
||||
border-image-slice: 1;
|
||||
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%
|
||||
);
|
||||
font-size: 1.4rem;
|
||||
margin-top: 0.43rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--background-color);
|
||||
grid-row: 3/4;
|
||||
grid-column: 1/3;
|
||||
height: 6vh;
|
||||
width: 80vw;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top: 10px solid;
|
||||
border-image-slice: 1;
|
||||
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%);
|
||||
font-family: system-ui;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0.05rem;
|
||||
background-color: var(--background-color);
|
||||
grid-row: 3/4;
|
||||
grid-column: 1/3;
|
||||
height: 6vh;
|
||||
width: 80vw;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top: 10px solid;
|
||||
border-image-slice: 1;
|
||||
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%
|
||||
);
|
||||
font-family: system-ui;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
header,
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: var(--background-color);
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/2;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
width: 20vw;
|
||||
height: 85vh;
|
||||
padding-top: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
border-right: 10px solid;
|
||||
border-image-slice: 1;
|
||||
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%);
|
||||
background-color: var(--background-color);
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/2;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
width: 20vw;
|
||||
height: 85vh;
|
||||
padding-top: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
border-right: 10px solid;
|
||||
border-image-slice: 1;
|
||||
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%
|
||||
);
|
||||
}
|
||||
|
||||
section {
|
||||
width: 55vw;
|
||||
width: 55vw;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #240046;
|
||||
--body-background-color: #0d0c1d;
|
||||
--text-color: #f1dac4;
|
||||
--scroll-bar: #474973;
|
||||
--scroll-gutter: #a69cac;
|
||||
--link-color: #4cc9f0;
|
||||
--link-hover: #f72585;
|
||||
--link-visited: #4cc9f0;
|
||||
--border-color: #474973;
|
||||
}
|
||||
:root {
|
||||
--background-color: #240046;
|
||||
--body-background-color: #0d0c1d;
|
||||
--text-color: #f1dac4;
|
||||
--scroll-bar: #474973;
|
||||
--scroll-gutter: #a69cac;
|
||||
--link-color: #4cc9f0;
|
||||
--link-hover: #f72585;
|
||||
--link-visited: #4cc9f0;
|
||||
--border-color: #474973;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--body-background-color);
|
||||
background-image: url("../img/site/assets/stardust.png");
|
||||
}
|
||||
body {
|
||||
background-color: var(--body-background-color);
|
||||
background-image: url("../img/site/assets/stardust.png");
|
||||
}
|
||||
|
||||
.status .statuslol_content p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.status .statuslol_content p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--link-color) !important;
|
||||
}
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--link-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
width: 100vw;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
width: 100vw;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mobile-header span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.mobile-header span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.mobile-header span img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.mobile-header span img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: none;
|
||||
}
|
||||
body {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
height: 90vh;
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 95vw;
|
||||
}
|
||||
section {
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.status {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-visited);
|
||||
color: var(--link-visited);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
padding-bottom: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main section {
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main section p {
|
||||
line-height: 1.25;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
main section ul li {
|
||||
padding-bottom: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: pacifico;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: .1rem;
|
||||
font-family: pacifico;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
.motto {
|
||||
font-family: lato-regular;
|
||||
letter-spacing: .05rem;
|
||||
font-family: lato-regular;
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--background-color) !important;
|
||||
background: var(--background-color) !important;
|
||||
}
|
||||
|
||||
.picrew-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 1.75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 1.75rem;
|
||||
}
|
||||
|
||||
.picrew-gallery img {
|
||||
border: 4px solid var(--border-color);
|
||||
border-radius: 5%;
|
||||
border: 4px solid var(--border-color);
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.picrew-gallery, .picrew-gallery-header {
|
||||
text-align: center;
|
||||
.picrew-gallery,
|
||||
.picrew-gallery-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photo-gallery-header {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photography-gallery {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gallery-text {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery-text-left {
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nested-list {
|
||||
list-style-type: disc;
|
||||
margin-left: 2rem;
|
||||
list-style-type: disc;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user