From 9de4952c91e154ccd9522ff6e34bbd1753a8a71c Mon Sep 17 00:00:00 2001 From: Captain ALM Date: Fri, 29 Jul 2022 15:58:51 +0100 Subject: [PATCH] Update layout for full flex-box with table fallback. --- base.css | 62 ++++++++++++++++++--------------- dark.css | 6 +++- index.go.html | 53 ++++++---------------------- index.js | 4 +++ light.css | 6 +++- pageHandler/pages/index/data.go | 25 ++++++------- 6 files changed, 70 insertions(+), 86 deletions(-) diff --git a/base.css b/base.css index 44a7e5a..ac2b420 100644 --- a/base.css +++ b/base.css @@ -1,3 +1,7 @@ +/* +This file is (C) Captain ALM +Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License +*/ *{ margin: 0; padding: 0; @@ -27,6 +31,7 @@ main{ position: fixed; top: 0; width: 100%; + z-index: 100; } .home-button, .sort-button{ display: inline-block; @@ -65,7 +70,7 @@ main{ .so-pane > label{ background-color: transparent; } -.nav-menu, .sort-menu, .data-hold{ +.nav-menu, .sort-menu{ display: none; } .menu a{ @@ -98,21 +103,21 @@ main{ .hmb-line::after{ top: -5px; } -.nav-menu:checked ~ nav{ +.nav-menu:checked ~ nav, .nav-open{ max-height: 100%; } -.nav-menu:checked ~ .hmb .hmb-line{ +.nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{ background: transparent; } -.nav-menu:checked ~ .hmb .hmb-line::before{ +.nav-menu:checked ~ .hmb .hmb-line::before, .nav-open-hmb .hmb-line::before{ transform: rotate(-45deg); top:0; } -.nav-menu:checked ~ .hmb .hmb-line::after{ +.nav-menu:checked ~ .hmb .hmb-line::after, .nav-open-hmb .hmb-line::after{ transform: rotate(45deg); top:0; } -.sort-menu:checked ~ .so-pane{ +.sort-menu:checked ~ .so-pane, .so-pane-open{ display: block; box-sizing: content-box; position: fixed; @@ -125,7 +130,17 @@ main{ border-style: solid; border-width: 2px; } -.main-box{ +.main-box > div, footer > p{ + margin: 3px 0; + padding: 2px; + box-sizing: content-box; +} +.item-table{ + display: table; + box-sizing: content-box; + background-color: transparent; +} +.flex-col{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; @@ -142,17 +157,6 @@ main{ align-content: center; width: 100%; } -.main-box > div, footer > p{ - margin: 3px 0; - padding: 2px; - box-sizing: content-box; -} -.item-table{ - display: table; - width: 100%; - box-sizing: content-box; - background-color: transparent; -} .item-table > div{ display: table-row; background-color: transparent; @@ -177,9 +181,13 @@ main{ width: 100%; } .item-table-360{ - display: none; + display: table-cell; + vertical-align: middle; + width: 360px; + overflow: hidden; + text-align: center; } -.image-box{ +.flex-row{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; @@ -205,21 +213,17 @@ main{ } @media (min-width: 560px){ .main-box > div, footer > p{ - margin: 5px; + margin: 10px; } - .item-table-360{ - display: table-cell; - vertical-align: middle; - width: 360px; - overflow: hidden; + .item-table-full{ + width: -webkit-calc(100% - 360px); + width: -moz-calc(100% - 360px); + width: calc(100% - 360px); } .image-box > a{ border-width: 4px; margin: 10px; } - .small-only-row{ - display: none !important; - } } @media (min-width: 640px){ .nav{ diff --git a/dark.css b/dark.css index 181b20b..4a4e430 100644 --- a/dark.css +++ b/dark.css @@ -1,3 +1,7 @@ +/* +This file is (C) Captain ALM +Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License +*/ body{ color: #f9f9f9; background-color: #050506; @@ -12,7 +16,7 @@ a{ .home-button > div, .sort-button > div, .menu a, .so-pane > *{ color: #e0e0e0; } -.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .so-pane > input, .so-pane > select{ +.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > input, .so-pane > select{ background-color: #606061; } .hmb-line, .hmb-line::before, .hmb-line::after{ diff --git a/index.go.html b/index.go.html index ab8ef3f..50e7cdc 100644 --- a/index.go.html +++ b/index.go.html @@ -7,9 +7,9 @@ City University Portfolio {{ if .Light }} - + {{ else }} - + {{ end }} @@ -85,10 +85,10 @@ -
+
-
-
+
+

{{ .Data.About.Title }}

@@ -96,12 +96,7 @@

Email: {{ .Data.About.ContactEmail }}

-
-
-

Email: {{ .Data.About.ContactEmail }}

-
-
-
+
{{ .Data.About.GetContent }}
@@ -109,17 +104,12 @@
{{ .Data.About.ImageAltText }}
-
-
-
{{ .Data.About.ImageAltText }}
-
-
{{ range .GetEntries }}
-
+

{{ .Name }}

@@ -131,16 +121,7 @@ {{ end }}
-
-
- {{ if eq .GetStartDate .GetEndDate }} -

{{ .GetStartDate }}

- {{ else }} -

{{ .GetStartDate }} - {{ .GetEndDate }}

- {{ end }} -
-
-
+
{{ .GetContent }}
@@ -157,23 +138,9 @@
-
-
-
- {{ if eq .VideoLocation "" }} - No Video - {{ else }} - - {{ end }} -
-
-
{{ if not (eq .GetImageCount 0) }} -
-
+
+
{{ range .GetImages }} {{ .ImageAltText }} {{ end }} diff --git a/index.js b/index.js index e69de29..a2fbdec 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,4 @@ +/* +This file is (C) Captain ALM +Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License +*/ diff --git a/light.css b/light.css index 5c608bb..25b6b22 100644 --- a/light.css +++ b/light.css @@ -1,3 +1,7 @@ +/* +This file is (C) Captain ALM +Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License +*/ body{ color: #060606; background-color: #fafaf9; @@ -12,7 +16,7 @@ a{ .home-button > div, .sort-button > div, .menu a, .so-pane > *{ color: #1f1f1f; } -.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .so-pane > input, .so-pane > select{ +.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > input, .so-pane > select{ background-color: #9f9f9e; } .hmb-line, .hmb-line::before, .hmb-line::after{ diff --git a/pageHandler/pages/index/data.go b/pageHandler/pages/index/data.go index acd977a..97e9eb9 100644 --- a/pageHandler/pages/index/data.go +++ b/pageHandler/pages/index/data.go @@ -3,18 +3,19 @@ package index import "html/template" type DataYaml struct { - HeaderLinks map[string]template.URL `yaml:"headerLinks"` - CSSBaseURL template.URL `yaml:"cssBaseURL"` - CSSLightURL template.URL `yaml:"cssLightURL"` - CSSDarkURL template.URL `yaml:"cssDarkURL"` - JScriptURL template.URL `yaml:"jScriptURL"` - NoVideoImageLocation template.URL `yaml:"noVideoImageLocation"` - LogoImageLocation template.URL `yaml:"logoImageLocation"` - SunImageLocation template.URL `yaml:"sunImageLocation"` - MoonImageLocation template.URL `yaml:"moonImageLocation"` - SortImageLocation template.URL `yaml:"sortImageLocation"` - About AboutYaml `yaml:"about"` - Entries []EntryYaml `yaml:"entries"` + HeaderLinks map[string]template.URL `yaml:"headerLinks"` + CSSBaseURL template.URL `yaml:"cssBaseURL"` + CSSLightURL template.URL `yaml:"cssLightURL"` + CSSDarkURL template.URL `yaml:"cssDarkURL"` + JScriptURL template.URL `yaml:"jScriptURL"` + PlayVideoImageLocation template.URL `yaml:"playVideoImageLocation"` + NoVideoImageLocation template.URL `yaml:"noVideoImageLocation"` + LogoImageLocation template.URL `yaml:"logoImageLocation"` + SunImageLocation template.URL `yaml:"sunImageLocation"` + MoonImageLocation template.URL `yaml:"moonImageLocation"` + SortImageLocation template.URL `yaml:"sortImageLocation"` + About AboutYaml `yaml:"about"` + Entries []EntryYaml `yaml:"entries"` } func (dy DataYaml) GetHeaderLabels() []string {