Update layout for full flex-box with table fallback.
All checks were successful
continuous-integration/drone/push Build is passing

Fix up sort drop down css and html.
Resize nav bar.
Round some objects.
Add copyright messages.
This commit is contained in:
Captain ALM 2022-07-29 22:34:12 +01:00
parent e1e78655bd
commit dba4022bf4
Signed by: alfred
GPG Key ID: 4E4ADD02609997B1
6 changed files with 211 additions and 141 deletions

212
base.css
View File

@ -1,10 +1,14 @@
/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
padding-top: 90px;
padding-top: 70px;
padding-left: 6px;
}
.no-dec{
@ -27,11 +31,14 @@ main{
position: fixed;
top: 0;
width: 100%;
z-index: 100;
border-style: solid;
border-width: 0 0 2px;
}
.home-button, .sort-button{
display: inline-block;
width: 64px;
height: 82px;
height: 62px;
overflow: hidden;
text-align: center;
}
@ -40,7 +47,7 @@ main{
}
.home-button > div, .sort-button > div{
display: inline;
font-size: 60px;
font-size: 48px;
padding: 10px;
vertical-align: middle;
}
@ -56,27 +63,62 @@ main{
position: fixed;
max-height: 0;
}
.so-pane > *{
.so-pane > form > div{
display: table-row;
background-color: transparent;
box-sizing: inherit;
max-width: 100%;
width: 100%;
}
.so-pane > form > div > div, .so-pane > form > div > span{
background-color: transparent;
box-sizing: inherit;
padding: 2px;
text-align: center;
vertical-align: middle;
}
.so-pane > form > div > div{
display: table-cell;
max-width: 50%;
width: 50%;
}
.so-pane > form > div > span{
display: block;
max-width: 100%;
width: 100%;
}
.so-pane-full{
display: table-caption !important;
caption-side: bottom;
}
.so-pane > form > div > * > *{
max-width: 100%;
width: 100%;
vertical-align: middle;
font-size: 16px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.so-pane > form > div > div > *{
text-align: left;
padding: 2px;
}
.so-pane > label{
.so-pane > form > div > div > label{
background-color: transparent;
text-align: center;
}
.nav-menu, .sort-menu, .data-hold{
.nav-menu, .sort-menu{
display: none;
}
.menu a{
display: block;
padding: 32px 18px;
padding: 22px 18px;
}
.hmb{
cursor: pointer;
float: right;
background-color: transparent;
padding: 40px 20px;
padding: 30px 20px;
}
.hmb-line{
display: block;
@ -98,34 +140,63 @@ 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;
z-index: 101;
box-sizing: content-box;
position: fixed;
top: 85px;
max-height: 100%;
width: auto;
height: auto;
padding: 4px;
text-align: center;
top: 66px;
left: 136px;
max-height: 100%;
width: 230px;
height: auto;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 4px;
border-style: solid;
border-width: 2px;
border-width: 0 2px 2px;
overflow: hidden;
}
.main-box{
.sort-menu:checked ~ .so-pane > form, .so-pane-open > form{
display: table;
box-sizing: inherit;
}
.main-box > div, footer > p{
max-width: 100%;
margin: 3px 0;
padding: 2px;
box-sizing: content-box;
}
.item-table{
display: table;
box-sizing: content-box;
background-color: transparent;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
border-radius: 32px;
border-width: 1px;
border-style: solid;
}
.flex-col{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
@ -140,46 +211,17 @@ main{
flex-direction: column;
-webkit-align-content: center;
align-content: center;
max-width: 100%;
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;
overflow: hidden;
}
.item-table > div{
display: table-row;
background-color: transparent;
box-sizing: inherit;
}
.item-table > div > div > div{
padding: 2px;
}
.item-table-caption{
display: table-caption !important;
caption-side: bottom;
}
.item-table-full, .item-table-360, .item-table-caption{
border-style: solid;
border-width: 1px;
background-color: transparent;
box-sizing: inherit;
}
.item-table-full{
display: table-cell;
vertical-align: top;
max-width: 100%;
width: 100%;
}
.item-table-360{
display: none;
}
.image-box{
.flex-row, .item-table > div{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
@ -197,6 +239,33 @@ main{
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
width: 100%;
overflow: hidden;
}
.item-table > div > div > div{
padding: 2px;
}
.item-table-caption, .so-pane-caption{
display: table-caption !important;
caption-side: bottom;
}
.item-table-full, .item-table-360, .item-table-caption, .so-pane-caption{
background-color: transparent;
box-sizing: inherit;
}
.item-table-full{
display: table-cell;
vertical-align: top;
width: 100%;
}
.item-table-360{
display: table-cell;
vertical-align: middle;
max-width: 360px;
width: 360px;
overflow: hidden;
text-align: center;
}
.image-box > a{
border-style: solid;
@ -204,22 +273,29 @@ main{
margin: 2px;
}
@media (min-width: 560px){
.main-box > div, footer > p{
margin: 5px;
.main-box > div{
padding: 12px;
}
.item-table-360{
display: table-cell;
vertical-align: middle;
width: 360px;
overflow: hidden;
footer > p{
padding: 4px;
}
.item-table > div{
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.item-table-full{
max-width: -webkit-calc(100% - 361px);
max-width: -moz-calc(100% - 361px);
max-width: calc(100% - 361px);
width: -webkit-calc(100% - 361px);
width: -moz-calc(100% - 361px);
width: calc(100% - 361px);
}
.image-box > a{
border-width: 4px;
margin: 10px;
}
.small-only-row{
display: none !important;
}
}
@media (min-width: 640px){
.nav{
@ -239,3 +315,11 @@ main{
display: none;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.item-table-full, .item-table-360 {
display: block !important;
}
.item-table-caption{
display: block !important;
}
}

View File

@ -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;
@ -9,10 +13,10 @@ a{
.header, .nav, footer, .so-pane{
background-color: #1d1d1e;
}
.home-button > div, .sort-button > div, .menu a, .so-pane > *{
.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
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 > form > div > span > input, .so-pane > form > div > div > select{
background-color: #606061;
}
.hmb-line, .hmb-line::before, .hmb-line::after{
@ -23,14 +27,12 @@ a{
}
.item-table{
background-color: #3f3f3f;
}
.so-pane{
border-color: #3f3f3f;
}
.item-table > div > div, .item-table-caption{
border-color: #f5deb3;
}
.image-box{
.so-pane, .header{
border-color: #6f6f6f;
}
.image-box, .item-heading{
background-color: #4f4f4f;
}
.image-box > a{

View File

@ -7,9 +7,9 @@
<title>City University Portfolio</title>
<link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/>
{{ if .Light }}
<link rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
<link id="style-theme" rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
{{ else }}
<link rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
<link id="style-theme" rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
{{ end }}
<script src="{{ .Data.JScriptURL }}"></script>
</head>
@ -28,13 +28,15 @@
{{ end }}
<input class="sort-menu" type="checkbox" id="sort-menu"/>
<label class="sort-button no-dec" for="sort-menu" title="Order and Sort Options"><div><img src="{{ .Data.SortImageLocation }}" width="64px" alt='&#8595;'></div></label>
<form class="so-pane" action="?" method="get" id="so-form">
<div class="so-pane" id="so-pane">
<form action="?" method="get" id="so-form">
{{ if .Light }}
<input id="so-theme" type="hidden" name="light" />
{{ end }}
<div>
{{ $sort := 0 }}
<label class="no-dec" for="so-order">Order by:</label>
<select name="order" id="so-order">
<div><label class="no-dec" for="so-order">Order by:</label></div>
<div><select name="order" id="so-order">
{{ if eq .OrderStartDate 0 }}
<option value="start">Start Date</option>
{{ else }}
@ -59,9 +61,11 @@
<option value="duration" selected>Duration</option>
{{ $sort = .OrderDuration }}
{{ end }}
</select>
<label class="no-dec" for="so-sort">Sort:</label>
<select name="sort" id="so-sort">
</select></div>
</div>
<div>
<div><label class="no-dec" for="so-sort">Sort:</label></div>
<div><select name="sort" id="so-sort">
{{ if gt $sort 0 }}
<option value="asc" selected>Ascending</option>
{{ else }}
@ -72,9 +76,13 @@
{{ else }}
<option value="desc">Descending</option>
{{ end }}
</select>
<input id="so-submit" type="submit" value="Commit">
</select></div>
</div>
<div class="so-pane-full">
<span><input id="so-submit" type="submit" value="Commit"></span>
</div>
</form>
</div>
<input class="nav-menu" type="checkbox" id="nav-menu"/>
<label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
<nav class="nav" id="nav">
@ -85,10 +93,10 @@
</ul>
</nav>
</header>
<main class="main-box">
<main class="main-box flex-col">
<div>
<div class="item-table">
<div>
<div class="item-table flex-col">
<div class="item-heading">
<div class="item-table-full">
<div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
</div>
@ -96,11 +104,6 @@
<div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
</div>
</div>
<div class="small-only-row">
<div class="item-table-full">
<div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
</div>
</div>
<div>
<div class="item-table-full">
<div class="content">{{ .Data.About.GetContent }}</div>
@ -109,17 +112,12 @@
<div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
</div>
</div>
<div class="small-only-row">
<div class="item-table-full">
<div class="centered"><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
</div>
</div>
</div>
</div>
{{ range .GetEntries }}
<div>
<div class="item-table">
<div>
<div class="item-table flex-col">
<div class="item-heading">
<div class="item-table-full">
<div class="centered"><h1>{{ .Name }}</h1></div>
</div>
@ -131,15 +129,6 @@
{{ end }}
</div>
</div>
<div class="small-only-row">
<div class="item-table-full">
{{ if eq .GetStartDate .GetEndDate }}
<div class="centered"><h4>{{ .GetStartDate }}</h4></div>
{{ else }}
<div class="centered"><h4>{{ .GetStartDate }} - {{ .GetEndDate }}</h4></div>
{{ end }}
</div>
</div>
<div>
<div class="item-table-full">
<div class="content">{{ .GetContent }}</div>
@ -157,23 +146,9 @@
</div>
</div>
</div>
<div class="small-only-row">
<div class="item-table-full">
<div class="centered">
{{ if eq .VideoLocation "" }}
<img src="{{ $.Data.NoVideoImageLocation }}" alt="No Video" width="360px">
{{ else }}
<video controls width="360px">
<source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
<a href="{{ .VideoLocation }}">The Video</a>
</video>
{{ end }}
</div>
</div>
</div>
{{ if not (eq .GetImageCount 0) }}
<div class="item-table-caption">
<div class="image-box">
<div class="image-box flex-row">
{{ range .GetImages }}
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
{{ end }}
@ -181,9 +156,11 @@
</div>
{{ end }}
</div>
<!-- This needs to be moved into a script tag along with other stuff not here yet for JS support
<div class="data-hold">{{ .GetInt64Duration }}</div>
<div class="data-hold">{{ .GetStartDateHTML }}</div>
<div class="data-hold">{{ .GetEndDateHTML }}</div>
-->
</div>
{{ end }}
</main>

View File

@ -0,0 +1,4 @@
/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/

View File

@ -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;
@ -9,10 +13,10 @@ a{
.header, .nav, footer, .so-pane{
background-color: #e2e2e1;
}
.home-button > div, .sort-button > div, .menu a, .so-pane > *{
.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
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 > form > div > span > input, .so-pane > form > div > div > select{
background-color: #9f9f9e;
}
.hmb-line, .hmb-line::before, .hmb-line::after{
@ -23,14 +27,12 @@ a{
}
.item-table{
background-color: #c0c0c0;
}
.so-pane{
border-color: #c0c0c0;
}
.item-table > div > div, .item-table-caption{
border-color: #0a214c;
}
.image-box{
.so-pane, .header{
border-color: #909090;
}
.image-box, .item-heading{
background-color: #b0b0b0;
}
.image-box > a{

View File

@ -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 {