Merge pull request #1 from LarsFlem/Iphone-fix

Iphone fix

src/components/Header.css

@@ -5,13 +5,13 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: linear-gradient(135deg, #dad9d9, #bfbebe);
+  background: linear-gradient(135deg, var(--light-gray), #bfbebe);
   padding: 0 2.5%; /* Adjust padding to be proportional */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
   z-index: 1000;
   height: 5vh; /* Header takes up 5% of the viewport height */
   overflow: hidden;
+  box-sizing: border-box;
 }
 
 /* Logo container to hold both the image and the text */
@@ -30,9 +30,9 @@ header {
 /* Logo text styling */
 .logo-text {
   font-size: 2.5vh; /* Scale text size to fit better within header */
-  font-family: "Space Grotesk", sans-serif; /* Ensure font family is consistent */
+  font-family: var(--font-family-s); /* Ensure font family is consistent */
   font-weight: bold;
-  color: #333;
+  color: var(--primary-color);
   text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
 }
 
@@ -44,11 +44,11 @@ nav ul {
 }
 
 nav a {
-  font-family: "Space Grotesk", sans-serif;
+  font-family: var(--font-family-s);
   font-weight: 400;
   font-size: 2.5vh; /* Scale link font size */
   text-decoration: none;
-  color: #333;
+  color: var(--primary-color);
   position: relative;
   transition: color 0.3s ease-in-out;
   white-space: nowrap;
@@ -66,7 +66,7 @@ nav a::after {
   height: 2px;
   bottom: -5px;
   left: 0;
-  background-color: #333;
+  background-color: var(--primary-color);
   transition: width 0.3s ease-in-out;
 }
 
@@ -77,16 +77,10 @@ nav a:hover::after {
 /* Responsive styles */
 @media (max-width: 768px) {
   header {
-    flex-direction: row; /* Keep the header items in a row */
-    align-items: center;
     padding: 0 5%; /* Adjust padding for smaller screens */
     height: 5vh; /* Maintain height of 5% on mobile */
   }
 
-  .logo-text {
-    font-size: 2.5vh; /* Adjust size for smaller screens */
-  }
-
   nav ul {
     flex-direction: row; /* Keep navigation in a row */
     gap: 15px; /* Reduce gap for smaller screens */

src/components/PDF.css

@@ -1,9 +1,9 @@
 /* PDF Viewer Container */
 .pdf-viewer-container {
   width: 100%;
-  max-width: 800px; /* Max width for large screens */
+  max-width: 70%; /* Max width for large screens */
   margin: 0 auto; /* Center the PDF viewer */
-  padding: 20px;
+  padding: 1rem;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
   border-radius: 8px;
   background-color: #f9f9f9; /* Light background */
@@ -22,16 +22,8 @@
 .pdf-viewer-container object,
 .pdf-viewer-container iframe {
   width: 100%;
-  height: 2300px;
   border: none; /* Remove default borders */
   border-radius: 8px;
-  overflow: hidden;
-}
-
-/* Responsive styles for smaller screens */
-@media (max-width: 768px) {
-  .pdf-viewer-container object,
-  .pdf-viewer-container iframe {
-    height: 500px;
-  }
+  overflow: hidden; /* Ensure no scrolling */
+  height: 100vh; /* Placeholder for full height adjustment */
 }

src/components/PDF.tsx

@@ -1,15 +1,25 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import "./PDF.css";
 
 // Import the PDF file
 import CV_PDF from "./_PDF/Lars_Flem_CV_english.pdf";
 
 // Define the PdfViewer component
 const PdfViewer: React.FC = () => {
+  const pdfRef = useRef<HTMLObjectElement>(null);
+
+  useEffect(() => {
+    if (pdfRef.current) {
+      // Calculate the height dynamically based on the window height
+      const windowHeight = window.innerHeight;
+      pdfRef.current.style.height = `${windowHeight - 150}px`; // Subtract header/footer or any margin as needed
+    }
+  }, []);
+
   return (
     <div className="pdf-viewer-container">
       <h2>CV</h2>
-      <object data={CV_PDF} type="application/pdf" width="100%" height="750px">
+      <object ref={pdfRef} data={CV_PDF} type="application/pdf" width="100%">
         <p>
           PDF cannot be displayed. <a href={CV_PDF}>Download the PDF</a>.
         </p>

src/components/Services.css

@@ -1,19 +1,28 @@
 #services {
-  padding: 20px; /* Adds padding around the section */
-  max-width: 1400px; /* Set a maximum width for the services section */
-  margin: 0 auto; /* Center the services section */
+  padding: 2rem; /* Default padding around the section */
 }
 
 .service-grid {
   display: grid; /* Use grid for a responsive layout */
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(450px, 1fr)
-  ); /* Adjusts columns based on screen size */
-  gap: 20px; /* Adds space between grid items */
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem; /* Adds space between grid items */
   margin: 0 auto; /* Center the grid within the services section */
 }
 
+/* Media query for medium screens */
+@media (max-width: 1200px) {
+  .service-grid {
+    grid-template-columns: repeat(2, 1fr); /* 2 cards on smaller screens */
+  }
+}
+
+/* Media query for small screens (like small phones) */
+@media (max-width: 900px) {
+  .service-grid {
+    grid-template-columns: 1fr; /* 1 card on very small screens */
+  }
+}
+
 .service-card {
   background-color: white; /* Sets background color to white */
   border: 1px solid #ddd; /* Adds border for better separation */
@@ -23,12 +32,24 @@
 }
 
 .service-card img {
-  width: 99.5%; /* Makes image responsive */
+  width: 100%; /* Makes image responsive */
   height: auto; /* Keeps aspect ratio */
-  border: 1px solid #000000; /* Adds border around the image */
   border-radius: 8px; /* Optional: Rounds the corners of the image border */
 }
 
 .service-card-content {
   padding: 20px; /* Adds padding inside the card */
 }
+
+/* Media query for adjusting card content padding */
+@media (max-width: 768px) {
+  .service-card-content {
+    padding: 15px; /* Adjusted padding for card content on smaller screens */
+  }
+}
+
+@media (max-width: 480px) {
+  .service-card-content {
+    padding: 10px; /* Further reduced padding for card content on very small screens */
+  }
+}

src/styles.css

@@ -1,108 +1,47 @@
 /* Global styles */
+:root {
+  --primary-color: #333;
+  --secondary-color: #d9dada;
+  --light-gray: #dad9d9;
+  --font-family-r: "Raleway", Arial, Helvetica, sans-serif;
+  --font-family-s: "Space Grotesk", sans-serif;
+}
+
 body {
-  background-color: #dad9d9;
+  background-color: var(--secondary-color);
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  font-family: "Raleway", Arial, Helvetica, sans-serif; /* Use Raleway as the default font */
+  font-family: var(--font-family-r);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #333;
+  color: var(--primary-color);
 }
 
-/* Enable smooth scrolling */
 html {
   scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
 }
 
-/* Unique class for Raleway font with specific weights */
-.raleway-title {
-  font-family: "Raleway", sans-serif; /* Use Raleway font */
-  font-weight: 700; /* Bold weight */
-  font-optical-sizing: auto; /* Enables optical sizing if supported */
-  font-style: normal; /* Normal font style */
-}
-
-.raleway-body {
-  font-family: "Raleway", sans-serif; /* Use Raleway font */
-  font-weight: 400; /* Normal weight */
-  font-optical-sizing: auto; /* Enables optical sizing if supported */
-  font-style: normal; /* Normal font style */
-}
-
 /* Backdrop styling */
 .circuitry-backdrop {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("./components/_Pictures/Backdrop.jpg"); /* Updated path */
+  width: 100vw; /* Set width to 100% of the viewport width */
+  height: 100vh; /* Set height to 100% of the viewport height */
+  background-image: url("./components/_Pictures/Backdrop.jpg");
   background-size: cover; /* Cover the entire area */
   background-repeat: no-repeat; /* Prevent image repetition */
-  opacity: 0.1; /* Set transparency level (adjust as needed) */
+  background-position: center; /* Center the image */
+  opacity: 0.15; /* Set transparency level (adjust as needed) */
   pointer-events: none; /* Allow clicks to go through the backdrop */
   z-index: -1; /* Position behind other content */
 }
 
-
-/* Header styles */
-header {
-  position: fixed; /* Keeps the header fixed at the top */
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: #dad9d9;
-  padding: 15px 50px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  height: 80px; /* Set a fixed height for the header */
-  box-sizing: border-box;
-}
-
-/* Logo styling */
-.logo {
-  font-size: 48px;
-  font-family: "Space Grotesk", sans-serif; /* Use Space Grotesk font for the logo */
-  font-weight: bold;
-  color: #333;
-}
-
-/* Navigation styles */
-nav ul {
-  list-style: none;
-  display: flex;
-  gap: 30px;
-}
-
-nav a {
-  text-decoration: none;
-  color: #333;
-  font-family: "Space Grotesk", sans-serif;
-  font-weight: 400;
-}
-
-nav a:hover {
-  color: #000;
-}
-
 /* Main content area styles using Grid */
 .main-content {
-  padding-top: 70px; /* Padding to avoid content being hidden by the fixed header */
   display: grid;
   grid-template-columns: 1fr; /* Single column layout */
-  gap: 20px; /* Space between components */
-  margin-bottom: 40px;
-}
-
-/* Other existing styles remain unchanged */
-.service-section {
-  background-color: #ffffff;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  text-align: center;
+  margin: 0 auto; /* Center the services section */
+  max-width: 80%; /* Set max width to 90% of the container */
 }