From 26103117f578dc95ac02a3f0b699ec7edf309b35 Mon Sep 17 00:00:00 2001 From: chimchooree Date: Tue, 25 Oct 2022 23:39:02 -0500 Subject: [PATCH] tiny nav - doesn't work but reference work done here --- src/static/css/all.css | 8 ++++---- src/static/css/diary.css | 2 +- src/static/css/nav.css | 24 ++++++++++++++---------- src/views/frame.tpl | 1 + 4 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/static/css/all.css b/src/static/css/all.css index a0cf8a2..be14c5f 100755 --- a/src/static/css/all.css +++ b/src/static/css/all.css @@ -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;*/ } diff --git a/src/static/css/diary.css b/src/static/css/diary.css index 3733218..daeec4a 100755 --- a/src/static/css/diary.css +++ b/src/static/css/diary.css @@ -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; diff --git a/src/static/css/nav.css b/src/static/css/nav.css index 9319d9c..4ebcaf6 100644 --- a/src/static/css/nav.css +++ b/src/static/css/nav.css @@ -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; diff --git a/src/views/frame.tpl b/src/views/frame.tpl index 84540c7..067884f 100644 --- a/src/views/frame.tpl +++ b/src/views/frame.tpl @@ -1,5 +1,6 @@ + % include('header.tpl')