added styles

SSWConsulting · Dec 12, 2024 · 350c7d8 · 350c7d8
1 parent 26f055f
commit 350c7d8
Showing 1 changed file with 144 additions and 1 deletion.
diff --git a/src/style.css b/src/style.css
@@ -1426,6 +1426,26 @@ div.bad-example {
   margin: 0.15rem 0.2rem 0 0;
 }
 
+.dropdown-user-btn-container:before {
+  content: "\f007";
+  font-family: FontAwesome;
+  font-size: 1.5rem !important;
+  margin: 0rem 1rem;
+}
+
+.dropdown-user-btn-container {
+  color: #666666;
+  display: flex;
+  align-items: center;
+  margin-left: 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.dropdown-user-btn-container:hover {
+  @apply text-ssw-red !important;
+}
+
 .dropdown-signout-btn-container:before {
   content: "\f08b";
   font-family: FontAwesome;
@@ -1471,6 +1491,18 @@ div.bad-example {
   color: #333333;
 }
 
+/* Profile Page */
+.no-content-message {
+  text-align: center;
+  margin: 2rem auto;
+}
+
+.profile-header {
+  background-color: #f5f5f5;
+  padding: 3rem;
+  height: auto;
+}
+
 .profile-container-img:hover {
   opacity: 0.8;
   cursor: pointer;
@@ -1483,10 +1515,35 @@ div.bad-example {
   height: 6.25rem;
 }
 
+.profile-github-icon {
+  margin: 0.2rem 0.25rem 0 0;
+}
+
+.profile-image {
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
 @media screen and (max-width: 600px) {
   .rule-content {
     padding: 1rem;
   }
+  .profile-image {
+    visibility: hidden;
+    grid-column: 1;
+    height: 0
+  }
+  .profile-bookmark-icon {
+    display: none !important;
+  }
+  .profile-large-name {
+    grid-column: 1;
+  }
+  .profile-github-icon {
+    margin: 0.2rem 0 0 0;
+    height: 1rem;
+    width: 1.8rem;
+  }
   .github-link {
     grid-column: 1 !important;
     padding-top: 0.75rem;
@@ -1497,10 +1554,15 @@ div.bad-example {
     justify-items: center;
     justify-content: center;
   }
+  .profile-container-responsive {
+    justify-items: start;
+    justify-content: start;
+  }
   .rule-content-title {
     padding: 0 !important;
   }
 }
+
 @media screen and (max-width: 1024px) {
   .radio-button-1 {
     grid-column: unset !important;
@@ -1511,6 +1573,30 @@ div.bad-example {
   .radio-button-3 {
     grid-column: unset !important;
   }
+  .profile-large-name {
+    font-size: 1.75rem !important;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .filter-menu {
+    grid-template-columns: auto !important;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0 !important;
+    top: 2rem !important;
+  }
+  .menu-item {
+    grid-column: 1 !important;
+  }
+  .profile-header {
+    height: auto;
+  }
+}
+
+.profile-large-name {
+  font-size: 1.75rem;
+  grid-row: 1;
 }
 
 .github-link {
@@ -1529,6 +1615,15 @@ div.bad-example {
   opacity: 0.8;
 }
 
+.filter-menu {
+  top: 3rem;
+  position: relative;
+  display: grid;
+  grid-template-columns: auto; 
+  column-gap: 1rem;
+  justify-content: start;
+}
+
 .radio-button-1 {
   grid-column: 2;
 }
@@ -1539,8 +1634,33 @@ div.bad-example {
   grid-column: 4;
 }
 
+.menu-item {
+  padding: 0 0.5rem 0.5rem;
+  text-align: center;
+  position: relative;
+  display: flex;
+  margin: auto;
+  white-space: nowrap;
+}
+
+.menu-item:hover {
+  padding: 0 0.5rem 0.25rem;
+  border-bottom: 0.25rem solid #CC4141;
+  cursor: pointer;
+}
+
+.menu-item:hover .filter-menu-bookmark-icon {
+  @apply text-ssw-red; 
+}
+
+.bookmarks-item:after {
+  padding-left: 0.5rem;
+  font-family: FontAwesome;
+}
+
 .heading-container {
-  display: inline-flex;
+  display: flex;
+  justify-content: space-between;
   background: #f5f5f5;
   border-left: 2px solid #cc4141; 
   width: 100%;
@@ -1553,6 +1673,23 @@ div.bad-example {
   margin: 0.5rem 0.8rem;
 }
 
+.profile-bookmark-icon {
+  height: 2rem;
+  font-size: 1.8rem !important;
+  margin: auto auto auto 0;
+}
+
+.filter-menu-bookmark-icon, .filter-menu-bookmark-icon-pressed {
+  margin: auto;
+  margin-right: -0.5rem;
+  height: 1rem;
+  width: 1.8rem;
+}
+
+.filter-menu-bookmark-icon-pressed {
+  @apply text-ssw-red; 
+}
+
 .rule-heading-love:after {
   content: '\f004';
   font-family: FontAwesome;
@@ -1587,6 +1724,12 @@ div.bad-example {
   margin-top: 10px;
 }
 
+.no-tagged-message:before {
+  font-family: FontAwesome;
+  content: '\f00d';
+  margin-right: 0.5rem;
+}
+
 .error-text {
   @apply text-ssw-red; 
 }