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

master
Ad5001 1 year ago
parent 9c4d84b35b
commit ff89fb94a2
Signed by: Ad5001
GPG Key ID: EF45F9C6AFE20160
  1. 9
      i18n/en.json
  2. 9
      i18n/fr.json
  3. 44
      layouts/_default/app.html
  4. 31
      layouts/apps-list.html
  5. 4
      layouts/index.html
  6. 2
      layouts/partials/footer.html
  7. 2
      layouts/partials/header.html
  8. 27
      layouts/partials/section-app-header.html
  9. 4
      static/css/blocks.css
  10. 90
      static/css/common.css
  11. 2
      static/css/font.css
  12. 8
      static/css/sections.css
  13. BIN
      static/icons/apps/accountfree.png
  14. BIN
      static/icons/apps/ad5001.eu.png
  15. BIN
      static/icons/apps/logarithmplotter.png
  16. BIN
      static/icons/apps/omegamma.png
  17. 1
      static/icons/platform/Firefox.svg
  18. BIN
      static/img/preview/accountfree.png
  19. BIN
      static/img/preview/logarithmplotter.png
  20. BIN
      static/img/preview/nowox.png
  21. 11
      theme.toml

@ -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"
}
}

@ -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"
}
}

@ -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>

@ -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 }}

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

@ -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>

@ -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">

@ -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 }}

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

@ -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;
}
}

@ -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;
}

@ -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;

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

@ -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

@ -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 = ""

Loading…
Cancel
Save