Responsive image sizes

layouts/default.vue

@@ -13,11 +13,32 @@
 
 <style>
 body {
-    background: linear-gradient(to right, #060600 45% ,transparent 65%), url("./yuriko.jpg") no-repeat;
+    background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-360.jpg") no-repeat;
     background-size: cover;
     background-attachment: fixed;
     scroll-behavior: smooth;
 }
+@media only screen and (max-height: 479px) {
+    body {
+        background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-360.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+    }
+}
+@media only screen and (max-height: 899px) {
+    body {
+        background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-720.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+    }
+}
+@media only screen and (min-height: 900px) {
+    body {
+        background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-1080.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+    }
+}
 .content-container {
     margin-top: 5vh;
     margin-left: 2.5%;
@@ -31,62 +52,6 @@ body {
 .gradient {
     display: none;
 }
-@media only screen and (max-aspect-ratio: 8/5) {
-    body {
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-top: 0px;
-        background: #060600;
-    }
-    .content-container {
-        margin-right: 0%;
-    }
-    .header {
-        margin-left: 0px;
-        margin-right: 0px;
-        display: block;
-        height: 50vh;
-        background: url("./yuriko.jpg") no-repeat;
-        background-size: cover;
-        background-attachment: fixed;
-        background-position: right 20% top;
-    }
-    .gradient {
-        display: block;
-        position: absolute;
-        top: 25vh;
-        left: 0%;
-        width: 100%;
-        height: 25vh;
-        background: linear-gradient(to top,#060600 25%,transparent 100%);
-    }
-}
-
-
-.primary {
-    color: #c7b83c;
-}
-
-.japanese{
-    font-family: 'M PLUS 1p', sans-serif;
-}
-
-h1 {
-    color: #c7b83c;
-    font-size: 3.2vw;
-    font-weight: 500;
-}
-h2 {
-    color: #ffffff;
-    font-size: 3vw;
-}
-a {
-    text-decoration: none;
-    color: #c7b83c;
-}
-a:hover{
-    text-decoration: underline;
-}
 .lily {
     font-size: 1.6vw;
     margin-top: 0px;
@@ -105,6 +70,136 @@ a:hover{
     margin-bottom: 0px;
     font-size: 2.6vw;
 }
+p {
+    color: #ffffff;
+    font-size: 1.3vw;
+}
+h1 {
+    color: #c7b83c;
+    font-size: 3.2vw;
+    font-weight: 500;
+}
+h2 {
+    color: #ffffff;
+    font-size: 3vw;
+}
+@media only screen and (max-aspect-ratio: 8/5) {
+    body {
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        background: #060600;
+    }
+    .content-container {
+        margin-left: 3%;
+        margin-right: 3%;
+    }
+    .header {
+        margin-left: 0px;
+        margin-right: 0px;
+        display: block;
+        height: 50vh;
+        background: url("/yuriko.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: right 20% top;
+    }
+    .gradient {
+        display: block;
+        position: absolute;
+        top: 25vh;
+        left: 0%;
+        width: 100%;
+        height: 25vh;
+        background: linear-gradient(to top,#060600 25%,transparent 100%);
+    }
+    .lily {
+        font-size: 7.5vw;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        font-weight: 300;
+    }
+    .yuriko {
+        margin-top: 0px;
+        font-size: 15vw;
+        margin-bottom: 5px;
+    }
+
+    .yuriko-sub {
+        margin-top: 0px;
+        font-weight: 300;
+        margin-bottom: 0px;
+        font-size: 8vw;
+    }
+    p {
+        color: #ffffff;
+        font-size: 5vw;
+    }
+    h1 {
+        color: #c7b83c;
+        font-size: 10vw;
+        font-weight: 500;
+    }
+    h2 {
+        color: #ffffff;
+        font-size: 8vw;
+    }
+}
+@media only screen and (max-aspect-ratio: 8/5) and (max-width: 479px) {
+    .header {
+        margin-left: 0px;
+        margin-right: 0px;
+        display: block;
+        height: 50vh;
+        background: url("/yuriko-360.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: right 20% top;
+    }
+    
+}
+@media only screen and (max-aspect-ratio: 8/5) and (max-width: 899px) {
+    .header {
+        margin-left: 0px;
+        margin-right: 0px;
+        display: block;
+        height: 50vh;
+        background: url("/yuriko-720.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: right 20% top;
+    }
+    
+}
+@media only screen and (max-aspect-ratio: 8/5) and (min-width: 899px) {
+    .header {
+        margin-left: 0px;
+        margin-right: 0px;
+        display: block;
+        height: 50vh;
+        background: url("/yuriko-720.jpg") no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: right 20% top;
+    }
+    
+}
+
+.primary {
+    color: #c7b83c;
+}
+
+.japanese{
+    font-family: 'M PLUS 1p', sans-serif;
+}
+
+a {
+    text-decoration: none;
+    color: #c7b83c;
+}
+a:hover{
+    text-decoration: underline;
+}
 .yuriko-smol {
     display: block;
     margin-bottom: 0px;
@@ -116,7 +211,6 @@ a:hover{
 }
 
 .sub {
-    font-size: 1.6vw;
     margin-top: 0px;
     font-weight: 300;
     margin-bottom: 0px;
@@ -125,10 +219,6 @@ a:hover{
 .title {
     margin-bottom: 10px;
 }
-p {
-    color: #ffffff;
-    font-size: 1.3vw;
-}
 .games-list > li {
     font-size: 1.6vw;
 }