diff --git a/theme_kaizen/README.rst b/theme_kaizen/README.rst new file mode 100644 index 0000000..38929e8 --- /dev/null +++ b/theme_kaizen/README.rst @@ -0,0 +1,35 @@ +**This file is going to be generated by oca-gen-addon-readme.** + +*Manual changes will be overwritten.* + +Please provide content in the ``readme`` directory: + +* **DESCRIPTION.rst** (required) +* INSTALL.rst (optional) +* CONFIGURE.rst (optional) +* **USAGE.rst** (optional, highly recommended) +* DEVELOP.rst (optional) +* ROADMAP.rst (optional) +* HISTORY.rst (optional, recommended) +* **CONTRIBUTORS.rst** (optional, highly recommended) +* CREDITS.rst (optional) + +Content of this README will also be drawn from the addon manifest, +from keys such as name, authors, maintainers, development_status, +and license. + +A good, one sentence summary in the manifest is also highly recommended. + + +Automatic changelog generation +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +`HISTORY.rst` can be auto generated using `towncrier `_. + +Just put towncrier compatible changelog fragments into `readme/newsfragments` +and the changelog file will be automatically generated and updated when a new fragment is added. + +Please refer to `towncrier` documentation to know more. + +NOTE: the changelog will be automatically generated when using `/ocabot merge $option`. +If you need to run it manually, refer to `OCA/maintainer-tools README `_. diff --git a/theme_kaizen/__init__.py b/theme_kaizen/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/theme_kaizen/__manifest__.py b/theme_kaizen/__manifest__.py new file mode 100644 index 0000000..9cdd487 --- /dev/null +++ b/theme_kaizen/__manifest__.py @@ -0,0 +1,33 @@ +{ + "name": "Kaizen Theme", + "category": "Theme/Corporate", + "version": "13.0.1.0.0", + "images": ["static/description/poster.png", "static/description/main.gif"], + "author": "Onestein, Odoo Community Association (OCA)", + "depends": ["website", "website_blog"], + "data": [ + "templates/assets.xml", + "templates/layout.xml", + "templates/blog.xml", + "templates/snippets/menu_1.xml", + "templates/snippets/menu_2.xml", + "templates/snippets/menu_3.xml", + "templates/snippets/hero_1.xml", + "templates/snippets/devices.xml", + "templates/snippets/contributors.xml", + "templates/snippets/media.xml", + "templates/snippets/media_alt.xml", + "templates/snippets/design.xml", + "templates/snippets/posts.xml", + "templates/snippets/breadcrumbs.xml", + "templates/snippets/faq.xml", + "templates/snippets/sidebar.xml", + "templates/snippets/links.xml", + "templates/snippets/discussions.xml", + "templates/snippets/content_listing.xml", + "templates/snippets.xml", + "templates/snippet_options.xml", + "templates/colorpicker.xml", + ], + "license": "AGPL-3", +} diff --git a/theme_kaizen/readme/CONTRIBUTORS.rst b/theme_kaizen/readme/CONTRIBUTORS.rst new file mode 100644 index 0000000..a6acc76 --- /dev/null +++ b/theme_kaizen/readme/CONTRIBUTORS.rst @@ -0,0 +1,3 @@ +* Dennis Sluijk +* Renée Duijzers +* Eyal Benvinisti diff --git a/theme_kaizen/readme/CREDITS.rst b/theme_kaizen/readme/CREDITS.rst new file mode 100644 index 0000000..10876c6 --- /dev/null +++ b/theme_kaizen/readme/CREDITS.rst @@ -0,0 +1,3 @@ +The development of this module has been financially supported by: + +* UBports diff --git a/theme_kaizen/readme/DESCRIPTION.rst b/theme_kaizen/readme/DESCRIPTION.rst new file mode 100644 index 0000000..e45320e --- /dev/null +++ b/theme_kaizen/readme/DESCRIPTION.rst @@ -0,0 +1,21 @@ +Custom Building Blocks +~~~~~~~~~~~~~~~~~~~~~~ + +.. image:: /theme_kaizen/static/description/hero.png + +.. image:: /theme_kaizen/static/description/devices.png + +.. image:: /theme_kaizen/static/description/faq.png + +.. image:: /theme_kaizen/static/description/swiper.png + +.. image:: /theme_kaizen/static/description/latest-news.png + +Custom Mega Menu +~~~~~~~~~~~~~~~~ + +.. image:: /theme_kaizen/static/description/menu-1.png + +.. image:: /theme_kaizen/static/description/menu-2.png + +.. image:: /theme_kaizen/static/description/menu-3.png diff --git a/theme_kaizen/static/description/devices.png b/theme_kaizen/static/description/devices.png new file mode 100644 index 0000000..906f356 Binary files /dev/null and b/theme_kaizen/static/description/devices.png differ diff --git a/theme_kaizen/static/description/faq.png b/theme_kaizen/static/description/faq.png new file mode 100644 index 0000000..4e26cd3 Binary files /dev/null and b/theme_kaizen/static/description/faq.png differ diff --git a/theme_kaizen/static/description/hero.png b/theme_kaizen/static/description/hero.png new file mode 100644 index 0000000..5ee854a Binary files /dev/null and b/theme_kaizen/static/description/hero.png differ diff --git a/theme_kaizen/static/description/latest-news.png b/theme_kaizen/static/description/latest-news.png new file mode 100644 index 0000000..02c90cf Binary files /dev/null and b/theme_kaizen/static/description/latest-news.png differ diff --git a/theme_kaizen/static/description/main.gif b/theme_kaizen/static/description/main.gif new file mode 100644 index 0000000..c018cbc Binary files /dev/null and b/theme_kaizen/static/description/main.gif differ diff --git a/theme_kaizen/static/description/menu-1.png b/theme_kaizen/static/description/menu-1.png new file mode 100644 index 0000000..b917f1a Binary files /dev/null and b/theme_kaizen/static/description/menu-1.png differ diff --git a/theme_kaizen/static/description/menu-2.png b/theme_kaizen/static/description/menu-2.png new file mode 100644 index 0000000..c02e14d Binary files /dev/null and b/theme_kaizen/static/description/menu-2.png differ diff --git a/theme_kaizen/static/description/menu-3.png b/theme_kaizen/static/description/menu-3.png new file mode 100644 index 0000000..08dd392 Binary files /dev/null and b/theme_kaizen/static/description/menu-3.png differ diff --git a/theme_kaizen/static/description/poster.png b/theme_kaizen/static/description/poster.png new file mode 100644 index 0000000..5fe1995 Binary files /dev/null and b/theme_kaizen/static/description/poster.png differ diff --git a/theme_kaizen/static/description/swiper.png b/theme_kaizen/static/description/swiper.png new file mode 100644 index 0000000..57320df Binary files /dev/null and b/theme_kaizen/static/description/swiper.png differ diff --git a/theme_kaizen/static/font/Ubuntu-Bold.ttf b/theme_kaizen/static/font/Ubuntu-Bold.ttf new file mode 100644 index 0000000..4af149a Binary files /dev/null and b/theme_kaizen/static/font/Ubuntu-Bold.ttf differ diff --git a/theme_kaizen/static/font/Ubuntu-Light.ttf b/theme_kaizen/static/font/Ubuntu-Light.ttf new file mode 100644 index 0000000..0e9f90d Binary files /dev/null and b/theme_kaizen/static/font/Ubuntu-Light.ttf differ diff --git a/theme_kaizen/static/font/UbuntuMono-Regular.ttf b/theme_kaizen/static/font/UbuntuMono-Regular.ttf new file mode 100644 index 0000000..c8add8e Binary files /dev/null and b/theme_kaizen/static/font/UbuntuMono-Regular.ttf differ diff --git a/theme_kaizen/static/img/header/community-banner.jpg b/theme_kaizen/static/img/header/community-banner.jpg new file mode 100644 index 0000000..24d3c42 Binary files /dev/null and b/theme_kaizen/static/img/header/community-banner.jpg differ diff --git a/theme_kaizen/static/img/homepage/Fairphone.svg b/theme_kaizen/static/img/homepage/Fairphone.svg new file mode 100644 index 0000000..29e3306 --- /dev/null +++ b/theme_kaizen/static/img/homepage/Fairphone.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme_kaizen/static/img/homepage/Nexus.svg b/theme_kaizen/static/img/homepage/Nexus.svg new file mode 100644 index 0000000..4b098b0 --- /dev/null +++ b/theme_kaizen/static/img/homepage/Nexus.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme_kaizen/static/img/homepage/OnePlusOne.svg b/theme_kaizen/static/img/homepage/OnePlusOne.svg new file mode 100644 index 0000000..7357208 --- /dev/null +++ b/theme_kaizen/static/img/homepage/OnePlusOne.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme_kaizen/static/img/homepage/PinePhone.svg b/theme_kaizen/static/img/homepage/PinePhone.svg new file mode 100644 index 0000000..c5aad8d --- /dev/null +++ b/theme_kaizen/static/img/homepage/PinePhone.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme_kaizen/static/img/homepage/Volla.svg b/theme_kaizen/static/img/homepage/Volla.svg new file mode 100644 index 0000000..0957ca7 --- /dev/null +++ b/theme_kaizen/static/img/homepage/Volla.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme_kaizen/static/img/homepage/hero.jpg b/theme_kaizen/static/img/homepage/hero.jpg new file mode 100644 index 0000000..fbb9cc1 Binary files /dev/null and b/theme_kaizen/static/img/homepage/hero.jpg differ diff --git a/theme_kaizen/static/img/homepage/media-1-mobile.jpg b/theme_kaizen/static/img/homepage/media-1-mobile.jpg new file mode 100644 index 0000000..fe0ed85 Binary files /dev/null and b/theme_kaizen/static/img/homepage/media-1-mobile.jpg differ diff --git a/theme_kaizen/static/img/homepage/media-2-mobile.jpg b/theme_kaizen/static/img/homepage/media-2-mobile.jpg new file mode 100644 index 0000000..2563b7a Binary files /dev/null and b/theme_kaizen/static/img/homepage/media-2-mobile.jpg differ diff --git a/theme_kaizen/static/img/icons/angle-icon-gradient.svg b/theme_kaizen/static/img/icons/angle-icon-gradient.svg new file mode 100644 index 0000000..ad5e391 --- /dev/null +++ b/theme_kaizen/static/img/icons/angle-icon-gradient.svg @@ -0,0 +1,35 @@ +angle-icon-gradient diff --git a/theme_kaizen/static/img/icons/angle-icon.svg b/theme_kaizen/static/img/icons/angle-icon.svg new file mode 100644 index 0000000..30f5ecf --- /dev/null +++ b/theme_kaizen/static/img/icons/angle-icon.svg @@ -0,0 +1,14 @@ +angle-icon diff --git a/theme_kaizen/static/img/icons/bullet-gradient.svg b/theme_kaizen/static/img/icons/bullet-gradient.svg new file mode 100644 index 0000000..ff5a0c1 --- /dev/null +++ b/theme_kaizen/static/img/icons/bullet-gradient.svg @@ -0,0 +1,23 @@ +bullet-gradient diff --git a/theme_kaizen/static/img/icons/calendar.svg b/theme_kaizen/static/img/icons/calendar.svg new file mode 100644 index 0000000..4357c22 --- /dev/null +++ b/theme_kaizen/static/img/icons/calendar.svg @@ -0,0 +1,20 @@ +Asset 1 diff --git a/theme_kaizen/static/img/icons/external-link.svg b/theme_kaizen/static/img/icons/external-link.svg new file mode 100644 index 0000000..6fc40ec --- /dev/null +++ b/theme_kaizen/static/img/icons/external-link.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/theme_kaizen/static/img/icons/facebook.svg b/theme_kaizen/static/img/icons/facebook.svg new file mode 100644 index 0000000..0575871 --- /dev/null +++ b/theme_kaizen/static/img/icons/facebook.svg @@ -0,0 +1,14 @@ + + + diff --git a/theme_kaizen/static/img/icons/github.svg b/theme_kaizen/static/img/icons/github.svg new file mode 100644 index 0000000..ed5fd20 --- /dev/null +++ b/theme_kaizen/static/img/icons/github.svg @@ -0,0 +1,15 @@ + + + diff --git a/theme_kaizen/static/img/icons/hamburger.svg b/theme_kaizen/static/img/icons/hamburger.svg new file mode 100644 index 0000000..0f9eeb9 --- /dev/null +++ b/theme_kaizen/static/img/icons/hamburger.svg @@ -0,0 +1,9 @@ +Combined Shape diff --git a/theme_kaizen/static/img/icons/irc.svg b/theme_kaizen/static/img/icons/irc.svg new file mode 100644 index 0000000..f5690a8 --- /dev/null +++ b/theme_kaizen/static/img/icons/irc.svg @@ -0,0 +1,9 @@ +irc diff --git a/theme_kaizen/static/img/icons/linkedin.svg b/theme_kaizen/static/img/icons/linkedin.svg new file mode 100644 index 0000000..4457a04 --- /dev/null +++ b/theme_kaizen/static/img/icons/linkedin.svg @@ -0,0 +1,14 @@ + + + diff --git a/theme_kaizen/static/img/icons/microphone.svg b/theme_kaizen/static/img/icons/microphone.svg new file mode 100644 index 0000000..9fd9a35 --- /dev/null +++ b/theme_kaizen/static/img/icons/microphone.svg @@ -0,0 +1,10 @@ +Asset 1 diff --git a/theme_kaizen/static/img/icons/telegram.svg b/theme_kaizen/static/img/icons/telegram.svg new file mode 100644 index 0000000..211d2ba --- /dev/null +++ b/theme_kaizen/static/img/icons/telegram.svg @@ -0,0 +1,11 @@ +telegram diff --git a/theme_kaizen/static/img/icons/twitter.svg b/theme_kaizen/static/img/icons/twitter.svg new file mode 100644 index 0000000..367b7e8 --- /dev/null +++ b/theme_kaizen/static/img/icons/twitter.svg @@ -0,0 +1,14 @@ + + + diff --git a/theme_kaizen/static/img/icons/youtube.svg b/theme_kaizen/static/img/icons/youtube.svg new file mode 100644 index 0000000..a3204c9 --- /dev/null +++ b/theme_kaizen/static/img/icons/youtube.svg @@ -0,0 +1,14 @@ + + + diff --git a/theme_kaizen/static/img/icons/yumi.svg b/theme_kaizen/static/img/icons/yumi.svg new file mode 100644 index 0000000..8951b7e --- /dev/null +++ b/theme_kaizen/static/img/icons/yumi.svg @@ -0,0 +1,9 @@ +yumi diff --git a/theme_kaizen/static/img/page/icon-1.svg b/theme_kaizen/static/img/page/icon-1.svg new file mode 100644 index 0000000..beb9605 --- /dev/null +++ b/theme_kaizen/static/img/page/icon-1.svg @@ -0,0 +1,12 @@ +icon-1 diff --git a/theme_kaizen/static/img/page/icon-2.svg b/theme_kaizen/static/img/page/icon-2.svg new file mode 100644 index 0000000..62deeb3 --- /dev/null +++ b/theme_kaizen/static/img/page/icon-2.svg @@ -0,0 +1,59 @@ +icon-2 diff --git a/theme_kaizen/static/img/page/icon-3.svg b/theme_kaizen/static/img/page/icon-3.svg new file mode 100644 index 0000000..bd63467 --- /dev/null +++ b/theme_kaizen/static/img/page/icon-3.svg @@ -0,0 +1,12 @@ +icon-3 diff --git a/theme_kaizen/static/src/js/editor.js b/theme_kaizen/static/src/js/editor.js new file mode 100644 index 0000000..449d83d --- /dev/null +++ b/theme_kaizen/static/src/js/editor.js @@ -0,0 +1,25 @@ +odoo.define("theme_kaizen.editor", function(require) { + "use strict"; + var LinkDialog = require("wysiwyg.widgets.LinkDialog"); + + LinkDialog.include({ + init: function(parent, opts, editable, linkInfo) { + this.keepInnerHtml = + linkInfo.className && linkInfo.className.indexOf("js_keep_html") !== -1; + return this._super.apply(this, arguments); + }, + save: function() { + if (this.keepInnerHtml) { + var data = this._getData(); + this.data.url = data.url; + this.data.text = this.data.range.ec.innerHtml; + this.final_data = this.data; + this.destroyAction = "save"; + this.close(); + return Promise.resolve(); + } + + return this._super.apply(this, arguments); + }, + }); +}); diff --git a/theme_kaizen/static/src/js/frontend.js b/theme_kaizen/static/src/js/frontend.js new file mode 100644 index 0000000..5349ad7 --- /dev/null +++ b/theme_kaizen/static/src/js/frontend.js @@ -0,0 +1,143 @@ +/* global Swiper */ +odoo.define("theme_kaizen.frontend", function(require) { + "use strict"; + var snippetAnimation = require("website.content.snippets.animation"); + var publicWidget = require("web.public.widget"); + var core = require("web.core"); + var ajax = require("web.ajax"); + var qweb = core.qweb; + + ajax.loadXML("/theme_kaizen/static/src/xml/frontend.xml", qweb); + + snippetAnimation.registry.snippetContributors = snippetAnimation.Animation.extend({ + selector: ".snippet_kaizen_contributors", + disabledInEditableMode: false, + _getSwiperConfig: function() { + return { + spaceBetween: 25, + breakpoints: { + 0: { + slidesPerView: 1.5, + }, + 575: { + slidesPerView: 2, + }, + 768: { + slidesPerView: 3, + }, + 992: { + slidesPerView: 4, + }, + 1200: { + slidesPerView: 6, + }, + }, + }; + }, + start: function() { + var res = this._super.apply(this, arguments); + var $container = this.$el.find(".swiper-container"); + this.swiperInstance = new Swiper($container[0], this._getSwiperConfig()); + return res; + }, + destroy: function() { + this.swiperInstance.destroy(); + }, + }); + + snippetAnimation.registry.snippetPosts = snippetAnimation.Animation.extend({ + selector: ".snippet_kaizen_posts", + disabledInEditableMode: false, + _getSwiperConfig: function() { + return { + spaceBetween: 35, + autoHeight: true, + loop: true, + breakpoints: { + 0: { + slidesPerView: 1.5, + }, + 575: { + slidesPerView: 2, + }, + 992: { + slidesPerView: 3, + }, + 1200: { + slidesPerView: 4, + }, + }, + }; + }, + start: function() { + var res = this._super.apply(this, arguments); + var $container = this.$el.find(".swiper-container"); + this.$swiperWrapper = this.$el.find(".swiper-wrapper"); + this._loadLatestBlogPosts() + .then(this._renderPosts.bind(this)) + .then( + function() { + this.swiperInstance = new Swiper( + $container[0], + this._getSwiperConfig() + ); + }.bind(this) + ); + return res; + }, + _loadLatestBlogPosts: function() { + var websiteId = this._getContext().website_id; + return this._rpc({ + model: "blog.post", + method: "search_read", + domain: [ + ["is_published", "=", true], + "|", + ["website_id", "=", false], + ["website_id", "=", websiteId], + ], + order: "post_date desc", + limit: 12, + }); + }, + _renderPosts: function(posts) { + var self = this; + this.$swiperWrapper.html(""); + _.each(posts, function(post) { + self.$swiperWrapper.append( + qweb.render("theme_kaizen.PostSlide", { + post: post, + }) + ); + }); + }, + destroy: function() { + this.$swiperWrapper.html(""); + this.swiperInstance.destroy(); + }, + }); + + publicWidget.registry.megaMenu = publicWidget.Widget.extend({ + selector: ".o_mega_menu_toggle", + start: function() { + this._super.apply(this, arguments); + this.$el.parent().on("show.bs.dropdown", function() { + if (window.innerWidth > 950) { + $("body").addClass("backdrop"); + } + }); + this.$el.parent().on("hide.bs.dropdown", function() { + $("body").removeClass("backdrop"); + }); + }, + }); + + snippetAnimation.registry.snippetSiderbar = snippetAnimation.Animation.extend({ + selector: ".kaizen_snippet_sidebar", + start: function() { + this._super.apply(this, arguments); + $("body").scrollspy({target: "#sidebarNavigation", offset: 300}); + }, + }); + +}); diff --git a/theme_kaizen/static/src/scss/abstracts/bootstrap_overridden.scss b/theme_kaizen/static/src/scss/abstracts/bootstrap_overridden.scss new file mode 100644 index 0000000..4dbfd55 --- /dev/null +++ b/theme_kaizen/static/src/scss/abstracts/bootstrap_overridden.scss @@ -0,0 +1,74 @@ +// ----------------------------------------------------------------------------------------------------------------------- +// This file should contain Bootstrap SCSS Variables ONLY which ar NOT defined as Odoo SCSS variables (primary variables), +// and therefore used and customizable by the website editor. +// Otherwise the editor might break! +// Please read the note at the end of this file. +// ----------------------------------------------------------------------------------------------------------------------- +// +// Container Sizes +$container-large: 1300px; +// +// Extra Colors +$extra-1: #19a6d3; +$extra-2: #6dc57d; +$extra-3: #b7ecc7; +$extra-4: #f88745; +$extra-6: #c056b8; +$extra-7: #6e1054; +$extra-8: #310523; +$extra-9: #666666; +$extra-10: #b2b2b2; +$extra-11: #e5e5e5; +$extra-12: #f88745; +$extra-13: #72c47b; +$extra-14: #19a7d4; +$extra-15: #ca60bb; + +// Ubuntu Colors +$ubuntu-purple: #7d1f4d; +$ubuntu-purple-light: #8b3583; +$ubuntu-purple-dark: #3a0628; +$ubuntu-orange: #e95420; +$off-white: #f4f4f4; +$gray-light: #d8d8d8; + +// Add extra colors to Bootstrap theme colors +$theme-colors: ( + "extra-1": $extra-1, + "extra-2": $extra-2, + "extra-3": $extra-3, + "extra-4": $extra-4, + "extra-6": $extra-6, + "extra-7": $extra-7, + "extra-8": $extra-8, + "extra-9": $extra-9, + "extra-10": $extra-10, + "extra-11": $extra-11, + "extra-12": $extra-12, + "extra-13": $extra-13, + "extra-14": $extra-14, + "extra-15": $extra-15, +); + + +// /!\ +// This file is meant to regroup your bootstrap customizations. In that file, +// you must define variables *ONLY*. If you want to introduce new CSS rules +// for your website, check the 'user_custom_rules.scss' file you can also edit. +// /!\ +// +// You can change the value of a variable you can find in the bootstrap 4 +// documentation (or in the file /web/static/lib/bootstrap/scss/_variables.scss) +// and Odoo will automatically adapt its design to your new bootstrap. For +// example, doing this will make some shadows and gradients appear, especially +// for your buttons design: +// +// $enable-shadows: true; +// $enable-gradients: true; +// +// Notice that Odoo already overrides bootstrap variables according to your +// choices in the "Customize Theme" dialog, you should first take a look at +// it and do customizations this way. Indeed, if you overridde the same +// variables, Odoo will either have to ignore them or not be able to make +// the "Customize Theme" dialog work for these variables anymore. +// \ No newline at end of file diff --git a/theme_kaizen/static/src/scss/abstracts/primary_variables.scss b/theme_kaizen/static/src/scss/abstracts/primary_variables.scss new file mode 100644 index 0000000..57a91e6 --- /dev/null +++ b/theme_kaizen/static/src/scss/abstracts/primary_variables.scss @@ -0,0 +1,65 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Odoo SCSS variables and mixins +// ----------------------------------------------------------------------------- + + +//------------------------------------------------------------------------------ +// Website customizations +//------------------------------------------------------------------------------ + +$o-website-values-palettes: ( + ( + // Font + 'font': 'ubuntu', + 'headings-font': 'ubuntu', + 'navbar-font': 'ubuntu', + 'buttons-font': 'ubuntu', + + // Buttons + 'btn-primary-outline': true, + 'btn-secondary-outline': false, + ), +); + + +//------------------------------------------------------------------------------ +// Fonts +//------------------------------------------------------------------------------ + +$o-theme-font-configs: ( + 'ubuntu': ( + 'family': ('ubuntu', sans-serif), + ), + 'ubuntu-mono': ( + 'family': ('ubuntu-mono', sans-serif), + ), +); + + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +$o-color-palettes: ( + ( // Palette 1 + // $ubuntu-purple: + 'o-color-1': #7d1f4d, + // $ubuntu-purple-light: + 'o-color-2': #8b3583, + // $ubuntu-purple-dark: + 'o-color-3': #3a0628, + // white: + 'o-color-4': #d8d8d8, + // $ubuntu-orange: + 'o-color-5': #e95420, + + 'o-cc1-bg': #FFFFFF, + 'o-cc1-text': #212529, + 'o-cc1-headings': #212529, + 'o-cc1-link': #4b39ff, + 'o-cc1-btn-primary': 'o-color-2', + 'o-cc1-btn-secondary': 'o-color-1', + ), +); + + diff --git a/theme_kaizen/static/src/scss/base/_base.scss b/theme_kaizen/static/src/scss/base/_base.scss new file mode 100644 index 0000000..1b9a4ff --- /dev/null +++ b/theme_kaizen/static/src/scss/base/_base.scss @@ -0,0 +1,174 @@ +// ----------------------------------------------------------------------------- +// This file contains very basic styles. +// ----------------------------------------------------------------------------- +html { + scroll-behavior: smooth; +} + +:target:before { + content: ""; + display: block; + height: 113px; + margin: -113px 0 0; +} + +#wrapwrap { + font-family: "ubuntu", sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 1.5; + color: black; + max-width: 100%; + letter-spacing: 0; + + /* Height of the fixed header */ + padding-top: 113px; + + :target { + display: block; + position: relative; + top: -113px; + visibility: hidden; + } +} + +@media (max-width: map-get($grid-breakpoints, "lg")) { + #wrapwrap { + /* Height of the fixed header */ + padding-top: 90px; + } +} + +body.no-scroll { + overflow: hidden; +} + +// TO DO: display backdrop correctly: NOT in header > megamenu +// body::after { +// content: ""; +// position: fixed; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// background-color: rgba(0, 0, 0, 0.5); +// z-index: 10; +// opacity: 0; +// visibility: hidden; +// transition: all 0.4s ease; +// } +// +// body.backdrop::after { +// opacity: 1; +// visibility: visible; +// } +// +// body.backdrop.scroll-down::after { +// opacity: 0; +// visibility: hidden; +// } + +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +*:focus { + outline: none; + box-shadow: none; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +p { + padding: 0; + margin: 0; +} + +figure { + margin: 0; + padding: 0; +} + +img, +video { + max-width: 100%; + display: block; +} + +ul { + list-style: none; + margin: 0; +} + +main ul { + list-style-type: disc; +} + +button { + cursor: pointer; +} + +input:focus, +textarea:focus, +select:focus, +button:focus { + outline: none !important; + box-shadow: none !important; +} + +// Text +.bold { + font-weight: 700 !important; +} + +.light { + font-weight: 300 !important; +} + +// Color +.bg-green { + background-color: $green; +} + +.bg-purple { + background-color: $purple; +} + +.bg-red { + background-color: $red; +} + +// Transform +.r-45 { + transform: rotate(45deg); +} + +.r-90 { + transform: rotate(90deg); +} + +.r-180 { + transform: rotate(180deg); +} + +.r-270 { + transform: rotate(270deg); +} + +.r-360 { + transform: rotate(90deg); +} diff --git a/theme_kaizen/static/src/scss/base/_fonts.scss b/theme_kaizen/static/src/scss/base/_fonts.scss new file mode 100644 index 0000000..b1e9160 --- /dev/null +++ b/theme_kaizen/static/src/scss/base/_fonts.scss @@ -0,0 +1,23 @@ +// ----------------------------------------------------------------------------- +// This file contains all @font-face declarations, if any. +// ----------------------------------------------------------------------------- +@font-face { + font-family: "ubuntu"; + src: url("/theme_kaizen/static/font/Ubuntu-Light.ttf"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "ubuntu"; + src: url("/theme_kaizen/static/font/Ubuntu-Bold.ttf"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "ubuntu-mono"; + src: url("/theme_kaizen/static/font/UbuntuMono-Regular.ttf"); + font-weight: 300; + font-style: normal; +} diff --git a/theme_kaizen/static/src/scss/base/_typography.scss b/theme_kaizen/static/src/scss/base/_typography.scss new file mode 100644 index 0000000..13e0881 --- /dev/null +++ b/theme_kaizen/static/src/scss/base/_typography.scss @@ -0,0 +1,110 @@ +/** + * Basic typography style for copy text + */ +#wrapwrap { + h1, + h2, + h3, + h4, + .h1, + .h2, + .h3, + .h4 { + font-weight: 700; + line-height: 1.1; + font-family: "ubuntu", sans-serif; + } + + h1, + .h1 { + font-size: 72px; + + @media (max-width: 1299.98px) { + font-size: 60px; + } + + @media (max-width: 1199.98px) { + font-size: 50px; + } + + @media (max-width: 991.98px) { + font-size: 40px; + } + } + + h2, + .h2 { + font-size: 56px; + + @media (max-width: 1299.98px) { + font-size: 50px; + } + + @media (max-width: 1199.98px) { + font-size: 40px; + } + + @media (max-width: 991.98px) { + font-size: 32px; + } + } + + h3, + .h3 { + font-size: 32px; + + @media (max-width: 1199.98px) { + font-size: 28px; + } + + @media (max-width: 991.98px) { + font-size: 24px; + } + } + + h4, + .h4 { + font-size: 20px; + } + + h5, + .h5 { + font-family: "ubuntu", sans-serif; + } + + a { + text-decoration: none; + color: inherit; + } + + a:hover, + a:focus { + text-decoration: none; + color: inherit; + } + + p { + a { + text-decoration: underline; + color: #6e1054; + margin-bottom: 0px; + display: inline; + } + + a:hover, + a:focus { + text-decoration: underline; + color: #6e1054; + } + } + + .link { + color: #4b39ff; + } + + .link:hover, + .link:focus, + .link:active { + color: $ubuntu-purple; + } +} diff --git a/theme_kaizen/static/src/scss/components/_breadcrumb.scss b/theme_kaizen/static/src/scss/components/_breadcrumb.scss new file mode 100644 index 0000000..45de98c --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_breadcrumb.scss @@ -0,0 +1,32 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the breadcrumb component. +// ----------------------------------------------------------------------------- +.breadcrumbs { + padding: 15px 0; + + .container { + display: flex; + align-items: center; + + @media (min-width: 1300px) { + max-width: $container-large; + } + } + + img { + margin: 0 15px; + transform: rotate(270deg) !important; + + @media (max-width: 575.98px) { + margin: 0 10px; + } + } + + a:hover { + text-decoration: underline; + } + + &--bordered { + border-bottom: 1px solid $gray-light; + } +} diff --git a/theme_kaizen/static/src/scss/components/_button.scss b/theme_kaizen/static/src/scss/components/_button.scss new file mode 100644 index 0000000..aebc627 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_button.scss @@ -0,0 +1,96 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the button component. +// ----------------------------------------------------------------------------- +#wrapwrap { + .btn { + font-size: inherit; + justify-content: center; + align-items: center; + font-weight: 700; + padding: 8px 25px; + transition: all 0.3s ease-in-out; + + &:active, + &:focus { + outline: none !important; + box-shadow: none !important; + } + } + + // Button Primary Outline + .btn-outline-primary { + border: 1px solid $ubuntu-purple-light; + color: $ubuntu-purple-light; + background-color: white; + + &:hover, + &:active, + &:focus { + background-color: $ubuntu-purple-light !important; + color: white !important; + border: 1px solid $ubuntu-purple-light !important; + } + } + + // Button Tertiary + .btn-tertiary { + background-image: linear-gradient(90deg, #8c3683, #c0474c); + border: none; + color: white; + + &:hover, + &:active, + &:focus { + color: white; + } + } + + // Button Download + .btn-download { + display: flex; + align-items: center; + justify-content: center; + font-weight: 300; + text-align: left; + border: 1px solid black; + border-radius: 0; + + .system-icon { + height: 57px; + width: 57px; + object-fit: contain; + } + + .download-icon { + width: 25px; + } + + div { + margin: 0 25px; + + @media (max-width: 1199.98px) { + margin: 0 auto 0 25px; + } + } + + p { + margin-bottom: 0 !important; + } + + &:hover { + background-color: white; + } + } + + // Button Small + .btn-small { + padding: 5px 16px !important; + font-size: 13px; + font-weight: 300; + } + + // Button Rounded + .btn-rounded { + border-radius: 100px; + } +} diff --git a/theme_kaizen/static/src/scss/components/_card.scss b/theme_kaizen/static/src/scss/components/_card.scss new file mode 100644 index 0000000..24fb4c2 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_card.scss @@ -0,0 +1,10 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the card component. +// ----------------------------------------------------------------------------- + +// Card +.card { + border: 0; + box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1); + border-radius: 6px; +} diff --git a/theme_kaizen/static/src/scss/components/_code.scss b/theme_kaizen/static/src/scss/components/_code.scss new file mode 100644 index 0000000..c592888 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_code.scss @@ -0,0 +1,18 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the code component. +// ----------------------------------------------------------------------------- +.code { + display: block; + font-family: "ubuntu-mono"; + font-size: 15px; + background-color: #f3f3f3; + color: black; + padding: 15px; + border-left: 10px solid $ubuntu-purple; + + &--solid { + color: white; + background-color: $ubuntu-purple-dark; + border-left: none; + } +} diff --git a/theme_kaizen/static/src/scss/components/_dropdown.scss b/theme_kaizen/static/src/scss/components/_dropdown.scss new file mode 100644 index 0000000..b850898 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_dropdown.scss @@ -0,0 +1,58 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the dropdown component. +// ----------------------------------------------------------------------------- + +// Dropdown +.dropdown { + &-menu { + min-width: 100%; + margin-top: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border: none; + + @media (min-width: map-get($grid-breakpoints, "lg")) { + backface-visibility: hidden; + transition: all 0.15s ease-in-out; + display: block; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + } + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + .angle-icon, + .angle-icon-gradient { + transform: rotate(270deg) !important; + } + + &.show { + .angle-icon, + .angle-icon-gradient { + transform: rotate(360deg) !important; + } + } + } + + &-menu.show { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + &-item { + padding: 10px 20px; + line-height: 1.1; + + &:not(:last-child) { + border-bottom: 1px solid $off-white; + } + + &:hover, + &:active, + &:focus { + background-color: $off-white; + color: black; + } + } +} diff --git a/theme_kaizen/static/src/scss/components/_icon.scss b/theme_kaizen/static/src/scss/components/_icon.scss new file mode 100644 index 0000000..fb79180 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_icon.scss @@ -0,0 +1,21 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the icon component. +// ----------------------------------------------------------------------------- +.angle-icon { + width: 13px; + margin-left: 10px; +} + +.angle-icon-gradient { + width: 30px; + margin-left: 10px; +} + +.social-media-icon { + width: 30px; +} + +.git-icon { + width: 20px; + margin: 0 5px; +} diff --git a/theme_kaizen/static/src/scss/components/_input.scss b/theme_kaizen/static/src/scss/components/_input.scss new file mode 100644 index 0000000..732337b --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_input.scss @@ -0,0 +1,21 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the input component. +// ----------------------------------------------------------------------------- + +.input { + background-color: $off-white; + width: 100%; + border: 1px solid #dadada; + font-size: 17px; + font-weight: 700; + padding: 20px 25px; + transition: all 0.3s ease; +} + +.input::placeholder { + color: #bdbdbd; +} + +input:focus { + border: 1px solid black; +} diff --git a/theme_kaizen/static/src/scss/components/_links.scss b/theme_kaizen/static/src/scss/components/_links.scss new file mode 100644 index 0000000..7a8795f --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_links.scss @@ -0,0 +1,5 @@ +.snippet_kaizen_links { + ul > li { + list-style-type: none; + } +} diff --git a/theme_kaizen/static/src/scss/components/_popup.scss b/theme_kaizen/static/src/scss/components/_popup.scss new file mode 100644 index 0000000..d675827 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_popup.scss @@ -0,0 +1,115 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the popup component. +// ----------------------------------------------------------------------------- +.popup { + @media (min-width: 576px) { + .modal-dialog { + max-width: 510px; + } + } + + @media (min-width: 768px) { + .modal-dialog { + max-width: 690px; + } + } + + @media (min-width: 992px) { + .modal-dialog { + max-width: 930px; + } + } + + @media (min-width: 1200px) { + .modal-dialog { + max-width: 1110px; + } + } + + @media (min-width: 1300px) { + .modal-dialog { + max-width: 1220px; + } + } + + .modal-content { + border-radius: 15px; + border: none; + } + + // Modal Header + .modal-header { + border: none; + padding: 35px 25px; + + button { + display: flex; + align-items: center; + justify-content: flex-start; + border: none; + background-color: transparent; + + img { + width: 30px; + margin-right: 10px; + } + } + } + + // Modal Body + .modal-body { + padding: 25px 0 125px 80px; + max-width: 70%; + position: relative; + z-index: 2; + + .h1 { + margin-bottom: 30px; + + @media (max-width: 767.98px) { + font-size: 40px; + } + } + + p { + max-width: 680px; + + @media (max-width: 1199.98px) { + max-width: 500px; + } + + @media (max-width: 991.98px) { + max-width: 100%; + } + } + + @media (max-width: 1199.98px) { + padding: 15px 0 80px 80px; + } + + @media (max-width: 991.98px) { + padding: 15px 25px 100px 25px; + max-width: 100%; + } + + @media (max-width: 768px) { + padding: 0 25px 60px 25px; + } + } + + .bg-img { + position: absolute; + bottom: 0; + right: 8%; + height: 100%; + z-index: 0; + + img { + height: 100%; + } + + @media (max-width: 991.98px) { + display: none; + } + } +} diff --git a/theme_kaizen/static/src/scss/components/_progress.scss b/theme_kaizen/static/src/scss/components/_progress.scss new file mode 100644 index 0000000..72ae67b --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_progress.scss @@ -0,0 +1,14 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the progress component. +// ----------------------------------------------------------------------------- +.progress { + border-radius: 100px; + background-color: #efedec; + height: 20px; +} + +.progress-bar { + background-color: transparent; + background-image: linear-gradient(90deg, #8c3683, #c0474c); + border-radius: 100px; +} diff --git a/theme_kaizen/static/src/scss/components/_sidebar.scss b/theme_kaizen/static/src/scss/components/_sidebar.scss new file mode 100644 index 0000000..8cf89b5 --- /dev/null +++ b/theme_kaizen/static/src/scss/components/_sidebar.scss @@ -0,0 +1,127 @@ +// Page Content Sidebar +.page-content--sidebar { + padding: 80px 0 50px 0; + + @media (max-width: 1199.98px) { + padding: 50px 0; + } + + @media (max-width: 991.98px) { + padding: 30px 0; + } + + .container { + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 991.98px) { + flex-direction: column-reverse; + } + } + + .content { + padding-right: 100px; + + @media (max-width: 1299.98px) { + padding-right: 60px; + } + + @media (max-width: 991.98px) { + padding-right: 0; + } + } + + .sidebar { + position: sticky; + top: 16px; + flex: 0 0 30%; + + .collapse { + @media (min-width: 992px) { + display: block !important; + } + } + + &-banner { + border: 1px solid $gray-light; + background-color: $off-white; + padding: 25px; + margin-bottom: 25px; + + .btn { + margin-top: 15px; + } + + @media (max-width: 991.98px) { + margin-top: 10px; + } + } + + &-navigation { + h3 { + margin-bottom: 25px; + } + + ul { + padding-left: 25px; + li { + list-style-type: none; + } + } + + a { + padding: 0 !important; + padding-left: 12px !important; + line-height: 2.5; + background-color: white; + color: black; + border: none; + border-left: 3px solid $gray-light; + border-radius: 0; + letter-spacing: 0.029em; + + &.active { + border-color: black; + font-weight: 700; + letter-spacing: 0; + } + } + + a:hover { + text-decoration: underline; + } + + @media (max-width: 991.98px) { + margin-bottom: 25px; + } + } + + &-toggler { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 15px 0; + } + + @media (max-width: 991.98px) { + position: relative; + top: 0; + width: 100%; + flex: 0; + margin-bottom: 35px; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + height: 1px; + width: 200%; + background-color: $gray-light; + transform: translateX(-50%); + } + } + } +} diff --git a/theme_kaizen/static/src/scss/editor.scss b/theme_kaizen/static/src/scss/editor.scss new file mode 100644 index 0000000..71dc45f --- /dev/null +++ b/theme_kaizen/static/src/scss/editor.scss @@ -0,0 +1,16 @@ +#wrapwrap { + header#top { + top: 46px !important; + .navbar { + @media (max-width: map-get($grid-breakpoints, "lg")) { + top: 46px; + } + } + } +} + +.page-content--sidebar { + .sidebar { + top: 64px !important; + } +} diff --git a/theme_kaizen/static/src/scss/layout/_footer.scss b/theme_kaizen/static/src/scss/layout/_footer.scss new file mode 100644 index 0000000..7dfc36f --- /dev/null +++ b/theme_kaizen/static/src/scss/layout/_footer.scss @@ -0,0 +1,134 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the footer of the site/application. +// ----------------------------------------------------------------------------- +#wrapwrap { + .footer { + margin-top: auto; + + .container { + display: flex; + + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 991.98px) { + flex-direction: column; + } + } + + // Footer Top + &-top { + background-color: #e5e5e5; + padding: 15px 0 20px 0; + + @media (max-width: 991.98px) { + padding: 30px 0; + } + + // Logo + .footer-logo { + margin-right: 50px; + + @media (max-width: 1199.98px) { + margin-right: 20px; + } + + @media (max-width: 991.98px) { + margin-right: 0; + margin-bottom: 30px; + } + + p { + margin-bottom: 20px; + } + + a { + display: block; + } + + img { + width: 180px; + } + } + + // Text + .footer-text { + max-width: 380px; + margin: auto; + text-align: center; + font-size: medium; + + @media (max-width: 991.98px) { + margin-bottom: 30px; + } + } + + // Social + .footer-social { + margin-left: auto; + + @media (max-width: 991.98px) { + margin-left: 0; + } + + p { + margin-bottom: 30px; + font-size: 13px; + + @media (max-width: 991.98px) { + margin-bottom: 20px; + } + } + + ul { + display: flex; + + li:not(:last-child) { + margin-right: 10px; + } + + a { + display: block; + } + } + } + } + + // Footer Bottom + &-bottom { + background-color: #e5e5e5; + padding: 15px 0 30px 0; + + @media (max-width: 767.98px) { + text-align: center; + } + + .container { + justify-content: flex-start; + + @media (max-width: 1199.98px) { + flex-direction: column; + } + } + + p { + font-size: 13px; + + &:first-child { + @media (max-width: 767.98px) { + margin-bottom: 10px; + } + } + } + + span { + margin: 0 10px; + + @media (max-width: 1199.98px) { + margin: 0 5px; + } + } + } + } +} diff --git a/theme_kaizen/static/src/scss/layout/_header.scss b/theme_kaizen/static/src/scss/layout/_header.scss new file mode 100644 index 0000000..ebf5209 --- /dev/null +++ b/theme_kaizen/static/src/scss/layout/_header.scss @@ -0,0 +1,584 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the header of the site/application. +// ----------------------------------------------------------------------------- + +#wrapwrap { + header#top { + position: fixed; + left: 0; + top: 0px; + width: 100%; + background-color: white; + border-bottom: 1px solid $gray-light; + padding: 30px 0; + z-index: 1000; + transition: transform 0.4s; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + height: 85px; + background-color: transparent; + } + + .o_menu_loading .nav-item { + opacity: 1 !important; + } + + nav.navbar { + transition: transform 0.4s; + + > .container { + display: flex; + justify-content: space-between; + align-items: center; + + @media (min-width: 1300px) { + max-width: $container-large; + } + } + .nav-item { + @media (max-width: map-get($grid-breakpoints, "lg")) { + &:first-child { + margin-top: 30px; + } + } + } + } + + .dropdown-toggle, + .navbar-nav > .nav-item:not(.dropdown-toggle) > .nav-link { + img.angle-icon { + display: inline-block; + } + display: flex; + justify-content: center; + align-items: center; + letter-spacing: 0.03rem; + position: relative; + + img { + transition: all 0.3s ease; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + &.btn, + &.btn:focus { + color: #000 !important; + background-color: transparent !important; + border: none !important; + letter-spacing: 0 !important; + } + } + + &[aria-expanded="true"] { + font-weight: 700; + letter-spacing: 0; + + &.btn { + letter-spacing: 0.03rem; + } + + img { + transform: rotate(0); + } + } + + &::after { + content: ""; + position: absolute; + top: -1px; + left: 0; + width: 300%; + height: 1px; + background-color: $gray-light; + transform: translateX(-50%); + display: none; + border-top: 0em solid; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + display: block; + } + } + + &::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 300%; + height: 1px; + background-color: $gray-light; + transform: translateX(-50%); + display: none; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + display: block; + } + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + justify-content: space-between; + padding: 12px 20px; + font-size: 18px; + font-weight: 700; + letter-spacing: 0; + + img { + transform: rotate(-90deg); + } + + .angle-icon { + margin-right: 8px; + } + } + } + } + + // header reveal and hide + &.scroll-down { + header#top { + transform: translate(0, -125%); + } + @media (max-width: map-get($grid-breakpoints, "lg")) { + header#top { + transform: none; + border-bottom: none; + } + nav.navbar { + transform: translate(0, -125%); + } + } + .o_mega_menu { + transform: translate(0, -125%); + } + } + + &.scroll-up { + header#top { + transform: none; + } + @media (max-width: map-get($grid-breakpoints, "lg")) { + header#top { + border-bottom: none; + } + nav.navbar { + transform: none; + } + } + } + + // Header Logo + .logo { + a { + display: block; + } + + img { + width: 200px; + } + } + + // Header Nav + .navbar { + .navbar-toggler-icon { + background-image: url("/theme_kaizen/static/img/icons/hamburger.svg"); + margin-right: 20px; + } + .nav-item { + margin-right: 30px; + + @media (max-width: 1199.98px) { + margin-right: 20px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + margin-right: 0; + } + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + position: fixed; + top: 0px; + padding: 25px 0; + left: 0; + width: 100%; + background-color: white; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); + + max-height: calc(100% - 90px); + overflow-y: auto; + overflow-x: hidden; + } + + > .container { + @media (min-width: map-get($grid-breakpoints, "lg")) { + padding: 0; + } + } + + > .container > .collapse, + > .container > .collapsing { + @media (min-width: map-get($grid-breakpoints, "lg")) { + display: flex !important; + align-items: center; + justify-content: center; + opacity: 1 !important; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + width: 100%; + } + } + } + + // Header Dropdown + .o_mega_menu { + transition: transform 0.4s; + top: 74px; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; + .container { + max-width: $container-large; + align-items: flex-start; + display: flex; + justify-content: space-between; + } + + .header-links { + display: flex; + line-height: 2; + flex-wrap: wrap; + + &-group { + margin-bottom: 10px; + list-style: none; + } + } + + p.header-dropdown-link { + margin-bottom: 5px; + + @media (max-width: 1199.98px) { + margin-bottom: 0; + } + } + + .header-dropdown-link { + display: flex; + align-items: center; + padding-left: 20px; + position: relative; + + img { + position: absolute; + top: 50%; + + @media (max-width: 991.98px) { + top: 33%; + } + + left: 0; + transform: translateY(-50%); + width: 10px; + margin-right: 10px; + } + } + } + + // Mega-menu About Us Collapse + .snippet_kaizen_menu_1 { + .container { + padding: 60px 15px; + + @media (max-width: 1199.98px) { + padding: 40px 15px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + flex-direction: column; + padding: 25px 20px; + } + } + + .header-banner { + font-size: 28px; + max-width: 400px; + + @media (min-width: 1200px) and (max-width: 1299.98px) { + font-size: 24px; + max-width: 350px; + } + + @media (max-width: 1199.98px) { + font-size: 20px; + max-width: 280px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + font-size: 18px; + font-weight: 700; + max-width: 350px; + margin-bottom: 25px; + } + } + + .header-links { + &-group:not(:last-child) { + margin-right: 80px; + + @media (min-width: 1200px) and (max-width: 1299.98px) { + margin-right: 60px; + } + + @media (max-width: 1199.98px) { + margin-right: 30px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + margin-right: 60px; + } + + @media (max-width: map-get($grid-breakpoints, "md")) { + margin-right: 30px; + } + } + } + } + + // Mega-menu Contributors Collapse + .snippet_kaizen_menu_2 { + overflow: hidden; + .container { + align-items: stretch; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + flex-direction: column; + padding: 0px 20px; + } + } + + .header-links { + padding: 60px 0; + flex: 0 0 70%; + + @media (max-width: 1199.98px) { + padding: 40px 0; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + padding: 25px 0; + flex: 0; + } + + @media (max-width: map-get($grid-breakpoints, "md")) { + display: grid; + grid-template-columns: 1fr 1fr; + } + + @media (max-width: 420px) { + grid-template-columns: 1fr; + } + + &-group:not(:last-child) { + margin-right: 60px; + + @media (min-width: 1200px) and (max-width: 1299.98px) { + margin-right: 40px; + } + + @media (max-width: 1199.98px) { + margin-right: 20px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + margin-right: 30px; + } + } + + &-group { + @media (max-width: map-get($grid-breakpoints, "md")) { + margin-right: 0 !important; + margin-bottom: 10px !important; + } + } + } + + .header-banner { + position: relative; + color: white; + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + padding-left: 50px; + flex: 0 0 30%; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + flex: 0; + z-index: 1; + padding: 25px 0; + } + + .h3 { + margin-bottom: 5px; + font-size: 28px; + + @media (min-width: 1200px) and (max-width: 1299.98px) { + font-size: 24px; + } + + @media (max-width: 1199.98px) { + font-size: 20px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + font-size: 28px; + } + } + + p { + margin-bottom: 15px; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + max-width: 360px; + } + } + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 270%; + background-image: linear-gradient( + 45deg, + $ubuntu-purple-light, + $ubuntu-orange + ); + z-index: -1; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + width: 200%; + transform: translateX(-25%); + } + } + } + } + + // Mega-menu Community Collapse + .snippet_kaizen_menu_3 { + .container { + align-items: center; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + padding: 0px 20px; + } + } + + .header-banner { + display: flex; + align-items: center; + flex: 0 0 55%; + + @media (max-width: 1199.98px) { + flex: 0 0 50%; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + flex: 0; + padding: 25px 0; + } + + img { + max-width: 225px; + width: 100%; + height: 100%; + } + + p { + padding: 0 20px; + + @media (max-width: map-get($grid-breakpoints, "md")) { + padding: 0; + } + } + + p:first-child { + font-size: 28px; + line-height: 1.4; + margin-bottom: 10px; + + @media (min-width: 1200px) and (max-width: 1299.98px) { + font-size: 24px; + } + + @media (max-width: 1199.98px) { + font-size: 20px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + font-weight: 700; + font-size: 18px; + margin: 0; + max-width: 350px; + } + } + } + + .header-links { + flex: 0 0 45%; + padding-bottom: 25px; + + @media (max-width: 1199.98px) { + flex: 0 0 50%; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + flex: 0; + } + + &-group:not(:last-child) { + margin-right: 60px; + + @media (min-width: 1200px) and (max-width: 1299.98px) { + margin-right: 30px; + } + + @media (max-width: 1199.98px) { + margin-right: 15px; + } + + @media (max-width: map-get($grid-breakpoints, "lg")) { + margin-right: 50px; + } + + @media (max-width: map-get($grid-breakpoints, "md")) { + margin-right: 30px; + } + } + } + } + + // Mega-menu Get Ubuntu Touch Collapse + #getUbuntuTouchCollapse { + .container { + padding: 25px 0; + } + } + + // Hamburger Icon + .header-hamburger { + display: none; + + @media (max-width: map-get($grid-breakpoints, "lg")) { + display: block; + } + + img { + width: 33px; + } + } +} diff --git a/theme_kaizen/static/src/scss/pages/_blog-post.scss b/theme_kaizen/static/src/scss/pages/_blog-post.scss new file mode 100644 index 0000000..75a6799 --- /dev/null +++ b/theme_kaizen/static/src/scss/pages/_blog-post.scss @@ -0,0 +1,66 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the blog post page. +// ----------------------------------------------------------------------------- + +// Hero +.blog-post-hero { + position: relative; + + img { + width: 100%; + + @media (max-width: 767.98px) { + min-height: 400px; + object-fit: cover; + } + } + + .container { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + transform: translate(-50%, -50%); + text-align: center; + } +} + +// Content +.blog-post-content { + padding: 50px 0 80px 0; + + .container { + @media (min-width: 1200px) { + max-width: 1060px; + } + } + + .h1, + .h2, + .h3, + .h4 { + margin-bottom: 25px; + } + + p, + code { + margin-bottom: 25px; + font-size: 15px; + + @media (max-width: 575.98px) { + font-size: 14px; + } + } + + img { + margin-bottom: 45px; + + @media (max-width: 575.98px) { + margin-bottom: 25px; + } + } + + & .container > *:last-child { + margin: 0; + } +} diff --git a/theme_kaizen/static/src/scss/pages/_blog.scss b/theme_kaizen/static/src/scss/pages/_blog.scss new file mode 100644 index 0000000..1d9ce7f --- /dev/null +++ b/theme_kaizen/static/src/scss/pages/_blog.scss @@ -0,0 +1,145 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the blog page. +// ----------------------------------------------------------------------------- +// Hero +.blog-hero { + img { + width: 100%; + } +} + +// Nav +.blog-nav { + font-size: 15px; + padding: 30px 0 20px 0; + + a:hover { + text-decoration: underline; + } +} + +// Posts +.blog-posts { + margin-bottom: 250px; + + h1 { + margin-bottom: 55px; + + @media (max-width: 991.98px) { + margin-bottom: 30px; + } + } + + // Grid + &__grid { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 45px; + row-gap: 35px; + + @media (max-width: 991.98px) { + grid-template-columns: 1fr; + row-gap: 25px; + } + } + + // Post + .blog-post { + border-radius: 5px; + border: 1px solid $off-white; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + display: flex; + overflow: hidden; + transition: all 0.3s ease; + transform: translate3d(0, 0, 0); + + &__icon { + flex: 0 0 20%; + display: flex; + align-items: center; + justify-content: center; + padding: 0 10px; + + img { + height: 50px; + margin-bottom: 5px; + } + + @media (max-width: 1199.98px) { + flex: 0 0 25%; + } + + @media (max-width: 991.98px) { + flex: 0 0 20%; + } + + @media (max-width: 370px) { + flex: 0 0 25%; + } + } + + &__text { + flex: 0 0 80%; + padding: 15px 25px; + + .h4 { + margin-bottom: 15px; + + span { + @media (max-width: 575.98px) { + display: block; + font-weight: 700; + } + } + } + + p { + display: flex; + align-items: center; + } + + p:not(:last-child) { + margin-bottom: 10px; + } + + p img { + width: 15px; + margin-right: 5px; + } + + @media (max-width: 1199.98px) { + flex: 0 0 75%; + } + + @media (max-width: 991.98px) { + flex: 0 0 80%; + } + + @media (max-width: 575.98px) { + padding: 20px; + } + + @media (max-width: 370px) { + flex: 0 0 75%; + } + } + + &:hover { + transform: translate3d(0, -2px, 0); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); + + @media (max-width: 991.98px) { + transform: none; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + } + } + } + + @media (max-width: 991.98px) { + margin-bottom: 150px; + } + + @media (max-width: 575.98px) { + margin-bottom: 100px; + } +} diff --git a/theme_kaizen/static/src/scss/pages/_community-centers.scss b/theme_kaizen/static/src/scss/pages/_community-centers.scss new file mode 100644 index 0000000..a039055 --- /dev/null +++ b/theme_kaizen/static/src/scss/pages/_community-centers.scss @@ -0,0 +1,96 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the community centers page. +// ----------------------------------------------------------------------------- +.community-centers { + padding: 90px 0 160px 0; + text-align: center; + + @media (max-width: 991.98px) { + padding: 30px 0 90px 0; + text-align: left; + } + + .container { + @media (min-width: 1300px) { + max-width: $container-large; + } + } + + // Header + &__header { + margin-bottom: 100px; + + @media (max-width: 991.98px) { + margin-bottom: 50px; + } + + h1 { + max-width: 700px; + margin: 0 auto 40px auto; + + @media (max-width: 1199.98px) { + max-width: 600px; + } + + @media (max-width: 991.98px) { + margin: 0 0 20px 0; + max-width: 500px; + } + } + + p { + max-width: 850px; + margin-left: auto; + margin-right: auto; + } + + p:not(:last-child) { + margin-bottom: 25px; + + @media (max-width: 991.98px) { + margin-bottom: 15px; + } + } + } + + // Body + &__body { + display: grid; + grid-template-columns: repeat(5, 1fr); + column-gap: 60px; + + @media (max-width: 1299px) { + column-gap: 20px; + } + + @media (max-width: 991.98px) { + grid-template-columns: 1fr; + row-gap: 40px; + } + + .center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + img { + height: 150px; + margin-bottom: 15px; + + @media (max-width: 1199.98px) { + height: 120px; + } + } + + h2 { + margin-bottom: 10px; + } + + @media (max-width: 991.98px) { + align-items: flex-start; + max-width: 220px; + } + } + } +} diff --git a/theme_kaizen/static/src/scss/pages/_home.scss b/theme_kaizen/static/src/scss/pages/_home.scss new file mode 100644 index 0000000..655f322 --- /dev/null +++ b/theme_kaizen/static/src/scss/pages/_home.scss @@ -0,0 +1,453 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the home page. +// ----------------------------------------------------------------------------- +// Hero +.home-hero { + padding: 90px 0 150px 0; + + @media (max-width: 1299.98px) { + padding: 70px 0 100px 0; + } + + @media (max-width: 991.98px) { + padding: 50px 0 140px 0; + } + + .container { + display: flex; + align-items: center; + + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 991.98px) { + flex-direction: column-reverse; + } + } + + &__text { + flex: 0 0 50%; + padding-right: 25px; + + @media (max-width: 991.98px) { + padding-right: 0; + } + + h1 { + line-height: 1.1; + margin-bottom: 15px; + } + + p { + font-size: 30px; + line-height: 1.3; + margin-bottom: 45px; + + @media (max-width: 1199.98px) { + margin-bottom: 30px; + } + } + + button { + margin-bottom: 80px; + + @media (max-width: 1199.98px) { + margin-bottom: 50px; + } + } + + .home-hero__visits { + display: flex; + align-items: center; + justify-content: center; + max-width: 450px; + + .h4 { + @media (max-width: 575.98px) { + font-size: 14px; + } + } + } + } + + &__img { + flex: 0 0 50%; + display: flex; + align-items: center; + justify-content: flex-end; + + img { + max-width: 570px; + width: 100%; + } + + @media (max-width: 991.98px) { + margin-bottom: 50px; + } + } +} + +// Devices +.home-devices { + background-color: $ubuntu-purple-dark; + color: white; + overflow: hidden; + + @media (max-width: 991.98px) { + background-color: white; + color: black; + } + + .container { + display: flex; + align-items: center; + justify-content: space-between; + + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 991.98px) { + flex-direction: column; + } + } + + &__text { + flex: 0 0 15%; + + @media (max-width: 991.98px) { + flex: 0; + margin-bottom: 25px; + } + } + + &__img { + flex: 0 0 78%; + position: relative; + display: grid; + grid-template-columns: repeat(5, 1fr); + padding-top: 60px; + + @media (max-width: 991.98px) { + flex: 0; + width: 100%; + padding-top: 40px; + } + + @media (max-width: 767.98px) { + padding-top: 30px; + } + + .device { + margin-bottom: -250px; + text-align: center; + transition: all 0.3s ease; + color: white; + + p { + margin-bottom: 10px; + + @media (max-width: 575.98px) { + font-size: 12px; + } + + @media (max-width: 370.98px) { + font-size: 10px; + } + } + + &:hover { + transform: translateY(-15px); + } + + @media (max-width: 1199.98px) { + margin-bottom: -180px; + } + + @media (max-width: 991.98px) { + margin-bottom: -150px; + } + + @media (max-width: 767.98px) { + margin-bottom: -120px; + } + + @media (max-width: 575.98px) { + margin-bottom: -80px; + } + } + + .device:nth-child(1) { + position: relative; + z-index: 6; + } + + .device:nth-child(2) { + position: relative; + z-index: 5; + margin-left: -10%; + } + + .device:nth-child(3) { + position: relative; + z-index: 4; + margin-left: -10%; + } + + .device:nth-child(4) { + position: relative; + z-index: 3; + margin-left: -10%; + } + + .device:nth-child(5) { + position: relative; + z-index: 2; + margin-left: -10%; + } + + &::after { + position: absolute; + top: 0; + left: 0; + width: 300%; + height: 100%; + background-color: $ubuntu-purple-dark; + z-index: 0; + transform: translateX(-25%); + + @media (max-width: 991.98px) { + content: ""; + } + } + } +} + +// Contributors +.home-contributors { + padding: 50px 0 80px 0; + overflow: hidden; + + @media (max-width: 991.98px) { + padding: 50px 0; + } + + h2 { + @media (max-width: 991.98px) { + text-align: center; + } + } + + .container { + @media (min-width: 1300px) { + max-width: $container-large; + } + } + + &__slider { + .swiper-container { + overflow: visible; + max-width: 100%; + } + + .swiper-wrapper { + margin: 0 -30px; + padding: 30px; + } + + .card { + padding: 25px 15px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + h4 { + color: $ubuntu-purple; + margin-bottom: 5px; + } + + &__icon { + flex: 0 0 25%; + display: flex; + align-items: center; + justify-content: flex-end; + + img { + margin: 0; + transform: rotate(-90deg); + } + } + } + } + + .line { + margin-top: 20px; + height: 4px; + width: 190px; + background-image: linear-gradient(225deg, $ubuntu-orange, $ubuntu-purple-light); + border-radius: 3px; + + @media (max-width: 991.98px) { + width: 110px; + } + } +} + +// Media +.home-media { + padding: 90px 0; + + @media (max-width: 991.98px) { + padding: 50px 0; + } + + .container { + display: flex; + align-items: center; + + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 991.98px) { + flex-direction: column-reverse; + } + } + + &--alt { + .container { + flex-direction: row-reverse; + + @media (max-width: 991.98px) { + flex-direction: column-reverse; + } + } + + .home-media__text { + padding-right: 0; + padding-left: 70px; + + @media (max-width: 991.98px) { + padding: 0; + } + } + } + + &__text { + flex: 0 0 50%; + padding-right: 70px; + + @media (max-width: 991.98px) { + padding: 0; + margin-top: 70px; + } + + h2 { + margin-bottom: 10px; + } + + a { + font-size: 26px; + font-family: "ubuntu-mono"; + margin-bottom: 30px; + } + + p { + font-size: 28px; + line-height: 1.4; + + @media (max-width: 1299.98px) { + font-size: 24px; + } + + @media (max-width: 1199.98px) { + font-size: 20px; + } + + @media (max-width: 575.98px) { + font-size: 16px; + } + } + + p:not(:last-child) { + margin-bottom: 15px; + } + } + + &__img { + flex: 0 0 50%; + } +} + +// Design +.home-design { + text-align: center; + padding: 140px 0 100px 0; + + @media (max-width: 991.98px) { + padding: 10px 0; + text-align: left; + } + + h2 { + margin-bottom: 30px; + + @media (max-width: 991.98px) { + margin-bottom: 20px; + } + } + + p { + font-size: 28px; + max-width: 830px; + margin: 0 auto; + + @media (max-width: 991.98px) { + font-size: 20px; + } + + @media (max-width: 575.98px) { + font-size: 16px; + } + } + + p:not(:last-child) { + margin-bottom: 15px; + } +} + +// Posts +.home-posts { + padding: 100px 0 90px 0; + + @media (max-width: 991.98px) { + padding: 50px 0; + } + + .container { + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 575.98px) { + padding-right: 0; + } + } + + h2 { + margin-bottom: 25px; + } + + .home-post { + display: block; + + .line { + margin: 12px 0; + width: 95px; + height: 2px; + background-color: $ubuntu-orange; + } + } +} diff --git a/theme_kaizen/static/src/scss/pages/_page.scss b/theme_kaizen/static/src/scss/pages/_page.scss new file mode 100644 index 0000000..2ebac7b --- /dev/null +++ b/theme_kaizen/static/src/scss/pages/_page.scss @@ -0,0 +1,254 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the regular page. +// ----------------------------------------------------------------------------- + +// Hero +.page-hero { + img { + max-width: 100%; + width: 100%; + } +} + +// Page Content +.page-content { + padding: 80px 0 120px 0; + + @media (max-width: 991.98px) { + padding: 40px 0 60px 0; + overflow: hidden; + } + + .container { + display: flex; + align-items: flex-start; + + @media (min-width: 1300px) { + max-width: 1100px; + } + + @media (max-width: 991.98px) { + flex-direction: column; + } + } + + .content { + flex: 0 0 70%; + padding-right: 45px; + + .h1, + .h2 { + margin-bottom: 45px; + line-height: 1; + + @media (max-width: 991.98px) { + margin-bottom: 35px; + } + } + + .h3 { + margin-bottom: 35px; + + @media (max-width: 1299.98px) { + margin-bottom: 25px; + } + } + + .h4 { + margin-bottom: 15px; + } + + p { + margin-bottom: 35px; + line-height: 1.5; + + @media (max-width: 991.98px) { + margin-bottom: 25px; + } + } + + @media (max-width: 991.98px) { + flex: 0; + padding-right: 0; + } + } + + .read-more { + position: sticky; + position: -webkit-sticky; + top: 120px; + flex: 0 0 30%; + color: white; + padding: 40px 50px; + + h2 { + margin-bottom: 10px; + } + + ul { + line-height: 1.75; + } + + a:hover { + text-decoration: underline; + } + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( + 90deg, + $ubuntu-purple-light, + $ubuntu-orange + ); + z-index: -1; + + @media (max-width: 991.98px) { + width: 150%; + transform: translateX(-15%); + } + } + + @media (max-width: 991.98px) { + flex: 0; + width: 100%; + margin-top: 20px; + padding: 40px 0 45px 0; + position: relative; + top: 0; + } + } +} + +// Resources +.page-resources { + display: flex; + flex-wrap: wrap; + margin-bottom: 50px; + line-height: 2; + + @media (max-width: 1299.98px) { + flex-direction: column; + } + + & > div:not(:last-child) { + margin-right: 30px; + margin-bottom: 50px; + + @media (max-width: 1299.98px) { + margin-bottom: 40px; + margin-right: 0; + } + } + + .arrow { + margin-right: 15px; + } +} + +// Discussions +.page-discussions { + ul { + display: flex; + padding-left: 30px; + flex-wrap: wrap; + + li { + min-width: 185px; + margin-bottom: 30px; + padding-right: 15px; + list-style-type: none; + } + + a { + display: flex; + align-items: center; + + img { + margin-right: 15px; + } + } + } +} + +// FAQ's +.snippet_kaizen_faq { + background-color: $off-white; + margin-bottom: 4px; + + @media (max-width: 991.98px) { + padding: 50px 0; + } + + .container { + @media (min-width: 1200px) { + max-width: $container-large; + } + } + + h2 { + text-align: center; + margin-bottom: 50px; + + @media (max-width: 991.98px) { + margin-bottom: 40px; + } + } + + .questions { + max-width: 680px; + margin: 0 auto; + } + + ul { + margin-bottom: 50px; + + @media (max-width: 991.98px) { + margin-bottom: 40px; + } + } + + li { + background-color: white; + border-radius: 6px; + padding: 12px 20px; + list-style-type: none; + + &:not(:last-child) { + margin-bottom: 15px; + } + + & > a { + display: flex; + justify-content: space-between; + align-items: center; + transition: color 0.3s ease; + letter-spacing: 0.029em; + + img { + transition: all 0.3s ease; + } + + &[aria-expanded="true"] { + font-weight: 700; + color: $purple; + letter-spacing: 0; + } + + &[aria-expanded="false"] { + img { + transform: rotate(-90deg); + } + } + } + + .collapse p, + .collapsing p { + margin-top: 8px; + } + } +} diff --git a/theme_kaizen/static/src/scss/pages/_ports.scss b/theme_kaizen/static/src/scss/pages/_ports.scss new file mode 100644 index 0000000..67d89d0 --- /dev/null +++ b/theme_kaizen/static/src/scss/pages/_ports.scss @@ -0,0 +1,523 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the ports page. +// ----------------------------------------------------------------------------- + +// Ports +.ports { + padding-bottom: 200px; + overflow: hidden; + + @media (max-width: 1199.98px) { + padding-bottom: 120px; + } + + @media (max-width: 991.98px) { + padding-bottom: 35px; + } + + .container { + display: flex; + + @media (min-width: 1300px) { + max-width: $container-large; + } + + @media (max-width: 991.98px) { + flex-direction: column; + } + } + + // Sidebar + .sidebar { + flex: 0 0 30%; + position: relative; + + ul { + list-style-type: none; + } + + @media (max-width: 991.98px) { + flex: 0; + } + + .sidebar-toggler { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + z-index: 10; + padding: 17px 0; + + .value { + margin-left: auto; + margin-right: 25px; + padding-left: 15px; + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 200%; + height: 1px; + background-color: $gray-light; + z-index: -1; + transform: translateX(-50%); + } + + &::before { + @media (max-width: 991.98px) { + content: ""; + position: absolute; + top: 0; + left: 50%; + height: 100%; + width: 150%; + transform: translateX(-50%); + background-color: white; + z-index: -1; + } + } + } + + .collapse { + @media (min-width: 992px) { + display: block; + } + } + + .collapsing { + transition: height 0.5s ease; + } + + .nav-tabs { + position: relative; + border: none; + + .nav-item { + margin: 0; + } + + .nav-item.show .nav-link, + .nav-link.active { + font-weight: 700; + color: black; + letter-spacing: 0; + border-bottom: 5px solid $ubuntu-orange; + } + + .nav-link { + border-radius: 0; + border: none; + border-bottom: 5px solid transparent; + padding: 15px 25px 10px 25px; + font-size: 18px; + letter-spacing: 0.035em; + + @media (max-width: 1199.98px) { + font-size: 16px; + padding: 15px 15px 10px 15px; + } + } + + &::after { + content: ""; + position: absolute; + bottom: -1px; + left: 0; + height: 1px; + width: 5000px; + background-color: $gray-light; + z-index: -1; + transform: translateX(-25%); + + @media (max-width: 991.98px) { + display: none; + } + } + } + + .input { + margin-bottom: 10px; + } + + .tab-content, + .built-with { + margin-right: 30px; + } + + .tab-content { + margin-bottom: 60px; + position: relative; + + @media (max-width: 991.98px) { + margin: 0; + background-color: $off-white; + padding: 15px 0; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 200%; + height: 100%; + background-color: $off-white; + z-index: -1; + transform: translateX(-50%); + } + } + + .h3 { + margin-bottom: 20px; + display: flex; + align-items: center; + justify-content: space-between; + } + + li { + padding: 0 !important; + padding-left: 15px !important; + line-height: 1.6; + color: $ubuntu-purple-dark; + border: none; + border-left: 5px solid transparent; + border-radius: 0; + font-size: 18px; + + &:not(:last-child) { + margin-bottom: 15px; + } + + &.active { + color: $ubuntu-purple-dark; + font-weight: 700; + border-left: 5px solid $ubuntu-purple-dark; + } + + @media (max-width: 991.98px) { + font-size: 14px; + } + } + } + + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 1px; + height: 150%; + background-color: $gray-light; + z-index: -1; + + @media (max-width: 991.98px) { + height: 100%; + width: 150%; + right: 50%; + transform: translateX(50%); + display: none; + } + } + } + + // Content + .content { + flex: 0 0 70%; + padding-left: 50px; + padding-top: 100px; + + @media (max-width: 991.98px) { + padding-left: 0; + padding-top: 25px; + flex: 0; + } + } + + .heading { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 35px; + + .title { + padding-right: 45px; + + @media (max-width: 991.98px) { + width: 100%; + padding-right: 0; + } + + div { + display: flex; + align-items: flex-start; + justify-content: flex-start; + + @media (max-width: 991.98px) { + justify-content: space-between; + } + } + } + + h1 { + margin-bottom: 5px; + width: auto; + } + + a { + text-decoration: underline; + } + } + + .progress { + margin-bottom: 40px; + } + + .steps { + margin-bottom: 20px; + line-height: 1.6; + } + + .features { + font-family: "ubuntu-mono"; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: 25px; + line-height: 1.6; + + & > div:not(:last-child) { + padding-right: 25px; + list-style-type: none; + } + + ul { + margin-bottom: 15px; + list-style-type: none; + } + } + + .specifications { + margin-bottom: 25px; + + .table { + font-family: "ubuntu-mono"; + width: auto; + margin-bottom: 0; + color: black; + + @media (max-width: 991.98px) { + width: 100%; + } + } + + .table-striped tbody tr:nth-of-type(odd) { + background-color: #ededed; + } + + .table-striped tbody tr:nth-of-type(even) { + background-color: #ededed85; + } + + .table td, + .table th { + padding: 1px 80px 1px 15px; + border-top: 5px solid white; + white-space: nowrap; + + @media (max-width: 991.98px) { + padding: 1px 15px; + } + } + } + + .bugs { + margin-bottom: 25px; + } + + .solutions { + margin-bottom: 50px; + } + + .ports-banner { + position: relative; + padding: 25px 0; + + &::after { + content: ""; + position: absolute; + top: 0; + left: -50px; + height: 100%; + width: 200%; + background-color: #f3f3f3; + z-index: -1; + + @media (max-width: 991.98px) { + left: 50%; + transform: translateX(-50%); + } + } + } + + .installer { + margin-bottom: 10px; + + h2 { + margin-bottom: 25px; + } + + .btns { + margin-bottom: 30px; + + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 50px; + + @media (max-width: 1299.98px) { + column-gap: 10px; + } + + @media (max-width: 1199.98px) { + grid-template-columns: 1fr; + row-gap: 15px; + } + } + + p:not(:last-child) { + margin-bottom: 10px; + } + } + + .no-installer { + margin-bottom: 60px; + + @media (max-width: 991.98px) { + margin-bottom: 30px; + } + } + + .contributes-discussions { + display: grid; + grid-template-columns: 6fr 4fr; + column-gap: 30px; + + .h3 { + margin-bottom: 25px; + } + + @media (max-width: 991.98px) { + display: flex; + flex-direction: column-reverse; + } + } + + .contributes { + ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 8px; + row-gap: 15px; + list-style-type: none; + } + + a { + display: flex; + align-items: center; + justify-content: flex-start; + background-color: #f3f3f3; + } + + img { + width: 50px; + } + + p { + margin-left: 20px; + + @media (max-width: 1199.98px) { + margin-left: 10px; + } + + @media (max-width: 575.98px) { + font-size: 12px; + } + } + } + + .discussions { + ul { + padding-left: 15px; + list-style-type: none; + } + + li { + margin-bottom: 10px; + } + + a { + display: flex; + align-items: center; + justify-content: flex-start; + } + + img { + margin-right: 12px; + } + + @media (max-width: 991.98px) { + margin-bottom: 30px; + } + } + + .built-with { + background-color: #f3f3f3; + border-radius: 20px; + position: relative; + padding: 60px 100px 60px 40px; + overflow: hidden; + + img { + position: absolute; + bottom: 0; + right: 0; + width: 30%; + + @media (max-width: 991.98px) { + width: auto; + height: 80%; + } + } + + h3 { + margin-bottom: 10px; + } + + @media (max-width: 1299.98px) { + padding: 60px 60px 60px 40px; + } + + @media (max-width: 1199.98px) { + padding: 40px 40px 40px 30px; + } + + @media (max-width: 991.98px) { + margin-top: 35px; + padding: 60px 80px 60px 40px; + } + + @media (max-width: 370px) { + padding: 40px 60px 40px 20px; + } + } + + .choose-device { + display: flex; + flex-direction: column; + height: 100%; + align-items: center; + justify-content: center; + margin: 50px 0; + } +} diff --git a/theme_kaizen/static/src/scss/vendors/_normalize.scss b/theme_kaizen/static/src/scss/vendors/_normalize.scss new file mode 100644 index 0000000..005cc24 --- /dev/null +++ b/theme_kaizen/static/src/scss/vendors/_normalize.scss @@ -0,0 +1,351 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: 700; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/theme_kaizen/static/src/xml/frontend.xml b/theme_kaizen/static/src/xml/frontend.xml new file mode 100644 index 0000000..e8a0f10 --- /dev/null +++ b/theme_kaizen/static/src/xml/frontend.xml @@ -0,0 +1,16 @@ + + +
+ + +

+ +

+

+ +

+
+

Read More

+ +
+ diff --git a/theme_kaizen/templates/assets.xml b/theme_kaizen/templates/assets.xml new file mode 100644 index 0000000..a53a235 --- /dev/null +++ b/theme_kaizen/templates/assets.xml @@ -0,0 +1,179 @@ + + + + + + + +