about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles/components/single_column.scss
diff options
context:
space:
mode:
authorStarfall <us@starfall.systems>2022-11-10 08:50:11 -0600
committerStarfall <us@starfall.systems>2022-11-10 08:50:11 -0600
commit67d1a0476d77e2ed0ca15dd2981c54c2b90b0742 (patch)
tree152f8c13a341d76738e8e2c09b24711936e6af68 /app/javascript/flavours/glitch/styles/components/single_column.scss
parentb581e6b6d4a5ba9ed4ae17427b7f2d5d158be4e5 (diff)
parentee7e49d1b1323618e16026bc8db8ab7f9459cc2d (diff)
Merge remote-tracking branch 'glitch/main'
- Remove Helm charts
- Lots of conflicts with our removal of recommended settings and custom
  icons
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/single_column.scss')
-rw-r--r--app/javascript/flavours/glitch/styles/components/single_column.scss255
1 files changed, 158 insertions, 97 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 3843bcd68..d91306151 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -6,6 +6,26 @@
   height: calc(100% - 10px);
   overflow-y: hidden;
 
+  .hero-widget {
+    box-shadow: none;
+
+    &__text,
+    &__img,
+    &__img img {
+      border-radius: 0;
+    }
+
+    &__text {
+      padding: 15px;
+      color: $secondary-text-color;
+
+      strong {
+        font-weight: 700;
+        color: $primary-text-color;
+      }
+    }
+  }
+
   .search__input {
     line-height: 18px;
     font-size: 16px;
@@ -21,11 +41,7 @@
     flex: 0 1 48px;
   }
 
-  .flex-spacer {
-    background: transparent;
-  }
-
-  .composer {
+  .compose-form {
     flex: 1;
     overflow-y: hidden;
     display: flex;
@@ -43,10 +59,6 @@
   .autosuggest-textarea__textarea {
     overflow-y: hidden;
   }
-
-  .compose-form__upload-thumbnail {
-    height: 80px;
-  }
 }
 
 .navigation-panel {
@@ -61,6 +73,14 @@
     flex: 0 0 auto;
   }
 
+  .logo {
+    height: 30px;
+    width: auto;
+  }
+}
+
+.navigation-panel,
+.compose-panel {
   hr {
     flex: 0 0 auto;
     border: 0;
@@ -130,97 +150,71 @@
     padding-top: 0;
   }
 
-  @media screen and (min-width: 630px) {
-    .detailed-status {
-      padding: 15px;
+  .detailed-status {
+    padding: 15px;
 
-      .media-gallery,
-      .video-player,
-      .audio-player {
-        margin-top: 15px;
-      }
+    .media-gallery,
+    .video-player,
+    .audio-player {
+      margin-top: 15px;
     }
+  }
 
-    .account__header__bar {
-      padding: 5px 10px;
-    }
+  .account__header__bar {
+    padding: 5px 10px;
+  }
 
-    .navigation-bar,
-    .compose-form {
-      padding: 15px;
-    }
+  .navigation-bar,
+  .compose-form {
+    padding: 15px;
+  }
 
-    .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-      padding-top: 15px;
-    }
+  .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
+    padding-top: 15px;
+  }
 
-    .notification__report {
-      padding: 15px 15px 15px (48px + 15px * 2);
-      min-height: 48px + 2px;
+  .notification__report {
+    padding: 15px 15px 15px (48px + 15px * 2);
+    min-height: 48px + 2px;
 
-      &__avatar {
-        left: 15px;
-        top: 17px;
-      }
+    &__avatar {
+      left: 15px;
+      top: 17px;
     }
+  }
 
-    .status {
-      padding: 15px;
-      min-height: 48px + 2px;
+  .status {
+    padding: 15px;
+    min-height: 48px + 2px;
 
-      .media-gallery,
-      &__action-bar,
-      .video-player,
-      .audio-player {
-        margin-top: 10px;
-      }
+    .media-gallery,
+    &__action-bar,
+    .video-player,
+    .audio-player {
+      margin-top: 10px;
     }
+  }
 
-    .account {
-      padding: 15px 10px;
+  .account {
+    padding: 15px 10px;
 
-      &__header__bio {
-        margin: 0 -10px;
-      }
+    &__header__bio {
+      margin: 0 -10px;
     }
+  }
 
-    .notification {
-      &__message {
-        padding-top: 15px;
-      }
-
-      .status {
-        padding-top: 8px;
-      }
+  .notification {
+    &__message {
+      padding-top: 15px;
+    }
 
-      .account {
-        padding-top: 8px;
-      }
+    .status {
+      padding-top: 8px;
     }
-  }
-}
 
-.floating-action-button {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 3.9375rem;
-  height: 3.9375rem;
-  bottom: 1.3125rem;
-  right: 1.3125rem;
-  background: darken($ui-highlight-color, 2%);
-  color: $white;
-  border-radius: 50%;
-  font-size: 21px;
-  line-height: 21px;
-  text-decoration: none;
-  box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: $ui-highlight-color;
+    .account {
+      padding-top: 8px;
+    }
   }
 }
 
@@ -237,37 +231,104 @@
   .search {
     margin-bottom: 10px;
   }
-}
 
-@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
-  .columns-area__panels__pane--compositional {
+  .tabs-bar__link.optional {
     display: none;
   }
 
-  .with-fab .scrollable .item-list:last-child {
-    padding-bottom: 5.25rem;
+  .search-page .search {
+    display: none;
   }
-}
 
-@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
-  .floating-action-button,
-  .tabs-bar__link.optional {
+  .navigation-panel__legal {
     display: none;
   }
+}
 
-  .search-page .search {
-    display: none;
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
+  $sidebar-width: 285px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
+  .columns-area__panels {
+    min-height: calc(100vh - $ui-header-height);
+  }
+
+  .columns-area__panels__pane--navigational {
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .navigation-panel {
+      margin: 0;
+      background: $ui-base-color;
+      border-left: 1px solid lighten($ui-base-color, 8%);
+      height: 100vh;
+    }
+
+    .navigation-panel__sign-in-banner,
+    .navigation-panel__logo,
+    .getting-started__trends {
+      display: none;
+    }
+
+    .column-link__icon {
+      font-size: 18px;
+    }
+  }
+
+  .ui__header {
+    display: flex;
+    background: $ui-base-color;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
+  .column-header,
+  .column-back-button,
+  .scrollable,
+  .error-column {
+    border-radius: 0 !important;
   }
 }
 
-@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
+@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
+  $sidebar-width: 55px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
   .columns-area__panels__pane--navigational {
-    display: none;
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .column-link span {
+      display: none;
+    }
+
+    .list-panel {
+      display: none;
+    }
   }
 }
 
-@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
-  .tabs-bar {
+.explore__search-header {
+  display: none;
+}
+
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
+  .columns-area__panels__pane--compositional {
     display: none;
   }
+
+  .explore__search-header {
+    display: flex;
+  }
 }