.gitignore

 index.html
+node_modules
\ No newline at end of file

.nvmrc

+v16

README.md

 # OpenY Carnation theme Readme.
 
-##1. General info.
+## 1. General info.
 Carnation is an OpenY profile theme based on Twitter Bootstrap 4.
 
 
-##2. Theme development
+## 2. Theme development
 
 Carnation uses Webpack compiler. If you want to make any changes in css
 or js, please install Node.js and follow next instructions.
 
-##2.1 Go to the theme's folder and install packages that, required for compilation.
+We recommend using [nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
+to to manage `node` and `nvm`. Once you have installed `nvm`, run `nvm use` in
+the root of the theme directory to install the recommended versions.
+
+### 2.1 Go to the theme's folder and install packages that, required for compilation.
 
 `npm install`
 
-##2.2 Use dev mode for development (watcher wil scan for your changes and generate compiled version on fly)
+### 2.2 Use dev mode for development (watcher wil scan for your changes and generate compiled version on fly)
 
 `npm run dev`
 
-##2.3 For final compilation, please use build command.
+### 2.3 For final compilation, please use build command.
 
 `npm run build`
 
-##2.4 YARN (alternative to NPM) support
+### 2.4 YARN (alternative to NPM) support
 
 If you prefer yarn rather than npm, it is also supported
 
@@ -29,4 +33,4 @@ To install it, use (`brew install yarn`)
 
 Dev mode: `yarn run dev`
 
-Production build: `yarn run build`
\ No newline at end of file
+Production build: `yarn run build`

package.json

@@ -4,6 +4,9 @@
   "description": "Front-end package management for the Open Y carnation theme.",
   "main": "index.js",
   "license": "MIT",
+  "engines": {
+    "node": ">12 <17"
+  },
   "dependencies": {
     "@babel/polyfill": "^7.8.3",
     "bootstrap": "^4.4.1",

src/scss/component/_navbar.scss

@@ -11,7 +11,7 @@ body {
   }
 
   @include media-breakpoint-up(md) {
-    margin-top: ($grid-gutter-width / 2);
+    margin-top: ($grid-gutter-width * 0.5);
   }
 
   @include media-breakpoint-up(md) {

src/scss/component/_node.scss

@@ -3,9 +3,9 @@
  */
 
 .node-preview-container {
-  margin-top: -($grid-gutter-width / 2);
+  margin-top: -($grid-gutter-width * 0.5);
 }
 
 .node-preview-form-select {
-  padding: ($grid-gutter-width / 2);
+  padding: ($grid-gutter-width * 0.5);
 }

src/scss/modules/_mobile-menu.scss

@@ -137,3 +137,9 @@
     top: 117px;
   }
 }
+
+.mobile-menu {
+  &.menu-in .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-close);
+  }
+}

src/scss/modules/_page.scss

@@ -65,14 +65,13 @@ main {
 }
 
 .two-columns-container,
-.user-login,
-.webform-submission-form {
+.user-login {
   padding-bottom: 20px;
   min-height: 600px;
 }
 
 .webform-submission-form {
-  padding-top: 136px;
+  margin: 15px 0;
 }
 
 .error-page {

src/scss/modules/_program.scss

@@ -212,7 +212,6 @@
 
 // sub program listing items
 .subprogram-listing-item {
-  display: block;
   margin-top: 20px;
   margin-bottom: 25px;
 

src/scss/paragraphs/_1c.scss

@@ -15,13 +15,9 @@
   }
 
   .field-prgf-1c-description {
-    @include cachet();
-    color: $black;
-    font-size: 20px;
-    line-height: 1.45em;
-
     p {
-      margin: 0 0 5px;
+      margin-bottom: 1rem;
+      font-size: 1rem;
     }
   }
 }

src/scss/paragraphs/_grid_col.scss

 .paragraph--column-in-a-grid {
-  .col-12:first-child {
+  .col-12:nth-child(3n-2) {
     h2 {
       color: $cyan;
     }
@@ -8,7 +8,7 @@
     }
   }
 
-  .col-12:nth-child(2) {
+  .col-12:nth-child(3n-1) {
     h2 {
       color: $yellow;
     }
@@ -21,7 +21,7 @@
     }
   }
 
-  .col-12:last-child {
+  .col-12:nth-child(3n) {
     h2 {
       color: $orange;
     }
@@ -49,6 +49,11 @@
       margin-bottom: 18px;
       position: relative;
       width: 100%;
+
+      & > .content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
     }
   }
 
@@ -62,7 +67,6 @@
       text-transform: uppercase;
       border-bottom: 2px solid;
       display: inline-block;
-      margin: 0 30px;
     }
 
     i {

src/scss/presentation/_functions.scss

@@ -6,6 +6,8 @@
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
+@use "sass:math";
+
 @function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
 
@@ -19,5 +21,5 @@
 
 @function parseInt($n) {
   /* 2 */
-  @return $n / ($n * 0 + 1);
+  @return math.div($n, $n * 0 + 1);
 }

src/scss/presentation/_mixins.scss

@@ -56,7 +56,7 @@
       @if $unit == 'px' {
         /* 7 */
         $px: append($px, $value);
-        $rem: append($rem,  ($val / 10 + rem));
+        $rem: append($rem,  ($val * 0.1 + rem));
       }
 
       @if $unit == 'rem' {

src/scss/presentation/_variables.scss

@@ -105,6 +105,7 @@ $navbar-padding-x:                  0;
 $navbar-dark-color:                 $white;
 $navbar-dark-hover-color:           rgba($white, .75);
 $navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='4' stroke-linecap='square' stroke-miterlimit='8' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-icon-close:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1 2 22 21' fill='#{$navbar-dark-color}'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/></svg>") !default;
 
 
 // Navs

src/scss/style.scss

@@ -8,4 +8,4 @@
 @import "base";
 
 // Decoupled from modules
-@import '../../../scss/modules';
+@import '../../../common_scss/modules';

templates/paragraph/paragraph--grid-columns.html.twig

@@ -45,7 +45,7 @@ set classes = [
 ]
 %}
 <div{{ attributes.addClass(classes) }} data-mh="grid-col-group">
-  <div class="content p-5"{{ content_attributes }}>
+  <div class="content py-5"{{ content_attributes }}>
     <div class="inner">
       {% if not paragraph.field_prgf_clm_class.isEmpty() %}
         <h2 class="with-icon">{{- paragraph.field_prgf_clm_headline.value -}}</h2>