Update layout for full flex-box with table fallback.
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
e1e78655bd
commit
9de4952c91
GPG Key ID:
4E4ADD02609997B1
62
base.css
62
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{
|
||||
|
||||
6
dark.css
6
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{
|
||||
|
||||
@ -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
4
index.js
@ -0,0 +1,4 @@
|
||||
/*
|
||||
This file is (C) Captain ALM
|
||||
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
|
||||
*/
|
||||
@ -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{
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user