From 1b923de71a6bba8a0aa252692a91190553b8448c Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Sat, 6 Aug 2022 20:25:26 +0200 Subject: [PATCH] Chore: initial commit --- .drone.yml | 17 + .gitignore | 3 + .vscode/settings.json | 12 + README.md | 6 + config.yaml | 31 + content/index.de.md | 6 + content/index.en.md | 6 + themes/app-landingpage/assets/scss/_box.scss | 369 +++++ .../app-landingpage/assets/scss/_buttons.scss | 182 +++ .../assets/scss/_containers.scss | 73 + .../assets/scss/_custom-variables.scss | 16 + .../app-landingpage/assets/scss/_fonts.scss | 78 + .../app-landingpage/assets/scss/_footer.scss | 69 + .../app-landingpage/assets/scss/_forms.scss | 9 + .../assets/scss/_functions.scss | 185 +++ themes/app-landingpage/assets/scss/_grid.scss | 22 + .../app-landingpage/assets/scss/_header.scss | 301 ++++ themes/app-landingpage/assets/scss/_icon.scss | 30 + .../app-landingpage/assets/scss/_images.scss | 15 + themes/app-landingpage/assets/scss/_list.scss | 129 ++ .../app-landingpage/assets/scss/_mixins.scss | 62 + themes/app-landingpage/assets/scss/_nav.scss | 123 ++ .../app-landingpage/assets/scss/_navbar.scss | 297 ++++ .../assets/scss/_progress.scss | 45 + .../app-landingpage/assets/scss/_reboot.scss | 609 ++++++++ themes/app-landingpage/assets/scss/_root.scss | 15 + .../app-landingpage/assets/scss/_section.scss | 160 ++ .../app-landingpage/assets/scss/_tables.scss | 234 +++ themes/app-landingpage/assets/scss/_type.scss | 186 +++ .../assets/scss/_utilities.scss | 497 +++++++ .../assets/scss/_variables.scss | 1310 +++++++++++++++++ .../assets/scss/helpers/_background.scss | 5 + .../assets/scss/helpers/_clearfix.scss | 3 + .../assets/scss/helpers/_colored-links.scss | 12 + .../assets/scss/helpers/_embed.scss | 31 + .../assets/scss/helpers/_position.scss | 30 + .../assets/scss/helpers/_screenreaders.scss | 8 + .../assets/scss/helpers/_stretched-link.scss | 15 + .../assets/scss/helpers/_text-truncation.scss | 7 + .../assets/scss/mixins/_alert.scss | 9 + .../scss/mixins/_background-variant.scss | 7 + .../assets/scss/mixins/_border-radius.scss | 76 + .../assets/scss/mixins/_box-shadow.scss | 20 + .../assets/scss/mixins/_breakpoints.scss | 126 ++ .../assets/scss/mixins/_buttons.scss | 121 ++ .../assets/scss/mixins/_caret.scss | 62 + .../assets/scss/mixins/_clearfix.scss | 9 + .../assets/scss/mixins/_container.scss | 19 + .../assets/scss/mixins/_deprecate.scss | 10 + .../assets/scss/mixins/_forms.scss | 133 ++ .../assets/scss/mixins/_gradients.scss | 47 + .../assets/scss/mixins/_grid.scss | 121 ++ .../assets/scss/mixins/_image.scss | 16 + .../assets/scss/mixins/_list-group.scss | 22 + .../assets/scss/mixins/_lists.scss | 7 + .../assets/scss/mixins/_pagination.scss | 29 + .../assets/scss/mixins/_reset-text.scss | 17 + .../assets/scss/mixins/_resize.scss | 6 + .../assets/scss/mixins/_screen-reader.scss | 28 + .../assets/scss/mixins/_table-variants.scss | 21 + .../assets/scss/mixins/_text-truncate.scss | 8 + .../assets/scss/mixins/_transition.scss | 26 + .../assets/scss/mixins/_utilities.scss | 49 + themes/app-landingpage/assets/scss/style.scss | 82 ++ .../assets/scss/utilities/_api.scss | 47 + .../assets/scss/vendor/_download.scss | 34 + .../assets/scss/vendor/_rfs.scss | 312 ++++ .../assets/scss/vendor/_utilities.scss | 7 + themes/app-landingpage/i18n/de.yaml | 26 + themes/app-landingpage/i18n/en.yaml | 26 + .../layouts/_default/baseof.html | 11 + .../layouts/_default/single.html | 127 ++ themes/app-landingpage/layouts/alias.html | 46 + .../layouts/partials/head.html | 33 + .../static/assets/img/App_Store_Badge_DE.svg | 40 + .../assets/img/App_Store_Badge_US-UK.svg | 41 + .../static/assets/img/favicon.png | Bin 0 -> 181744 bytes .../static/assets/img/google-play-badge.png | Bin 0 -> 17304 bytes .../static/assets/img/google-play-badge.svg | 54 + .../static/assets/img/icons/favicon-16x16.png | Bin 0 -> 1300 bytes .../assets/img/icons/favicon-180x180.png | Bin 0 -> 29499 bytes .../assets/img/icons/favicon-192x192.png | Bin 0 -> 32674 bytes .../static/assets/img/icons/favicon-32x32.png | Bin 0 -> 2647 bytes .../static/assets/img/icons/favicon-96x96.png | Bin 0 -> 29499 bytes .../static/assets/js/ua-parser.pack.js | 4 + .../static/css/fonts/icon-font/icon-font.eot | Bin 0 -> 2102 bytes .../static/css/fonts/icon-font/icon-font.svg | 13 + .../static/css/fonts/icon-font/icon-font.ttf | Bin 0 -> 1936 bytes .../static/css/fonts/icon-font/icon-font.woff | Bin 0 -> 1352 bytes .../static/css/fonts/icon-font/styles.css | 49 + .../static/css/fonts/roboto-v20-latin-700.eot | Bin 0 -> 17851 bytes .../static/css/fonts/roboto-v20-latin-700.svg | 309 ++++ .../static/css/fonts/roboto-v20-latin-700.ttf | Bin 0 -> 36012 bytes .../css/fonts/roboto-v20-latin-700.woff | Bin 0 -> 20356 bytes .../css/fonts/roboto-v20-latin-700.woff2 | Bin 0 -> 15816 bytes .../css/fonts/roboto-v20-latin-700italic.eot | Bin 0 -> 19231 bytes .../css/fonts/roboto-v20-latin-700italic.svg | 325 ++++ .../css/fonts/roboto-v20-latin-700italic.ttf | Bin 0 -> 36868 bytes .../css/fonts/roboto-v20-latin-700italic.woff | Bin 0 -> 21588 bytes .../fonts/roboto-v20-latin-700italic.woff2 | Bin 0 -> 17020 bytes .../static/css/fonts/roboto-v20-latin-900.eot | Bin 0 -> 17881 bytes .../static/css/fonts/roboto-v20-latin-900.svg | 302 ++++ .../static/css/fonts/roboto-v20-latin-900.ttf | Bin 0 -> 35972 bytes .../css/fonts/roboto-v20-latin-900.woff | Bin 0 -> 20392 bytes .../css/fonts/roboto-v20-latin-900.woff2 | Bin 0 -> 15712 bytes .../css/fonts/roboto-v20-latin-900italic.eot | Bin 0 -> 19843 bytes .../css/fonts/roboto-v20-latin-900italic.svg | 324 ++++ .../css/fonts/roboto-v20-latin-900italic.ttf | Bin 0 -> 38000 bytes .../css/fonts/roboto-v20-latin-900italic.woff | Bin 0 -> 22304 bytes .../fonts/roboto-v20-latin-900italic.woff2 | Bin 0 -> 17520 bytes .../css/fonts/roboto-v20-latin-italic.eot | Bin 0 -> 19572 bytes .../css/fonts/roboto-v20-latin-italic.svg | 323 ++++ .../css/fonts/roboto-v20-latin-italic.ttf | Bin 0 -> 37500 bytes .../css/fonts/roboto-v20-latin-italic.woff | Bin 0 -> 21952 bytes .../css/fonts/roboto-v20-latin-italic.woff2 | Bin 0 -> 17324 bytes .../css/fonts/roboto-v20-latin-regular.eot | Bin 0 -> 17854 bytes .../css/fonts/roboto-v20-latin-regular.svg | 308 ++++ .../css/fonts/roboto-v20-latin-regular.ttf | Bin 0 -> 36176 bytes .../css/fonts/roboto-v20-latin-regular.woff | Bin 0 -> 20268 bytes .../css/fonts/roboto-v20-latin-regular.woff2 | Bin 0 -> 15736 bytes themes/app-landingpage/theme.yaml | 9 + 121 files changed, 9049 insertions(+) create mode 100644 .drone.yml create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 README.md create mode 100644 config.yaml create mode 100644 content/index.de.md create mode 100644 content/index.en.md create mode 100644 themes/app-landingpage/assets/scss/_box.scss create mode 100644 themes/app-landingpage/assets/scss/_buttons.scss create mode 100644 themes/app-landingpage/assets/scss/_containers.scss create mode 100644 themes/app-landingpage/assets/scss/_custom-variables.scss create mode 100644 themes/app-landingpage/assets/scss/_fonts.scss create mode 100644 themes/app-landingpage/assets/scss/_footer.scss create mode 100644 themes/app-landingpage/assets/scss/_forms.scss create mode 100644 themes/app-landingpage/assets/scss/_functions.scss create mode 100644 themes/app-landingpage/assets/scss/_grid.scss create mode 100644 themes/app-landingpage/assets/scss/_header.scss create mode 100644 themes/app-landingpage/assets/scss/_icon.scss create mode 100644 themes/app-landingpage/assets/scss/_images.scss create mode 100644 themes/app-landingpage/assets/scss/_list.scss create mode 100644 themes/app-landingpage/assets/scss/_mixins.scss create mode 100644 themes/app-landingpage/assets/scss/_nav.scss create mode 100644 themes/app-landingpage/assets/scss/_navbar.scss create mode 100644 themes/app-landingpage/assets/scss/_progress.scss create mode 100644 themes/app-landingpage/assets/scss/_reboot.scss create mode 100644 themes/app-landingpage/assets/scss/_root.scss create mode 100644 themes/app-landingpage/assets/scss/_section.scss create mode 100644 themes/app-landingpage/assets/scss/_tables.scss create mode 100644 themes/app-landingpage/assets/scss/_type.scss create mode 100644 themes/app-landingpage/assets/scss/_utilities.scss create mode 100644 themes/app-landingpage/assets/scss/_variables.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_background.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_clearfix.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_colored-links.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_embed.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_position.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_screenreaders.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_stretched-link.scss create mode 100644 themes/app-landingpage/assets/scss/helpers/_text-truncation.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_alert.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_background-variant.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_border-radius.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_box-shadow.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_breakpoints.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_buttons.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_caret.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_clearfix.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_container.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_deprecate.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_forms.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_gradients.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_grid.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_image.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_list-group.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_lists.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_pagination.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_reset-text.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_resize.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_screen-reader.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_table-variants.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_text-truncate.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_transition.scss create mode 100644 themes/app-landingpage/assets/scss/mixins/_utilities.scss create mode 100644 themes/app-landingpage/assets/scss/style.scss create mode 100644 themes/app-landingpage/assets/scss/utilities/_api.scss create mode 100644 themes/app-landingpage/assets/scss/vendor/_download.scss create mode 100644 themes/app-landingpage/assets/scss/vendor/_rfs.scss create mode 100644 themes/app-landingpage/assets/scss/vendor/_utilities.scss create mode 100644 themes/app-landingpage/i18n/de.yaml create mode 100644 themes/app-landingpage/i18n/en.yaml create mode 100644 themes/app-landingpage/layouts/_default/baseof.html create mode 100644 themes/app-landingpage/layouts/_default/single.html create mode 100644 themes/app-landingpage/layouts/alias.html create mode 100644 themes/app-landingpage/layouts/partials/head.html create mode 100755 themes/app-landingpage/static/assets/img/App_Store_Badge_DE.svg create mode 100644 themes/app-landingpage/static/assets/img/App_Store_Badge_US-UK.svg create mode 100644 themes/app-landingpage/static/assets/img/favicon.png create mode 100644 themes/app-landingpage/static/assets/img/google-play-badge.png create mode 100644 themes/app-landingpage/static/assets/img/google-play-badge.svg create mode 100644 themes/app-landingpage/static/assets/img/icons/favicon-16x16.png create mode 100644 themes/app-landingpage/static/assets/img/icons/favicon-180x180.png create mode 100644 themes/app-landingpage/static/assets/img/icons/favicon-192x192.png create mode 100644 themes/app-landingpage/static/assets/img/icons/favicon-32x32.png create mode 100644 themes/app-landingpage/static/assets/img/icons/favicon-96x96.png create mode 100644 themes/app-landingpage/static/assets/js/ua-parser.pack.js create mode 100644 themes/app-landingpage/static/css/fonts/icon-font/icon-font.eot create mode 100644 themes/app-landingpage/static/css/fonts/icon-font/icon-font.svg create mode 100644 themes/app-landingpage/static/css/fonts/icon-font/icon-font.ttf create mode 100644 themes/app-landingpage/static/css/fonts/icon-font/icon-font.woff create mode 100644 themes/app-landingpage/static/css/fonts/icon-font/styles.css create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700.eot create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700.svg create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700.ttf create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700.woff create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700.woff2 create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700italic.eot create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700italic.svg create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700italic.ttf create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700italic.woff create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-700italic.woff2 create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900.eot create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900.svg create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900.ttf create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900.woff create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900.woff2 create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900italic.eot create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900italic.svg create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900italic.ttf create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900italic.woff create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-900italic.woff2 create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-italic.eot create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-italic.svg create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-italic.ttf create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-italic.woff create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-italic.woff2 create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-regular.eot create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-regular.svg create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-regular.ttf create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-regular.woff create mode 100644 themes/app-landingpage/static/css/fonts/roboto-v20-latin-regular.woff2 create mode 100644 themes/app-landingpage/theme.yaml diff --git a/.drone.yml b/.drone.yml new file mode 100644 index 0000000..7369313 --- /dev/null +++ b/.drone.yml @@ -0,0 +1,17 @@ +kind: pipeline +name: build and publish site + +steps: +- name: build + image: klakegg/hugo:ext-alpine-ci + commands: + - hugo --minify + +- name: publish + image: itsblue.dev/plugins/codeberg-pages-deploy + settings: + folder: public + git_remote: git@itsblue.dev:bluerock/pages.git + git_branch: main + ssh_key: + from_secret: gitea-ssh-key \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6a87bd8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/resources +/public +.hugo_build.lock \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c4906ee --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "ltex.enabled": [ + "bibtex", + "context", + "context.tex", + "latex", + "markdown", + "org", + "restructuredtext", + "rsweave" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0a2b27b --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# blueROCK App landingpage +This is the landingpage for l.blurock.dev URLs. + +# Getting started + +Build with `hugo` diff --git a/config.yaml b/config.yaml new file mode 100644 index 0000000..d2f606e --- /dev/null +++ b/config.yaml @@ -0,0 +1,31 @@ +baseURL: "https://l.bluerock.dev" +title: "blueROCK" +theme: "app-landingpage" +defaultContentLanguage: "en" +defaultContentLanguageInSubdir: "true" + +languages: + en: + title: "blueROCK" + de: + title: "blueROCK" + +params: + stores: + - id: google + name: Google Play Store + url: https://play.google.com/store/apps/details?id=com.itsblue.blueROCK + badge: /assets/img/google-play-badge.png + + - id: apple + name: Apple App Store + url: https://apps.apple.com/de/app/bluerock/id1503699996?app=itunes&ign-mpt=uo%3D4 + badge: /assets/img/App_Store_Badge_DE.svg + + alternativeUrl: https://www.digitalrock.de/egroupware/ranking/sitemgr/digitalrock/eliste.html + appName: "blueROCK" + +markup: + goldmark: + renderer: + unsafe: true \ No newline at end of file diff --git a/content/index.de.md b/content/index.de.md new file mode 100644 index 0000000..c37c968 --- /dev/null +++ b/content/index.de.md @@ -0,0 +1,6 @@ +--- +title: "Lade die blueROCK herunter." +alternativeUrlDescription: "Ergebnisse auf digitalrock.de ansehen" +--- + +Zum Download verfügbar im Apple App Store und auf Google Play. \ No newline at end of file diff --git a/content/index.en.md b/content/index.en.md new file mode 100644 index 0000000..997b2f8 --- /dev/null +++ b/content/index.en.md @@ -0,0 +1,6 @@ +--- +title: "Download the blueROCK App." +alternativeUrlDescription: "View results on digitalrock.de" +--- + +blueROCK is available for download on the Apple App Store and Google Play. \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_box.scss b/themes/app-landingpage/assets/scss/_box.scss new file mode 100644 index 0000000..f9c4f36 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_box.scss @@ -0,0 +1,369 @@ +.box { + border-radius: $border-radius; + background-color: $body-bg; + box-shadow: $box-shadow; + position: relative; + color: $body-color; + padding: $card-spacer-y $card-spacer-x; + + &_stretch { + height: 100%; + + &.box_flex { + flex-direction: row; + justify-content: flex-start; + align-items: center; + > .image-block { + width: 30%; + padding-right: 0; + padding-left: 0; + img { + margin-left: auto; + margin-right: auto; + max-width: 100%; + } + } + > div { + max-width: 70%; + padding-left: $spacer; + } + } + } + + &_spaced { + margin-top: $spacer * 3; + } + &-column { + padding-top: $spacer; + min-height: 100px; + } + &_flex { + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; + height: 100%; + .box-inner { + flex: 1 0 auto; + &_end { + flex: 0 0 auto; + } + } + @media (min-width:$screen-sm) { + flex-direction: row; + align-items: center; + > .box-inner_flex { + display: flex; + justify-content: space-between; + align-items: center; + flex: 1 0 auto; + + h3:last-child { + margin-bottom: 0; + } + } + } + } + .image-block { + max-width: 30%; + img { + min-width: 90px; + } + + @media (min-width:$screen-sm) { + max-width: none; + &:first-child { + padding-right: $spacer * 1.25; + } + img { + min-width: 100px; + max-width: 160px; + } + } + } + &_slider { + z-index: 0; + .slick-list { + padding-top: $spacer; + padding-bottom: $spacer * 1.5; + } + &-caption { + display: flex; + justify-content: flex-end; + padding: 0 $spacer; + @media (min-width: $screen-lg){ + padding: 0 $spacer * 2; + } + @media (min-width: 420px){ + transform: translate3d(0, -38px, 0); + } + } + } +} + +.image-block { + text-align: center; + padding-top: 1.25rem; + padding-bottom: 1.25rem; + + img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; + height: auto; + } + .text-center > & { + margin-left: auto; + margin-right: auto; + text-align: inherit; + img { + margin-left: auto; + margin-right: auto; + } + } + .section-feature-listing &, + .box & { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + } +} + +.image-overflow { + position: absolute; + height: 100%; + min-height: 100%; + width: auto; + top: 0; + &-spacer { + position: static; + display: block; + width: 100%; + height: auto; + + } + &-container { + position: relative; + margin-top: $spacer; + margin-bottom: $spacer * 1.5; + + @media (min-width: $screen-md){ + margin-top: 0.5 * $spacer; + margin-bottom: 0.5 * $spacer; + } + } + &_left { + right: 0.5rem; + } +} + +.text-block { + .numeration { + color: $primary; + font-size: $h5-font-size; + font-weight: $font-weight-bold; + line-height: $headings-line-height * $h4-font-size; + } + &_indented { + padding-left: $grid-gutter-width; + position: relative; + @media (min-width: $screen-md){ + padding-right: $card-spacer-x; + } + .numeration { + position: absolute; + left: 0; + + img.icon { + position: absolute; + left: -4px; + width: auto; + height: auto; + max-height: 32px; + top: -2px; + display: inline-block; + } + } + } + &_spaced { + margin-top: $spacer * 2.5; + margin-bottom: $spacer * 2.5; + + &-top { + margin-top: $spacer * 3.25; + } + &-bottom { + margin-bottom: $spacer * 3.25; + } + } +} +.col-text { + order: 1; + margin-bottom: $spacer * 2; +} +.col-img { + order: 0; +} + +@media(min-width: $screen-md){ + .col-img, + .col-text { + order: 0; + } +} + +p:not([class]) + .btn { + &.btn-primary, + &.btn-secondary { + margin-top: $spacer * 0.5; + } +} + +.container_flex { + display: block; + + .side-menu { + transform: translate3d(-100%, 0, 0); + width: 50vw; + max-width: 240px; + position: fixed; + + @media (max-width: ($screen-md - 1)){ + padding-left: $spacer * 1.25; + padding-top: 0.5* $spacer; + z-index: 1; + transition: transform 0.3s ease-in-out; + height: 100vh; + top: 0; + + &:before { + opacity: 0; + transition: opacity 0.3s ease-in-out; + } + + &.active { + transform: translate3d(0, 0, 0); + z-index: 1; + height: 100vh; + left: 0; + top: 0; + padding-top: 130px; + background-color: $body-bg; + box-shadow: $box-shadow; + + &:after, + &:before { + position: fixed; + content: ""; + height: 100vh; + width: 300vw; + background-color: $dark; + opacity: 0.2; + display: block; + top: 0; + z-index: -1; + left: 0; + } + &:after { + position: fixed; + background-color: $body-bg; + width: 50vw; + max-width: 240px; + opacity: 1; + } + .menu-close .btn-close { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-64.1%25' y='-46.7%25' width='228.3%25' height='228.3%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeMorphology radius='4' in='SourceAlpha' result='shadowSpreadOuter1'/%3e%3cfeOffset dy='8' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='12.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0.235294118 0 0 0 0 0.270588235 0 0 0 0 0.325490196 0 0 0 0.538625437 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3crect id='b' width='46' height='46' rx='4'/%3e%3c/defs%3e%3cg fill='none'%3e%3cg transform='matrix(-1 0 0 1 63 9)'%3e%3cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='%23FFF' xlink:href='%23b'/%3e%3c/g%3e%3cpath d='M37.415 40c.473 0 .881-.175 1.222-.525.341-.35.511-.798.511-1.343 0-.545-.17-.993-.511-1.343l-2.727-2.92h12.329c.492 0 .909-.185 1.25-.555.341-.37.511-.808.511-1.314s-.171-.944-.511-1.314c-.341-.37-.757-.555-1.25-.555h-12.329l2.784-2.92c.341-.35.511-.798.511-1.343 0-.545-.17-.993-.511-1.343-.341-.35-.758-.525-1.25-.525s-.909.175-1.25.525l-5.682 6.131c-.341.35-.511.798-.511 1.343 0 .506.171.934.511 1.285l5.682 6.19c.341.35.748.525 1.222.525z' fill='%23000' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e"); + } + } + .menu-close { + position: absolute; + bottom: 0; + margin-left: 0; + left: 100%; + transform: translate3d(0, 0, 0); + width: 80px; + height: 80px; + cursor: pointer; + z-index: 2; + + .btn-close { + width: 80px; + height: 80px; + position: static; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-64.1%25' y='-46.7%25' width='228.3%25' height='228.3%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeMorphology radius='4' in='SourceAlpha' result='shadowSpreadOuter1'/%3e%3cfeOffset dy='8' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='12.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 0.235294118 0 0 0 0 0.270588235 0 0 0 0 0.325490196 0 0 0 0.538625437 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3crect id='b' width='46' height='46' rx='4'/%3e%3c/defs%3e%3cg fill='none'%3e%3cg transform='translate(17 9)'%3e%3cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='%23FFF' xlink:href='%23b'/%3e%3c/g%3e%3cpath d='M42.585 40c-.473 0-.881-.175-1.222-.525-.341-.35-.511-.798-.511-1.343 0-.545.17-.993.511-1.343l2.727-2.92h-12.329c-.492 0-.909-.185-1.25-.555-.341-.37-.511-.808-.511-1.314s.171-.944.511-1.314c.341-.37.757-.555 1.25-.555h12.329l-2.784-2.92c-.341-.35-.511-.798-.511-1.343 0-.545.17-.993.511-1.343.341-.35.758-.525 1.25-.525s.909.175 1.25.525l5.682 6.131c.341.35.511.798.511 1.343 0 .506-.171.934-.511 1.285l-5.682 6.19c-.341.35-.748.525-1.222.525z' fill='%23000'/%3e%3c/g%3e%3c/svg%3e"); + &, + &:hover, + &:active, + &:focus { + outline: none; + box-shadow: none; + border: none; + } + } + } + } + + .nav-link { + cursor: pointer; + position: relative; + font-weight: $font-weight-normal; + color: inherit; + text-decoration: none; + + &:before { + top: auto; + left: auto; + position: absolute; + top: $spacer * 0.5; + bottom: $spacer * 0.5; + border-left: 2px solid $primary-light; + left: 0; + } + + &:hover, + &:focus, + &:active, + &.active { + color: inherit; + + &:before { content: ""} + } + &:focus, + &:active, + &.active { + font-weight: $font-weight-bold; + } + } + + } + + .main { + width: 100%; + padding-top: $spacer * 2.125; + z-index: 0; + position: relative; + } + @media (min-width: $screen-md){ + display: flex; + padding-top: 0; + + .side-menu { + transform: translate3d(0, 0, 0); + width: 220px; + position: sticky; + max-height: 100vh; + top: 0; + padding-top: $spacer * 2; + left: auto; + + .menu-toggle, + .menu-close { + display: none; + } + } + .main { + padding-top: $spacer * 2; + margin-left: $grid-gutter-width; + } + } +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_buttons.scss b/themes/app-landingpage/assets/scss/_buttons.scss new file mode 100644 index 0000000..8c3528d --- /dev/null +++ b/themes/app-landingpage/assets/scss/_buttons.scss @@ -0,0 +1,182 @@ +// +// Base styles +// + +.btn { + display: inline-block; + font-family: $btn-font-family; + font-weight: $btn-font-weight; + line-height: $btn-line-height; + color: $body-color; + text-align: center; + white-space: $btn-white-space; + vertical-align: middle; + cursor: if($enable-pointer-cursor-for-buttons, pointer, null); + user-select: none; + background-color: transparent; + border: $btn-border-width solid transparent; + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); + @include transition($btn-transition); + text-decoration: none; + + &:hover { + color: $body-color; + text-decoration: none; + } + + &:focus, + &.focus { + outline: 0; + box-shadow: $btn-focus-box-shadow; + } + + &:active, + &.active { + @include box-shadow($btn-active-box-shadow); + + &:focus { + @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + } + } + + &:disabled, + &.disabled, + fieldset:disabled & { // stylelint-disable-line selector-no-qualifying-type + pointer-events: none; + opacity: $btn-disabled-opacity; + @include box-shadow(none); + } + + .icon { + width: 1rem; + height: 1rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + position: relative; + top: -0.05rem; + text-align: center; + + &:first-child { + margin-right: 0.4rem; + margin-left: 0.05rem; + } + &:last-child { + margin-left: 0.4rem; + margin-right: 0.05rem; + } + } +} + + +// +// Alternate buttons +// + +@each $color, $value in $theme-button-colors { + .btn-#{$color} { + @include button-variant($value, $value); + box-shadow: 0 8px 24px -17px $theme-button-shadow-color; + font-weight: 500; + .icon { + width: 1.5rem; + height: 1.5rem; + padding: 0 0.75rem; + &:before { + height: 1.6rem; + width: 1.6rem; + } + &:first-child { + margin-right: 0.5rem; + margin-left: 0.05rem; + } + &:last-child { + margin-left: 0.5rem; + margin-right: 0.05rem; + } + } + } +} + +// @each $color, $value in $theme-colors { +// .btn-outline-#{$color} { +// @include button-outline-variant($value); +// } +// } + + +// +// Link buttons +// + +// Make a button look and behave like a link +.btn-link { + font-weight: $font-weight-normal; + color: $btn-link-color; + text-decoration: $link-decoration; + + &:hover { + color: $btn-link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus, + &.focus { + text-decoration: $link-hover-decoration; + box-shadow: none; + } + + &:disabled, + &.disabled { + color: $btn-link-disabled-color; + } + &_narrow { + padding-left: 0; + padding-right: 0; + margin-top: 0.4rem; + } + &_icon { + font-weight: bold; + color: inherit; + text-decoration: none; + display: inline-flex; + width: auto; + align-items: center; + + .text-left > & { + margin-right: 1rem; + } + .text-right > & { + margin-left: 1rem; + } + } + // No need for an active state here +} + + +// +// Button Sizes +// + +.btn-lg { + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); +} + +.btn-sm { + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); +} + + +// +// Block button +// + +.btn-block { + display: block; + width: 100%; + + // Vertically space out multiple block buttons + p + &, + + .btn-block { + margin-top: $btn-block-spacing-y; + } +} diff --git a/themes/app-landingpage/assets/scss/_containers.scss b/themes/app-landingpage/assets/scss/_containers.scss new file mode 100644 index 0000000..8ccb552 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_containers.scss @@ -0,0 +1,73 @@ +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +@if $enable-grid-classes { + // Single container class with breakpoint max-widths + .container { + @include make-container(); + @include make-container-max-widths(); + &-inner { + max-width: 860px; + margin-left: auto; + margin-right: auto; + padding-left: 0; + padding-right: 0; + &_lg { + max-width: 980px; + } + &_sm { + max-width: 680px; + } + } + @media (max-width: 360px){ + padding-left: 1rem; + padding-right: 1rem; + } + } + + video { + display: block; + width: 100%; + max-height: 100%; + } + + #player-overlay { + background-color: #000; + z-index: 999; + } + + // 100% wide container at all breakpoints + .container-fluid { + @include make-container(); + } + + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @extend .container-fluid; + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + %responsive-container-#{$breakpoint} { + max-width: $container-max-width; + } + + // Extend each breakpoint which is smaller or equal to the current breakpoint + $extend-breakpoint: true; + + @each $name, $width in $grid-breakpoints { + @if ($extend-breakpoint) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + + // Once the current breakpoint is reached, stop extending + @if ($breakpoint == $name) { + $extend-breakpoint: false; + } + } + } + } + } +} diff --git a/themes/app-landingpage/assets/scss/_custom-variables.scss b/themes/app-landingpage/assets/scss/_custom-variables.scss new file mode 100644 index 0000000..5aa66ee --- /dev/null +++ b/themes/app-landingpage/assets/scss/_custom-variables.scss @@ -0,0 +1,16 @@ +$theme-button-colors: ( + "primary": $primary, + "secondary": $secondary +) !default; +$theme-button-shadow-color: $charcoal-black; + +$background-image_gradient: linear-gradient(to right, #80cdec 29%, #c00f2d 126%, #c00f2d 126%); +$background-image_shape-wave: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='272' viewBox='0 0 1440 272'%3e%3cpath fill='%23fff' d='M1428.979 207.361c-178.674 81.041-501.519 81.266-718.176 6.004-266.515-92.581-562.398-106.589-710.803-106.974v165.609h1440v-70.02c-3.941 2.036-7.636 3.846-11.021 5.381z'/%3e%3c/svg%3e"); +$background-image_shape-wave-xs: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1' xmlns='http://www.w3.org/2000/svg' width='375' height='36' viewBox='0 0 375 36'%3e%3cpath fill='%23fff' d='M5.18 22.209c-1.775-.189-3.5-.409-5.18-.656v14.447h375v-25.712c-111.343 21.507-244.559 25.302-369.82 11.921z'/%3e%3c/svg%3e"); + +$accordion-header-padding: ($spacer * 1.25) 44px ($spacer * 1.25) ($spacer * 1.25); +$according-header-bg: $body-bg; +$according-header-active-bg: $secondary; +$accordion-border-color: $border-color; + +$header-mobile-sticky: false; \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_fonts.scss b/themes/app-landingpage/assets/scss/_fonts.scss new file mode 100644 index 0000000..2f07d6e --- /dev/null +++ b/themes/app-landingpage/assets/scss/_fonts.scss @@ -0,0 +1,78 @@ +/* roboto-regular - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */ + src: local('Roboto'), local('Roboto-Regular'), + url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ +} +/* roboto-italic - latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + src: url('../fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */ + src: local('Roboto Italic'), local('Roboto-Italic'), + url('../fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */ + url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */ +} +/* roboto-700 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */ + src: local('Roboto Bold'), local('Roboto-Bold'), + url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */ + url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ +} +/* roboto-700italic - latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 700; + src: url('../fonts/roboto-v20-latin-700italic.eot'); /* IE9 Compat Modes */ + src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), + url('../fonts/roboto-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/roboto-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/roboto-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */ + url('../fonts/roboto-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/roboto-v20-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */ +} +/* roboto-900 - latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: url('../fonts/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */ + src: local('Roboto Black'), local('Roboto-Black'), + url('../fonts/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */ + url('../fonts/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */ +} +/* roboto-900italic - latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 900; + src: url('../fonts/roboto-v20-latin-900italic.eot'); /* IE9 Compat Modes */ + src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), + url('../fonts/roboto-v20-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/roboto-v20-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/roboto-v20-latin-900italic.woff') format('woff'), /* Modern Browsers */ + url('../fonts/roboto-v20-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/roboto-v20-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */ +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_footer.scss b/themes/app-landingpage/assets/scss/_footer.scss new file mode 100644 index 0000000..2f75b84 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_footer.scss @@ -0,0 +1,69 @@ +.footer { + position: relative; + background-position: center; + @extend .section_bg-gradient; + color: $white; + padding-top: 3rem; + padding-bottom: 1rem; + + a:not(.btn), + .copyright, + .small { + color: inherit; + text-decoration: none; + } + a:not(.btn) { + &:hover { + text-decoration: underline; + } + } + .link-item { + padding-left: ($grid-gutter-width /2); + padding-right: ($grid-gutter-width /2); + margin-bottom: 1.2rem; + + strong, + a { + display: block; + white-space: nowrap; + } + } + .logo img { + height: 48px; + } + .logo { + margin-bottom: 1.6rem; + } +} + +.copyright-bar { + @extend .small; + @extend .d-flex; + margin-top: 1.5rem; + flex-wrap: wrap; + margin-left: ($grid-gutter-width /2) * -1; + margin-right: ($grid-gutter-width /2) * -1; + + div { + flex: 1 0 auto; + padding-left: ($grid-gutter-width /2); + padding-right: ($grid-gutter-width /2); + max-width: 100%; + } + + @media (min-width: $screen-sm){ + flex-wrap: nowrap; + justify-content: space-between; + margin-top: 2rem; + + div { + flex: 1 1 auto; + } + } + @media (min-width: $screen-md){ + margin-top: 3.2rem; + } + .privacy a { + white-space: nowrap; + } +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_forms.scss b/themes/app-landingpage/assets/scss/_forms.scss new file mode 100644 index 0000000..ff9a016 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_forms.scss @@ -0,0 +1,9 @@ +@import "forms/labels"; +@import "forms/form-control"; +@import "forms/form-select"; +@import "forms/form-check"; +@import "forms/form-file"; +@import "forms/form-range"; +@import "forms/layout"; +@import "forms/input-group"; +@import "forms/validation"; diff --git a/themes/app-landingpage/assets/scss/_functions.scss b/themes/app-landingpage/assets/scss/_functions.scss new file mode 100644 index 0000000..d93e339 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_functions.scss @@ -0,0 +1,185 @@ +// Bootstrap functions +// +// Utility mixins and functions for evaluating source code across our variables, maps, and mixins. + +// Ascending +// Used to evaluate Sass maps like our grid breakpoints. +@mixin _assert-ascending($map, $map-name) { + $prev-key: null; + $prev-num: null; + @each $key, $num in $map { + @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $prev-num >= $num { + @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } + $prev-key: $key; + $prev-num: $num; + } +} + +// Starts at zero +// Used to ensure the min-width of the lowest breakpoint starts at 0. +@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { + @if length($map) > 0 { + $values: map-values($map); + $first-value: nth($values, 1); + @if $first-value != 0 { + @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; + } + } +} + +// Internal Bootstrap function to turn maps into its negative variant. +// It prefixes the keys with `n` and makes the value negative. +@function negativify-map($map) { + $result: (); + @each $key, $value in $map { + @if $key != 0 { + $result: map-merge($result, ("n" + $key: (-$value))); + } + } + @return $result; +} + +// Get multiple keys from a sass map +@function map-get-multiple($map, $values) { + $result: (); + @each $key, $value in $map { + @if (index($values, $key) != null) { + $result: map-merge($result, ($key: $value)); + } + } + @return $result; +} + +// Replace `$search` with `$replace` in `$string` +// Used on our SVG icon backgrounds for custom forms. +// +// @author Hugo Giraudel +// @param {String} $string - Initial string +// @param {String} $search - Substring to replace +// @param {String} $replace ('') - New value +// @return {String} - Updated string +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +// See https://codepen.io/kevinweber/pen/dXWoRw +@function escape-svg($string) { + @if str-index($string, "data:image/svg+xml") { + @each $char, $encoded in $escaped-characters { + // Do not escape the url brackets + @if str-index($string, "url(") == 1 { + $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}"); + } @else { + $string: str-replace($string, $char, $encoded); + } + } + } + + @return $string; +} + +// Color contrast +// See https://github.com/twbs/bootstrap/pull/30168 + +// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255) +// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern +$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1; + +@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light) { + $l1: luminance($background); + $l2: luminance(opaque($background, $color-contrast-light)); + + $contrast: if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05)); + + @return if($contrast < $min-contrast-ratio, $color-contrast-dark, $color-contrast-light); +} + +// Return WCAG2.0 relative luminance +// See https://www.w3.org/WAI/GL/wiki/Relative_luminance +// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests +@function luminance($color) { + $rgb: ( + "r": red($color), + "g": green($color), + "b": blue($color) + ); + + @each $name, $value in $rgb { + $value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1)); + $rgb: map-merge($rgb, ($name: $value)); + } + + @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722); +} + +// Return opaque color +// opaque(#fff, rgba(0, 0, 0, .5)) => #808080 +@function opaque($background, $foreground) { + @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100); +} + +// Request a color level +// scss-docs-start color-level +@function color-level($color: $primary, $level: 0) { + $color-base: if($level > 0, $black, $white); + $level: abs($level); + + @return mix($color-base, $color, $level * $theme-color-interval); +} +// scss-docs-end color-level + +@function tint-color($color, $level) { + @return mix(white, $color, $level * $theme-color-interval); +} + +@function shade-color($color, $level) { + @return mix(black, $color, $level * $theme-color-interval); +} + +// Return valid calc +@function add($value1, $value2, $return-calc: true) { + @if $value1 == null { + @return $value2; + } + + @if $value2 == null { + @return $value1; + } + + @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { + @return $value1 + $value2; + } + + @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); +} + +@function subtract($value1, $value2, $return-calc: true) { + @if $value1 == null and $value2 == null { + @return null; + } + + @if $value1 == null { + @return -$value2; + } + + @if $value2 == null { + @return $value1; + } + + @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { + @return $value1 - $value2; + } + + @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); +} diff --git a/themes/app-landingpage/assets/scss/_grid.scss b/themes/app-landingpage/assets/scss/_grid.scss new file mode 100644 index 0000000..5686f31 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_grid.scss @@ -0,0 +1,22 @@ +// Row +// +// Rows contain your columns. + +@if $enable-grid-classes { + .row { + @include make-row(); + + > * { + @include make-col-ready(); + } + } +} + + +// Columns +// +// Common styles for small and large grid columns + +@if $enable-grid-classes { + @include make-grid-columns(); +} diff --git a/themes/app-landingpage/assets/scss/_header.scss b/themes/app-landingpage/assets/scss/_header.scss new file mode 100644 index 0000000..f9b43df --- /dev/null +++ b/themes/app-landingpage/assets/scss/_header.scss @@ -0,0 +1,301 @@ +.logo { + display: flex; + flex-direction: row; + text-decoration: none; + + &-image { + width: auto; + height: 55px; + display: block; + flex: 0 0 auto; + overflow: hidden; + } +} + +.header { + background-position: center; + @extend .section_bg-gradient; + @if $header-mobile-sticky { + top: 0; + position: sticky; + z-index: 2; + + @media(min-width: $screen-md){ + z-index: auto; + position: relative; + } + } @else { + position: relative; + z-index: 2; + } + &_home { + body & { + background-image: none; + z-index: auto; + } + + &:before, + &:after { + content: ""; + position: absolute; + left: 0; + right: 0; + z-index: -1; + background-position: center; + background-image: $background-image_gradient; + height: 140px; + top: -12px; + } + &:after { + top: -10px; + background-image: $background-image_shape-wave-xs; + background-position: center bottom; + background-size: 100% auto; + background-repeat: no-repeat; + } + + @media(min-width: $screen-sm){ + &:before, + &:after { + background-image: $background-image_gradient; + height: 280px; + } + &:after { + background-image: $background-image_shape-wave; + background-size: auto; + background-position: left bottom; + } + + } + .page-home & { + @media(min-width: $screen-lg){ + margin-bottom: 5 * $spacer; + } + @media(min-width: $screen-xl){ + margin-bottom: $spacer; + } + } + @media (min-width: $screen-xl) { + &:before, + &:after { + min-height: 320px; + height: 23vw; + } + &:after { + background-size: cover; + background-position: center bottom; + } + } + @media (min-width: $screen-xl + 180px){ + &:before, + &:after { + height: 20vw; + transform: translate3d(0,-2%,0); + } + } + @media (min-width: 2200px){ + &:before, + &:after { + transform: translate3d(0,-10%,0); + } + } + @media (min-width: 2200px){ + &:before, + &:after { + transform: translate3d(0,-20%,0); + } + } + } + + .logo-caption { + color: $white; + } + .nav-link { + text-decoration: none; + } + .nav-item { + font-weight: $font-weight-bold; + } + .nav-item, + .nav-link { + @media(min-width: $screen-md){ + color: inherit; + } + } + .navbar{ + padding-top: $spacer * 1.5; + padding-bottom: $spacer * 1.5; + @media(min-width: $screen-md){ + color: $white; + } + } + .btn-menu { + appearance: none; + width: 44px; + height: 44px; + min-width: 44px; + display: block; + border-radius: $border-radius; + position: absolute; + background: transparent; + border: none; + outline: none; + top: $spacer * 1.5; + right: $spacer * 1.5; + z-index: 1; + + &:before { + content: ""; + width: 100%; + height: 100%; + min-width: 44px; + background: url("../img/icons/burger_menu.svg") center no-repeat; + display: block; + position: absolute; + left: 0; + top: 0; + } + @media(min-width: $screen-md){ + display: none; + } + &_close:before { + background-image: url("../img/icons/burger_menu_close.svg"); + } + } + &-nav { + display: none; + &.active { + display: block; + position: fixed; + height: 100vh; + width: 100%; + left: 0; + top:0; + background-color: $body-bg; + padding-top: $spacer * 1.3; + padding-left: $spacer; + padding-right: $spacer; + z-index: $zindex-modal; + + .nav { + display: flex; + flex-direction: column; + } + } + + .nav-item { + font-size: $font-size-lg; + color: $body-color; + font-weight: $font-weight-bold; + order: 1; + + .nav-link { + &, + &:hover { + color: inherit; + } + &.disabled { + opacity: 0.7; + } + } + + &.lang { + display: flex; + align-items: center; + font-size: $font-size-base; + position: relative; + top: 0.08rem; + order: 0; + padding-left: $spacer * 0.8; + padding-right: $spacer * 0.8; + margin-bottom: $spacer; + text-transform: uppercase; + + .nav-link { + &, + &:hover { + padding-left: 0.3rem; + padding-right: 0.3rem; + opacity: 0.7; + } + + &-delimiter { + position: relative; + top: -0.08rem; + } + &.active { + &, + &:hover { + opacity: 1; + } + } + } + } + } + + @media(min-width: $screen-md){ + &, + &.active { + display: flex; + justify-content: flex-end; + align-items: center; + position: static; + background: transparent; + height: auto; + width: auto; + padding: 0; + + .nav { + flex-direction: row; + color: $white; + + &-item.lang { + padding-left: 0; + padding-right: 0; + margin-bottom: 0; + } + } + } + .nav-item, + .nav-item.lang { + order: 1; + color: inherit; + } + .btn-menu { + display: none; + } + .nav-link { + &.active { + position: relative; + &:after { + content: ""; + position: absolute; + bottom: $spacer * 0.6; + border-top: 2px solid $white; + left: $spacer; + right: $spacer; + } + } + } + .nav-link-icon { + &.icon_github { + position: relative; + margin-right: 10px; + &:before { + content: ""; + background-image: url("../img/icons/github_white.svg"); + background-position: center; + background-repeat: no-repeat; + position: absolute; + width: 100%; + height: 100%; + top: 0.01rem; + } + img { + visibility: hidden; + } + } + } + } + } +} diff --git a/themes/app-landingpage/assets/scss/_icon.scss b/themes/app-landingpage/assets/scss/_icon.scss new file mode 100644 index 0000000..d0acff0 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_icon.scss @@ -0,0 +1,30 @@ +@mixin image-icon($value) { + &_#{$value}:before { + background-image: url("../img/icons/#{$value}.svg"); + } +} + +.icon { + overflow: visible; + position: relative; + &:before { + content: ""; + background-position: center; + background-repeat: no-repeat; + position: absolute; + width: 100%; + height: 100%; + top: 50%; + left: 50%; + transform: translate3d(-50%,-50%,0); + } + @include image-icon('github'); + @include image-icon('arrow-down'); + @include image-icon('arrow-right'); + @include image-icon('arrow-left'); + &_img { + &:before { + content: normal; + } + } +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_images.scss b/themes/app-landingpage/assets/scss/_images.scss new file mode 100644 index 0000000..5a6ccdd --- /dev/null +++ b/themes/app-landingpage/assets/scss/_images.scss @@ -0,0 +1,15 @@ +// Responsive image +// +// Keep images from scaling beyond the width of their parents. + +.img-fluid { + // Part 1: Set a maximum relative to the parent + max-width: 100%; + // Part 2: Override the height to auto, otherwise images will be stretched + // when setting a width and height attribute on the img element. + height: auto; +} + +.img-shadow { + box-shadow: 0 8px 24px -17px #000101; +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_list.scss b/themes/app-landingpage/assets/scss/_list.scss new file mode 100644 index 0000000..c9fb378 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_list.scss @@ -0,0 +1,129 @@ +.list { + padding-left: 0; + &, + &-item { + list-style: none; + .list-icon { + display: inline-block; + margin-bottom: $spacer * 0.6; + } + } + &_plain &-item:not(.col) { + padding-left: 0; + } + &_bullets &-item { + padding-left: 1rem; + position: relative; + + &:before { + color: $primary-light; + content: '\2022'; + left: 0; + position: absolute; + font-size: 1.75rem; + line-height: $line-height-base * 1rem; + } + } +} + +.icon-list { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + &-item { + padding: ($spacer * 1) ($spacer * 1.5); + @media (min-width: $screen-lg){ + padding: ($spacer * 1.4) ($spacer * 2.2); + } + } + &_inline &-item { + padding: ($spacer * 1) ($spacer * 0.5); + @media (min-width: $screen-lg){ + padding: ($spacer * 1) ($spacer * 0.75); + } + } +} + +.card-list { + @extend .row; + margin-top: $spacer * 3; + overflow: hidden; + &-item { + @extend .col; + display: flex; + flex-direction: column; + margin-bottom: $spacer * 3; + margin-top: $spacer * 2; + width: 100%; + flex: 0 0 auto; + flex-wrap: wrap; + + .container { + padding-bottom: 0; + padding-top: $spacer; + padding-left: 0; + flex: 1 0 auto; + display: flex; + flex-direction: column; + + &:first-child { + padding-bottom: 60px; + padding-top: 60px; + padding-left: $spacer * 2; + padding-right: $spacer * 2; + background-color: $secondary; + display: flex; + flex-direction: column; + justify-content: center; + + } + .btn-link:last-child{ + padding-bottom: 0; + position: relative; + top: 6px; + } + } + .image-block { + height: 240px; + display: block; + position: relative; + text-align: center; + overflow: hidden; + padding: 0; + + img { + width: auto; + object-fit: cover; + min-height: 240px; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%,-50%,0); + } + } + .headline-caption { + font-size: $font-size-base; + margin-bottom: $spacer * 0.75; + } + &:nth-child(odd) .container:first-child{ + background-color: $pink; + } + @media (min-width: $screen-sm) { + width: 50%; + .container:first-child { + padding-top: 80px; + padding-bottom: 80px; + } + } + @media (min-width: $screen-lg){ + width: 33.33%; + } + @media (min-width: $screen-xl){ + .container:first-child { + padding-top: 100px; + padding-bottom: 100px; + } + } + } +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_mixins.scss b/themes/app-landingpage/assets/scss/_mixins.scss new file mode 100644 index 0000000..d65cb7e --- /dev/null +++ b/themes/app-landingpage/assets/scss/_mixins.scss @@ -0,0 +1,62 @@ +// Toggles +// +// Used in conjunction with global variables to enable certain theme features. + +// Vendor +@import "vendor/rfs"; + +// Deprecate +@import "mixins/deprecate"; + +// Helpers +@import "mixins/breakpoints"; +@import "mixins/image"; +@import "mixins/resize"; +@import "mixins/screen-reader"; +@import "mixins/reset-text"; +@import "mixins/text-truncate"; + +// Utilities +@import "mixins/utilities"; + +// Components +@import "mixins/alert"; +@import "mixins/buttons"; +@import "mixins/caret"; +@import "mixins/pagination"; +@import "mixins/lists"; +@import "mixins/list-group"; +@import "mixins/forms"; +@import "mixins/table-variants"; + +// Skins +@import "mixins/background-variant"; +@import "mixins/border-radius"; +@import "mixins/box-shadow"; +@import "mixins/gradients"; +@import "mixins/transition"; + +// Layout +@import "mixins/clearfix"; +@import "mixins/container"; +@import "mixins/grid"; + + +//Slider +@function slick-image-url($url) { + @if function-exists(image-url) { + @return image-url($url); + } + @else { + @return url($slick-loader-path + $url); + } +} + +@function slick-font-url($url) { + @if function-exists(font-url) { + @return font-url($url); + } + @else { + @return url($slick-font-path + $url); + } +} \ No newline at end of file diff --git a/themes/app-landingpage/assets/scss/_nav.scss b/themes/app-landingpage/assets/scss/_nav.scss new file mode 100644 index 0000000..3fb0463 --- /dev/null +++ b/themes/app-landingpage/assets/scss/_nav.scss @@ -0,0 +1,123 @@ +// Base class +// +// Kickstart any navigation component with a set of style resets. Works with +// `