tiny nav - doesn't work but reference work done here

master
chimchooree 2 years ago
parent a213287a5d
commit 26103117f5

@ -127,17 +127,17 @@ pre,code {
grid-row-gap: 0px;
background-color: transparent;
width: 100vw;
min-width: 636px;
/*min-width: 636px;*/
}
.nav {
grid-area: 1 / 1 / 2 / 2;
background-color: transparent;
width: 60vw;
/* width: 60vw;*/
display: grid;
grid-template-columns: 26% 51% 23%;
grid-template-rows: 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: auto;
min-width: 636px;
/* min-width: 636px;*/
}

@ -1,7 +1,7 @@
.content-grid {
max-width: MAX(50em, 50%);
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr; /*repeat(auto-fit, minmax(200px,1fr));*/
grid-template-rows: 40px auto 40px;
grid-column-gap: 0em;
grid-row-gap: 0em;

@ -1,4 +1,5 @@
/*set heart and star to 0px if viewport too small*/
.heart {
grid-area: 1 / 1 / 2 / 2;
background-color: transparent;
@ -16,11 +17,13 @@
background-size: contain;
display: grid;
grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
grid-template-rows: repeat(4, auto);
grid-template-rows: repeat(4, minmax(0px,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;
font-size: 2vw;
margin-bottom: 0px;
}
.star {
grid-area: 1 / 3 / 2 / 4;
@ -34,42 +37,42 @@
.nav-diary {
grid-area: 1 / 1 / 2 / 2;
display: grid;
grid-template-columns: 100%;
grid-template-columns: auto;
grid-template-rows: 80% 20%;
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
/*min-width: 48px;*/
}
.nav-play {
grid-area: 1 / 2 / 2 / 3;
display: grid;
grid-template-columns: 100%;
grid-template-columns: auto;
grid-template-rows: 80% 20%;
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
/*min-width: 48px;*/
}
.nav-about {
grid-area: 1 / 3 / 2 / 4;
display: grid;
grid-template-columns: 100%;
grid-template-columns: auto;
grid-template-rows: 80% 20%;
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
/*min-width: 48px;*/
}
.nav-dev {
grid-area: 1 / 4 / 2 / 5;
display: grid;
grid-template-columns: 100%;
grid-template-columns: auto;
grid-template-rows: 80% 20%;
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
/*min-width: 48px;*/
}
.navlink {
font-size: 110%;
@ -89,7 +92,8 @@
}
.nav-grid img {
height: auto;
width: 100%;
max-width:100%;
max-height:100%;
}
.links {
grid-area: 2 / 1 / 3 / 2;

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<head>
% include('header.tpl')

Loading…
Cancel
Save