You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.4 KiB
CSS
113 lines
2.4 KiB
CSS
/*set heart and star to 0px if viewport too small*/
|
|
|
|
@media (max-width: 625px) {
|
|
.heart {
|
|
width: auto;
|
|
}
|
|
}
|
|
.heart {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
background-color: transparent;
|
|
background-image: url(../img/nav/heart.png);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom right;
|
|
background-size: contain;
|
|
}
|
|
.nav-grid {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
background-color: transparent;
|
|
background-image: url(../img/nav/field.png);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
background-size: contain;
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: repeat(4, auto);
|
|
/*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
align-items: center;
|
|
}
|
|
.star {
|
|
grid-area: 1 / 3 / 2 / 4;
|
|
background-color: transparent;
|
|
background-image: url(../img/nav/star.png);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom left;
|
|
background-size: contain;
|
|
}
|
|
|
|
.nav-diary {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 80% 20%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
flex-direction: column;
|
|
min-width: 48px;
|
|
}
|
|
.nav-play {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 80% 20%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
flex-direction: column;
|
|
min-width: 48px;
|
|
}
|
|
.nav-about {
|
|
grid-area: 1 / 3 / 2 / 4;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 80% 20%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
flex-direction: column;
|
|
min-width: 48px;
|
|
}
|
|
.nav-dev {
|
|
grid-area: 1 / 4 / 2 / 5;
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 80% 20%;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
flex-direction: column;
|
|
min-width: 48px;
|
|
}
|
|
.navlink {
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
color: #C0AAC0;
|
|
text-align: center;
|
|
}
|
|
.navlink a:link {
|
|
color: #C0AAC0;
|
|
}
|
|
.navlink a:visited {
|
|
color: #C0AAC0;
|
|
}
|
|
.navlink a:hover {
|
|
color: #f463ad;
|
|
}
|
|
.navlink a:active {
|
|
color: #C0AAC0;
|
|
}
|
|
.nav-grid img {
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
.links {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
background-color: black;
|
|
width: 100vw;
|
|
text-align: center;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 1em;
|
|
}
|
|
.links a {
|
|
color: #C0AAC0;
|
|
}
|