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

Switch main to flex box.
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Captain ALM 2022-07-26 22:13:09 +01:00
parent 1fce0a6cf4
commit 98b1380d2a
Signed by: alfred
GPG Key ID: 4E4ADD02609997B1
3 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
base.css
View File

@ -79,6 +79,28 @@ main{
transform: rotate(45deg); transform: rotate(45deg);
top:0; top:0;
} }
.main-box{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-content: center;
align-content: center;
width: 100%;
}
.main-box > div{
margin: 3px 0;
padding: 2px;
box-sizing: content-box;
}
.main-table{ .main-table{
display: table; display: table;
width: 100%; width: 100%;
@ -114,7 +136,7 @@ main{
padding: 2px; padding: 2px;
} }
.item-table-caption{ .item-table-caption{
display: table-caption; display: table-caption !important;
caption-side: bottom; caption-side: bottom;
} }
.item-table-full, .item-table-360, .item-table-caption{ .item-table-full, .item-table-360, .item-table-caption{
@ -156,6 +178,9 @@ main{
margin: 2px; margin: 2px;
} }
@media (min-width: 480px){ @media (min-width: 480px){
.main-box > div{
margin: 5px;
}
.main-table > div > div > div{ .main-table > div > div > div{
margin: 5px; margin: 5px;
} }

2
dark.css
View File

@ -27,7 +27,7 @@ a{
.hmb-line, .hmb-line::before, .hmb-line::after{ .hmb-line, .hmb-line::before, .hmb-line::after{
background: #e0e0e0; background: #e0e0e0;
} }
.main-table{ .main-table, .main-box{
background-color: #0f0f0f; background-color: #0f0f0f;
} }
.item-table > div > div, .item-table-caption{ .item-table > div > div, .item-table-caption{

94
index.go.html
View File

@ -26,69 +26,61 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main class="main-table"> <main class="main-box">
<div> <div>
<div> <div class="item-table">
<div> <div>
<div class="item-table"> <div class="item-table-full">
<div> <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
<div class="item-table-full"> </div>
<div class="centered"><h1>{{ .Data.About.Title }}</h1></div> <div class="item-table-360">
</div> <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
<div class="item-table-360"> </div>
<div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div> </div>
</div> <div>
</div> <div class="item-table-full">
<div> <div>{{ .Data.About.GetContent }}</div>
<div class="item-table-full"> </div>
<div>{{ .Data.About.GetContent }}</div> <div class="item-table-360">
</div> <div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="Image of Me." width="360px"></a></div>
<div class="item-table-360">
<div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="Image of Me." width="360px"></a></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{ range .Data.Entries }} {{ range .Data.Entries }}
<div> <div>
<div> <div class="item-table">
<div> <div>
<div class="item-table"> <div class="item-table-full">
<div> <div class="centered"><h1>{{ .Name }}</h1></div>
<div class="item-table-full"> </div>
<div class="centered"><h1>{{ .Name }}</h1></div> <div class="item-table-360">
</div> {{ if eq .GetStartDate .GetEndDate }}
<div class="item-table-360"> <div class="centered"><h4>{{ .GetStartDate }}</h4></div>
{{ if eq .GetStartDate .GetEndDate }} {{ else }}
<div class="centered"><h4>{{ .GetStartDate }}</h4></div> <div class="centered"><h4>{{ .GetStartDate }} - {{ .GetEndDate }}</h4></div>
{{ else }}
<div class="centered"><h4>{{ .GetStartDate }} - {{ .GetEndDate }}</h4></div>
{{ end }}
</div>
</div>
<div>
<div class="item-table-full">
<div>{{ .GetContent }}</div>
</div>
<div class="item-table-360">
<div><video controls="" width="360">
<source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
</video></div>
</div>
</div>
{{ if not (eq .GetImageCount 0) }}
<div class="item-table-caption">
<div class="image-box">
{{ range .GetImages }}
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" width="144"></a>
{{ end }}
</div>
</div>
{{ end }} {{ end }}
</div> </div>
</div> </div>
<div>
<div class="item-table-full">
<div>{{ .GetContent }}</div>
</div>
<div class="item-table-360">
<div><video controls="" width="360">
<source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
</video></div>
</div>
</div>
{{ if not (eq .GetImageCount 0) }}
<div class="item-table-caption">
<div class="image-box">
{{ range .GetImages }}
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" width="144"></a>
{{ end }}
</div>
</div>
{{ end }}
</div> </div>
</div> </div>
{{ end }} {{ end }}