Layouts reorganisation, moving images, new layout for single app!
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
@ -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
|
@ -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"> <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" }}
|
||||||
|
{{ range .platforms }}<img src="/icons/platform/{{ . }}.svg" alt="{{ . }}" title="{{ . }}" class="icon-larger-text" />{{ end }}
|
||||||
|
</p>
|
||||||
|
<p class="flex show-on-hover">{{ i18n "translated" }}
|
||||||
|
{{ 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
{{ define "main" }}
|
|
||||||
<div style="background: #A08888">
|
|
||||||
<h1>Test</h1>
|
|
||||||
{{ end }}
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
27
layouts/partials/section-app-header.html
Normal 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"> <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" }}
|
||||||
|
{{ 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 }}
|
|
@ -40,7 +40,3 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding-container {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 3.4 KiB |
1
static/icons/platform/Firefox.svg
Normal 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 |
Before Width: | Height: | Size: 112 KiB |
Before Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 66 KiB |
11
theme.toml
|
@ -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 = ""
|
|
||||||
|
|