Migrated Stick to scss

Author: Satoshi-Sh

components/decorations/Stick/Stick.module.scss

@@ -0,0 +1,15 @@
+@use '@/styles/mixins' as *;
+
+.homeStick {
+  right: 0;
+  position: absolute;
+  transform: translate(-10rem, -5rem);
+
+  @include desktop-breakpoint-plus-max {
+    transform: translate(-50%, -5rem);
+    width: 30%;
+  }
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+}

components/decorations/Stick.js components/decorations/Stick/index.jscomponents/decorations/Stick.js renamed to components/decorations/Stick/index.js

@@ -2,6 +2,8 @@ import TwoColumn from '@/components/containers/TwoColumn';
 import { CardsColumns } from '@/components/containers/CardColumns';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
+import Stick from '@/components/decorations/Stick';
+import stickStyles from '@/components/decorations/Stick/Stick.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { useTheme } from 'styled-components';
 
@@ -67,6 +69,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
+        <Stick className={stickStyles.homeStick} />
         <TwoColumn
           title='Nonprofit?'
           content='Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how.'

pages/index.js

@@ -32,6 +32,12 @@
   }
 }
 
+@mixin desktop-breakpoint-plus-max {
+  @media (max-width: $desktop-breakpoint-plus) {
+    @content;
+  }
+}
+
 @mixin medium-desktop {
   @media (min-width: $medium-desktop-breakpoint) {
     @content;