bugfix: revert styles

src/index.pug

@@ -90,7 +90,7 @@ html(lang="en")
         #admin(hidden).with-sidebar
           include page-admin.pug
 
-        #about(hidden).no-sidebar.with-padding
+        #about.no-sidebar.with-padding
           include page-about.pug
           
         if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))

src/styles/base/main.scss

@@ -6,6 +6,7 @@
   font-size                : 10px;
   font-family              : Open Sans, sans-serif;
   --sib-notifications-theme: var(--color-primary);
+
   body {
     background-color: var(--color-main-background);
     box-sizing      : border-box;
@@ -15,6 +16,7 @@
     height          : -webkit-fill-available;
     min-height      : -webkit-fill-available;
   }
+
   .notLoggedIn {
     visibility: hidden;
   }
@@ -25,9 +27,11 @@
 
 solid-dashboard section {
   padding: 1rem !important;
+
   @include breakpoint(lg) {
     padding: 4.2rem !important;
   }
+
   .icon {
     display: inline-block;
   }
@@ -36,6 +40,7 @@ solid-dashboard section {
 .wrapper {
   display            : grid;
   grid-template-areas: "header""content";
+
   @include breakpoint(lg) {
     grid-template-columns: 265px auto;
     grid-template-areas  : "header header""leftmenu content";
@@ -48,6 +53,7 @@ solid-dashboard section {
 
 .left-menu {
   grid-area: leftmenu;
+
   @include breakpoint(lg) {
     height    : calc(100vh - 83px);
     /* 83px = nav height */
@@ -56,12 +62,15 @@ solid-dashboard section {
     overflow-x: hidden;
     overflow-y: auto;
   }
+
   &.jsLeftMenu {
     display: none;
+
     @include breakpoint(lg) {
       display: block;
     }
   }
+
   &.jsLeftMenu[open] {
     display   : block;
     bottom    : 0;
@@ -71,6 +80,7 @@ solid-dashboard section {
     right     : 0;
     top       : 0;
     z-index   : 1000;
+
     @include breakpoint(lg) {
       display: none;
     }
@@ -79,6 +89,7 @@ solid-dashboard section {
 
 .content {
   grid-area: content;
+
   @include breakpoint(lg) {
     position  : sticky;
     top       : 0;
@@ -106,14 +117,17 @@ nav,
 nav {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
+
   &::-webkit-scrollbar-track {
     background: var(--color-scrollbar-left-background);
   }
+
   &::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-left-track);
     border-radius   : 6px;
     border          : 3px solid var(--color-scrollbar-left-background);
   }
+
   &::-webkit-scrollbar {
     width: 11px;
   }
@@ -125,14 +139,17 @@ nav {
 .views-container {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
+
   &::-webkit-scrollbar-track {
     background: var(--color-scrollbar-right-background);
   }
+
   &::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-right-track);
     border-radius   : 6px;
     border          : 3px solid var(--color-scrollbar-right-background);
   }
+
   &::-webkit-scrollbar {
     width: 11px;
   }
@@ -144,13 +161,16 @@ nav {
 .table-wrapper {
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
+
   &::-webkit-scrollbar-track {
     background-color: var(--color-scrollbar-table-background);
     border-radius   : 10px;
   }
+
   &::-webkit-scrollbar {
     height: 5px;
   }
+
   &::-webkit-scrollbar-thumb {
     background-color: var(--color-scrollbar-table-track);
     border-radius   : 10px;
@@ -200,6 +220,7 @@ h1,
   color         : var(--color-h1);
   font-size     : 2rem;
   text-transform: uppercase;
+
   &.without-margin {
     margin: 0;
   }
@@ -240,6 +261,7 @@ h5 {
   justify-content : center;
   overflow        : hidden;
   position        : relative;
+
   img {
     background-color: white;
     height          : 100%;
@@ -250,6 +272,7 @@ h5 {
     top             : 0;
     width           : 100%;
   }
+
   object {
     height: 45%;
     width : 45%;
@@ -376,6 +399,7 @@ h5 {
   flex-direction: column;
   flex-grow     : 1;
   margin        : 2rem 1rem 5rem 2rem;
+
   &.full-width {
     background: var(--color-white);
     flex      : 1;
@@ -392,40 +416,49 @@ h5 {
   border-bottom: 1px solid var(--color-content-header);
   padding      : 1.8rem 0 1.4rem;
   margin       : 0 1.6rem;
+
   @include breakpoint(lg) {
     padding: 3rem;
     margin : 0;
   }
+
   .mobile-sidebar-button {
     float      : right;
     color      : var(--color-secondary);
     font-size  : 1.8rem;
     font-weight: bold !important;
+
     &::before {
       font-size   : 2.2rem;
       font-weight : normal;
       margin-right: 1.2rem;
     }
+
     @include breakpoint(lg) {
       display: none;
     }
   }
+
   solid-display {
     @include breakpoint(sm) {
       float: left;
     }
   }
+
   /* For solid-display on project, circle, or private message view */
   solid-display {
     width: calc(100% - 94px);
+
     /* 94px = width of .mobile-sidebar-button */
     div {
       overflow     : hidden;
       text-overflow: ellipsis;
       white-space  : nowrap;
       width        : calc(100% - 20px);
+
       .h1-aside {
         font-size: 1.8rem;
+
         &:not(:empty)::before {
           color      : var(--color-grey-4);
           content    : ' - ';
@@ -433,9 +466,11 @@ h5 {
           font-weight: bold;
         }
       }
+
       .description {
         color: var(--color-grey-4);
       }
+
       .name {
         color      : var(--color-grey-4);
         font-weight: normal;
@@ -446,6 +481,7 @@ h5 {
 
 .content-box__height {
   min-height: calc(100vh - 50px - 56px);
+
   /* Heights of main header and sub-header */
   @include breakpoint(lg) {
     min-height: calc(100vh - 83px - 84px);
@@ -455,9 +491,11 @@ h5 {
 .content-box__info {
   flex-direction: column;
   padding       : 1rem;
+
   @include breakpoint(lg) {
     padding: 3.2rem;
   }
+
   * {
     box-sizing: border-box;
   }
@@ -492,6 +530,7 @@ h5 {
   flex-direction: column;
   align-items   : flex-start;
   margin-bottom : 20px;
+
   /*end */
   @include breakpoint(lg) {
     flex-direction : row;
@@ -499,17 +538,21 @@ h5 {
     justify-content: space-between;
     margin-bottom  : 5rem;
   }
+
   h3 {
     /* Quick fix for alignment on mobile before admin content rework */
     margin-bottom: 20px;
+
     /* end */
     @include breakpoint(lg) {
       margin-top: 0;
     }
   }
+
   solid-ac-checker,
   solid-link {
     width: 100%;
+
     @include breakpoint(lg) {
       width: auto;
     }
@@ -522,11 +565,13 @@ h5 {
   font-size      : 1.5rem;
   margin         : 2rem 0 0 2rem;
   text-decoration: underline;
+
   &::before {
     font-size      : 2rem;
     margin-right   : 1rem;
     text-decoration: none;
   }
+
   &.right {
     display   : block;
     text-align: right;
@@ -547,6 +592,7 @@ h5 {
 
 .desktop-button__end {
   display: block;
+
   @include breakpoint(lg) {
     display        : flex;
     justify-content: flex-end;
@@ -555,6 +601,7 @@ h5 {
 
 .space-between {
   justify-content: space-between;
+
   &.with-padding {
     padding-bottom: 1.4rem;
   }
@@ -562,6 +609,7 @@ h5 {
 
 .mobile-vertical-align {
   flex-direction: column;
+
   @include breakpoint(lg) {
     flex-direction: row;
   }
@@ -577,6 +625,7 @@ h5 {
 
 .mobile-margin__bottom {
   margin-bottom: 1rem;
+
   @include breakpoint(lg) {
     margin-bottom: 0;
   }
@@ -588,6 +637,7 @@ h5 {
 @import 'header';
 @import 'menu-left';
 @import 'user-thumb';
+
 // Button global CSS
 solid-delete,
 solid-route,
@@ -601,169 +651,217 @@ a,
   cursor    : pointer;
   display   : inline-block;
   padding   : 0;
+
   &.button {
     padding      : 0.55rem 2.5rem;
     border-radius: 100em;
+
     *,
     & {
       font-size: 1.4rem;
     }
+
     &.mobile-full-width {
       margin-bottom: 1rem;
       padding-left : 5rem;
       width        : -webkit-fill-available;
       width        : -moz-available;
+
       @include breakpoint(lg) {
         margin-bottom: 0;
         padding-left : 2.5rem;
         width        : auto;
       }
+
       &::before {
         margin-left: -2.6rem;
+
         @include breakpoint(lg) {
           margin-left: 0;
         }
       }
     }
+
     &.desktop-btn-margin__left {
       margin: 0;
+
       @include breakpoint(lg) {
         margin-left: 2.2rem;
       }
     }
+
     &.small {
+
       *,
       & {
         font-size: 1rem;
       }
     }
+
     &.text-bold {
+
       *,
       & {
         font-weight: bold;
       }
     }
+
     &.text-uppercase {
+
       *,
       & {
         text-transform: uppercase;
       }
     }
+
     &.rounded {
       border-radius: 50%;
       font-size    : 1.8rem;
       padding      : 1rem;
     }
+
     &.button-link {
       border-radius: 100em;
+
       *,
       & {
         text-decoration: underline;
       }
+
       &:hover {
         text-decoration: none;
       }
     }
+
     &.with-icon::before {
       font-size   : 1.6rem;
       margin-right: 1rem;
     }
+
     &.button-primary {
       background-color: var(--color-white);
+
       *,
       & {
         color: var(--color-primary);
       }
+
       &.bordered {
         border: 1px solid var(--color-primary);
       }
+
       &:hover {
         background-color: var(--color-primary);
+
         *,
         & {
           color: var(--color-white);
         }
       }
     }
+
     &.button-secondary {
       background-color: var(--color-white);
+
       *,
       & {
         color: var(--color-secondary);
       }
+
       &.bordered {
         border: 1px solid var(--color-secondary);
       }
+
       &:hover {
         background-color: var(--color-secondary);
+
         *,
         & {
           color: var(--color-white);
         }
       }
     }
+
     &.button-complementary {
       color           : var(--color-complementary);
       background-color: var(--color-white);
+
       &.bordered {
         border: 1px solid var(--color-complementary);
       }
+
       &:hover {
         background-color: var(--color-complementary);
         color           : var(--color-white);
       }
     }
+
     &.flex {
       display: flex;
     }
+
     &.reversed {
       &.button-primary {
         background-color: var(--color-primary);
+
         *,
         & {
           color: var(--color-white);
         }
+
         &:hover {
           background-color: var(--color-white);
           color           : var(--color-primary);
+
           *,
           & {
             color: var(--color-primary);
           }
+
           &.bordered {
             border: 1px solid var(--color-primary);
           }
         }
       }
+
       &.button-secondary {
         background-color: var(--color-secondary);
+
         *,
         & {
           color: var(--color-white);
         }
+
         &:hover {
           background-color: var(--color-white);
+
           *,
           & {
             color: var(--color-secondary);
           }
+
           &.bordered {
             border: 1px solid var(--color-secondary);
           }
         }
       }
+
       &.button-complementary {
         background-color: var(--color-complementary);
+
         *,
         & {
           color: var(--color-white);
         }
+
         &:hover {
           background-color: var(--color-white);
+
           *,
           & {
             color: var(--color-complementary);
           }
+
           &.bordered {
             border: 1px solid var(--color-complementary);
           }