Layouts reorganisation, moving images, new layout for single app!

This commit is contained in:
Adsooi 2021-06-13 19:49:30 +02:00
parent 9c4d84b35b
commit ff89fb94a2
Signed by: Ad5001
GPG key ID: EF45F9C6AFE20160
21 changed files with 222 additions and 22 deletions

View file

@ -2,6 +2,9 @@
"worksOn": { "worksOn": {
"other": "Works on: " "other": "Works on: "
}, },
"availableOn": {
"other": "Available on "
},
"status": { "status": {
"other": "Status: " "other": "Status: "
}, },
@ -13,6 +16,12 @@
}, },
"translated": { "translated": {
"other": "Translated in: " "other": "Translated in: "
},
"en": {
"other": "English"
},
"fr": {
"other": "French"
} }
} }

View file

@ -2,6 +2,9 @@
"worksOn": { "worksOn": {
"other": "Marche sur : " "other": "Marche sur : "
}, },
"availableOn": {
"other": "Disponible sur "
},
"status": { "status": {
"other": "Status : " "other": "Status : "
}, },
@ -13,6 +16,12 @@
}, },
"translated": { "translated": {
"other": "Traduit en : " "other": "Traduit en : "
},
"en": {
"other": "English"
},
"fr": {
"other": "French"
} }
} }

44
layouts/_default/app.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
{{ partial "section-app-header.html" (dict "Data" .Params.SectionHeader "Site" .Site) }}
<br>
<!-- About section -->
<section class="center content-center padding-container">
<h1>{{ .Params.About.Title }}</h1>
<p>{{ .Params.About.Content | markdownify }}</p>
</section>
<!--<img class="center" src="{{ .Params.About.Screenshot | safeHTMLAttr }}"/>-->
<!-- other sections -->
{{ range .Params.Sections }}
<section class="center content-center columns-container padding-container">
{{ if eq .Type "text|image" }}
<div class="column col2 text-right vertical-center">
{{ .Content | markdownify }}
</div>
<div class="column col2">
<img class="vertical-center fill-width" src="/img/{{ .Image }}.png"/>
</div>
{{ else if eq .Type "image|text" }}
<div class="column col2">
<img class="vertical-center fill-width" src="/img/{{ .Image }}.png"/>
</div>
<div class="column col2 text-left vertical-center">
{{ .Content | markdownify }}
</div>
{{ else if eq .Type "text-image" }}
<div class="column text-center">
{{ .Content | markdownify }}
<img src="/img/{{ .Image }}"/>
</div>
{{ end }}
</section>
<br>
{{ end }}
</div>
{{- partial "footer.html" . -}}
</body>
</html>

31
layouts/apps-list.html Normal file
View file

@ -0,0 +1,31 @@
{{ define "main" }}
{{ partial "section1.html" (dict "Image" "/img/app0.png" "Content" .Content) }}
<div id="appslist" class="grid center">
{{ $site := .Site }}
{{ range .Site.Data.list }}
{{ $index := . }}
{{ $data := index $site.Data $site.Language.Lang }}
{{ with index $data.apps $index }}
<div class="padding-container">
<div class="block-preview" style="background-image: url(/img/preview/{{ $index }}.png);">
<div class="label">
<h2 class="flex">&nbsp;<img src="/icons/apps/{{ $index }}.png" class="icon-larger-text" alt=""/> {{ .name }}</h2>
<p class="show-on-hover">{{ .description }}</p>
<p class="show-on-hover">{{ i18n "status" }} {{ .status }}</p>
<p class="flex show-on-hover">{{ i18n "worksOn" }}&nbsp;
{{ range .platforms }}<img src="/icons/platform/{{ . }}.svg" alt="{{ . }}" title="{{ . }}" class="icon-larger-text" />{{ end }}
</p>
<p class="flex show-on-hover">{{ i18n "translated" }}&nbsp;
{{ range .translated }}<img src="/icons/flag/{{ . }}.svg" alt="{{ i18n . }}" title="{{ i18n . }}" class="icon-larger-text" />{{ end }}
</p>
<div class="show-on-hover">
<a href="{{ $index }}" role="button" class="primary"><img src="/icons/lookup.svg" class="icon-as-text" alt=""/>{{ i18n "learnMore" }}</a>&nbsp;
</div>
</div>
</div>
</div>
{{ end }}
{{ end }}
</div>
{{ end }}

View file

@ -1,4 +0,0 @@
{{ define "main" }}
<div style="background: #A08888">
<h1>Test</h1>
{{ end }}

View file

@ -13,7 +13,7 @@
<div class="text-center col3"> <div class="text-center col3">
{{ .Site.Copyright }} {{ .Site.Copyright }}
</div> </div>
<div class="col3 right-center"> <div class="col3 text-right">
{{ .Site.Params.usingTheme }} <a href="/omegamma">Omegamma</a><br> {{ .Site.Params.usingTheme }} <a href="/omegamma">Omegamma</a><br>
{{ .Site.Params.poweredBy }} <a href="https://gohugo.io">Hugo</a> {{ .Site.Params.poweredBy }} <a href="https://gohugo.io">Hugo</a>
</div> </div>

View file

@ -48,7 +48,7 @@
<a href="#" role="button"> <a href="#" role="button">
<li> <li>
<img src="/icons/lang.svg" class="icon-as-text"/> <img src="/icons/lang.svg" class="icon-as-text"/>
<span>{{ i18n "language" 1 }}</span> <span>{{ i18n "language" }}</span>
</li> </li>
</a> </a>
<ul class="sub-menu"> <ul class="sub-menu">

View file

@ -0,0 +1,27 @@
<!-- heading sections for apps -->
{{ $data := index .Site.Data .Site.Language.Lang }}
{{ $appdata := index $data.apps .Data.AppIndex }}
{{ with .Data }}
<section style="background: {{ .Background | safeCSS }};" class="section-header">
<div class="columns-container">
<div class="column col3 text-right vertical-center {{ if .TextWhite }}text-white{{ end }}">
<br>
<h1 class="flex flex-right">&nbsp;<img src="/icons/apps/{{ .AppIndex | safeHTML }}.png" class="icon-larger-text" alt=""/>{{ $appdata.name | safeHTML }}</h1>
<h2>{{ $appdata.description | safeHTML }}</h2>
{{ if .ShowPlatforms }}
<p class="flex flex-right">{{ i18n "availableOn" }}&nbsp;
{{ range $appdata.platforms }}<img src="/icons/platform/{{ . }}.svg" alt="{{ . }}" title="{{ . }}" class="icon-larger-text icon-monochrome" />{{ end }}
</p>
{{ end }}
<br>
</div>
<div class="column col2-3 flex">
<img class="vertical-center-img" src="/img/full/{{ .AppIndex }}.png"/>
</div>
</div>
<div style="background: {{ .BottomBackground | safeCSS }}; height: {{ .BottomHeight | safeCSS }}; width: 100%; margin-top: -{{ .BottomHeight | safeCSS }};">
<div style="float: left">{{ .BottomLeft | safeHTML }}</div>
<div style="float: right">{{ .BottomRight | safeHTML }}</div>
</div>
</section>
{{ end }}

View file

@ -40,7 +40,3 @@
opacity: 1; opacity: 1;
max-height: 100%; max-height: 100%;
} }
.padding-container {
padding: 1em;
}

View file

@ -9,6 +9,14 @@ body {
--footer-background: #111111; --footer-background: #111111;
} }
.content-center {
max-width: 75em;
}
.padding-container {
padding: 1em;
}
/* button */ /* button */
a[role=button] { a[role=button] {
@ -44,19 +52,51 @@ a[role=button].primary:hover, a[role=button].secondary:hover {
/* format */ /* format */
.fill-width {
width: 100%;
}
.center { .center {
margin-right: auto; margin-right: auto !important;
margin-left: auto; margin-left: auto !important;
}
img.center {
display: block;
max-width: 100%;
}
.vertical-center {
margin-top: auto !important;
margin-bottom: auto !important;
max-height: 100%;
}
/* workaround for sometimes images don't position correctly vertically */
.vertical-center-img {
margin: auto;
}
.text-left {
text-align: left;
} }
.text-center { .text-center {
text-align: center; text-align: center;
} }
.right-center { .text-right {
text-align: right; text-align: right;
} }
.text-white {
color: white;
}
.text-white .icon-monochrome {
filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(104%) contrast(104%);
}
.icon-as-text { .icon-as-text {
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -72,10 +112,16 @@ a[role=button].primary:hover, a[role=button].secondary:hover {
h1 { h1 {
font-size: xx-large; font-size: xx-large;
font-family: var(--light-font);
} }
h2 { h2 {
font-size: x-large; font-size: x-large;
font-family: var(--light-font);
}
p {
line-height: 1.5em;
} }
.grid { .grid {
@ -88,6 +134,10 @@ h2 {
display: flex !important; display: flex !important;
} }
.flex-right {
justify-content: flex-end;
}
/* Columns */ /* Columns */
.columns-container { .columns-container {
display: flex; display: flex;
@ -100,3 +150,37 @@ h2 {
.col3 { .col3 {
width: 33%; width: 33%;
} }
.col2-3 {
width: 66%;
}
.col2 {
width: 50%;
}
@media screen and (max-width: 700px) {
:not(footer) > .columns-container {
display: block;
}
.column {
width: 100%;
}
.column > img {
width: 100%;
}
.column .text-right, .column.text-right, .column .text-left, .column.text-left {
text-align: center;
}
{
text-align: center;
}
.column .flex-right {
justify-content: center;
}
}

View file

@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: "Metropolis"; font-family: "Metropolis";
src: url(/fonts/metropolis/Metropolis-Regular.otf) format("opentype"); src: url(/fonts/metropolis/Metropolis-Bold.otf) format("opentype");
font-weight: bold; font-weight: bold;
} }

View file

@ -8,6 +8,14 @@ section.section1 {
padding-right: 1em; padding-right: 1em;
} }
section.section-header {
height: calc(100vh - 4em);
}
section.section-header > div {
height: 100%;
}
.section-end-triangle { .section-end-triangle {
width: 0; width: 0;
height: 0; height: 0;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181 1.832-2.066 4.499-3.378 7.472-3.378 5.912 0 8.263 4.283 8.003 6.657z"/></svg>

After

Width:  |  Height:  |  Size: 819 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

View file

@ -2,10 +2,10 @@
# See https://github.com/gohugoio/hugoThemes#themetoml for an example # See https://github.com/gohugoio/hugoThemes#themetoml for an example
name = "Omegamma" name = "Omegamma"
license = "MIT" license = "GNU GPL 3.0"
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE" licenselink = "https://github.com/Ad5001/Omegamma/blob/master/LICENSE"
description = "" description = ""
homepage = "http://example.com/" homepage = "https://apps.ad5001.eu/omegamma/"
tags = [] tags = []
features = [] features = []
min_version = "0.41.0" min_version = "0.41.0"
@ -14,8 +14,3 @@ min_version = "0.41.0"
name = "" name = ""
homepage = "" homepage = ""
# If porting an existing theme
[original]
name = ""
homepage = ""
repo = ""