chimchooree
/
blessfrey-bottle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
chimchooree 2 years ago
parent a213287a5d
commit 26103117f5
4 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File

8
src/static/css/all.css
Unescape Escape View File

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

2
src/static/css/diary.css
Unescape Escape View File

@ -1,7 +1,7 @@
.content-grid { .content-grid {
max-width: MAX(50em, 50%); max-width: MAX(50em, 50%);
display: grid; 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-template-rows: 40px auto 40px;
grid-column-gap: 0em; grid-column-gap: 0em;
grid-row-gap: 0em; grid-row-gap: 0em;

24
src/static/css/nav.css
Unescape Escape View File

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

1
src/views/frame.tpl
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save