Use of Sass on Main, Adoption and Credits Pages

src/components/Bubble/Bubble.js

@@ -1,5 +1,3 @@
-import './Bubble.css';
-
 /**
  * Component creates speech bubble with or without image, with given header and optional sentences.
  * Component accepts following inputs:

src/sass/abstracts/_mixins.scss

@@ -0,0 +1,41 @@
+@use '../abstracts/variables' as *;
+
+@mixin centerer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin animal-background($amount, $path) {
+  background: linear-gradient(transparentize(white, $amount), transparentize(white, $amount)), url($path), no-repeat;
+  background-size: 290px;
+  background-position: center center;
+}
+
+@mixin arrow($arrow-root) {
+  @each $side in $sides {
+    @if $side == $arrow-root {
+      border-#{$side}: 30px solid $bubble-color;
+    } @else {
+      border-#{$side}: 20px solid transparent;
+    }
+  }
+}
+
+@mixin bp-min-max($point-1, $point-2) {
+  @media (min-width: #{$point-1}) and (max-width: #{$point-2}) {
+    @content;
+  }
+}
+
+@mixin bp-max($point) {
+  @media (max-width: #{$point}) {
+    @content;
+  }
+}
+
+@mixin bp-min($point) {
+  @media (min-width: #{$point}) {
+    @content;
+  }
+}

src/sass/abstracts/_variables.scss

@@ -0,0 +1,18 @@
+$bg-color: #8ab0ab;
+$btn-color: #658080;
+$secondary-btn-color: #655010;
+$hover-btn-color: #3e505b;
+$bubble-color: #410606;
+
+$media-alpha: 320px;
+$media-beta: 480px;
+$media-gamma: 640px;
+$media-delta: 960px;
+
+$sides: top, bottom, left, right;
+
+$animal-list: (
+  dog: '../adoption-dog.jpg',
+  cat: '../adoption-cat.jpg',
+  bird: '../adoption-bird.jpg',
+);

src/sass/base/_base.scss

@@ -0,0 +1,14 @@
+@use '../abstracts/variables' as *;
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  font-size: 16px;
+}
+
+body {
+  background-color: $bg-color;
+}

src/sass/components/_bubble.scss

@@ -0,0 +1,89 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+/*********** INFO BUBBLE ***********/
+
+.bubble {
+  position: relative;
+
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  grid-gap: 12px;
+  align-items: center;
+
+  padding: 20px;
+  margin-bottom: 30px;
+  min-height: 180px;
+
+  background: $bubble-color;
+  box-shadow: 0 0 20px transparentize(black, 0.4);
+  border-radius: 8px;
+  color: white;
+  font-weight: 100;
+
+  @include bp-max($media-gamma) {
+    & {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &.no-image {
+    grid-template-columns: 1fr;
+  }
+
+  &.no-image h2 {
+    font-size: 1.3em;
+  }
+
+  .bubble-img img {
+    border-radius: 8px;
+  }
+
+  &.invisible,
+  &.invisible {
+    opacity: 0;
+  }
+
+  &.fade-in,
+  &.fade-in {
+    opacity: 1;
+    transition: opacity 0.12s;
+    transition-timing-function: ease-in;
+  }
+
+  a {
+    color: white;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 55%;
+    left: 100%;
+    @include arrow(left);
+  }
+
+  &.lower:after {
+    top: 20%;
+  }
+
+  @include bp-max($media-delta) {
+    &:after {
+      top: 100%;
+      left: 20%;
+      @include arrow(top);
+    }
+
+    &.lower:after {
+      top: 100%;
+      left: 40%;
+    }
+  }
+
+  img {
+    width: 100%;
+    box-shadow: 0 0 30px transparentize(white, 0.5);
+  }
+}

src/sass/layout/_bubble-space.scss

@@ -0,0 +1,33 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.main-page,
+.credits-page {
+  .info {
+    grid-area: info;
+    display: flex;
+    align-items: start;
+    flex-direction: row;
+
+    @include bp-max($media-delta) {
+      & {
+        align-items: center;
+        flex-direction: column;
+      }
+    }
+  }
+
+  @include bp-max($media-delta) {
+    .bubbles {
+      width: 80%;
+    }
+
+    .animal {
+      width: 60%;
+    }
+  }
+
+  .animal img {
+    width: 100%;
+  }
+}

src/sass/layout/_grid.scss

@@ -0,0 +1,17 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.container.main-page,
+.container.credits-page {
+  display: grid;
+  grid-template-areas:
+    'header header'
+    'nav info';
+  grid-gap: 10px;
+
+  @include bp-max($media-delta) {
+    & {
+      grid-template-columns: 1fr;
+    }
+  }
+}

src/sass/layout/_header.scss

@@ -0,0 +1,19 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.main-page .header,
+.adoption-page .header,
+.credits-page .header {
+  grid-area: header;
+
+  h1 {
+    margin: 20px 0;
+    font-size: 8vw;
+  }
+
+  @include bp-max($media-beta) {
+    h1 {
+      font-size: 38px;
+    }
+  }
+}

src/sass/style.scss

@@ -1 +1,21 @@
 // Entry point for scss
+
+// Abstracts
+@use 'abstracts/variables';
+@use 'abstracts/mixins';
+
+// Base
+@use 'base/base';
+
+// Components
+@use 'components/bubble';
+
+// Layout
+@use 'layout/grid';
+@use 'layout/header';
+@use 'layout/bubble-space';
+
+// Views
+@use 'views/main-page';
+@use 'views/adoption-page';
+@use 'views/credits-page';