Merge pull request #21 from zoe-lindqvist/chore/responsive

Chore/responsive

src/GlobalStyles.js

@@ -0,0 +1,35 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyles = createGlobalStyle`
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+  overflow-x: hidden;
+  outline: 1px solid red;
+}
+
+:root {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  /* COLORS */
+  --color-primary: rgba(239, 223, 197, 1);
+  --color-secondary: rgba(58, 69, 55, 1);
+  --color-neutral: rgba(249, 244, 237, 1);
+  --color-accent: rgba(153, 71, 29, 1);
+  --color-font: rgba(51, 23, 9, 1);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+`;

src/components/About.jsx

@@ -12,7 +12,7 @@ const AboutSectionImage = styled.div`
   background-image: url(${aboutSectionImage});
   background-size: cover;
   background-position: center;
-  /* width: 100%; */
+  max-width: 100%;
   width: 24.375rem;
   height: 13.75rem;
   flex-shrink: 0;

src/components/Apply.jsx

@@ -11,9 +11,9 @@ const ApplySectionImage = styled.div`
   background-image: url(${applySectionImage});
   background-size: cover;
   background-position: center;
-  width: 100%;
-  height: 13.75rem;
+  max-width: 100%;
   width: 24.375rem;
+  /* height: 13.75rem; */
   flex-shrink: 0;
 
   display: flex;

src/components/Contact.jsx

@@ -11,7 +11,7 @@ const ContactSectionImage = styled.div`
   background-image: url(${contactSectionImage});
   background-size: cover;
   background-position: center;
-  width: 100%;
+  max-width: 100%;
   height: 13.75rem;
   width: 24.375rem;
   flex-shrink: 0;

src/components/Dogs.jsx

@@ -14,9 +14,10 @@ const ContentWrapper = styled.div`
 `;
 
 const StyledImage = styled.img`
-  width: 100%;
+  max-width: 100%;
   height: 13.75rem;
   width: 24.375rem;
+  object-fit: contain;
 `;
 
 export const Dogs = () => {

src/components/Footer.jsx

@@ -1,8 +1,6 @@
-import React from "react";
 import styled from "styled-components";
 import footerLogo from "/public/assets/logo-images/footer-logo.svg";
-
-
+import copyright from "/public/assets/social.media-images/copyright.svg";
 
 const FooterContainer = styled.footer`
   display: flex;
@@ -24,26 +22,34 @@ const FooterLogo = styled.img`
   left: 300px;
 `;
 
-// 
 const TextBox = styled.div`
-    width: 108px;
+  // width: 108px;
+  display: inline-flex;
+  height: 1.875rem;
+  padding: 0rem 1rem 0rem 0.5rem;
+  align-items: center;
   line-height: 8px;
   color: ${({ theme }) => theme.colors.primary};
   font-family: ${({ theme }) => theme.fonts.secondary};
   font-size: 7px;
   text-align: center;
-    
 `;
 
-
-
+const StyledCopyright = styled.img`
+  width: 1rem;
+  height: 1rem;
+  vertical-align: middle;
+`;
 
 export const Footer = () => {
   return (
     <FooterContainer>
       <FooterLogo src={footerLogo} alt="Footer Logo" />
       <TextBox>
-        <p>THORONDOR'S KENNEL©2024</p>
+        <p>
+          THORONDOR&apos;S KENNEL <StyledCopyright src={copyright} alt="" />
+          &nbsp;2024
+        </p>
       </TextBox>
     </FooterContainer>
   );

src/components/Header.jsx

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import kennelLogo from "/public/assets/logo-images/kennel-logo.svg";
-
+import kennelLogo from "/public/assets/logo-images/kennel-logo2.svg";
 
 // Main header container
 const HeaderContainer = styled.header`
@@ -29,14 +28,13 @@ const MenuContainer = styled.nav`
   gap: 1rem;
 `;
 
-
 // "hamburger" container
 const HamburgerIcon = styled.div`
   display: flex;
   flex-direction: column;
   padding: 23px 21px;
   width: 48.432px;
-  gap: 20px; 
+  gap: 20px;
   align-items: center;
   flex-shrink: 0;
 `;
@@ -56,11 +54,14 @@ export const Header = () => {
 
       {/* Right menu */}
       <MenuContainer>
-
         {/* "hamburger" Icon*/}
         <HamburgerIcon>
           {/* Secondary line hamburger icon */}
-          <Line xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 2" fill="none">
+          <Line
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 51 2"
+            fill="none"
+          >
             <path
               d="M1 1H49.4316"
               stroke="#EFDFC5"
@@ -71,7 +72,11 @@ export const Header = () => {
           </Line>
 
           {/* Secondary line hamburger icon */}
-          <Line xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 2" fill="none">
+          <Line
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 51 2"
+            fill="none"
+          >
             <path
               d="M1 1H49.4316"
               stroke="#EFDFC5"

src/index.css

@@ -0,0 +1,31 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Italiana&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+  overflow-x: hidden;
+}
+
+:root {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* COLORS */
+  --color-primary: rgba(239, 223, 197, 1);
+  --color-secondary: rgba(58, 69, 55, 1);
+  --color-neutral: rgba(249, 244, 237, 1);
+  --color-accent: rgba(153, 71, 29, 1);
+  --color-font: rgba(51, 23, 9, 1);
+}
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+}

src/styles/GlobalStyles.js

@@ -0,0 +1,31 @@
+import {createGlobalStyle} from 'styled-components'
+
+export const GlobalStyles = createGlobalStyle`
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+:root {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  /* COLORS */
+  --color-primary: rgba(239, 223, 197, 1);
+  --color-secondary: rgba(58, 69, 55, 1);
+  --color-neutral: rgba(249, 244, 237, 1);
+  --color-accent: rgba(153, 71, 29, 1);
+  --color-font: rgba(51, 23, 9, 1);
+}
+
+body {
+  margin: 0;
+}
+`

src/ui/Layout.jsx

@@ -11,22 +11,25 @@ export const Layout = styled.section`
   background-color: ${({ theme }) => theme.colors.primary};
   position: relative;
   width: 100%;
-  // max-width: 100vw;
+  max-width: 100vw;
   z-index: 1;
 
-&::before {
-  content: "";
-  position: absolute;
-  top: ${({$top}) => $top || "50%"};
-  left: ${({$left}) => $left || "50%"};
-  transform: translate(-50%, -50%) rotate(${({$rotation}) => $rotation || "0deg"});
-  background-image: url("/assets/logo-images/big-paw.svg");
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 20rem;
-  height: 20rem;
-  opacity: 0.5; 
-  z-index: 0;
-}
+  overflow: hidden;
 
+  &::before {
+    content: "";
+    position: absolute;
+    top: ${({ $top }) => $top || "50%"};
+    left: ${({ $left }) => $left || "50%"};
+    transform: translate(-50%, -50%)
+      rotate(${({ $rotation }) => $rotation || "0deg"});
+    background-image: url("/assets/logo-images/big-paw.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 20rem;
+    height: 20rem;
+    opacity: 0.5;
+    z-index: 0;
+    overflow: hidden;
+  }
 `;

src/utils.js

@@ -0,0 +1,5 @@
+// Function to randomly rotate paw (between -90 and 90 degrees)in background layout
+export const getRandomRotation = () => `${Math.floor(Math.random() * 181) - 90}deg`
+
+// Generate a random position for background paw (between .20% and 120%)
+export const getRandomPosition = () => `${Math.floor(Math.random() * 140) -20}%`