diff --git a/themes/gokarna/layouts/index.html b/themes/gokarna/layouts/index.html index 8135599..020a0cd 100644 --- a/themes/gokarna/layouts/index.html +++ b/themes/gokarna/layouts/index.html @@ -9,6 +9,8 @@

{{ .Site.Params.Description }}

+
+ {{ if isset .Site.Params "showpostsonhomepage" }}
diff --git a/themes/gokarna/layouts/partials/header.html b/themes/gokarna/layouts/partials/header.html index 980db30..574440d 100644 --- a/themes/gokarna/layouts/partials/header.html +++ b/themes/gokarna/layouts/partials/header.html @@ -29,6 +29,28 @@
+ + + + + diff --git a/themes/gokarna/layouts/partials/list-posts.html b/themes/gokarna/layouts/partials/list-posts.html index 33fd5ec..8b4b091 100644 --- a/themes/gokarna/layouts/partials/list-posts.html +++ b/themes/gokarna/layouts/partials/list-posts.html @@ -1,4 +1,5 @@
{{ .Title }} +
{{ dateFormat "January 2, 2006" .Date }}
diff --git a/themes/gokarna/layouts/partials/list.html b/themes/gokarna/layouts/partials/list.html index fc3a719..c726160 100644 --- a/themes/gokarna/layouts/partials/list.html +++ b/themes/gokarna/layouts/partials/list.html @@ -2,7 +2,7 @@

{{ .Name }}

- {{ range (where .Site.Pages "Params.type" "post" ).GroupByDate "2006" }} + {{ range (where .Pages "Params.type" "post" ).GroupByDate "2006" }}

{{ .Key }}

diff --git a/themes/gokarna/static/css/dark.css b/themes/gokarna/static/css/dark.css index c23e5ac..384d003 100644 --- a/themes/gokarna/static/css/dark.css +++ b/themes/gokarna/static/css/dark.css @@ -16,6 +16,10 @@ html { background-color: var(--dark-header-bg-color); } +.nav-hamburger-list { + background: var(--dark-header-bg-color); +} + .nav-links .nav-icons-divider { color: var(--dark-header-divider-color); } diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css index 4a1e285..7fd500e 100644 --- a/themes/gokarna/static/css/main.css +++ b/themes/gokarna/static/css/main.css @@ -42,13 +42,12 @@ img { /* HEADER */ .header { - background-color: var(--light-header-bg-color); + background-color: rgba(240, 240, 240, 0.95); box-shadow: rgba(170, 170, 170, 0.5) 0px 1px 2px 0px; color: inherit; font-size: 1.05rem; height: 50px; left: 0; - opacity: 0.95; position: fixed; top: 0; width: 100%; @@ -117,6 +116,31 @@ img { stroke-linejoin: round; width: 24px; } +#hamburger-menu-toggle { + display: none; +} +#hamburger-menu-toggle .feather { + height: 24px; + stroke-linecap: round; + stroke-linejoin: round; + width: 24px; +} +.nav-hamburger-list { + background: var(--light-header-bg-color); + border-bottom: solid 1.5px var(--light-header-divider-color); + border-top: solid 1.5px var(--light-header-divider-color); + list-style-type: none; + margin: 0; + padding: 0; + position: absolute; + right: 0; + text-align: center; + width: 100%; + z-index: 5; +} +.nav-hamburger-list a:hover { + text-decoration: underline; +} /* FOOTER */ .footer { @@ -143,6 +167,16 @@ img { /** COMMON **/ +.flex-break { + flex-basis: 100%; + height: 0; + display: none; +} + +.visibility-hidden { + visibility: hidden; +} + /* ICONS */ .feather { height: 20px; @@ -185,6 +219,7 @@ pre { pre { font-size: 0.95rem; + overflow: scroll; padding: 20px; } @@ -205,6 +240,8 @@ table { font-size: 1.05rem; margin: 30px 0; text-align: left; + display: block; + overflow-x: auto; } table thead { @@ -316,3 +353,52 @@ main#content .post { opacity: 0.8; padding: 6px; } + +@media only screen and (max-width: 820px) { + body { + font-size: 0.95rem; + } + + .flex-break { + display: block; + } + + .home-about .avatar img { + border-radius: 50%; + height: 7rem; + width: 7rem; + } + + .nav-links .nav-link, + .nav-icons-divider { + display: none; + } + + #hamburger-menu-toggle { + display: inline-block; + } + + main#content { + box-sizing: border-box; + padding: 0 1.5rem; + width: auto; + } + + main#content .post { + font-size: 1.05rem; + } + + .home-about { + margin: 0 auto; + } + + .list-posts { + flex: 1; + } +} + +@media only screen and (min-width: 820px) { + .nav-hamburger-list { + visibility: hidden !important; + } +} diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js index 645d860..4abb2de 100644 --- a/themes/gokarna/static/js/main.js +++ b/themes/gokarna/static/js/main.js @@ -23,6 +23,15 @@ function ready() { setTheme('dark'); } }); + + document.getElementById('hamburger-menu-toggle').addEventListener('click', () => { + const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0] + if (hamburgerMenu.classList.contains('visibility-hidden')) { + hamburgerMenu.classList.remove('visibility-hidden'); + } else { + hamburgerMenu.classList.add('visibility-hidden'); + } + }) } function setTheme(themeToSet) {