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");
|
const footer = document.querySelector("footer");
|
||||||
|
|
||||||
enlargeImg.forEach((img) => {
|
enlargeImg.forEach((img) => {
|
||||||
img.style.cursor = "pointer";
|
img.style.cursor = "pointer";
|
||||||
|
|
||||||
img.addEventListener("click", () => {
|
img.addEventListener("click", () => {
|
||||||
// make background for image
|
// make background for image
|
||||||
let div = document.createElement("div");
|
let div = document.createElement("div");
|
||||||
div.style.display = "flex";
|
div.style.display = "flex";
|
||||||
div.style.flexDirection = "column";
|
div.style.flexDirection = "column";
|
||||||
div.style.alignItems = "center";
|
div.style.alignItems = "center";
|
||||||
div.style.justifyContent = "center";
|
div.style.justifyContent = "center";
|
||||||
div.style.height = "100vh";
|
div.style.height = "100vh";
|
||||||
div.style.width = "auto";
|
div.style.width = "auto";
|
||||||
div.style.backgroundColor = "#000000";
|
div.style.backgroundColor = "#000000";
|
||||||
|
|
||||||
// image element
|
// image element
|
||||||
let image = document.createElement("img");
|
let image = document.createElement("img");
|
||||||
image.src = img.src;
|
image.src = img.src;
|
||||||
image.style.height = "80%";
|
image.style.height = "80%";
|
||||||
image.style.width = "auto";
|
image.style.width = "auto";
|
||||||
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 =
|
||||||
paragraph.style.color = "#FFFFFF";
|
"Click anywhere on the image or the black background to close. You can also press the x key on your keyboard.";
|
||||||
div.append(paragraph);
|
paragraph.style.color = "#FFFFFF";
|
||||||
// hide current page contents
|
div.append(paragraph);
|
||||||
main.style.display = "none";
|
// hide current page contents
|
||||||
nav.style.display = "none";
|
main.style.display = "none";
|
||||||
footer.style.display = "none";
|
nav.style.display = "none";
|
||||||
header.style.display = "none";
|
footer.style.display = "none";
|
||||||
|
header.style.display = "none";
|
||||||
|
|
||||||
// remove display: grid from body and append div with enlarged image
|
// remove display: grid from body and append div with enlarged image
|
||||||
body.style.display = "block";
|
body.style.display = "block";
|
||||||
body.append(div);
|
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";
|
|
||||||
};
|
|
||||||
|
|
||||||
div.addEventListener("click", removeDiv);
|
const removeDiv = () => {
|
||||||
|
div.remove();
|
||||||
|
body.style.display = "grid";
|
||||||
|
main.style.display = "block";
|
||||||
|
nav.style.display = "block";
|
||||||
|
header.style.display = "flex";
|
||||||
|
footer.style.display = "flex";
|
||||||
|
};
|
||||||
|
|
||||||
body.addEventListener("keydown", (e) => {
|
div.addEventListener("click", removeDiv);
|
||||||
if (e.key === "x") {
|
|
||||||
removeDiv();
|
body.addEventListener("keydown", (e) => {
|
||||||
}
|
if (e.key === "x") {
|
||||||
});
|
removeDiv();
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,89 +1,95 @@
|
|||||||
: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) {
|
||||||
:root {
|
:root {
|
||||||
--border: #474973;
|
--border: #474973;
|
||||||
--pagecolor: #474973;
|
--pagecolor: #474973;
|
||||||
--button-border-color: #474973;
|
--button-border-color: #474973;
|
||||||
--button-color: #474973;
|
--button-color: #474973;
|
||||||
--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,
|
||||||
font-size: 1.2rem;
|
ul.pages li.active {
|
||||||
border: 1px solid var(--border);
|
font-size: 1.2rem;
|
||||||
padding:5px;
|
border: 1px solid var(--border);
|
||||||
margin:2px;
|
padding: 5px;
|
||||||
transition:0.5s ease;
|
margin: 2px;
|
||||||
text-decoration:none;
|
transition: 0.5s ease;
|
||||||
|
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 {
|
||||||
background: var(--pagebg);
|
background: var(--pagebg);
|
||||||
color: var(--pagecolor);
|
color: var(--pagecolor);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.pages li.active {
|
ul.pages li.active {
|
||||||
background:var(--pagecolor);
|
background: var(--pagecolor);
|
||||||
color:var(--pagebg);
|
color: var(--pagebg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.q {
|
.q {
|
||||||
border-bottom: 2px solid var(--border);
|
border-bottom: 2px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.a {
|
.a {
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
border-left: 8px double var(--border);
|
border-left: 8px double var(--border);
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guestbook-text {
|
.guestbook-text {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
border-bottom: 2px solid var(--border);
|
border-bottom: 2px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h3, p {
|
h1,
|
||||||
margin: 0.5rem;
|
h3,
|
||||||
|
p {
|
||||||
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], textarea {
|
input[type="text"],
|
||||||
width: 30vw;
|
textarea {
|
||||||
margin-bottom: 0.5rem;
|
width: 30vw;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
background-color: var(--button-color);
|
background-color: var(--button-color);
|
||||||
border-color: var(--button-border-color);
|
border-color: var(--button-border-color);
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|||||||
475
style/style.css
475
style/style.css
@ -1,343 +1,376 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: lato-regular;
|
font-family: lato-regular;
|
||||||
src: url("../site-resources/fonts/lato-regular.woff2");
|
src: url("../site-resources/fonts/lato-regular.woff2");
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: pacifico;
|
font-family: pacifico;
|
||||||
src: url("../site-resources/fonts/pacifico.woff2");
|
src: url("../site-resources/fonts/pacifico.woff2");
|
||||||
}
|
}
|
||||||
|
|
||||||
: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 {
|
*,
|
||||||
margin: 0;
|
*::before,
|
||||||
padding: 0;
|
*::after {
|
||||||
box-sizing: border-box;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: auto;
|
width: auto;
|
||||||
background-color: var(--body-background-color);
|
background-color: var(--body-background-color);
|
||||||
background-image: url("../img/site/assets/sakura.webp");
|
background-image: url("../img/site/assets/sakura.webp");
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 20vw 60vw;
|
grid-template-columns: 20vw 60vw;
|
||||||
grid-template-rows: 6vh 85vh 6vh;
|
grid-template-rows: 6vh 85vh 6vh;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
|
h1,
|
||||||
margin: 0.5rem;
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
figcaption,
|
||||||
|
details {
|
||||||
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main, nav {
|
main,
|
||||||
padding-bottom: 0.5rem;
|
nav {
|
||||||
font-family: system-ui;
|
padding-bottom: 0.5rem;
|
||||||
letter-spacing: 0.05rem;
|
font-family: system-ui;
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
width: 60vw;
|
width: 60vw;
|
||||||
padding-left: 2.5rem;
|
padding-left: 2.5rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
|
scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
|
||||||
grid-column: 2/3;
|
grid-column: 2/3;
|
||||||
grid-row: 2/3;
|
grid-row: 2/3;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
grid-row: 1/2;
|
grid-row: 1/2;
|
||||||
grid-column: 1/3;
|
grid-column: 1/3;
|
||||||
height: 6vh;
|
height: 6vh;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
border-top-left-radius: 15px;
|
border-top-left-radius: 15px;
|
||||||
border-top-right-radius: 15px;
|
border-top-right-radius: 15px;
|
||||||
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(
|
||||||
font-size: 1.4rem;
|
to right,
|
||||||
margin-top: 0.43rem;
|
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 {
|
footer {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
grid-row: 3/4;
|
grid-row: 3/4;
|
||||||
grid-column: 1/3;
|
grid-column: 1/3;
|
||||||
height: 6vh;
|
height: 6vh;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
border-bottom-left-radius: 15px;
|
border-bottom-left-radius: 15px;
|
||||||
border-bottom-right-radius: 15px;
|
border-bottom-right-radius: 15px;
|
||||||
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(
|
||||||
font-family: system-ui;
|
to right,
|
||||||
font-size: 1.3rem;
|
var(--disability-pride-black-light) 0 35%,
|
||||||
letter-spacing: 0.05rem;
|
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 {
|
header,
|
||||||
display: flex;
|
footer {
|
||||||
justify-content: center;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
gap: 0.75rem;
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
grid-row: 2/3;
|
grid-row: 2/3;
|
||||||
grid-column: 1/2;
|
grid-column: 1/2;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
width: 20vw;
|
width: 20vw;
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.75rem;
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
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 {
|
||||||
width: 55vw;
|
width: 55vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
height: 120px;
|
height: 120px;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-header {
|
.mobile-header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--background-color: #240046;
|
--background-color: #240046;
|
||||||
--body-background-color: #0d0c1d;
|
--body-background-color: #0d0c1d;
|
||||||
--text-color: #f1dac4;
|
--text-color: #f1dac4;
|
||||||
--scroll-bar: #474973;
|
--scroll-bar: #474973;
|
||||||
--scroll-gutter: #a69cac;
|
--scroll-gutter: #a69cac;
|
||||||
--link-color: #4cc9f0;
|
--link-color: #4cc9f0;
|
||||||
--link-hover: #f72585;
|
--link-hover: #f72585;
|
||||||
--link-visited: #4cc9f0;
|
--link-visited: #4cc9f0;
|
||||||
--border-color: #474973;
|
--border-color: #474973;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--body-background-color);
|
background-color: var(--body-background-color);
|
||||||
background-image: url("../img/site/assets/stardust.png");
|
background-image: url("../img/site/assets/stardust.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.status .statuslol_content p {
|
.status .statuslol_content p {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status .statuslol_content .statuslol_time a {
|
.status .statuslol_content .statuslol_time a {
|
||||||
color: var(--link-color) !important;
|
color: var(--link-color) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-header span {
|
.mobile-header span {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-header span img {
|
.mobile-header span img {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: auto;
|
width: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-top: 1.25rem;
|
padding-top: 1.25rem;
|
||||||
padding-bottom: 1.25rem;
|
padding-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
width: 95vw;
|
width: 95vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--link-visited);
|
color: var(--link-visited);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--link-hover);
|
color: var(--link-hover);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li {
|
nav ul li {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a {
|
nav ul li a {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section {
|
main section {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section p {
|
main section p {
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section ul li {
|
main section ul li {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picrew-gallery {
|
.picrew-gallery {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
margin: 1.75rem;
|
margin: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picrew-gallery img {
|
.picrew-gallery img {
|
||||||
border: 4px solid var(--border-color);
|
border: 4px solid var(--border-color);
|
||||||
border-radius: 5%;
|
border-radius: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picrew-gallery, .picrew-gallery-header {
|
.picrew-gallery,
|
||||||
text-align: center;
|
.picrew-gallery-header {
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photo-gallery-header {
|
.photo-gallery-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photography-gallery {
|
.photography-gallery {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery {
|
.gallery {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-text {
|
.gallery-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-text-left {
|
.gallery-text-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nested-list {
|
.nested-list {
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user