Responsive image sizes
This commit is contained in:
parent
7f402fa70a
commit
6572869751
@ -13,11 +13,32 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
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-size: cover;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
scroll-behavior: smooth;
|
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 {
|
.content-container {
|
||||||
margin-top: 5vh;
|
margin-top: 5vh;
|
||||||
margin-left: 2.5%;
|
margin-left: 2.5%;
|
||||||
@ -31,62 +52,6 @@ body {
|
|||||||
.gradient {
|
.gradient {
|
||||||
display: none;
|
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 {
|
.lily {
|
||||||
font-size: 1.6vw;
|
font-size: 1.6vw;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
@ -105,6 +70,136 @@ a:hover{
|
|||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
font-size: 2.6vw;
|
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 {
|
.yuriko-smol {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
@ -116,7 +211,6 @@ a:hover{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sub {
|
.sub {
|
||||||
font-size: 1.6vw;
|
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
@ -125,10 +219,6 @@ a:hover{
|
|||||||
.title {
|
.title {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
p {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 1.3vw;
|
|
||||||
}
|
|
||||||
.games-list > li {
|
.games-list > li {
|
||||||
font-size: 1.6vw;
|
font-size: 1.6vw;
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 715 KiB After Width: | Height: | Size: 715 KiB |
BIN
static/yuriko-360.jpg
Normal file
BIN
static/yuriko-360.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 54 KiB |
BIN
static/yuriko-720.jpg
Normal file
BIN
static/yuriko-720.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 154 KiB |
BIN
static/yuriko-orig.jpg
Normal file
BIN
static/yuriko-orig.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 715 KiB |
Loading…
Reference in New Issue
Block a user