alfred/cityuni-webserver
1
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Captain ALM 2022-07-29 15:58:51 +01:00
parent e1e78655bd
commit 9de4952c91
Signed by: alfred
GPG Key ID: 4E4ADD02609997B1
6 changed files with 70 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
base.css
View File

@ -1,3 +1,7 @@
/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -27,6 +31,7 @@ main{
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 100;
} }
.home-button, .sort-button{ .home-button, .sort-button{
display: inline-block; display: inline-block;
@ -65,7 +70,7 @@ main{
.so-pane > label{ .so-pane > label{
background-color: transparent; background-color: transparent;
} }
.nav-menu, .sort-menu, .data-hold{ .nav-menu, .sort-menu{
display: none; display: none;
} }
.menu a{ .menu a{
@ -98,21 +103,21 @@ main{
.hmb-line::after{ .hmb-line::after{
top: -5px; top: -5px;
} }
.nav-menu:checked ~ nav{ .nav-menu:checked ~ nav, .nav-open{
max-height: 100%; max-height: 100%;
} }
.nav-menu:checked ~ .hmb .hmb-line{ .nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
background: transparent; 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); transform: rotate(-45deg);
top:0; 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); transform: rotate(45deg);
top:0; top:0;
} }
.sort-menu:checked ~ .so-pane{ .sort-menu:checked ~ .so-pane, .so-pane-open{
display: block; display: block;
box-sizing: content-box; box-sizing: content-box;
position: fixed; position: fixed;
@ -125,7 +130,17 @@ main{
border-style: solid; border-style: solid;
border-width: 2px; 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: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -142,17 +157,6 @@ main{
align-content: center; align-content: center;
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;
}
.item-table > div{ .item-table > div{
display: table-row; display: table-row;
background-color: transparent; background-color: transparent;
@ -177,9 +181,13 @@ main{
width: 100%; width: 100%;
} }
.item-table-360{ .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: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -205,21 +213,17 @@ main{
} }
@media (min-width: 560px){ @media (min-width: 560px){
.main-box > div, footer > p{ .main-box > div, footer > p{
margin: 5px; margin: 10px;
} }
.item-table-360{ .item-table-full{
display: table-cell; width: -webkit-calc(100% - 360px);
vertical-align: middle; width: -moz-calc(100% - 360px);
width: 360px; width: calc(100% - 360px);
overflow: hidden;
} }
.image-box > a{ .image-box > a{
border-width: 4px; border-width: 4px;
margin: 10px; margin: 10px;
} }
.small-only-row{
display: none !important;
}
} }
@media (min-width: 640px){ @media (min-width: 640px){
.nav{ .nav{

6
dark.css
View File

@ -1,3 +1,7 @@
/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
body{ body{
color: #f9f9f9; color: #f9f9f9;
background-color: #050506; background-color: #050506;
@ -12,7 +16,7 @@ a{
.home-button > div, .sort-button > div, .menu a, .so-pane > *{ .home-button > div, .sort-button > div, .menu a, .so-pane > *{
color: #e0e0e0; 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; background-color: #606061;
} }
.hmb-line, .hmb-line::before, .hmb-line::after{ .hmb-line, .hmb-line::before, .hmb-line::after{

53
index.go.html
View File

@ -7,9 +7,9 @@
<title>City University Portfolio</title> <title>City University Portfolio</title>
<link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/> <link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/>
{{ if .Light }} {{ if .Light }}
<link rel="stylesheet" href="{{ .Data.CSSLightURL }}"/> <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
{{ else }} {{ else }}
<link rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/> <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
{{ end }} {{ end }}
<script src="{{ .Data.JScriptURL }}"></script> <script src="{{ .Data.JScriptURL }}"></script>
</head> </head>
@ -85,10 +85,10 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main class="main-box"> <main class="main-box flex-col">
<div> <div>
<div class="item-table"> <div class="item-table flex-col">
<div> <div class="flex-row">
<div class="item-table-full"> <div class="item-table-full">
<div class="centered"><h1>{{ .Data.About.Title }}</h1></div> <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
</div> </div>
@ -96,12 +96,7 @@
<div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div> <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
</div> </div>
</div> </div>
<div class="small-only-row"> <div class="flex-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="item-table-full">
<div class="content">{{ .Data.About.GetContent }}</div> <div class="content">{{ .Data.About.GetContent }}</div>
</div> </div>
@ -109,17 +104,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><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>
<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>
</div> </div>
{{ range .GetEntries }} {{ range .GetEntries }}
<div> <div>
<div class="item-table"> <div class="item-table">
<div> <div class="flex-row">
<div class="item-table-full"> <div class="item-table-full">
<div class="centered"><h1>{{ .Name }}</h1></div> <div class="centered"><h1>{{ .Name }}</h1></div>
</div> </div>
@ -131,16 +121,7 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
<div class="small-only-row"> <div class="flex-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="item-table-full">
<div class="content">{{ .GetContent }}</div> <div class="content">{{ .GetContent }}</div>
</div> </div>
@ -157,23 +138,9 @@
</div> </div>
</div> </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) }} {{ if not (eq .GetImageCount 0) }}
<div class="item-table-caption"> <div class="item-table-caption flex-row">
<div class="image-box"> <div class="image-box flex-row">
{{ range .GetImages }} {{ range .GetImages }}
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a> <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
{{ end }} {{ end }}

4
index.js
View File

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

6
light.css
View File

@ -1,3 +1,7 @@
/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
body{ body{
color: #060606; color: #060606;
background-color: #fafaf9; background-color: #fafaf9;
@ -12,7 +16,7 @@ a{
.home-button > div, .sort-button > div, .menu a, .so-pane > *{ .home-button > div, .sort-button > div, .menu a, .so-pane > *{
color: #1f1f1f; 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; background-color: #9f9f9e;
} }
.hmb-line, .hmb-line::before, .hmb-line::after{ .hmb-line, .hmb-line::before, .hmb-line::after{

25
pageHandler/pages/index/data.go
View File

@ -3,18 +3,19 @@ package index
import "html/template" import "html/template"
type DataYaml struct { type DataYaml struct {
HeaderLinks map[string]template.URL `yaml:"headerLinks"` HeaderLinks map[string]template.URL `yaml:"headerLinks"`
CSSBaseURL template.URL `yaml:"cssBaseURL"` CSSBaseURL template.URL `yaml:"cssBaseURL"`
CSSLightURL template.URL `yaml:"cssLightURL"` CSSLightURL template.URL `yaml:"cssLightURL"`
CSSDarkURL template.URL `yaml:"cssDarkURL"` CSSDarkURL template.URL `yaml:"cssDarkURL"`
JScriptURL template.URL `yaml:"jScriptURL"` JScriptURL template.URL `yaml:"jScriptURL"`
NoVideoImageLocation template.URL `yaml:"noVideoImageLocation"` PlayVideoImageLocation template.URL `yaml:"playVideoImageLocation"`
LogoImageLocation template.URL `yaml:"logoImageLocation"` NoVideoImageLocation template.URL `yaml:"noVideoImageLocation"`
SunImageLocation template.URL `yaml:"sunImageLocation"` LogoImageLocation template.URL `yaml:"logoImageLocation"`
MoonImageLocation template.URL `yaml:"moonImageLocation"` SunImageLocation template.URL `yaml:"sunImageLocation"`
SortImageLocation template.URL `yaml:"sortImageLocation"` MoonImageLocation template.URL `yaml:"moonImageLocation"`
About AboutYaml `yaml:"about"` SortImageLocation template.URL `yaml:"sortImageLocation"`
Entries []EntryYaml `yaml:"entries"` About AboutYaml `yaml:"about"`
Entries []EntryYaml `yaml:"entries"`
} }
func (dy DataYaml) GetHeaderLabels() []string { func (dy DataYaml) GetHeaderLabels() []string {