Theme: Init Saija

saija-theme/css/scss/abstracts/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin font-size($sizeValue: 1.6) {
+    font-size: ($sizeValue * 10) + px;
+    font-size: $sizeValue + rem;
+}
+
+@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { 
+    @font-face {
+      font-family: quote($font-name);
+      src: url($file-name + '.eot');
+      src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
+           url($file-name + '.woff') format('woff'),
+           url($file-name + '.ttf')  format('truetype'),
+           url($file-name + '.svg##{$font-name}')  format('svg');
+      font-weight: $weight;
+      font-style: $style;
+    }
+  }

saija-theme/css/scss/abstracts/_screenwidth.scss

@@ -0,0 +1,13 @@
+$max-xs : 575.98px; // Extra small devices (portrait phones, less than 576px)
+$min-sm : 576px; // Small devices (landscape phones, 576px and up)
+$max-sm : 767.98px; // Small devices (landscape phones, less than 768px)
+$min-md : 768px; // Medium devices (tablets, 768px and up)
+$max-md : 991.98px; // Medium devices (tablets, less than 992px)
+$min-lg : 992px; // Large devices (desktops, 992px and up)
+$max-lg : 1199.98px; // Large devices (desktops, less than 1200px)
+$ipad-max : 1024px;
+$ipad-portrait : only screen and (max-width: $min-md) and (orientation:portrait);
+$ipad-landscape : only screen and (max-width: $ipad-max) and (orientation:landscape);
+$after-ipad: 1025px;
+$min-xl : 1200px; // Extra large devices (large desktops, 1200px and up)
+$min-jumbo : 1921px;

saija-theme/css/scss/abstracts/_variables.scss

@@ -0,0 +1,11 @@
+$color-primary:#E62638;
+$color-secondary:#0B6DB6;
+
+$color-light-grey:#ECECEC;
+$color-grey:#C4C4C4;
+$color-white: #FFFFFF;
+$color-black: #000000;
+$color-transparent: transparent;
+
+$gridWidth: 10rem;
+$gridGap: 2rem;

saija-theme/css/scss/base/_animations.scss

@@ -0,0 +1,10 @@
+@keyframes revealLine {
+    from {
+        width: 0%;
+        opacity: 0;
+    }
+    to {
+        width: 60%;
+        opacity: 1;
+    }
+}

saija-theme/css/scss/base/_button.scss

@@ -0,0 +1,85 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+@use '../abstracts/screenwidth' as *;
+
+.btn {
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        margin:1.5rem 0;
+        gap:1rem;
+
+        &:first-of-type {
+            margin-bottom: 0;
+        }
+
+        &[data-wrapper-type="row"] {
+            flex-direction: row;
+
+            gap:0.75rem;
+        }
+        &[data-wrapper-type="column"] {
+            flex-direction: column;
+            gap:1rem;
+        }
+    }
+
+    display: inline-flex;
+    align-items: center;
+
+    padding-top: 0.815rem;
+    padding-bottom: 0.815rem;
+    padding-left: 1.45rem;
+    padding-right: 1.45rem;
+
+    font-weight: 600;
+    font-style: normal;
+    text-decoration: none;
+    cursor: pointer;
+
+    border-radius: 6px;
+    word-break: normal;
+    border:2px solid;
+
+    transition: 0.4s;
+
+
+    &[data-icon-position="left"] {
+        svg, i {
+            margin-right: 0.35rem;
+        }
+    }
+
+    &[data-icon-position="right"] {
+        svg, i {
+            margin-left: 0.35rem;
+        }
+    }
+
+    &__full {
+        width: 100%;
+        text-align: center;
+        justify-content: center;
+    }
+
+    &__link {
+        color:rgba(var(---btn-primary), 1);
+        padding-top: 0;
+        padding-bottom:0;
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+    }
+
+    &__primary {
+        background-color: rgba(var(--btn-primary), 1);
+        color:rgba(var(--btn-text-primary), 1);
+        border-color: transparent;
+
+        &:hover {
+            background-color: rgba(var(--btn-primary-hover), 1);
+            color:rgba(var(--btn-text-primary-hover), 1);
+        }
+    }
+}

saija-theme/css/scss/base/_card.scss

@@ -0,0 +1,21 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+@use '../abstracts/screenwidth' as *;
+
+.card {
+    background-color: $color-light-grey;
+    padding:1.5rem 2.5rem;
+
+    :is(h1,h2,h3,h4,h5,h6,p) {
+        margin:0.35rem 0;
+    }
+
+    h1 {
+        font-size: 1.85rem;
+    }
+
+    h2 {
+        font-size: 1.35rem;
+        color:lighten($color-black, 45%)!important;
+    }
+}

saija-theme/css/scss/base/_reset.scss

@@ -0,0 +1,75 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

saija-theme/css/scss/base/_typography.scss

@@ -0,0 +1,11 @@
+.uppercase {
+    text-transform: uppercase;
+}
+
+.lowercase {
+    text-transform: lowercase;
+}
+
+.underline {
+    text-decoration: underline;
+}

saija-theme/css/scss/component/_footer.scss

@@ -0,0 +1,34 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+@use '../abstracts/screenwidth' as *;
+
+.footer {
+    padding:calc(var(--padding-lg)*1.5) 1rem;
+    margin-top: 4.5rem;
+    background-color: rgba(var(--bg-card), 1);
+    color: rgba(var(--body-text), 1);
+
+    border:1px solid rgba(var(--border-color), 1);
+
+    &__inner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        @media (max-width:60rem) {
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+
+    &__credit {
+        @media (max-width:60rem) {
+            margin-top: 0.85rem;
+        }
+
+        a {
+            color: rgba(var(--body-text), 1);
+            font-weight: bold;
+        }
+    }
+}

saija-theme/css/scss/component/_header.scss

@@ -0,0 +1,32 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+@use '../abstracts/screenwidth' as *;
+
+.hero {
+    position: relative;
+    width: 100%;
+
+    background-color: var(--hero-bg);
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    min-height: var(--hero-height);
+
+    margin-bottom: calc(-1 * var(--hero-height) + var(--hero-height)/3);
+
+    &.is-gradient {
+        mask-image: linear-gradient(to top, transparent 5%, black 35%);
+        mask-size: auto 100%;
+        mask-repeat: no-repeat;
+        // &::before {
+        //     content: "";
+        //     position: absolute;
+        //     left: 0;
+        //     bottom: 0px;
+        //     top: auto;
+        //     width: 100%;
+        //     height: 100%;
+        //     background: linear-gradient(0deg, rgba(var(--bg-color), 1) 0%, rgba(var(--bg-color), 0) 35%);
+        // }
+    }
+}