assets: updating scss files to be inline with kosmo branding

adhocracy-plus/assets/scss/_base.scss

@@ -41,13 +41,15 @@ h6 {
     line-height: 1.2;
     margin-bottom: 0.8 * $r-spacer;
     margin-top: 1.5 * $r-spacer;
-    font-weight: bold;
+    font-weight: 600;
 }
 
 h1,
 h2 {
     font-family: $font-family-serif;
-    font-weight: normal;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: $brand-primary;
 }
 
 h1 {

adhocracy-plus/assets/scss/_utility.scss

@@ -100,7 +100,7 @@
 }
 
 .u-page-ribbon {
-    background: linear-gradient(to right, $brand-primary, $brand-primary 33%, $brand-secondary 66%, $brand-secondary);
+    background-color: $brand-primary;
     height: 0.5em;
 }
 

adhocracy-plus/assets/scss/_variables.scss

@@ -1,10 +1,10 @@
 // subset of bootstrap variables
 $brand-primary: #2a2077; //kosmo dark blue
 
-$brand-secondary: #391df2 !default; //kosmo red
+$brand-secondary: #391df2 !default; //kosmo less dark blue
 $brand-secondary-dark: $brand-secondary !default;
 
-$brand-tertiary: #391df2 !default; // prussian blue
+$brand-tertiary: #391df2 !default; //kosmo less dark blue
 
 /* Don't use variables but hex-values here as they should not be overwritten on organisation pages */
 $brand-success: #a3ef90 !default;
@@ -24,6 +24,7 @@ $body-bg: #fff !default;
 $text-color: #212529 !default; // kosmo print colour
 $text-color-inverted: $body-bg !default;
 $text-color-gray: #666 !default;
+$link-red: #d9042b !default; //kosmo red
 $overlay: rgba(#000, 0.5) !default;
 
 $gray-dark: #464a4c !default;

adhocracy-plus/assets/scss/components/_blocks.scss

@@ -149,6 +149,7 @@ $block-padding-md: 7.5*$padding;
 //coloured background block
 .block-background_cta_block .block > :first-child {
     background-color: $brand-secondary;
+    color: $text-color-inverted;
 }
 
 .block-background_cta_block .block > :last-child {
@@ -157,7 +158,7 @@ $block-padding-md: 7.5*$padding;
 }
 
 //linked for specificty
-.btn--transparent.block-bg_btn-2 {
+.btn--transparent {
     color: $text-color-inverted;
     border-color: $text-color-inverted;
 

adhocracy-plus/assets/scss/components/_button.scss

@@ -117,8 +117,11 @@
     @include button-color($brand-primary, $body-bg);
 }
 
-.btn--secondary-filled {
-    @include button-color($brand-secondary, $body-bg);
+.btn--secondary-transparent {
+    @extend .btn--transparent;
+
+    color: $brand-secondary;
+    border-color: $brand-secondary;
 }
 
 .btn--bg-tertiary {

adhocracy-plus/assets/scss/components/_footer.scss

@@ -1,5 +1,6 @@
 .footer {
-    border-top: 2px solid $brand-primary;
+    background-color: $brand-primary;
+    color: $text-color-inverted;
 }
 
 .footer--cms {
@@ -9,8 +10,14 @@
 .footer__link {
     padding-right: $padding;
 
-    a {
-        font-weight: normal;
+    .navi__link {
+        text-transform: uppercase;
+        color: $text-color-inverted;
+
+        &:hover,
+        &:active {
+            color: $link-red;
+        }
     }
 }
 
@@ -19,10 +26,10 @@
 }
 
 .footer__margin-for-banner {
-    margin-bottom: 2*$spacer;
+    padding-bottom: 2*$spacer;
 
     @media screen and (min-width: $breakpoint) and (max-width: $breakpoint-lg-down) {
-        margin-bottom: 3.5*$spacer;
+        padding-bottom: 3.5*$spacer;
     }
 }
 

adhocracy-plus/assets/scss/components/_tabs.scss

@@ -17,7 +17,9 @@
     position: relative;
     vertical-align: bottom;
     text-decoration: none;
-    color: $text-color-gray;
+    text-transform: uppercase;
+    color: $brand-primary;
+    font-weight: 600;
     padding: 0.6em 1em;
     margin-right: 0.5em;
     margin-bottom: -2px;

adhocracy-plus/templates/500.html

@@ -9,16 +9,14 @@
           .small-wrapper      {margin-left: 25%; margin-right: 25%;}
           .error_body         {font-family: "SourceSansPro",sans-serif; display: block; margin: auto; padding-top: 3.5rem}
           .error_link         {color: #e3000f;}
-          .footer-ribbon      {position: absolute; display: flex; right: 0; bottom: 0; left: 0;}
           .footer             {font-family:"SourceSerifPro",serif; position: absolute; display: flex; align-items: center; right: 0; bottom: 0; left: 0; padding-bottom: 1rem;}
-          .u-page-ribbon      {background:-webkit-gradient(linear,left top,right top,from(#2d40cc),color-stop(33%,#2d40cc),color-stop(66%,#c0c6f0),to(#c0c6f0));background:-o-linear-gradient(left,#2d40cc,#2d40cc 33%,#c0c6f0 66%,#c0c6f0);height:.5em}
-          .u-page-ribbon--platform {background:-webkit-gradient(linear,left top,right top,from(#2d40cc),color-stop(33%,#2d40cc),color-stop(66%,#90efe4),to(#90efe4));background:-o-linear-gradient(left,#2d40cc,#2d40cc 33%,#90efe4 66%,#90efe4);background:linear-gradient(to right,#2d40cc,#2d40cc 33%,#90efe4 66%,#90efe4)}
+          .u-page-ribbon      {background-color: #2a2077; height:.5em}
         </style>
         <meta charset=utf-8>
     </head>
 
     <body>
-        <div class="u-page-ribbon u-page-ribbon--platform"></div>
+        <div class="u-page-ribbon"></div>
             <header class="main-header" aria-label=Header>
                 <div class="wide-wrapper">
                     <div class="platform-brand">
@@ -51,6 +49,6 @@ <h1>500</h1>
                     <p><a href="https://liqd.net">Liquid Democracy e.V.</a> Am Sudhaus 2, 12053, Berlin, tel. +49 (0) 30 6298 4840, e-mail. hallo@liqd.net</p>
                 </div>
             </footer>
-        <div class="footer-ribbon u-page-ribbon u-page-ribbon--platform"></div>
+        <div class="u-page-ribbon"></div>
     </body>
 </html>

adhocracy-plus/templates/base.html

@@ -91,7 +91,7 @@
         {% if not ORGANISATION.is_supporting %}
         {% if settings.a4_candy_cms_settings.ImportantPages.donate_link %}
         <div class="donation-banner">
-            <a href="{{ settings.a4_candy_cms_settings.ImportantPages.donate_link }}"  class="btn {% if ORGANISATION %} btn--bg-tertiary {% else %} btn--secondary-filled {% endif %}">
+            <a href="{{ settings.a4_candy_cms_settings.ImportantPages.donate_link }}"  class="btn {% if ORGANISATION %} btn--bg-tertiary {% else %} btn--primary-filled {% endif %}">
                 <span class="d-none d-md-block">
                     {% blocktrans with platformname=settings.a4_candy_cms_settings.OrganisationSettings.platform_name %}{{ platformname }} is funded by donations.{% endblocktrans %}
                     <br>

adhocracy-plus/templates/footer.html

@@ -1,25 +1,28 @@
 {% load i18n static wagtailsettings_tags %}
 {% get_settings %}
 
-<footer class="footer pt-3 pt-sm-4{% if not ORGANISATION.is_supporting %}{% if settings.a4_candy_cms_settings.ImportantPages.donate_link %} footer__margin-for-banner{% endif %}{% endif %}">
+<footer class="footer pt-3 pt-sm-4{% if not ORGANISATION.is_supporting %}{% if settings.a4_candy_cms_settings.ImportantPages.donate_link %} footer__padding-for-banner{% endif %}{% endif %}">
     {%  with pages=settings.a4_candy_cms_settings.ImportantPages %}
     <div class="container">
         <div class="row mt-3 mb-2 justify-content-lg-center">
             <div class="col-lg-6">
                 <p class="footer__description">
-                    {% blocktrans with platformname=settings.a4_candy_cms_settings.OrganisationSettings.platform_name %}<a href="/">{{ platformname }}</a> is a platform provided by <a href="https://liqd.net/de/">Liquid Democracy e.V.</a> in Berlin.{% endblocktrans %} {% if ORGANISATION %}{% blocktrans %}Only the respective operator of the offer is responsible for the editorial content.{% endblocktrans %}{% endif %}
+                    {% blocktrans with platformname=settings.a4_candy_cms_settings.OrganisationSettings.platform_name %}
+                      <a class="text-reset" href="/">{{ platformname }}</a> is a platform provided by <a class="text-reset" href="https://liqd.net/de/">Liquid Democracy e.V.</a> in Berlin.
+                    {% endblocktrans %}
+                    {% if ORGANISATION %}{% blocktrans %}Only the respective operator of the offer is responsible for the editorial content.{% endblocktrans %}{% endif %}
                 </p>
             </div>
             <div class="col-lg-6">
                 <div class="row">
                 {% if pages.open_content_link %}
                 <div class="col-sm-6 d-flex flex-column">
-                    <a class="btn btn--transparent footer__info-btn" href="{{ pages.open_content_link }}">Open Content</a>
+                    <a class="btn btn--secondary-transparent footer__info-btn" href="{{ pages.open_content_link }}">Open Content</a>
                 </div>
                 {% endif %}
                 {% if pages.github_repo_link %}
                 <div class="col-sm-6 d-flex flex-column mt-4 mt-sm-0">
-                    <a class="btn btn--transparent footer__info-btn" href="{{ pages.github_repo_link }}">Open Source</a>
+                    <a class="btn btn--secondary-transparent footer__info-btn" href="{{ pages.github_repo_link }}">Open Source</a>
                 </div>
                 {% endif %}
                 </div>

adhocracy-plus/templates/includes/header_mobile_toggle.html

@@ -1,7 +1,7 @@
 {% load userindicator static i18n thumbnail %}
 
 <button
-    class="btn navbar-toggler btn--secondary-filled btn--square btn--small btn--attached-top header-upper__mobile-toggle"
+    class="btn navbar-toggler btn--primary-filled btn--square btn--small btn--attached-top header-upper__mobile-toggle"
     data-toggle="collapse"
     data-target="#header-upper-collapse"
     aria-expanded="false"

apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_background_cta_block.html

@@ -6,7 +6,7 @@
             {{ column.body }}
             {% if column.link %}
             <div class="block-col_cta-content">
-                <a href="{{ column.link }}" class="btn btn--full btn--transparent block-bg_btn-{{ forloop.counter }} mt-3">{{ column.link_text }}</a>
+                <a href="{{ column.link }}" class="btn btn--full btn--transparent btn--text-color-inverted mt-3">{{ column.link_text }}</a>
             </div>
         {% endif %}
         </div>

apps/users/templates/a4_candy_users/indicator.html

@@ -4,7 +4,7 @@
     <div class="dropdown dropdown--right userindicator__dropdown">
 
         <button
-            class="d-md-none dropdown-toggle btn btn--secondary-filled btn--square btn--attached-top header-upper__mobile-toggle"
+            class="d-md-none dropdown-toggle btn btn--primary-filled btn--square btn--attached-top header-upper__mobile-toggle"
             data-toggle="dropdown"
             data-flip="false"
             aria-haspopup="true"
@@ -14,7 +14,7 @@
         </button>
 
         <button
-            class="d-none d-md-inline-block dropdown-toggle btn btn--secondary-filled btn--attached-top btn--square btn--align-left header-upper__toggle"
+            class="d-none d-md-inline-block dropdown-toggle btn btn--primary-filled btn--attached-top btn--square btn--align-left header-upper__toggle"
             data-toggle="dropdown"
             data-flip="false"
             aria-haspopup="true"
@@ -53,10 +53,10 @@
         </div>
 
     {% else %}
-        <div class="btn btn--secondary-filled btn--huge btn--attached-top">
-            <span class="navi__item"><a href="{% url 'account_login' %}?next={{ redirect_field_value }}">{% trans "Login" %}</a></span>
+        <div class="btn btn--primary-filled btn--huge btn--attached-top">
+            <span class="navi__item"><a class="text-reset" href="{% url 'account_login' %}?next={{ redirect_field_value }}">{% trans "Login" %}</a></span>
                 <span class="d-none d-md-inline">/</span>
-            <span class="navi__item"><a href="{% url 'account_signup' %}?next={{ redirect_field_value }}">{% trans "Register" %}</a></span>
+            <span class="navi__item"><a class="text-reset" href="{% url 'account_signup' %}?next={{ redirect_field_value }}">{% trans "Register" %}</a></span>
         </div>
     </div>
 {% endif %}