minor fixes - shadows on hover and pt to homepage

Nickolausen · Sep 24, 2024 · ca4635f · ca4635f
1 parent b8b0961
commit ca4635f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -31,6 +31,7 @@
   --primary-color: black;
   --secondary-color: rgb(201, 201, 201);
   --accent-color: rgb(209, 0, 0); 
+  --accent-color-opaque: rgba(209, 0, 0, .5);
   --accent-color-darker: rgb(148, 6, 6); 
 }
 
@@ -55,6 +56,14 @@ html, body {
   height: 100%;
 }
 
+progress::-moz-progress-bar {
+  background-color: var(--accent-color) !important;
+}
+
+progress::-webkit-progress-value {
+  background: red;
+}
+
 .text-primary {
   color: var(--primary-color);
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ function App() {
       <Routes>
         <Route index path='/' element={<>
             <Navbar></Navbar>
-            <div className='px-10 lg:px-[10rem] 2xl:px-[25rem]'>
+            <div className='px-10 lg:px-[10rem] 2xl:px-[25rem] md:pt-10 lg:pt-0'>
               <InitialScreen></InitialScreen>
               <Education></Education>
               <Projects></Projects>

diff --git a/src/components/GHRepoCard.tsx b/src/components/GHRepoCard.tsx
@@ -9,7 +9,7 @@ function GHRepoCard({ data }: IProps ) {
     let tooltip_id = "tooltip-" + data.name + data.language
 
     return <>
-        <article className='bg-[--bg-color] flex flex-col flex-wrap content-center justify-between shadow-xl rounded-lg hover:scale-[1.02] transition'>
+        <article className='bg-[--bg-color] flex flex-col flex-wrap content-center justify-between shadow-xl rounded-lg hover:scale-[1.02] hover:shadow-2xl transition'>
             <div className='p-6 w-full'>
                 {/* <img src={template_img}></img> */}
                 <div className='py-2 flex justify-between content-center'>

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -36,7 +36,7 @@ export default function ProjectCard( { project_info }: IProps)
     let img_id: string = project_info?.name.toLowerCase().replace(" ", "_")!!
 
     return <>
-        <div className="w-full shadow-xl flex items-center flex-col md:flex-row rounded-lg bg-red  hover:scale-[1.02] transition bg-[--bg-color]">
+        <div className="w-full shadow-xl flex items-center flex-col md:flex-row rounded-lg bg-red hover:shadow-2xl hover:scale-[1.02] transition bg-[--bg-color]">
             <div className="w-full md:w-auto md:min-w-2xl h-full flex justify-center items-center bg-white py-3 md:py-0 rounded-l-lg"> { /* Image container */}
                 <img className="max-w-64 lg:max-w-96 rounded-lg px-2" src={import.meta.env.BASE_URL + "imgs/projects/" + img_id + ".png"} alt="" />
             </div>