Merge branch 'main' into Footer-component-#31

Daan645 · Oct 4, 2024 · 001865b · 001865b
2 parents 5b265cb + cb33a06
commit 001865b
Show file tree

Hide file tree

Showing 9 changed files with 323 additions and 10 deletions.
diff --git a/src/app.html b/src/app.html
@@ -5,7 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
         <link rel="stylesheet" href="%sveltekit.assets%/style.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
+				%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

diff --git a/src/lib/button/Button.svelte b/src/lib/button/Button.svelte
@@ -0,0 +1,106 @@
+<script>
+  // if the button is pressed isClicked = true and the animation starts playing
+  // exporting the variables so i can use them to change the button everywhere its imported
+  export let backgroundColor = "var(--secondary-color)"; // Changes the background color
+  export let textColor = "var(--light)"; // Changes the text color
+  export let label = ""; // Changes the label text
+  export let href = "#"; // Changes the href
+  export let title = ""; // Changes the alt text
+  export let showSvg = true; // Turns the svg on or off
+  export let transparent = true; // Turns the transparency mediaquery on or off at 600px screen width 
+</script>
+
+<!-- html -->
+
+<!-- You can change the href and alt variable to change the text -->
+<a
+  {href}
+  {title}
+  style="color: {textColor}; background-color: {backgroundColor};"
+  class:transparent={transparent}
+>
+  <!-- If the variable showSvg is set to true the svg will show -->
+  {#if showSvg}
+  <svg width="100" height="100" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+  <path d="m25 2c-12.69 0-23 10.31-23 23 0 4.0791 1.1187 7.8859 2.9844 11.209l-2.9473 10.521a1.0001 1.0001 0 0 0 1.2031 1.2402l10.971-2.7188c3.2237 1.721 6.8817 2.748 10.789 2.748 12.69 0 23-10.31 23-23s-10.31-23-23-23zm0 2c11.61 0 21 9.3905 21 21s-9.3905 21-21 21c-3.722 0-7.2079-0.97036-10.238-2.666a1.0001 1.0001 0 0 0-0.72852-0.097656l-9.6074 2.3809 2.5762-9.1914a1.0001 1.0001 0 0 0-0.099609-0.7793c-1.8417-3.1229-2.9023-6.7564-2.9023-10.646 0-11.61 9.3905-21 21-21zm-8.3574 9c-0.64104 0-1.5565 0.23849-2.3086 1.0488-0.45172 0.48672-2.334 2.3207-2.334 5.5449 0 3.3615 2.3314 6.2621 2.6133 6.6348h0.001953v0.001953c-0.02674-0.03514 0.3578 0.52172 0.87109 1.1895 0.5133 0.66773 1.2311 1.5447 2.1328 2.4941 1.8035 1.8988 4.3391 4.0934 7.4863 5.4355 1.4493 0.61717 2.5927 0.98981 3.459 1.2617 1.6054 0.5041 3.0676 0.42747 4.166 0.26562 0.82216-0.12108 1.7264-0.51584 2.6211-1.082 0.89469-0.56619 1.7715-1.2702 2.1582-2.3398 0.27701-0.76683 0.41782-1.4755 0.46875-2.0586 0.02546-0.29156 0.028695-0.54888 0.009765-0.78711-0.01897-0.23823 0.0013-0.42071-0.2207-0.78516-0.46557-0.76442-0.99282-0.78437-1.543-1.0566-0.30567-0.15128-1.1759-0.57625-2.0488-0.99219-0.8719-0.41547-1.6269-0.78344-2.0918-0.94922-0.29374-0.10568-0.65243-0.25782-1.1699-0.19922-0.51749 0.0586-1.0286 0.43198-1.3262 0.87305-0.28205 0.41807-1.4175 1.7583-1.7637 2.1523-0.0046-0.0028 0.02544 0.011039-0.11133-0.056641-0.42813-0.21189-0.95173-0.39205-1.7266-0.80078-0.77483-0.40873-1.7441-1.0123-2.8047-1.9473v-0.001953c-1.5786-1.3898-2.6844-3.1346-3.0332-3.7207 0.023499-0.02796-0.002795 0.005901 0.046874-0.042969l0.001954-0.001953c0.35652-0.35115 0.67247-0.77056 0.93945-1.0781 0.37854-0.43609 0.54559-0.82052 0.72656-1.1797 0.36067-0.71583 0.15985-1.5035-0.048828-1.918v-0.001953c0.01441 0.02867-0.11288-0.25219-0.25-0.57617-0.13751-0.32491-0.31279-0.74613-0.5-1.1953-0.37442-0.89836-0.79243-1.9059-1.041-2.4961v-0.001954c-0.29285-0.69513-0.68904-1.1959-1.207-1.4375-0.51799-0.2416-0.97563-0.17291-0.99414-0.17383h-0.001954c-0.36964-0.017052-0.77527-0.021484-1.1777-0.021484zm0 2c0.38554 0 0.76564 0.004701 1.084 0.019531 0.32749 0.01632 0.30712 0.017661 0.24414-0.011719-0.06399-0.02984 0.02283-0.03953 0.20898 0.40234 0.24341 0.57785 0.66348 1.5891 1.0391 2.4902 0.18779 0.45057 0.36354 0.87342 0.50391 1.2051 0.14036 0.33165 0.21642 0.51683 0.30469 0.69336v0.001953l0.001953 0.001953c0.08654 0.17075 0.078888 0.06143 0.048828 0.12109-0.21103 0.41883-0.23966 0.52166-0.45312 0.76758-0.32502 0.37443-0.65655 0.792-0.83203 0.96484-0.15353 0.15082-0.43055 0.38578-0.60352 0.8457-0.17323 0.46062-0.09238 1.0926 0.18555 1.5645 0.37003 0.62819 1.5894 2.6129 3.4844 4.2812 1.1934 1.052 2.3052 1.7483 3.1934 2.2168 0.88817 0.46852 1.6116 0.74215 1.7734 0.82227 0.38438 0.19023 0.80448 0.33795 1.293 0.2793 0.48849-0.05865 0.90964-0.35504 1.1777-0.6582l0.001953-0.001953c0.3568-0.40451 1.417-1.6151 1.9258-2.3613 0.02156 0.0076 0.0145 0.0017 0.18359 0.0625v0.001953h0.001953c0.0772 0.02749 1.0441 0.46028 1.9062 0.87109s1.7372 0.8378 2.0215 0.97852c0.41033 0.20308 0.60422 0.33529 0.6543 0.33594 0.003384 0.087985 0.006804 0.18333-0.00586 0.32812-0.03507 0.40164-0.14243 0.95757-0.35742 1.5527-0.10532 0.29136-0.65389 0.89227-1.3457 1.3301s-1.5339 0.74704-1.8457 0.79297c-0.9376 0.13815-2.0508 0.18859-3.2734-0.19531-0.84773-0.26609-1.9048-0.61053-3.2734-1.1934-2.7758-1.1838-5.135-3.1983-6.8203-4.9727-0.84264-0.8872-1.5178-1.7131-1.998-2.3379-0.4794-0.62364-0.68874-0.94816-0.86328-1.1777l-0.001953-0.001953c-0.30983-0.40973-2.207-3.0487-2.207-5.4258 0-2.5158 1.1685-3.5023 1.8008-4.1836 0.33194-0.35766 0.69484-0.41016 0.8418-0.41016z"/>
+  </svg>
+  {/if}
+  <!-- You can change the label variable to change the text -->
+  <span>{label}</span>
+</a>
+
+<style>
+  a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    font-size: 2em;
+    font-weight: bold;
+    border: none;
+    padding: 0.5em 1.5em 0.5em 1.5em;
+    cursor: pointer;
+    transition: 0.1s ease;
+  }
+
+  a:hover {
+    scale: 0.8;
+    background-color: var(--hover);
+  }
+
+  a:hover svg {
+    transform: scale(1.5);
+  }
+ 
+  span,
+  svg {
+    background-color: transparent;
+  }
+
+  svg {
+    width: 1.5em;
+    height: auto;
+    fill: var(--light);
+    margin-right: 0.5em;
+    transition: transform 0.3s ease;
+  }
+
+  /* Media queries */
+  /* All .transparent classes will be active when the boolean transparent is set to true */
+  @media only screen and (max-width: 600px) {
+    a {
+      padding: 0.3em;
+    }
+
+    a.transparent {
+      background-color: transparent !important;
+    }
+
+    a.transparent:hover {
+      background-color: transparent;
+    }
+
+    .transparent span {
+      display: none;
+    }
+
+    .transparent svg {
+      margin: 0;
+    }
+  }
+
+  @media only screen and (max-width: 350px) {
+    a {
+      padding: 0.1;
+    }
+
+    span {
+      font-size: 0.5em;
+    }
+
+    svg {
+      width: 1em;
+      margin-right: 0.1em;
+    }
+  }
+</style>
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
@@ -0,0 +1,168 @@
+<script>
+	// logic goes here
+</script>
+<header class="header">
+        <div class="header-left">
+            <button>
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <figure>
+                <img width="93px" alt="veronica logo" src="/veronica-logo.svg">
+            </figure>
+            <nav>
+                <ol>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Ondek</a></li>
+                    <li><a href="#">Radio</a></li>
+                </ol>
+            </nav>
+        </div>
+        <div class="header-right">
+            <button class="whatsapp">
+                <figure>
+                    <img width="24px" alt="whatsapp naar ons" src="/whatsapp-white-icon.svg">
+                </figure>
+            </button>
+            <button class="search">
+                <figure>
+                    <img width="24px" alt="whatsapp naar ons" src="/whatsapp-white-icon.svg">
+                </figure>
+            </button>
+        </div>    
+</header>
+
+
+<style>
+    .header{
+        padding: 1rem 2rem;
+        background-color: var(--primary-color);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 100vw;
+        @media only screen and (min-width: 960px) {
+            justify-content: space-between;
+            padding: 1rem 2rem;
+        }
+    }
+
+    /* left box of the flex */
+    .header .header-left{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .header .header-left button{
+        padding: 0px;
+        border: none;
+    }
+
+    /* dropdown button */
+    .header .header-left button span{
+        height: 2px;
+        width: 24px;
+        background-color: var(--light);
+        position: absolute;
+    }
+
+    .header .header-left button span:nth-child(1){
+        margin-top: -10px;
+    }
+
+    .header .header-left button span:nth-child(2){
+        margin-top: -2px;
+    }
+
+    .header .header-left button span:nth-child(3){
+        margin-top: 6px;
+    }
+
+    /* navigation menu */
+    .header .header-left > button, nav{
+        display: none;
+        /* on large screen */
+        @media only screen and (min-width: 960px) {
+            display: block;
+        }
+    }
+
+    .header .header-left ol{
+        display: flex;
+        flex-direction: row;
+        gap: 2rem;
+        padding-inline-start: 0px;
+    }
+
+    .header .header-left ol li{
+        list-style-type: none;
+    }
+
+    .header .header-left ol li > a{
+        box-shadow: 0px 0px 0px 0px rgba(255,255,255,1);
+        color: var(--light);
+        font-size: 1em;
+        text-transform: uppercase;
+        text-decoration: none;
+        padding: 0.25em 0em;
+        
+    }
+
+    .header .header-left ol li > a:hover{
+        box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
+        transition: ease-in 0.2s;
+        color: var(--light);
+        font-size: 1em;
+    }
+
+
+    /* right box of the flex */
+    .header .header-right{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* mobile whatsapp button */
+    .header .header-right .whatsapp{
+        padding: 0px;
+        background-color: var(--primary-color);
+        border: none;
+        right: 1rem;
+        position: absolute;
+    }
+
+    .header .header-right figure{
+        margin: 1rem;
+        /* on large screen */
+        @media only screen and (min-width: 960px) {
+            display: none;
+        }
+    }
+
+    /* desktop search button whatsapp button */
+    .header .header-right .search{
+        display: none;
+        @media only screen and (min-width: 960px) {
+            display: block;
+            padding: 0px;
+            background-color: var(--primary-color);
+            border: none;
+        }
+    }
+
+    .header .header-right .search figure{
+        display: none;
+        /* on large screen */
+        @media only screen and (min-width: 960px) {
+            display: block;
+            margin-right: 4rem;
+        }
+    }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,10 +1,9 @@
 <script>
+    import Header from "../lib/header/Header.svelte";
     import Footer from '../lib/footer/Footer.svelte';
 </script>
-
 
-<slot />
-
-
-<Footer />  
+<Header/>
+<Footer/>  
 
+<slot></slot>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,15 +4,13 @@
 // component imports
 // import { Footer } from '$lib'
 // import testImg from '$lib/tokyo.jpeg?enhanced'
-
 </script>
 
 <style>
 
 </style>
 
 <main>
-    <!-- <enhanced:img src={testImg} alt="An alt text" /> -->
+  <h1>lose-your-head-the-client-case</h1>
 </main>
 
-<!-- <Footer /> -->
diff --git a/static/style.css b/static/style.css
@@ -19,13 +19,17 @@
   --dark: #1e1e1e;
   --light: #ffff;
   --color-footer: #011564;
+  --hover: #a11753;
+
 
   /* radius */
   --full-radius: 100%;
   --mid-radius: 20%;
 
+
   /* font */
   --font-family: "BrutalType";
+
 }
 
 /* Font import */
@@ -43,11 +47,15 @@
     font-style: normal;
 }
 
+/* Dit zijn op dit moment de fonts die we gebruiken in het ontwerp, als je meer wilt aanmaken moet je een nieuwe @font-face maken */
+
 /* Global settings */
 * {
+  font-family: var(--font-family);
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  background-color: #1e1e1e;
 }
 
 /* Default font styling */
@@ -107,6 +115,7 @@ figcaption {
 }
 
 a {
+  font-family: sans-serif;
   text-decoration: none;
   color: var(--light);
 }
@@ -127,7 +136,6 @@ article {
 /* Voorbeeld CSS media gebruik */
 
 /* .card-profile {
-    padding: .5rem;
     background-color: red;
     margin: 1rem;