Update the layout

block-core · Sep 7, 2024 · 32bc16a · 32bc16a
1 parent 9564e46
commit 32bc16a
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 12 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -0,0 +1,32 @@
+   .notifications-link-text{
+    display: flex;
+    align-items: center;
+  }
+  .notifications-link-text span{
+    margin-left: 10px;
+  }
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+
+  #main-grid {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    min-height: 100vh;
+  }
+
+  #content-body , #sidebar , #nav{
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+  #footer{
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  #footer-wrapper {
+    grid-row: 3;
+    width: 100%;
+  }
+
+
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -88,8 +88,8 @@
                     <span>Bookmarks</span>
                   </div>
                 </a>
-                <a class="menu-link" routerLink="/notifications">
-                  <div class="menu-link-text">
+                <a class="notifications-link" routerLink="/notifications">
+                  <div class="notifications-link-text">
                     <svg height="20" width="20" viewBox="0 0 24 24" fill="none">
                       <path fill-rule="evenodd" clip-rule="evenodd"
                         d="M8.35179 20.2418C9.19288 21.311 10.5142 22 12 22C13.4858 22 14.8071 21.311 15.6482 20.2418C13.2264 20.57 10.7736 20.57 8.35179 20.2418Z">

diff --git a/src/app/components/explore/explore.component.css b/src/app/components/explore/explore.component.css
@@ -26,8 +26,8 @@
 }
 
 .project-thumbnail img {
-  width: 70px;
-  height: 70px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   margin-right: 15px;
 }

diff --git a/src/assets/styles/theme.css b/src/assets/styles/theme.css
@@ -348,7 +348,7 @@ body {
 }
 #main-grid {
   display: grid;
-  max-width: 1200px;
+  max-width: 1220px;
   min-height: 100vh;
   grid-template-rows: auto 1fr auto;
   margin: auto;
@@ -385,10 +385,11 @@ body {
 }
 @media screen and (max-width: 767px) {
   #main-grid {
-    column-gap: 0;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+   column-gap: 0;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
   }
+
   #main-grid #sidebar-wrapper {
     grid-row: 3;
     grid-column-start: 1;
@@ -408,6 +409,9 @@ body {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
   }
+  #sidebar {
+     height: 100%;
+  }
   #main-grid #sidebar-wrapper {
     grid-row: 3;
     grid-column-start: 1;
@@ -1724,6 +1728,7 @@ a.section-title:active {
     text-align: left;
     padding-right: 20px;
   }
+
 }
 @media screen and (min-width: 1024px) {
   #section-nav-older {
@@ -1732,6 +1737,11 @@ a.section-title:active {
     padding-left: 20px;
   }
 }
+@media screen and (min-width: 1024px) {
+  #sidebar {
+    width: 100% !important;
+   }
+}
 .section-nav-caption {
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -2719,8 +2729,7 @@ input[type="range"] {
   transition: background 0.15s ease-out;
 }
 #sidebar {
-  width: 100% !important;
-  height: 100%;
+   height: 100%;
 }
 #sidebar .sticky {
   position: sticky;

diff --git a/src/styles.css b/src/styles.css
@@ -133,12 +133,12 @@ body.dialog-open {
   overflow: hidden;
 }
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 3px;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(87, 87, 87, 0.5);
+  background-color: rgba(55, 55, 55, 0.5);
   border-radius: 5px;
 }