Merge pull request #71 from joomla/development-cassiopeia-design

Back to the roots - Improve Cassiopeia - Remove 4 seasons themes. - Add standard and alternative color theme (provisional, don't rant). - Remove Poppins, add Fira. - Small improvements from design2 branch.
brianteeman · Sep 13, 2020 · 6104970 · 6104970
2 parents 15938a7 + 046f6be
commit 6104970
Show file tree

Hide file tree

Showing 31 changed files with 275 additions and 141 deletions.
diff --git a/administrator/language/en-GB/plg_sampledata_blog.ini b/administrator/language/en-GB/plg_sampledata_blog.ini
@@ -72,7 +72,7 @@ PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_5_TITLE="Older Posts"
 PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_6_TITLE="Bottom Menu"
 PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_7_TITLE="Search"
 PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_8_TITLE="Image"
-PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_8_CONTENT="<h1 class=\"display-3 text-thin\">Welcome to Joomla on Cassiopeia!</h1><p class=\"lead\">You have chosen one of the most powerful CMS Systems in the world.</p><p class=\"lead\">Cassiopeia is the multi-purpose frontend template for Joomla 4.</p><p><a class=\"btn btn-warning btn-lg\" href=\"index.php\">Learn more »</a></p>"
+PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_8_CONTENT="<h1 class=\"display-3 text-thin\">Welcome to Joomla on Cassiopeia!</h1><p class=\"lead\"><strong>You have chosen one of the most powerful CMS Systems in the world.</strong></p><p class=\"lead\">Cassiopeia is the multi-purpose frontend template for Joomla 4.</p><p><a class=\"btn btn-primary btn-lg\" href=\"index.php\">Learn more »</a></p>"
 PLG_SAMPLEDATA_BLOG_SAMPLEDATA_MODULES_MODULE_9_TITLE="Popular Tags"
 PLG_SAMPLEDATA_BLOG_STEP1_SUCCESS="Step 1: Articles done!"
 PLG_SAMPLEDATA_BLOG_STEP2_SUCCESS="Step 2: Menus done!"

diff --git a/build/build-modules-js/compilecss.es6.js b/build/build-modules-js/compilecss.es6.js
@@ -45,12 +45,10 @@ module.exports.compile = (options, path) => {
           `${RootPath}/templates/cassiopeia/scss/template.scss`,
           `${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
           `${RootPath}/templates/cassiopeia/scss/global/fonts-local_roboto.scss`,
-          `${RootPath}/templates/cassiopeia/scss/global/fonts-web_poppins+roboto.scss`,
+          `${RootPath}/templates/cassiopeia/scss/global/fonts-web_fira-sans.scss`,
           `${RootPath}/templates/cassiopeia/scss/global/fonts-web_roboto+noto-sans.scss`,
-          `${RootPath}/templates/cassiopeia/scss/global/colors_autumn.scss`,
-          `${RootPath}/templates/cassiopeia/scss/global/colors_spring.scss`,
-          `${RootPath}/templates/cassiopeia/scss/global/colors_summer.scss`,
-          `${RootPath}/templates/cassiopeia/scss/global/colors_winter.scss`,
+          `${RootPath}/templates/cassiopeia/scss/global/colors_standard.scss`,
+          `${RootPath}/templates/cassiopeia/scss/global/colors_alternative.scss`,
           `${RootPath}/templates/cassiopeia/scss/system/searchtools/searchtools.scss`,
           `${RootPath}/templates/cassiopeia/scss/vendor/choicesjs/choices.scss`,
           `${RootPath}/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss`,

diff --git a/language/en-GB/tpl_cassiopeia.ini b/language/en-GB/tpl_cassiopeia.ini
@@ -5,11 +5,9 @@
 
 TPL_CASSIOPEIA_BACKTOTOP="Back to Top"
 TPL_CASSIOPEIA_BACKTOTOP_LABEL="Back-to-top Link"
-TPL_CASSIOPEIA_COLOR_NAME_AUTUMN="Autumn"
+TPL_CASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative"
 TPL_CASSIOPEIA_COLOR_NAME_LABEL="Colour Theme"
-TPL_CASSIOPEIA_COLOR_NAME_SPRING="Spring"
-TPL_CASSIOPEIA_COLOR_NAME_SUMMER="Summer"
-TPL_CASSIOPEIA_COLOR_NAME_WINTER="Winter"
+TPL_CASSIOPEIA_COLOR_NAME_STANDARD="Standard"
 TPL_CASSIOPEIA_FLUID="Fluid"
 TPL_CASSIOPEIA_FLUID_LABEL="Fluid Layout"
 TPL_CASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder"

diff --git a/templates/cassiopeia/html/layouts/chromes/noCard.php b/templates/cassiopeia/html/layouts/chromes/noCard.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * @package     Joomla.Site
+ * @subpackage  Templates.cassiopeia
+ *
+ * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\Utilities\ArrayHelper;
+
+$module  = $displayData['module'];
+$params  = $displayData['params'];
+$attribs = $displayData['attribs'];
+
+if ($module->content === null || $module->content === '')
+{
+	return;
+}
+
+$moduleTag              = $params->get('module_tag', 'div');
+$moduleAttribs          = [];
+$moduleAttribs['class'] = $module->position . ' no-card ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8');
+$headerTag              = htmlspecialchars($params->get('header_tag', 'h4'), ENT_QUOTES, 'UTF-8');
+$headerClass            = htmlspecialchars($params->get('header_class', ''), ENT_QUOTES, 'UTF-8');
+$headerAttribs          = [];
+$headerAttribs['class'] = $headerClass;
+
+if ($module->showtitle) :
+	$moduleAttribs['aria-labelledby'] = 'mod-' . $module->id;
+	$headerAttribs['id']             = 'mod-' . $module->id;
+else:
+	$moduleAttribs['aria-label'] = $module->title;
+endif;
+
+$header = '<' . $headerTag . ' ' . ArrayHelper::toString($headerAttribs) . '>' . $module->title . '</' . $headerTag . '>';
+?>
+<<?php echo $moduleTag; ?> <?php echo ArrayHelper::toString($moduleAttribs); ?>>
+	<?php if ($module->showtitle) : ?>
+		<?php echo $header; ?>
+	<?php endif; ?>
+	<?php echo $module->content; ?>
+</<?php echo $moduleTag; ?>>
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
@@ -32,7 +32,7 @@
 $templatePath = 'templates/' . $this->template;
 
 // Color Theme
-$paramsColorName = $this->params->get('colorName', 'colors_summer');
+$paramsColorName = $this->params->get('colorName', 'colors_standard');
 $assetColorName  = 'theme.' . $paramsColorName;
 $wa->registerAndUseStyle($assetColorName, $templatePath . '/css/global/' . $paramsColorName . '.css');
 $this->getPreloadManager()->preload($wa->getAsset('style', $assetColorName)->getUri(), ['as' => 'style']);

diff --git a/templates/cassiopeia/scss/blocks/_banner.scss b/templates/cassiopeia/scss/blocks/_banner.scss
@@ -21,11 +21,20 @@
       align-items: center;
       justify-content: center;
       height: 100%;
-      color: $white;
+      padding: $cassiopeia-grid-gutter;
+      text-align: center;
       background-color: hsla(0, 0%, 0%, .5);
 
-      h2 {
-        font-size: 3rem;
+      .text-thin {
+        font-weight: $font-weight-lighter;
+        &::after {
+          display: block;
+          width: 30%;
+          height: 6px;
+          margin: 1rem auto 2rem;
+          content: "";
+          background: var(--cassiopeia-color-hover);
+        }
       }
     }
   }

diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -19,7 +19,7 @@
 
     > [class^="container-"],
     > [class*=" container-"] {
-      width: auto;
+      width: 100%;
       max-width: none;
     }
 
@@ -60,6 +60,9 @@
 
     &.wrapper-fluid {
       grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
+      .grid-child {
+        max-width: none;
+      }
     }
   }
 }
@@ -94,6 +97,9 @@
 
 .container-sidebar-right {
   grid-area: side-r;
+  .sidebar-right:first-child {
+    margin-top: $cassiopeia-grid-gutter;
+  }
 }
 
 .container-main-top {

diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss
@@ -2,8 +2,10 @@
 
 .footer {
   padding: 2.5rem ($cassiopeia-grid-gutter / 2);
+  margin-top: $cassiopeia-grid-gutter;
   color: $white;
-  background: $cassiopeia-template-color;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad;
 
   a {
     color: $white;
@@ -12,10 +14,10 @@
   .back-top {
     align-self: flex-end;
     height: 40px;
-    padding: 8px 11px;
-    color: $cassiopeia-template-color;
+    padding: $cassiopeia-grid-gutter/2;
+    color: var(--cassiopeia-color-primary);
     background: $white;
-    border-radius: 3px;
+    border-radius: $border-radius;
 
     @include margin("right", 5px);
     @include margin("left", auto);

diff --git a/templates/cassiopeia/scss/blocks/_global.scss b/templates/cassiopeia/scss/blocks/_global.scss
@@ -13,9 +13,9 @@ html {
 }
 
 body {
-  font-family: var(--cassiopeia-font-family-body);
   padding: 0;
   margin: 0;
+  font-family: var(--cassiopeia-font-family-body);
   line-height: 1.6;
   background: $white;
 }
@@ -75,3 +75,40 @@ dd {
 meter {
   width: 100%;
 }
+
+.pagenavigation {
+  .pagination {
+    justify-content: space-between;
+
+    li.next:only-child {
+      margin-left: auto;
+    }
+  }
+}
+
+.page-item {
+  &:first-child {
+    .page-link {
+      @include border-radius($border-radius);
+    }
+  }
+  &:last-child {
+    .page-link {
+      @include border-radius($border-radius);
+    }
+  }
+}
+
+.page-link {
+  color: var(--cassiopeia-color-link);
+  border: 1px solid $white;
+  &:hover {
+    color: var(--cassiopeia-color-link);
+  }
+}
+
+.awesomplete {
+  input {
+    @include border-right-radius(0);
+  }
+}
diff --git a/templates/cassiopeia/scss/blocks/_header.scss b/templates/cassiopeia/scss/blocks/_header.scss
@@ -3,7 +3,7 @@
 .container-header {
   position: relative;
   z-index: 10;
-  background-color: $cassiopeia-template-color;
+  background-color: var(--cassiopeia-color-primary);
   background-image: $cassiopeia-header-grad;
   box-shadow: 0 5px 5px hsla(0, 0%, 0%,.03) inset;
 
@@ -20,7 +20,7 @@
   }
 
   nav {
-    padding: 2.5rem ($cassiopeia-grid-gutter / 2);
+    padding: ($cassiopeia-grid-gutter / 2) ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter ($cassiopeia-grid-gutter / 2);
   }
 
   .site-description {
@@ -31,7 +31,7 @@
   .navbar-brand {
     position: relative;
     display: inline-block;
-    padding: 2.5rem ($cassiopeia-grid-gutter / 2);
+    padding: $cassiopeia-grid-gutter / 2;
     margin-right: auto;
     font-size: 2rem;
     color: $white;
@@ -52,7 +52,7 @@
 
     &:hover,
     &:focus {
-      color: darken($white, 6%);
+      color: scale-color($white, $lightness: -6%);
     }
   }
 
@@ -66,14 +66,14 @@
 
   .mod-menu {
     flex: 1 0 100%;
-    margin: 0;
     padding: 0;
-    list-style: none;
+    margin: 0;
     color: $white;
+    list-style: none;
 
     @include media-breakpoint-up(md) {
-      flex: 1 1 0%;
       display: flex;
+      flex: 1 1 0%;
       flex-direction: row;
     }
 
@@ -93,12 +93,36 @@
         color: currentColor;
         text-decoration: none;
       }
+
+      &::after {
+
+        @include media-breakpoint-up(md) {
+          position: absolute;
+          right: 50%;
+          bottom: 0;
+          left: 50%;
+          display: block;
+          height: 2px;
+          margin: auto;
+          content: "";
+          background: transparent;
+          opacity: .2;
+          transition: all .2s ease, background-color .2s ease;
+        }
+      }
+
+      &.active::after,
+      &:hover::after {
+        right: 2px;
+        left: 0;
+        background: $white;
+      }
     }
 
     .parent {
       > ul {
         display: none;
-        color: $cassiopeia-template-color-dark;
+        color: var(--cassiopeia-color-primary);
       }
     }
   }
@@ -132,30 +156,3 @@
     }
   }
 }
-
-.container-title {
-  padding-top: 13px;
-  padding-bottom: 13px;
-  color: $white;
-  background-color: $cassiopeia-template-color;
-
-  .row {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  .page-title {
-    margin-bottom: 0;
-    font-size: 1.3rem;
-    font-weight: normal;
-
-    span {
-      position: relative;
-      top: 2px;
-      margin-right: 12px;
-      margin-left: 5px;
-      font-size: $h1-font-size;
-      color: lighten($cassiopeia-template-color, 10%);
-    }
-  }
-}
diff --git a/templates/cassiopeia/scss/blocks/_layout.scss b/templates/cassiopeia/scss/blocks/_layout.scss
@@ -10,7 +10,7 @@
 }
 
 .container-header header .site {
-  background-color: $gray-100;
+  background-color: gray(100);
 
   > .full-width {
     max-width: none;
@@ -31,6 +31,7 @@
 .container-top-b,
 .container-bottom-a,
 .container-bottom-b {
+  padding: 4rem 0;
   > * {
     flex: 1;
     margin: ($cassiopeia-grid-gutter / 2);