added temp footer

cheddZy · Mar 5, 2024 · ba5a702 · ba5a702
1 parent 05aec8b
commit ba5a702
Show file tree

Hide file tree

Showing 9 changed files with 232 additions and 69 deletions.
diff --git a/src/components/Content.astro b/src/components/Content.astro
@@ -16,6 +16,7 @@ import Card from "./ui/Card.astro";
     import Figma from '../assets/figma.png';
 
 import CardContent from "./ui/cardContent.astro";
+import CardSubmit from "./ui/cardSubmit.astro";
 ---
 <!--TODO: FIGURE OUT BETTER WAY TO DO THE IMAGES!-->
 <script>
@@ -193,7 +194,7 @@ import CardContent from "./ui/cardContent.astro";
         <!--News-->
         <div class="item show news">
             <p class="labelText">NEWS</p>
-            <CardContent label="NEWSLETTER" title="Webflow Blog" func="Web Design Blog"
+            <CardContent label="NEWS" title="Webflow Blog" func="Web Design Blog"
                   src={WebflowBlog}
                   href="https://webflow.com/blog/?ref=repo.cheddzy.com"/>
         </div>
@@ -257,6 +258,10 @@ import CardContent from "./ui/cardContent.astro";
                   src={ui8}
                   href="https://ui8.net/?ref=repo.cheddzy.com"/>
         </div>
+
+    </div>
+    <div class="show other">
+        <CardSubmit />
     </div>
 
 </section>

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -70,4 +70,10 @@ import LogInButton from "./buttons/LogInButton.astro";
         color: #6F737A;
     }
 
+    @media screen and (max-width: 768px) {
+        h1 {
+            font-size: 3rem !important;
+        }
+    }
+
 </style>
diff --git a/src/components/MainFooter.astro b/src/components/MainFooter.astro
@@ -6,7 +6,27 @@
 <footer>
 
 
+<small>
+    Developed by <a href="https://cheddzy.com/">Shachar MW</a> © 2024
+</small>
 
 
+</footer>
 
-</footer>
+
+<style>
+
+    footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 8rem;
+        background-color: #1E1F22;
+        color: #96aee0;
+    }
+    a {
+        text-decoration: underline;
+        text-decoration-color: #3574F0;
+    }
+
+</style>
diff --git a/src/components/MainHeader.astro b/src/components/MainHeader.astro
@@ -1,62 +1,128 @@
 ---
-
 import ActionButton from "./buttons/ActionButton.astro";
 import GenericButton from "./buttons/GenericButton.astro";
 import HeaderAlert from "./HeaderAlert.astro";
+import SubmitButton from "./buttons/SubmitButton.astro";
 ---
 
+<script>
+    const markEmpty = document.getElementById('bookmarkEmpty');
+    const markFilled = document.getElementById('bookmarkFilled');
+
+    switch (localStorage.getItem('bookmark')) {
+        case 'empty':
+            makeEmpty();
+            break;
+        case 'filled':
+            setTimeout(function() {
+                makeFilled();
+            }, 100)
+            break;
+        default:
+            makeEmpty();
+            localStorage.setItem('bookmark', 'empty')
+            break;
+    }
+
+
+    function makeEmpty() {
+        markEmpty.style.display = 'block';
+        markFilled.style.display = 'none';
+    }
+
+    function makeFilled() {
+        markFilled.style.display = 'block';
+        markEmpty.style.display = 'none';
+    }
+
+    markEmpty.addEventListener('click', () => {
+        makeFilled()
+        localStorage.setItem('bookmark', 'filled')
+    })
+    markFilled.addEventListener('click', () => {
+        makeEmpty()
+        localStorage.setItem('bookmark', 'empty')
+    })
+
+</script>
 
 <header>
     <div>
         <h1>
-            <svg data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" stroke-linecap="round" stroke-linejoin="round"></path>
+            <svg id="bookmarkEmpty" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5"
+                 stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+                      stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+            <svg id="bookmarkFilled" class="hide" data-slot="icon" aria-hidden="true" fill="#3574F0" viewBox="0 0 24 24"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path clip-rule="evenodd"
+                      d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z"
+                      fill-rule="evenodd"></path>
             </svg>
             the design repo
         </h1>
         <div class="menu">
 
             <ActionButton
-                        buttonText='Submit your own!'
-                        href="/"
-                        target="_blank"
-                        label='Aria Label2'
+                    buttonText='Submit resources'
+                    href="/"
+                    label='Aria Label2'
+                    target="_blank"
             />
 
         </div>
     </div>
 </header>
-<HeaderAlert />
+<HeaderAlert/>
 
 
 <style>
 
     .headerWrap {
         display: flex;
     }
+
     .menu {
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 0.5rem;
     }
 
+    .hide {
+        display: none;
+    }
+
     header :has(h1) {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         padding: 1.5rem 0 0 0;
     }
+
     h1 {
-        font-size: 1rem !important;
         display: flex;
         flex-direction: row;
         gap: 0.5rem;
         align-items: center;
+        font-size: 1rem !important;
+    }
+
+    #bookmarkFilled {
+        animation: filledBookmark 200ms 1 ease-in-out;
     }
+    @keyframes filledBookmark {
+        0% {scale: 0.5;}
+        80% {scale: 1.2;}
+        100% {scale: 1;}
+    }
+
     svg {
         height: 1.2rem;
+        color: #3574F0;
+        cursor: pointer;
     }
 
     header {

diff --git a/src/components/SubmitPreFooter.astro b/src/components/SubmitPreFooter.astro
diff --git a/src/components/buttons/ActionButton.astro b/src/components/buttons/ActionButton.astro
@@ -27,11 +27,14 @@ const { buttonText, href, target, label } = Astro.props;
         @apply transition-colors;
         @apply duration-100;
 
+        font-weight: 500;
         font-size: 0.9rem;
-        border: 1px rgba(87, 90, 102, 0.2) solid;
+        border: 1px rgba(53, 115, 240, 0.25) solid;
     }
     a:hover {
-
+        background-color: #3574F0;
+        border: #3574F0 1px solid;
+        color: #f0f1f2;
     }
 
 </style>
diff --git a/src/components/buttons/SubmitButton.astro b/src/components/buttons/SubmitButton.astro
@@ -0,0 +1,59 @@
+---
+
+import '../../styles/styles.scss'
+import '../../styles/globals.scss'
+const { target, label } = Astro.props;
+---
+
+<script>
+    const button = document.getElementById('genericButton')
+
+    button.addEventListener('click', () => {
+
+    })
+</script>
+
+<button id="genericButton" type="button" aria-label={label}>
+    <a href='/' target={target}>
+
+        Submit or Request Resources
+    </a>
+</button>
+
+
+<style>
+
+    button {
+        display: flex;
+    }
+
+    a {
+        @apply px-6;
+        @apply py-3;
+        @apply rounded-full;
+        @apply transition-all;
+        @apply duration-100;
+        color: #F0F1F2;
+        font-size: 1rem;
+        border: 2px #F0F1F2 solid;
+        background: #1E1F22;
+        outline: 2px transparent solid;
+        font-weight: 600;
+
+    }
+    @keyframes border-anim {
+        0% {outline: 4px rgba(150, 174, 224, 0.25) dotted;}
+        100% {outline: 2px #96aee0 solid;}
+    }
+
+    a:hover {
+        background: #3574F0;
+        outline: 2px #96aee0 solid;
+        animation: border-anim 0.2s 1 ease-out;
+    }
+    a:active {
+        background: #3574F0;
+        outline: 2px #3574F0 solid;
+    }
+
+</style>