diff --git a/assets/scss/components/blocks/preview.scss b/assets/scss/components/blocks/preview.scss index 72fb91f..ea966c0 100644 --- a/assets/scss/components/blocks/preview.scss +++ b/assets/scss/components/blocks/preview.scss @@ -25,22 +25,41 @@ background-repeat: no-repeat; // Base label setting - .label { - transition: max-height 0.15s ease-in; - max-height: 20%; - overflow: hidden; - bottom: 0; - background-color: #FFFFFFDD; - padding: 0.5em; - bottom: 0; + .label-link { + text-decoration: none; + color: black; - // Hide this information by default - .show-on-hover { - display: none; - transition: opacity 0.15s; - opacity: 0; - max-height: 0; - background: none; + .label { + transition: max-height 0.15s ease-in; + max-height: 20%; + overflow: hidden; + bottom: 0; + background-color: #FFFFFFDD; + padding: 0.5em; + bottom: 0; + + .app-name { + float: left; + } + + .right-icon { + float: right; + line-height: 1em; + } + + // Hide this information by default + .show-on-hover { + display: none; + transition: opacity 0.15s; + opacity: 0; + max-height: 0; + background: none; + } + + p[role=button] { + line-height: 1em; + width: max-content; + } } } diff --git a/assets/scss/components/common/button.scss b/assets/scss/components/common/button.scss index cadac69..412c64e 100644 --- a/assets/scss/components/common/button.scss +++ b/assets/scss/components/common/button.scss @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -a[role=button] { +[role=button] { text-decoration: none; color: black; cursor: pointer; @@ -45,6 +45,6 @@ a[role=button] { } } -.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white { +.text-white [role=button]:not(.primary), [role=button]:not(.primary).text-white { color: white; } diff --git a/assets/scss/components/common/centering.scss b/assets/scss/components/common/centering.scss new file mode 100644 index 0000000..6d8ab43 --- /dev/null +++ b/assets/scss/components/common/centering.scss @@ -0,0 +1,40 @@ +/** + * Omegamma - Hugo theme for ad5001.eu and related websites. + * Copyright (C) 2021 Ad5001 + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +.center { + 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; + max-height: 100%; +} diff --git a/assets/scss/components/common/headers.scss b/assets/scss/components/common/headers.scss new file mode 100644 index 0000000..ba0f5a1 --- /dev/null +++ b/assets/scss/components/common/headers.scss @@ -0,0 +1,32 @@ +/** + * Omegamma - Hugo theme for ad5001.eu and related websites. + * Copyright (C) 2021 Ad5001 + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +h1 { + font-size: xx-large; + &.larger { + font-size: xxx-large; + } +} + +h2 { + font-size: x-large; +} + +h1, h2, h3 { + font-family: var(--light-font); +} diff --git a/assets/scss/components/common/icon.scss b/assets/scss/components/common/icon.scss new file mode 100644 index 0000000..2696567 --- /dev/null +++ b/assets/scss/components/common/icon.scss @@ -0,0 +1,122 @@ +/** + * Omegamma - Hugo theme for ad5001.eu and related websites. + * Copyright (C) 2021 Ad5001 + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +.icon-as-text { + width: 1em; + height: 1em; + margin-top: -0.05em; + margin-right: 0.5em; + vertical-align: middle; +} + +.icon-larger-text { + width: 1em; + height: 1em; + font-size: 1.4em; + margin-right: 0.35em; + margin-top: -0.14em; + vertical-align: middle; +} + +.icon-larger2-text { + width: 1em; + height: 1em; + font-size: 1.6em; + margin-right: 0.31em; + margin-top: -0.19em; + vertical-align: middle; +} + +.icon-twice-text { + width: 1em; + height: 1em; + font-size: 2em; + margin-right: 0.25em; + margin-top: -0.25em; + vertical-align: middle; +} + +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'omegicons'; + src: url('../font/omegicons.svg?71804627#omegicons') format('svg'); + } +} +*/ +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "omegicons"; + font-style: normal; + font-weight: normal; + speak: never; + + display: inline-block; + text-decoration: inherit; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + /* margin-left: .2em; */ + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-about:before { content: '\e800'; } /* '' */ +.icon-apps:before { content: '\e801'; } /* '' */ +.icon-bug:before { content: '\e802'; } /* '' */ +.icon-code:before { content: '\e803'; } /* '' */ +.icon-documentation:before { content: '\e804'; } /* '' */ +.icon-download:before { content: '\e805'; } /* '' */ +.icon-frameworks:before { content: '\e806'; } /* '' */ +.icon-free:before { content: '\e807'; } /* '' */ +.icon-git:before { content: '\e808'; } /* '' */ +.icon-keyboard:before { content: '\e809'; } /* '' */ +.icon-lang:before { content: '\e80a'; } /* '' */ +.icon-license:before { content: '\e80b'; } /* '' */ +.icon-lookup:before { content: '\e80c'; } /* '' */ +.icon-menu:before { content: '\e80d'; } /* '' */ +.icon-open-external:before { content: '\e80e'; } /* '' */ +.icon-person:before { content: '\e80f'; } /* '' */ +.icon-platforms:before { content: '\e810'; } /* '' */ +.icon-privacy:before { content: '\e811'; } /* '' */ +.icon-touch:before { content: '\e812'; } /* '' */ +.icon-wrench:before { content: '\e813'; } /* '' */ +.icon-firefox:before { content: '\e814'; } /* '' */ +.icon-linux:before { content: '\e815'; } /* '' */ +.icon-macosx:before { content: '\e816'; } /* '' */ +.icon-universal:before { content: '\e817'; } /* '' */ +.icon-web:before { content: '\e818'; } /* '' */ +.icon-windows:before { content: '\e819'; } /* '' */ +.icon-github:before { content: '\e81b'; } /* '' */ +.icon-mail:before { content: '\e81c'; } /* '' */ +.icon-mastodon:before { content: '\e81d'; } /* '' */ +.icon-twitter:before { content: '\e81e'; } /* '' */ diff --git a/assets/scss/components/common/padding.scss b/assets/scss/components/common/padding.scss new file mode 100644 index 0000000..25d4b36 --- /dev/null +++ b/assets/scss/components/common/padding.scss @@ -0,0 +1,43 @@ +/** + * Omegamma - Hugo theme for ad5001.eu and related websites. + * Copyright (C) 2021 Ad5001 + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +.padding-container { + padding: 1em; +} + +.padding-container-1 { + padding-left: 1em; + padding-right: 1em; +} + +.padding-container-point3 { + padding-left: .3em; + padding-right: .3em; +} + +.padding-container-3 { + padding-left: 3em; + padding-right: 3em; +} +@media screen and (max-width: 850px) { + .padding-container-1, .padding-container-3 { + padding-left: 0.5em; + padding-right: 0.5em; + } +} diff --git a/assets/scss/components/common/text.scss b/assets/scss/components/common/text.scss new file mode 100644 index 0000000..0751f12 --- /dev/null +++ b/assets/scss/components/common/text.scss @@ -0,0 +1,38 @@ +/** + * Omegamma - Hugo theme for ad5001.eu and related websites. + * Copyright (C) 2021 Ad5001 + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-white { + color: white; +} + +p, .text-content { + line-height: 1.5em; +} diff --git a/assets/scss/font.scss b/assets/scss/font.scss index 0584c5f..c0b8013 100644 --- a/assets/scss/font.scss +++ b/assets/scss/font.scss @@ -16,21 +16,39 @@ * along with this program. If not, see . */ +// Metropolis font @font-face { font-family: "Metropolis"; - src: url(/fonts/metropolis/Metropolis-Regular.otf) format("opentype"); + src: local('Metropolis'), + url(/fonts/metropolis/Metropolis-Regular.otf) format("opentype"); font-display: swap; } @font-face { font-family: "Metropolis"; - src: url(/fonts/metropolis/Metropolis-Bold.otf) format("opentype"); + src: local('Metropolis Bold'), + url(/fonts/metropolis/Metropolis-Bold.otf) format("opentype"); font-weight: bold; font-display: swap; } @font-face { font-family: "Metropolis Light"; - src: url(/fonts/metropolis/Metropolis-Light.otf) format("opentype"); + src: local('Metropolis Light'), + url(/fonts/metropolis/Metropolis-Light.otf) format("opentype"); + font-display: swap; +} + +// Omegicons font +@font-face { + font-family: 'omegicons'; + src: url('../fonts/omegicons/omegicons.eot?71804627'); + src: url('../fonts/omegicons/omegicons.eot?71804627#iefix') format('embedded-opentype'), + url('../fonts/omegicons/omegicons.woff2?71804627') format('woff2'), + url('../fonts/omegicons/omegicons.woff?71804627') format('woff'), + url('../fonts/omegicons/omegicons.ttf?71804627') format('truetype'), + url('../fonts/omegicons/omegicons.svg?71804627#omegicons') format('svg'); + font-weight: normal; + font-style: normal; font-display: swap; } diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss index feeaf10..f8bbee8 100644 --- a/assets/scss/footer.scss +++ b/assets/scss/footer.scss @@ -24,13 +24,17 @@ footer { a:not([role=button]) { color: #3DAEE9; } + + a[role=button] { + color: white; + } } .footer-social-list { display: flex; font-size: 30px; - a img { - margin: 0.3em; + a { + padding: 0.3em; } } diff --git a/assets/scss/header.scss b/assets/scss/header.scss index 94c4f20..94e18ef 100644 --- a/assets/scss/header.scss +++ b/assets/scss/header.scss @@ -170,13 +170,9 @@ nav { } /* removing white text from menu with light background */ - nav.menu-shown.text-white li a[role=button], nav.menu-shown .text-white li a[role=button], nav.menu-shown a[role=button].text-white { + nav.menu-shown.text-white [role=button], nav.menu-shown.text-white button { color: black; } - - nav.menu-shown.text-white .icon-monochrome { - filter: unset; - } nav.menu-shown.text-white .navbar-list li.background { background-color: var(--nav-background); diff --git a/layouts/_default/app.html b/layouts/_default/app.html index be214a2..58f3f4b 100644 --- a/layouts/_default/app.html +++ b/layouts/_default/app.html @@ -14,7 +14,6 @@

{{ .Params.About.Title }}

{{ .Params.About.Content | markdownify }}

- {{ range .Params.Sections }}
@@ -23,11 +22,11 @@ {{ .Content | markdownify }}
- + {{ .Alt }}
{{ else if eq .Type "image|text" }}
- + {{ .Alt }}
{{ .Content | markdownify }} @@ -35,7 +34,7 @@ {{ else if eq .Type "text/image" }}
{{ .Content | markdownify }} - + {{ .Alt }}
{{ else if eq .Type "text" }}
@@ -47,64 +46,58 @@ {{ end }}
-

{{ i18n "technicalSheet" }}

+

{{ i18n "technicalSheet" }}

- + {{ i18n "supportedPlatforms" }} {{ partial "platforms.html" $appdata.platforms }}

- + {{ i18n "translated" }} {{ partial "translations.html" $appdata.translated }}

- + {{ i18n "latestVersion" }}v{{ $appdata.version }}

- + {{ i18n "status" }}{{ $appdata.status }}

- + {{ i18n "programingLanguages" }}{{ delimit $appdata.languages ", " }}

- + {{ i18n "frameworks" }} {{ delimit $appdata.frameworks ", " | markdownify }}

{{ if $appdata.touchfriendly }}

- + {{ i18n "touchFriendly" }}

{{ end }} {{ if $appdata.keyboardoriented }}

- + {{ i18n "keyboardOriented" }}

{{ end }}

- + {{ i18n "license" }} {{ $appdata.license | markdownify }}

  - {{ range .Params.Technical.Links }} - - {{ end }} + {{ partial "links.html" .Params.Technical.Links }}
{{ if .Params.Download.Show }}
-

{{ i18n "download" }}

+

{{ i18n "download" }}

{{ i18n "downloadApp" (dict "Name" .Name "Platforms" (delimit $appdata.platforms ", ")) }}

@@ -113,7 +106,7 @@ {{ range $download.Categories }}
- {{ .Title }} + {{ .Title }}
{{ $links := index $download.Links .Name }} diff --git a/layouts/apps-list.html b/layouts/apps-list.html index 89001c1..f314717 100644 --- a/layouts/apps-list.html +++ b/layouts/apps-list.html @@ -1,5 +1,5 @@ {{ define "main" }} - {{ partial "section1.html" (dict "Image" "/img/app0.png" "Content" .Content) }} + {{ partial "section1.html" (dict "Image" "/img/app0.webp" "Content" .Content) }}
{{ $site := .Site }} {{ range .Site.Data.list }} @@ -7,21 +7,27 @@ {{ $data := index $site.Data $site.Language.Lang }} {{ with index $data.apps $index }}
-
-
-

  {{ .name }}

-

{{ .description }}

-

{{ i18n "status" }} {{ .status }}

-

{{ i18n "worksOn" }}  - {{ partial "platforms.html" .platforms }} -

-

{{ i18n "translated" }}  - {{ partial "translations.html" .translated }} -

-
- {{ i18n "learnMore" }}  +
+ +
+

+ +   {{ .name }} + + +   +

+

{{ .description }}

+

{{ i18n "status" }} {{ .status }}

+

{{ i18n "worksOn" }}  + {{ partial "platforms.html" .platforms }} +

+

{{ i18n "translated" }}  + {{ partial "translations.html" .translated }} +

+

{{ i18n "learnMore" }}

-
+
{{ end }} diff --git a/layouts/main-index.html b/layouts/main-index.html index 8adf3b5..7785eb8 100644 --- a/layouts/main-index.html +++ b/layouts/main-index.html @@ -6,13 +6,7 @@

Ad5001's iconAd5001

{{ .Params.Description | markdownify }}
  - {{ range .Params.Links }} - - {{ end }} + {{ partial "links.html" .Params.Links }}


@@ -27,7 +21,7 @@

- Free (as in freedom) icon + {{ .Params.Cards.FLOSS.Title }}

@@ -35,20 +29,14 @@


  - {{ range .Params.Cards.FLOSS.Links }} - - {{ end }} + {{ partial "links.html" .Params.Cards.FLOSS.Links }}

- Privacy icon + {{ .Params.Cards.Privacy.Title }}

@@ -56,20 +44,14 @@


  - {{ range .Params.Cards.Privacy.Links }} - - {{ end }} + {{ partial "links.html" .Params.Cards.Privacy.Links }}

- Privacy icon + {{ .Params.Cards.Platforms.Title }}

@@ -77,13 +59,7 @@


  - {{ range .Params.Cards.Platforms.Links }} - - {{ end }} + {{ partial "links.html" .Params.Cards.Platforms.Links }}
@@ -95,13 +71,7 @@ {{ .Params.NewSection.Description | markdownify }}

  - {{ range .Params.NewSection.Links }} - - {{ end }} + {{ partial "links.html" .Params.NewSection.Links }}
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index b0f26a9..5bffa64 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,5 @@