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

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

53
index.go.html
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>
@ -85,10 +85,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="flex-row">
<div class="item-table-full">
<div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
</div>
@ -96,12 +96,7 @@
<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="flex-row">
<div class="item-table-full">
<div class="content">{{ .Data.About.GetContent }}</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>
</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="flex-row">
<div class="item-table-full">
<div class="centered"><h1>{{ .Name }}</h1></div>
</div>
@ -131,16 +121,7 @@
{{ 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="flex-row">
<div class="item-table-full">
<div class="content">{{ .GetContent }}</div>
</div>
@ -157,23 +138,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="item-table-caption flex-row">
<div class="image-box flex-row">
{{ range .GetImages }}
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
{{ 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{
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{

25
pageHandler/pages/index/data.go
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 {