more changes to home page

16 files changed, 156 insertions, 28 deletions

diff --git a/static/css/en/login-area.css b/static/css/en/login-area.css
index c339605f..1e18972e 100644
--- a/static/css/en/login-area.css
+++ b/static/css/en/login-area.css
@@ -1,10 +1,6 @@
 #login-area {
-  background-image: -webkit-image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
-  background-image: image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
+  background-image: url("../../images/core/sidebar/[email protected]");
+  background-image: url("../../images/core/sidebar/[email protected]");
 }
 
 #login-area>#register-now-button {
diff --git a/static/css/ja/login-area.css b/static/css/ja/login-area.css
index 4404eada..475b239b 100644
--- a/static/css/ja/login-area.css
+++ b/static/css/ja/login-area.css
@@ -1,10 +1,6 @@
 #login-area {
-  background-image: -webkit-image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
-  background-image: image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
+  background-image: url("../../images/core/sidebar/[email protected]");
+  background-image: url("../../images/core/sidebar/[email protected]");
 }
 
 #login-area>#register-now-button {
diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 884ddbbf..06e571f3 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -1,24 +1,46 @@
 /* Reset and Base Styles */
+@font-face {
+  font-family: 'TheHeart';
+  src: url('../../fonts/THEHEART.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Yomogi';
+  src: url('../../fonts/YOMOGI.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Mali", sans-serif;
-  font-size: 11px;
   outline: none;
   border: none;
-}
-
-/* Root Variables */
-:root {
-  --resolution-multiplier: 1;
+  color: #fff;
 }
 
 /* HTML and Body Base */
 html {
   background-color: #000;
   color: #fff;
-  min-width: 1024px;
+  min-width: 1200px;
+}
+
+html[lang='en'],
+html[lang='en'] input,
+.en {
+  font-family: 'TheHeart', sans-serif;
+  font-size: 14px;
+}
+
+html[lang='ja'],
+html[lang='ja'] input,
+.ja {
+  font-family: 'Yomogi', sans-serif;
+  font-size: 12px;
 }
 
 body {
@@ -33,10 +55,23 @@ hr {
   background: #fff;
 }
 
-a:visited {
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active {
   color: #fff;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
+/* Image Styles */
 img {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
@@ -46,6 +81,16 @@ img {
   image-rendering: crisp-edges;
 }
 
+#video-background {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  z-index: -100;
+  object-fit: cover;
+}
+
 /* Video Overlay */
 #video-overlay {
   position: fixed;
@@ -54,7 +99,7 @@ img {
   width: 100%;
   height: 100%;
   background-color: #000;
-  opacity: 0.35;
+  opacity: 0.5;
   z-index: -99;
 }
 
@@ -62,7 +107,7 @@ img {
 #body-wrapper {
   position: relative;
   z-index: 1;
-  width: 1000px;
+  width: 1200px;
   margin: 0 auto;
 }
 
@@ -70,6 +115,44 @@ img {
   display: flex;
 }
 
+/* SCANLINES */
+#scanlines {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 300;
+  opacity: 0.18;
+}
+
+#scanlines:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .4) 50%);
+  background-size: 100% 4px;
+  will-change: background, background-size;
+  animation: scanlines 0.2s linear infinite;
+}
+
+@keyframes scanlines {
+  from {
+    background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .4) 50%);
+    background-size: 100% 4px;
+  }
+
+  to {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .4) 50%, transparent 50%);
+    background-size: 100% 4px;
+  }
+}
+
 /* Sidebar and Main Content */
 #left-sidebar {
   width: 200px;
@@ -77,8 +160,13 @@ img {
   border-top-left-radius: 14px;
 }
 
+.left-sidebar {
+  position: relative;
+  top: -65px;
+}
+
 #main-content {
-  width: 580px;
+  width: 780px;
   padding: 0 20px;
   border-top: 1px solid #fff;
 }
diff --git a/static/css/shared/left-sidebar.css b/static/css/shared/left-sidebar.css
new file mode 100644
index 00000000..a962b239
--- /dev/null
+++ b/static/css/shared/left-sidebar.css
@@ -0,0 +1,50 @@
+@font-face {
+    font-family: 'SweetFairy';
+    src: url('../../fonts/SWEETFAIRY.otf') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+/* Navigation Links */
+.navigation-links {
+    margin: 24px 0px;
+}
+
+.navigation-title {
+    font-family: 'SweetFairy', sans-serif;
+    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #623795) drop-shadow(0px 1px 1px #623795);
+    color: #623795;
+}
+
+.navigation-title-container {
+    background-color: #311B4F;
+    padding: 10px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+html[lang='en'] .navigation-title {
+    font-size: 18px;
+}
+
+html[lang='ja'] .navigation-title {
+    font-size: 14px;
+}
+
+.navigation-item {
+    display: flex;
+    align-items: center;
+    margin: 4px 0px;
+}
+
+.navigation-items-container {
+    background-color: #f4f1e90f;
+    padding: 10px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.navigation-item img {
+    width: 20px;
+    margin-right: 8px;
+}
\ No newline at end of file
diff --git a/static/css/shared/login-area.css b/static/css/shared/login-area.css
index 680e95c3..f0b90d47 100644
--- a/static/css/shared/login-area.css
+++ b/static/css/shared/login-area.css
@@ -3,7 +3,6 @@
   width: 200px;
   height: 280px;
   position: relative;
-  top: -65px;
   margin: auto;
   background-repeat: no-repeat;
   background-size: 200px 280px;
@@ -24,7 +23,7 @@
   width: 144px;
   margin: 10px auto;
   padding: 4px 8px;
-  font-size: 11px;
+  font-size: 16px;
   font-weight: bold;
   color: #4a2e6f;
   background: transparent;
diff --git a/static/fonts/SWEETFAIRY.otf b/static/fonts/SWEETFAIRY.otf
new file mode 100644
index 00000000..15c24f45
--- /dev/null
+++ b/static/fonts/SWEETFAIRY.otf
diff --git a/static/fonts/THEHEART.ttf b/static/fonts/THEHEART.ttf
new file mode 100644
index 00000000..a3612b9b
--- /dev/null
+++ b/static/fonts/THEHEART.ttf
diff --git a/static/fonts/YOMOGI.ttf b/static/fonts/YOMOGI.ttf
new file mode 100644
index 00000000..3c5091ad
--- /dev/null
+++ b/static/fonts/YOMOGI.ttf
diff --git a/static/images/core/icons/changelanguage.png b/static/images/core/icons/changelanguage.png
new file mode 100644
index 00000000..d2f4df83
--- /dev/null
+++ b/static/images/core/icons/changelanguage.png
diff --git a/static/images/core/icons/home.png b/static/images/core/icons/home.png
new file mode 100644
index 00000000..0bfbd03c
--- /dev/null
+++ b/static/images/core/icons/home.png
diff --git a/static/images/core/icons/journalofrandomthoughts.png b/static/images/core/icons/journalofrandomthoughts.png
new file mode 100644
index 00000000..845863a2
--- /dev/null
+++ b/static/images/core/icons/journalofrandomthoughts.png
diff --git a/static/images/core/icons/shrines.png b/static/images/core/icons/shrines.png
new file mode 100644
index 00000000..f0000eba
--- /dev/null
+++ b/static/images/core/icons/shrines.png
diff --git a/static/images/core/icons/socialify.png b/static/images/core/icons/socialify.png
new file mode 100644
index 00000000..8c8e7945
--- /dev/null
+++ b/static/images/core/icons/socialify.png
diff --git a/static/images/site/icons/pencil.gif b/static/images/core/icons/weblog.gif
index 53bb81db..53bb81db 100644
--- a/static/images/site/icons/pencil.gif
+++ b/static/images/core/icons/weblog.gif
diff --git a/static/js/youdontdare.js b/static/js/shared/headerEasterEggs.js
index c2a27ac1..c2a27ac1 100644
--- a/static/js/youdontdare.js
+++ b/static/js/shared/headerEasterEggs.js
diff --git a/static/js/musicPlayer.js b/static/js/shared/kawaiiBeatsPlayer.js
index bf1586b9..f7a20746 100644
--- a/static/js/musicPlayer.js
+++ b/static/js/shared/kawaiiBeatsPlayer.js
@@ -29,7 +29,7 @@ const SEEKBAR_CONFIG = {
 };
 
 const STORE_LIMIT = artworkCollection.length;
-const MIN_SCREEN_WIDTH = 1600;
+const MIN_SCREEN_WIDTH = 2800;
 
 // Audio Context and Core Variables
 let audioContext;
@@ -537,4 +537,3 @@ async function init() {
 }
 
 init();
-