Switch main to flex box.
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
1fce0a6cf4
commit
98b1380d2a
27
base.css
27
base.css
@ -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
2
dark.css
@ -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{
|
||||||
|
@ -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 }}
|
||||||
|
Loading…
Reference in New Issue
Block a user