Merge pull request #14 from Gitmsl/development

Topbar component responsive update
Gitmsl · Nov 1, 2022 · 257fd4c · 257fd4c
2 parents 832e186 + 790a816
commit 257fd4c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 12 deletions.
diff --git a/src/resume/resume.css b/src/resume/resume.css
@@ -7,6 +7,7 @@
     padding: 10px 0;
     background-color: transparent;
 }
+
 .resumeButton {
     padding: 5px 10px;
     color: rgb(255, 255, 255);
@@ -21,4 +22,29 @@
 .resumeButton:hover {
     background-color: rgb(70, 70, 70);
     transition: background-color .5s ease-in-out;
+}
+
+@media screen and (max-width:480px) {
+
+    .resume {
+        display:inline-block;
+        width: 100%;
+        height: 50px;
+        text-align: center;
+        margin: 25px 0;
+        padding: 10px 0;
+        background-color: rgb(42, 42, 42);
+    }
+
+    .resumeButton {
+        margin-right: 8px;
+        padding: 5px 10px;
+        color: rgb(255, 255, 255);
+        font-family: 'Chakra Petch', sans-serif;
+        font-size: 16px;
+        text-decoration: none;
+        background-color: rgb(42, 42, 42);
+        border: 1px solid;
+    }
+
 }
diff --git a/src/topbar/topbar.css b/src/topbar/topbar.css
@@ -12,7 +12,6 @@
     background-color: rgb(42, 42, 42);
     display: flex;
     align-items: center;
-    text-align: center;
     font-family: 'Chakra Petch', sans-serif;
     font-size: 20px;
     box-shadow: 0px 6px 25px rgba(0, 133, 255, 0.25);
@@ -34,7 +33,7 @@
     font-size: 25px;
     text-decoration: none;
     color: white;
-    filter: blur(1.5px);
+    filter: blur(0px);
 }
 
 .topInitials:hover {
@@ -53,6 +52,7 @@
 
 .topCenter {
     flex: 6;
+    background-color: transparent;
 }
 
 .topList {
@@ -62,32 +62,35 @@
     padding: 0;
     list-style: none;
     color: white;
+    background-color: transparent;
 }
 
 .topListItem {
-    margin-right: 4vw;
-    margin-left: 1.5vw;
+    margin: 5px 4vw 0 1.5vw;
     font-size: .6em;
     font-weight: 300;
     cursor: pointer;
+    background-color: transparent;
+}
+
+li {
+    background-color: transparent;
 }
 
 .linkStyle {
     color: white;
     text-decoration: none;
 }
 
+
 @media screen and (min-width: 480px) { /* for screens b/w large smartphones & tablet*/
     .top{
     width: 100%;
-    height: auto;
-    /* background-color: rgb(141, 139, 255); Color change to make screen size apparent */
+    height: 50px;
+    opacity: .95;
     position: sticky;
-    top: 0;
     display: flex;
-    align-items: center;
     font-family: 'Chakra Petch', sans-serif;
-    font-size: 20px;
 }
 
 .topLeft {
@@ -97,6 +100,17 @@
     justify-content: center;
 }
 
+.topInitials {
+    background-color: transparent;
+    font-weight: 700;
+    font-style: italic;
+    font-size: 25px;
+    text-decoration: none;
+    color: white;
+    filter: blur(0px);
+}
+
+
 .topSocialIcon {
     font-size: 2em;
     margin-right: 18px;
@@ -106,21 +120,24 @@
 
 .topCenter {
     flex: 6;
+    background-color: transparent;
 }
 
 .topList {
     display: flex;
     justify-content: flex-end;
-    margin: 0;
-    padding: 0;
+    margin: 0 30px;
+    background-color: transparent;
     list-style: none;
 }
 
 .topListItem {
     margin-right: 20px;
     font-size: 80%;
     font-weight: 300;
-    cursor: pointer;
+    vertical-align: center;
+    cursor: default;
+    background-color: transparent;
 }
 
 .linkStyle {
@@ -149,6 +166,21 @@
     justify-content: center;
 }
 
+.topInitials {
+    background-color: transparent;
+    font-weight: 700;
+    font-style: italic;
+    font-size: 25px;
+    text-decoration: none;
+    color: white;
+    filter: blur(1.5px);
+}
+
+.topInitials:hover {
+    filter: blur(0);
+    transition: filter .5s ease-in-out;
+}
+
 .topSocialIcon {
     font-size: 2em;
     margin-right: 18px;