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

2 years ago · ff89fb94a2
parent 9c4d84b35b
commit ff89fb94a2
21 changed files with 222 additions and 22 deletions
--- a/i18n/en.json
+++ b/i18n/en.json
@ -2,6 +2,9 @@
    "worksOn": {
        "other": "Works on: "
    },
+    "availableOn": {
+        "other": "Available on "
+    },
    "status": {
        "other": "Status: "
    },
@ -13,6 +16,12 @@
    },
    "translated": {
        "other": "Translated in: "
+    },
+    "en": {
+        "other": "English"
+    },
+    "fr": {
+        "other": "French"
    }
 }
 
--- a/i18n/fr.json
+++ b/i18n/fr.json
@ -2,6 +2,9 @@
    "worksOn": {
        "other": "Marche sur : "
    },
+    "availableOn": {
+        "other": "Disponible sur "
+    },
    "status": {
        "other": "Status : "
    },
@ -13,6 +16,12 @@
    },
    "translated": {
        "other": "Traduit en : "
+    },
+    "en": {
+        "other": "English"
+    },
+    "fr": {
+        "other": "French"
    }
 }
 
--- a/layouts/_default/app.html
+++ b/layouts/_default/app.html
@ -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>
--- a/layouts/apps-list.html
+++ b/layouts/apps-list.html
@ -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 }}
+
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,4 +0,0 @@
-{{ define "main" }}
-<div style="background: #A08888">
-<h1>Test</h1>
-{{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -13,7 +13,7 @@
        <div class="text-center col3">
            {{ .Site.Copyright }}
        </div>
-        <div class="col3 right-center">
+        <div class="col3 text-right">
            {{ .Site.Params.usingTheme }} <a href="/omegamma">Omegamma</a><br>
            {{ .Site.Params.poweredBy }} <a href="https://gohugo.io">Hugo</a>
        </div>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -48,7 +48,7 @@
                    <a href="#" role="button">
                        <li>
                            <img src="/icons/lang.svg" class="icon-as-text"/>
-                            <span>{{ i18n "language" 1 }}</span>
+                            <span>{{ i18n "language" }}</span>
                        </li>
                    </a>
                    <ul class="sub-menu">
--- a/layouts/partials/section-app-header.html
+++ b/layouts/partials/section-app-header.html
@ -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 }}
--- a/static/css/blocks.css
+++ b/static/css/blocks.css
@ -40,7 +40,3 @@
    opacity: 1;
    max-height: 100%;
 }
-
-.padding-container {
-    padding: 1em;
-}
--- a/static/css/common.css
+++ b/static/css/common.css
@ -9,6 +9,14 @@ body {
    --footer-background: #111111; 
 }

+.content-center {
+    max-width: 75em;
+}
+
+.padding-container {
+    padding: 1em;
+}
+
 /* button */

 a[role=button] {
@ -44,19 +52,51 @@ a[role=button].primary:hover, a[role=button].secondary:hover {

 /* format */

+.fill-width {
+    width: 100%;
+}
+
 .center {
-    margin-right: auto;
-    margin-left: auto;
+    margin-right: auto !important;
+    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-align: center;
 }

-.right-center {
+.text-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 {
    width: 1em;
    height: 1em;
@ -72,10 +112,16 @@ a[role=button].primary:hover, a[role=button].secondary:hover {

 h1 {
    font-size: xx-large;
+    font-family: var(--light-font);
 }

 h2 {
    font-size: x-large;
+    font-family: var(--light-font);
+}
+
+p {
+    line-height: 1.5em;
 }

 .grid {
@ -88,6 +134,10 @@ h2 {
    display: flex !important;
 }

+.flex-right {
+    justify-content: flex-end;
+}
+
 /* Columns */
 .columns-container {
    display: flex;
@ -100,3 +150,37 @@ h2 {
 .col3 {
    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;
+    }
+}
--- a/static/css/font.css
+++ b/static/css/font.css
@ -5,7 +5,7 @@

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

--- a/static/css/sections.css
+++ b/static/css/sections.css
@ -8,6 +8,14 @@ section.section1 {
    padding-right: 1em;
 }

+section.section-header {
+    height: calc(100vh - 4em);
+}
+
+section.section-header > div {
+    height: 100%;
+}
+
 .section-end-triangle {
    width: 0;
    height: 0;
--- a/static/icons/apps/accountfree.png
+++ b/static/icons/apps/accountfree.png
--- a/static/icons/apps/ad5001.eu.png
+++ b/static/icons/apps/ad5001.eu.png
--- a/static/icons/apps/logarithmplotter.png
+++ b/static/icons/apps/logarithmplotter.png
--- a/static/icons/apps/omegamma.png
+++ b/static/icons/apps/omegamma.png
--- a/static/icons/platform/Firefox.svg
+++ b/static/icons/platform/Firefox.svg
@ -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>
--- a/static/img/preview/accountfree.png
+++ b/static/img/preview/accountfree.png
--- a/static/img/preview/logarithmplotter.png
+++ b/static/img/preview/logarithmplotter.png
--- a/static/img/preview/nowox.png
+++ b/static/img/preview/nowox.png
--- a/theme.toml
+++ b/theme.toml
@ -2,10 +2,10 @@
 # See https://github.com/gohugoio/hugoThemes#themetoml for an example

 name = "Omegamma"
-license = "MIT"
-licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
+license = "GNU GPL 3.0"
+licenselink = "https://github.com/Ad5001/Omegamma/blob/master/LICENSE"
 description = ""
-homepage = "http://example.com/"
+homepage = "https://apps.ad5001.eu/omegamma/"
 tags = []
 features = []
 min_version = "0.41.0"
@ -14,8 +14,3 @@ min_version = "0.41.0"
  name = ""
  homepage = ""

-# If porting an existing theme
-[original]
-  name = ""
-  homepage = ""
-  repo = ""
				`@ -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>