From 651bea23a95614877074d3ecd24eae22a51a07a5 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 16 Apr 2024 20:26:34 +0800
Subject: [PATCH] Add shrine CSS files

---
 src/assets/css/asummersend.css    | 35 ++++++++++++++++++++++
 src/assets/css/cassettebeasts.css | 49 ++++++++++++++++++++++++++++++
 src/assets/css/starwarskotor.css  | 50 +++++++++++++++++++++++++++++++
 3 files changed, 134 insertions(+)
 create mode 100644 src/assets/css/asummersend.css
 create mode 100644 src/assets/css/cassettebeasts.css
 create mode 100644 src/assets/css/starwarskotor.css

diff --git a/src/assets/css/asummersend.css b/src/assets/css/asummersend.css
new file mode 100644
index 00000000..b890b093
--- /dev/null
+++ b/src/assets/css/asummersend.css
@@ -0,0 +1,35 @@
+:root {
+    --clr-body-bg: #1f0033;
+    --img-body-bg: none;
+    --clr-body-txt: #fceaff;
+    --clr-content-bg: #101010;
+
+    --clr-main-heading: #FF29D8;
+    --clr-sub-heading: #FF29D8;
+    --clr-title-border: #d3aad5;
+    --clr-bold-txt: #ff9933;
+    --clr-link: #d270ff;
+    --clr-link-hover: #7E4197;
+    --clr-quote-bg: #222121;
+    --clr-quote-border: #4d4385;
+
+    --clr-code-bg: #241445;
+    --clr-code-border: #82668f;
+    --clr-dates: rgb(158, 203, 255);
+
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
+
+    --clr-main-header-bg: #101010;
+    --clr-navbar-bg: #181818;
+    --clr-navbar-link: white;
+
+    --clr-main-footer-bg: #181818;
+}
+
+.main-header img {
+    object-fit: cover;
+    object-position: center;
+    max-height: 20rem;
+}
\ No newline at end of file
diff --git a/src/assets/css/cassettebeasts.css b/src/assets/css/cassettebeasts.css
new file mode 100644
index 00000000..c7045edf
--- /dev/null
+++ b/src/assets/css/cassettebeasts.css
@@ -0,0 +1,49 @@
+:root {
+    --clr-body-bg: #1f0033;
+    --img-body-bg: url(/assets/cassettebeasts/images/cassettebeasts-bg.jpg);
+    --clr-body-txt: #333333;
+    --clr-content-bg: #ffffff;
+
+    --clr-main-heading: #333333;
+    --clr-sub-heading: #000000;
+    --clr-title-border: #7629db;
+    --clr-bold-txt: #f8560b;
+    --clr-link: #7629db;
+    --clr-link-hover: #270e48;
+    --clr-quote-bg: #f3f2f2;
+    --clr-quote-border: #414141;
+
+    --clr-code-bg: #f3f2f2;
+    --clr-code-border: #414141;
+    --clr-dates: rgb(58, 150, 255);
+
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
+
+    --clr-main-header-bg: #9b59b6;
+    --clr-navbar-bg: #9b59b6;
+    --clr-navbar-link: white;
+
+    --clr-main-footer-bg: #9b59b6;
+}
+
+.main-header img {
+    object-fit: cover;
+    object-position: top;
+    max-height: 20rem;
+}
+
+@media only screen and (min-width: 60rem) {
+    .main-header img {
+        object-position: top -4.5rem right 0;
+    }
+}
+
+.main-footer {
+    color: var(--clr-navbar-link);
+}
+
+.main-footer a {
+    color: var(--clr-navbar-link);
+}
\ No newline at end of file
diff --git a/src/assets/css/starwarskotor.css b/src/assets/css/starwarskotor.css
new file mode 100644
index 00000000..86690b07
--- /dev/null
+++ b/src/assets/css/starwarskotor.css
@@ -0,0 +1,50 @@
+:root {
+    --clr-body-bg: #212121;
+    --img-body-bg: none;
+    --clr-body-txt: #fceaff;
+    --clr-content-bg: #000000;
+
+    --clr-main-heading: #ffc400;
+    --clr-sub-heading: #ffc400;
+    --clr-title-border: #ffe387;
+    --clr-bold-txt: #ff9933;
+    --clr-link: #bb9671;
+    --clr-link-hover: #94575a;
+    --clr-quote-bg: #2f2d2d;
+    --clr-quote-border: #4d4385;
+
+    --clr-code-bg: #241445;
+    --clr-code-border: #e4dbbe;
+    --clr-dates: rgb(158, 203, 255);
+
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
+
+    --clr-main-header-bg: black;
+    --clr-navbar-bg: #171717;
+    --clr-navbar-link: white;
+
+    --clr-main-footer-bg: #171717;
+}
+
+.main-header img {
+    object-fit: cover;
+    object-position: center;
+    max-height: 20rem;
+}
+
+.juhani-history {
+    font-weight: 700;
+    color: rgb(213, 98, 255);
+}
+
+.juhani-personal {
+    font-weight: 700;
+    color: rgb(255, 122, 206);
+}
+
+.info-field {
+    font-weight: 700;
+    color: rgb(213, 98, 255);
+}
\ No newline at end of file