From bdded822bde0bed6f71db67a852fce098f7c04c4 Mon Sep 17 00:00:00 2001 From: Ad5001 Date: Wed, 14 Jul 2021 00:18:53 +0200 Subject: [PATCH] Porting all CSS to SCSS for easier maintainance, checking on all best practices. --- LICENSE | 2 +- assets/scss/apps.scss | 100 ++++++++++ assets/scss/blocks.scss | 20 ++ .../css/common.css => assets/scss/common.scss | 149 ++++++-------- assets/scss/components/blocks/card.scss | 52 +++++ assets/scss/components/blocks/preview.scss | 64 ++++++ assets/scss/components/button.scss | 46 +++++ assets/scss/components/columns.scss | 91 +++++++++ assets/scss/components/sections/header.scss | 38 ++++ assets/scss/components/sections/section1.scss | 37 ++++ assets/scss/components/sections/skewed.scss | 32 +++ assets/scss/font.scss | 36 ++++ assets/scss/footer.scss | 38 ++++ assets/scss/header.scss | 184 ++++++++++++++++++ assets/scss/main.scss | 26 +++ assets/scss/sections.scss | 21 ++ layouts/_default/about-me.html | 1 + layouts/_default/app.html | 2 +- layouts/_default/baseof.html | 2 +- layouts/main-index.html | 92 +++++++++ layouts/partials/footer.html | 6 +- layouts/partials/head.html | 22 +-- layouts/partials/header.html | 52 +++-- layouts/partials/section-app-header.html | 6 +- layouts/partials/section-main-header.html | 1 + static/css/blocks.css | 43 ---- static/css/custom.css | 2 - static/css/font.css | 15 -- static/css/footer.css | 17 -- static/css/header.css | 165 ---------------- static/css/sections.css | 40 ---- static/icons/free.svg | 76 ++++++++ static/icons/person.svg | 1 + static/icons/platforms.svg | 1 + static/icons/privacy.svg | 1 + static/icons/social/mail.svg | 54 +++++ static/js/header.js | 4 +- 37 files changed, 1115 insertions(+), 424 deletions(-) create mode 100644 assets/scss/apps.scss create mode 100644 assets/scss/blocks.scss rename static/css/common.css => assets/scss/common.scss (57%) create mode 100644 assets/scss/components/blocks/card.scss create mode 100644 assets/scss/components/blocks/preview.scss create mode 100644 assets/scss/components/button.scss create mode 100644 assets/scss/components/columns.scss create mode 100644 assets/scss/components/sections/header.scss create mode 100644 assets/scss/components/sections/section1.scss create mode 100644 assets/scss/components/sections/skewed.scss create mode 100644 assets/scss/font.scss create mode 100644 assets/scss/footer.scss create mode 100644 assets/scss/header.scss create mode 100644 assets/scss/main.scss create mode 100644 assets/scss/sections.scss create mode 100644 layouts/_default/about-me.html create mode 100644 layouts/main-index.html create mode 100644 layouts/partials/section-main-header.html delete mode 100644 static/css/blocks.css delete mode 100644 static/css/custom.css delete mode 100644 static/css/font.css delete mode 100644 static/css/footer.css delete mode 100644 static/css/header.css delete mode 100644 static/css/sections.css create mode 100644 static/icons/free.svg create mode 100644 static/icons/person.svg create mode 100644 static/icons/platforms.svg create mode 100644 static/icons/privacy.svg create mode 100644 static/icons/social/mail.svg diff --git a/LICENSE b/LICENSE index bdfb607..83c40ef 100644 --- a/LICENSE +++ b/LICENSE @@ -630,7 +630,7 @@ attach them to the start of each source file to most effectively state the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found. - Omegamma - Hugo theme for ad5001.eu and related websites.. + 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 diff --git a/assets/scss/apps.scss b/assets/scss/apps.scss new file mode 100644 index 0000000..694f152 --- /dev/null +++ b/assets/scss/apps.scss @@ -0,0 +1,100 @@ +/** + * 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 . + */ + +// CSS specific to the apps website. + +#appslist { + width: Min(108em, 100vw); +} + +@media screen and (max-width: 108em) { + #appslist { + width: 81em; + } +} + +@media screen and (max-width: 81em) { + #appslist { + width: 54em; + } +} + +@media screen and (max-width: 54em) { + #appslist { + width: Min(27em, 100vw); + } +} + +.app-download { + --border: solid 1px var(--primary-color); + --border-radius: 1rem; + border-right: var(--border); + border-bottom: var(--border); + + &:first-of-type { + border-left: var(--border); + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + + .app-download-platform { + border-top-left-radius: var(--border-radius); + } + } + + &:last-of-type { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + + .app-download-platform { + border-top-right-radius: var(--border-radius); + } + } + + .app-download-platform { + line-height: 3; + font-size: x-large; + } +} + + +@media screen and (max-width: 700px) { + .app-download { + border-left: var(--border); + + &:first-of-type { + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + border-bottom-left-radius: 0; + + & .app-download-platform { + border-top-left-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) !important; + } + } + + &:last-of-type { + border-top-right-radius: 0; + border-bottom-left-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) !important; + + & .app-download-platform { + border-top-right-radius: 0; + } + } + } +} diff --git a/assets/scss/blocks.scss b/assets/scss/blocks.scss new file mode 100644 index 0000000..2e29715 --- /dev/null +++ b/assets/scss/blocks.scss @@ -0,0 +1,20 @@ +/** + * 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 . + */ + +@import "components/blocks/preview"; +@import "components/blocks/card"; diff --git a/static/css/common.css b/assets/scss/common.scss similarity index 57% rename from static/css/common.css rename to assets/scss/common.scss index 2b7bf28..a325283 100644 --- a/static/css/common.css +++ b/assets/scss/common.scss @@ -1,3 +1,24 @@ +/** + * 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 . + */ + +@import "components/columns"; +@import "components/button"; + body { font-family: 'Metropolis', 'Fira Sans','Ubuntu', 'Noto Sans', sans-serif; overflow-x: hidden; @@ -18,37 +39,23 @@ body { padding: 1em; } -/* button */ +.padding-container-3 { + padding-left: 3em; + padding-right: 3em; +} -a[role=button] { - text-decoration: none; - color: black; - cursor: pointer; +hr { + opacity: 0.5; } .primary { background-color: var(--primary-color); + --theme-color: var(--primary-color); } .secondary { background-color: var(--secondary-color); -} - -a[role=button].primary, a[role=button].secondary { - padding: 0.5em; - text-transform: uppercase; - font-size: larger; - box-shadow: 0px 0px 2px 0px #000000; - transition: box-shadow 0.2s; - line-height: 3em; -} - -a[role=button].primary:active, a[role=button].secondary:active { - box-shadow: 0px 0px 8px 0px #000000; -} - -a[role=button].primary:hover, a[role=button].secondary:hover { - box-shadow: 0px 0px 4px 0px #000000; + --theme-color: var(--secondary-color); } .text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white { @@ -83,6 +90,8 @@ img.center { max-height: 100%; } +/* text and image formatting */ + .text-left { text-align: left; } @@ -97,10 +106,10 @@ img.center { .text-white { color: white; -} - -.text-white .icon-monochrome { - filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(104%) contrast(104%); + + .icon-monochrome { + filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(104%) contrast(104%); + } } .icon-as-text { @@ -118,11 +127,30 @@ img.center { vertical-align: middle; } +.icon-larger2-text { + width: 1.6em; + height: 1.6em; + margin-right: 0.4em; + margin-top: -0.3em; + vertical-align: middle; +} + +.icon-twice-text { + width: 2em; + height: 2em; + margin-right: 0.4em; + margin-top: -0.5em; + vertical-align: middle; +} + h1 { font-size: xx-large; font-family: var(--light-font); + &.larger { + font-size: xxx-large; + } } - + h2 { font-size: x-large; font-family: var(--light-font); @@ -132,7 +160,7 @@ h3 { font-family: var(--light-font); } -p { +.text-content { line-height: 1.5em; } @@ -157,68 +185,3 @@ p { .flex-center { justify-content: center; } - -/* Columns */ -.columns-container { - display: flex; -} - -.col1:not(.col1-fill) { - width: 50%; - margin-right: auto !important; - margin-left: auto !important; -} - -.col1.col1-fill { - width: 100%; -} - -.col2 { - width: 50%; -} - -.col3 { - width: 33%; -} - -.col2-3 { - width: 66%; -} - -.col4 { - width: 25%; -} - -.col3-4 { - width: 75%; -} - -.col5 { - width: 20%; -} - -@media screen and (max-width: 700px) { - :not(footer) > .columns-container { - display: block; - } - - .column { - width: 100%; - } - - .section-header .column > img { - width: 100%; - } - - .column :not(p).text-right, .column.text-right :not(p), .column :not(p).text-left, .column.text-left :not(p) { - text-align: center; - } - - .column .flex-right { - justify-content: center; - } - - .col1:not(.col1-fill) { - width: 100%; - } -} diff --git a/assets/scss/components/blocks/card.scss b/assets/scss/components/blocks/card.scss new file mode 100644 index 0000000..297dea5 --- /dev/null +++ b/assets/scss/components/blocks/card.scss @@ -0,0 +1,52 @@ +/** + * 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 . + */ + +// Cards used on main website +.card { + --angle: 0deg; + transition: box-shadow 0.2s; + box-shadow: 0px 0px 2px 0px #000000; + + // Specifiying gradient orientation + &.topleft2bottomright { + --angle: 135deg; + } + &.topright2bottomleft { + --angle: 225deg; + } + &.top2bottom { + --angle: 180deg; + } + + // Gradient colors + &.yellow { + background: linear-gradient(var(--angle, 0deg), rgba(255,255,204,1) 0%, rgba(255,242,107,1) 100%); + } + &.blue { + background: linear-gradient(var(--angle, 0deg), rgba(204,253,255,1) 0%, rgba(107,250,255,1) 100%); + } + &.red { + background: linear-gradient(var(--angle, 0deg), rgba(255,204,204,1) 0%, rgba(255,107,107,1) 100%); + } + &.green { + background: linear-gradient(var(--angle, 0deg), rgba(206,255,204,1) 0%, rgba(124,255,107,1) 100%); + } + &.purple { + background: linear-gradient(var(--angle, 0deg), rgba(229,181,255,1) 0%, rgba(210,114,255,1) 100%); + } +} diff --git a/assets/scss/components/blocks/preview.scss b/assets/scss/components/blocks/preview.scss new file mode 100644 index 0000000..72fb91f --- /dev/null +++ b/assets/scss/components/blocks/preview.scss @@ -0,0 +1,64 @@ +/** + * 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 . + */ + +// Preview blocks used in the apps main page. +.block-preview { + box-shadow: 0px 0px 2px 0px #000000; + width: Min(25em, calc(100vw - 2em)); + height: 20em; + background-size: cover; + 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; + + // Hide this information by default + .show-on-hover { + display: none; + transition: opacity 0.15s; + opacity: 0; + max-height: 0; + background: none; + } + } + + // Used when the block is hovered/toggled + &:hover, &.toggled { + box-shadow: 0px 0px 4px 0px #000000; + + // Take full height + .label { + max-height: 100%; + height: calc(100% - 1em); + + // Show previously hidden text + .show-on-hover { + display: block; + opacity: 1; + max-height: 100%; + } + } + } +} diff --git a/assets/scss/components/button.scss b/assets/scss/components/button.scss new file mode 100644 index 0000000..71fe042 --- /dev/null +++ b/assets/scss/components/button.scss @@ -0,0 +1,46 @@ +/** + * 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 . + */ + +a[role=button] { + text-decoration: none; + color: black; + cursor: pointer; + + &.primary, &.secondary { + padding: 0.5em; + text-transform: uppercase; + font-size: larger; + box-shadow: 0px 0px 2px 0px #000000; + transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out; + line-height: 3em; + filter: brightness(100%); + + &:active { + box-shadow: 0px 0px 8px 0px #000000; + filter: brightness(80%); + } + + &:hover { + box-shadow: 0px 0px 8px 0px #000000; + filter: brightness(90%); + } + } + + &.primary { + } +} diff --git a/assets/scss/components/columns.scss b/assets/scss/components/columns.scss new file mode 100644 index 0000000..c6c834f --- /dev/null +++ b/assets/scss/components/columns.scss @@ -0,0 +1,91 @@ +/** + * 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 . + */ + +// All columns related rules. +.columns-container { + display: flex; +} + +.column { + &.col1 { + &:not(.col1-fill) { + width: 50%; + margin-right: auto !important; + margin-left: auto !important; + } + + &.col1-fill { + width: 100%; + } + } + + &.col2 { + width: 50%; + } + + &.col3 { + width: 33%; + } + + &.col2-3 { + width: 66%; + } + + &.col4 { + width: 25%; + } + + &.col3-4 { + width: 75%; + } + + &.col5 { + width: 20%; + } +} + +@media screen and (max-width: 700px) { + .padding-container-3 { + padding-left: 0.5em; + padding-right: 0.5em; + } + + :not(footer) > .columns-container { + display: block; + } + + .column { + width: 100%; + + & :not(p).text-right, &.text-right :not(p), & :not(p).text-left, &.text-left :not(p) { + text-align: center; + } + + .flex-right { + justify-content: center; + } + } + + .section-header .column > img { + width: 100%; + } + + .col1:not(.col1-fill) { + width: 100%; + } +} diff --git a/assets/scss/components/sections/header.scss b/assets/scss/components/sections/header.scss new file mode 100644 index 0000000..6c276c7 --- /dev/null +++ b/assets/scss/components/sections/header.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 . + */ + +section.section-header { + height: calc(100vh + 3em); + + & > div.columns-container { + padding-top: 3em !important; + height: calc(100% - 6em); + } +} + + +@media screen and (max-width: 700px) { + section.section-header { + height: auto; + min-height: calc(100vh + 3em); + + & > div.columns-container { + min-height: calc(100vh - 3em); + } + } +} diff --git a/assets/scss/components/sections/section1.scss b/assets/scss/components/sections/section1.scss new file mode 100644 index 0000000..54e899d --- /dev/null +++ b/assets/scss/components/sections/section1.scss @@ -0,0 +1,37 @@ +/** + * 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 . + */ + +section.section1 { + background-size: cover; + background-repeat: no-repeat; + color: black; + padding-left: 1em; + padding-top: 1em; + padding-right: 1em; +} + +.section-end-triangle { + width: 0; + height: 0; + border-top-width: 3em; + border-top-style: solid; + border-top-color: transparent; + border-right-width: 100vw; + border-right-style: solid; + border-right-color: #FFFFFF; +} diff --git a/assets/scss/components/sections/skewed.scss b/assets/scss/components/sections/skewed.scss new file mode 100644 index 0000000..1574521 --- /dev/null +++ b/assets/scss/components/sections/skewed.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 . + */ + +section.section-skewed { + --angle: 2deg; + transform: skewY(var(--angle)); + background: #D2D2D2; + background: linear-gradient(170deg, rgba(238,238,238,1) 0%, rgba(210,210,210,1) 49%, rgba(238,238,238,1) 100%); + padding-top: 3em; + padding-bottom: 3em; + margin-bottom: 2em; +} + +section.section-skewed > * { + transform: skewY(calc(0deg - var(--angle))); +} + diff --git a/assets/scss/font.scss b/assets/scss/font.scss new file mode 100644 index 0000000..0584c5f --- /dev/null +++ b/assets/scss/font.scss @@ -0,0 +1,36 @@ +/** + * 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 . + */ + +@font-face { + font-family: "Metropolis"; + src: 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"); + font-weight: bold; + font-display: swap; +} + +@font-face { + font-family: "Metropolis Light"; + src: url(/fonts/metropolis/Metropolis-Light.otf) format("opentype"); + font-display: swap; +} diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss new file mode 100644 index 0000000..b8c82ae --- /dev/null +++ b/assets/scss/footer.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 . + */ + +footer { + width: 100%; + background: var(--footer-background); + color: white; + + a:not([role=button]) { + color: #3DAEE9; + } +} + +.footer-social-list { + display: flex; + font-size: 24px; +} + +@media screen and (max-width: 550px) { + footer { + font-size: 17px; + } +} diff --git a/assets/scss/header.scss b/assets/scss/header.scss new file mode 100644 index 0000000..94c4f20 --- /dev/null +++ b/assets/scss/header.scss @@ -0,0 +1,184 @@ +/** + * 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 . + */ + +nav { + font-size: 1.3em; + height: 3em; + position: absolute; + width: 100%; + font-family: var(--light-font); + + .nav-flex { + display: flex; + max-width: 99%; + } + + .navbar-brand { + padding-top: 1em; + padding-left: 0.5em; + display: flex; + + .icon-brand { + width: 2.5em; + height: 2.5em; + margin-top: -0.7em; + margin-right: 5px; + } + } + + .navbar-menu { + flex: auto; + display: block; + width: 2em; + } + + // Links list + .navbar-list { + float: right; + flex: auto; + display: flex; + margin-top: 0px; + list-style-type: none; + text-transform: uppercase; + + li { + list-style: none; + + &.active { + background-color: var(--primary-color); + } + + &.background a[role=button] { + background-color: var(--nav-background); + color: black; + } + + a { + padding: 1em; + margin-left: 0; + display: flex; + } + } + } +} + +.menu-with-sub { + display: block; + + .sub-menu { + display: none; + position: absolute; + padding: 0; + margin-top: -2px; + } + + &.toggled .sub-menu, &:hover .sub-menu, & .sub-menu:hover { + display: block; + } +} + +#navbar-toggler { + border: 0; + background: none; + box-shadow: none; + border-radius: 0px; + display: none; + cursor: pointer; + padding-right: 1em; + + img { + width: 1.9em; + height: 1.9em; + } +} + +@media screen and (max-width: 700px) { + #navbar-toggler { + display: block; + } + + nav.menu-shown { + position: fixed; + z-index: 1; + background: var(--nav-background); + } + + /* positioning for mobile */ + nav .nav-flex { + display: block; + max-width: 100%; + + .nav-mobile { + display: flex; + width: 100%; + + .navbar-brand { + flex: auto; + } + } + + .navbar-menu { + height: 100vh; + width: 100% !important; + display: none !important; + background: var(--nav-background); + + &.shown { + display: block !important; + } + + .navbar-list { + display: block !important; + width: 100%; + height: 100%; + padding-left: 0; + + li { + width: 100% !important; + display: flex; + + a[role=button] { + width: 100%; + } + } + + .menu-with-sub { + display: block; + + .sub-menu { + margin-left: 1em; + display: ruby; + } + } + } + } + } + + /* 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 { + 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/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..5ad9c6c --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,26 @@ +/** + * 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 . + */ + +// Main spreadsheet including all common elements +@import "blocks"; +@import "common"; +@import "font"; +@import "footer"; +@import "header"; +@import "sections"; + diff --git a/assets/scss/sections.scss b/assets/scss/sections.scss new file mode 100644 index 0000000..9356678 --- /dev/null +++ b/assets/scss/sections.scss @@ -0,0 +1,21 @@ +/** + * 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 . + */ + +@import "components/sections/section1"; +@import "components/sections/header"; +@import "components/sections/skewed"; diff --git a/layouts/_default/about-me.html b/layouts/_default/about-me.html new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/layouts/_default/about-me.html @@ -0,0 +1 @@ + diff --git a/layouts/_default/app.html b/layouts/_default/app.html index b5b51b5..be214a2 100644 --- a/layouts/_default/app.html +++ b/layouts/_default/app.html @@ -2,7 +2,7 @@ {{ $data := index .Site.Data .Site.Language.Lang }} {{ $appdata := index $data.apps .Params.SectionHeader.AppIndex }} - + {{- partial "head.html" . -}} {{- partial "header.html" . -}} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5f8e2ec..51a85bc 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{- partial "head.html" . -}} {{- partial "header.html" . -}} diff --git a/layouts/main-index.html b/layouts/main-index.html new file mode 100644 index 0000000..3b45b7f --- /dev/null +++ b/layouts/main-index.html @@ -0,0 +1,92 @@ +{{ define "main" }} +
+
+
+
+

Ad5001's iconAd5001

+ {{ .Params.Description | markdownify }} +
  + {{ range .Params.Links }} + + {{ end }} +
+
+
+
+
+
+
+
+
+

Software commitments

+
+
+
+

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

+

+ {{ .Params.Cards.FLOSS.Description | markdownify }} +

+
+
  + {{ range .Params.Cards.FLOSS.Links }} + + {{ end }} +
+
+
+
+
+

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

+

+ {{ .Params.Cards.Privacy.Description | markdownify }} +

+
+
  + {{ range .Params.Cards.Privacy.Links }} + + {{ end }} +
+
+
+
+
+

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

+

+ {{ .Params.Cards.Platforms.Description | markdownify }} +

+
+
  + {{ range .Params.Cards.Platforms.Links }} + + {{ end }} +
+
+
+
+
+{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index de1a370..1eadd0f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,9 +1,7 @@