From fb565303fa8ed54a5d900d771bcb5d947ffe77c7 Mon Sep 17 00:00:00 2001 From: II-Paulus-II Date: Thu, 14 Mar 2024 19:51:34 +0000 Subject: [PATCH] stashing changes to styles before changing to tabs --- index.html | 2 +- src/App.css | 7 ++++++ src/components/Projects.jsx | 3 +-- src/components/WebProjects.jsx | 3 +-- src/styles/content.css | 1 + src/styles/details.css | 2 +- src/styles/projects.css | 44 ++++++++++++++++------------------ 7 files changed, 33 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 8d74c64..9c881f4 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Paul Hughes - Full Stack Developer diff --git a/src/App.css b/src/App.css index 8e01719..7d398b1 100644 --- a/src/App.css +++ b/src/App.css @@ -10,8 +10,15 @@ html { body { height: 100vh; + max-width: 100vw; + overflow-y: scroll; +} + +a:-webkit-any-link { + color: white; } #root { height: 100%; + width: 100%; } diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx index a72499a..b17d61c 100644 --- a/src/components/Projects.jsx +++ b/src/components/Projects.jsx @@ -19,8 +19,7 @@ function Projects() {

Projects

-

Some paragraph

-
+
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx index 0d3af36..ece101f 100644 --- a/src/components/WebProjects.jsx +++ b/src/components/WebProjects.jsx @@ -6,12 +6,11 @@ import { webProjects } from "@/data/webdata.js"; function WebProjects() { return (
-

This is Web projects area title

{webProjects.map((item) => { return (
-

{item.Name}

+

{item.Name}

{item.Details}

{item.Features}

{item.Technologies}

diff --git a/src/styles/content.css b/src/styles/content.css index d47a8ef..3237dfd 100644 --- a/src/styles/content.css +++ b/src/styles/content.css @@ -2,5 +2,6 @@ display: flex; flex-direction: column; background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%); + width: 100%; min-height: 100%; } diff --git a/src/styles/details.css b/src/styles/details.css index f5c2fba..972c700 100644 --- a/src/styles/details.css +++ b/src/styles/details.css @@ -18,7 +18,6 @@ height: 5rem; display: flex; justify-content: center; - align-items: center: } .detailsTitle { @@ -37,6 +36,7 @@ } .detailsInfoLinks { + color: white; padding: 0.25rem; font-size: 1.5rem; text-decoration: none; diff --git a/src/styles/projects.css b/src/styles/projects.css index e581e6f..b712444 100644 --- a/src/styles/projects.css +++ b/src/styles/projects.css @@ -1,49 +1,47 @@ .projectsContainer { min-height: 100vh; + width: 100%; padding: 3rem; + color: white; } .subProjectsContainer { display: flex; flex-direction: column; + width: 100%; } .projectItemsContainer { display: flex; flex-direction: row; + position: relative; padding: 1rem; - gap: 1rem; margin: 1rem; - border: 4px black; - border-style: double; + max-width: 100vw; overflow-x: scroll; - scrollbar-width: auto; - scrollbar-color: blue black; -} - -.projectItemsContainer::-webkit-scrollbar { - height: 5px; -} - -.projectItemsContainer::-webkit-scrollbar-track { - background: rgba(144, 238, 144, 0.164); -} - -.projectItemsContainer::-webkit-scrollbar-thumb { - background-color: black; - outline: 1px solid blue; + position: relative; + scrollbar-color: white black; + scrollbar-width: thin; + -ms-overflow-style: none; } .projectIndividualItemContainer { display: flex; flex-direction: column; - width: 100%; + padding: 2rem; + min-width: calc(100vw - 10rem); + min-height: calc(100vh - 20rem); } .projectsTitlesContainer { - -} -.projectSelectionButtons { - + text-align: center; +} + +.projectSelectionButtonsContainer { + display: flex; + flex-direction: row; + justify-content: center; + padding: 0.5rem; + gap: 1rem; }