funny arrow

lunauii · Oct 4, 2024 · ab55e56 · ab55e56
1 parent 7d68d5a
commit ab55e56
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 11 deletions.
diff --git a/about.html b/about.html
@@ -9,7 +9,7 @@
         <meta content="#E6E6FA" data-react-helmet="true" name="theme-color" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="../css/style.css?v=1.0">
+        <link rel="stylesheet" href="../css/style.css?v=1.1">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <meta http-equiv="Refresh" content="0; url='../503.html' " />
     </head>

diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
         <meta content="#E6E6FA" data-react-helmet="true" name="theme-color" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="css/style.css?v=1.0">
+        <link rel="stylesheet" href="css/style.css?v=1.1">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
     </head>
 
@@ -21,7 +21,7 @@
                     <br>
                     <a href="./about.html">About</a>
                     <div>
-                        <a href="./projects">Projects <i class='bx bxs-chevron-down'></i></a>
+                        <a href="./projects">Projects <i class='bx bxs-chevron-down arrow'></i></a>
 
                         <div class="sidedrop">
                             <p><a class="sidedrop-link" href="./projects/witchtrail.html">Witchtrail</a></p>

diff --git a/projects/index.html b/projects/index.html
@@ -9,7 +9,7 @@
         <meta content="#E6E6FA" data-react-helmet="true" name="theme-color" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="../css/style.css?v=1.0">
+        <link rel="stylesheet" href="../css/style.css?v=1.1">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <meta http-equiv="Refresh" content="0; url='../503.html' " />
     </head>

diff --git a/projects/pleuryte.html b/projects/pleuryte.html
@@ -9,7 +9,7 @@
         <meta content="#E6E6FA" data-react-helmet="true" name="theme-color" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="../css/style.css?v=1.0">
+        <link rel="stylesheet" href="../css/style.css?v=1.1">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <meta http-equiv="Refresh" content="0; url='../503.html' " />
     </head>

diff --git a/projects/witchtrail.html b/projects/witchtrail.html
@@ -9,7 +9,7 @@
         <meta content="#E6E6FA" data-react-helmet="true" name="theme-color" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" href="../css/style.css?v=1.0">
+        <link rel="stylesheet" href="../css/style.css?v=1.1">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
         <meta http-equiv="Refresh" content="0; url='../503.html' " />
     </head>

diff --git a/css/response.css → styles/response.css b/css/response.css → styles/response.css
diff --git a/css/style.css → styles/style.css b/css/style.css → styles/style.css
@@ -69,7 +69,7 @@ a.sidedrop-link:hover {
     background-color: #211a20;
     display: grid;
     height: 100vh;
-    grid-template-columns: 0.4fr 1fr 0.4fr;
+    grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     grid-template-areas: 
         "nav main blank"
@@ -102,22 +102,41 @@ header a {
     background: #4c3a48;
     border-radius: 15px;
     text-decoration: none;
-    height: 0;
+    max-height: 0;
     left: 0;
     opacity: 0;
-    transition: all .5s ease;
+    transition: all 0.5s ease-out;
     top: 35px;
     width: 100%;
     margin-top: 5%;
     padding: 10% 10%;
 }
 
 .navbar div:hover .sidedrop {
-    height: auto;
+    max-height: 25vh;
     opacity: 1;
     transform: translateY(0);
 }
 
+.navbar .arrow, .navbar div > a {
+    transform: rotate(0deg);
+    transition: all ease-in-out 0.1s;
+}
+
+.navbar div:hover .arrow, .navbar div:hover > a {
+    color: #fff;
+    transform: rotate(180deg);
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 .logo-div {
     display: flex;
     flex-direction: column;
@@ -128,7 +147,7 @@ header a {
 
 .logo {
     grid-area: logo;
-    max-width: 50%;
+    max-width: 60%;
     text-align: center;
 }