More styling and content fixes to static about page

friendcamp · Dec 31, 2022 · bcfefcb · bcfefcb
1 parent 0ec450b
commit bcfefcb
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 44 deletions.
diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
@@ -1168,3 +1168,11 @@ button.icon-button.disabled i.fa-retweet {
     background: $white;
   }
 }
+
+.rules-list {
+  background-color: $cream;
+}
+
+.button.button-tertiary {
+  color: $darker-text-color;
+}
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
@@ -599,7 +599,7 @@ h1 a.brand {
     height: 104px;
     position: relative;
     left: -40px;
-    bottom: 25px;
+    bottom: 37px;
 
     img {
       height: 190px;

diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
@@ -249,8 +249,34 @@
 }
 
 .public-layout {
-  @media screen and (max-width: $no-gap-breakpoint-static) {
-    padding-top: 48px;
+  .originalheader {
+    padding: 50px 30px 30px;
+
+    .logo--icon {
+      width: 140px;
+    }
+
+    h1 {
+      margin-bottom: 20px;
+
+      a {
+        line-height: 1em;
+      }
+    }
+
+    #register {
+      margin-top: 10px;
+    }
+
+    .btn {
+      text-transform: uppercase;
+    }
+
+    .closed {
+      margin-top: 10px;
+      border-radius: 4px;
+      max-width: 400px;
+    }
   }
 
   .container {
@@ -413,6 +439,7 @@
     overflow: hidden;
     margin-bottom: 10px;
     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    height: auto;
 
     &.inactive {
       opacity: 0.5;
@@ -431,38 +458,6 @@
       padding: 3px 15px;
     }
 
-    &__image {
-      border-radius: 4px 4px 0 0;
-      overflow: hidden;
-      height: 300px;
-      position: relative;
-      background: darken($ui-base-color, 12%);
-
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
-        top: 0;
-        left: 0;
-      }
-
-      img {
-        object-fit: cover;
-        display: block;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border-radius: 4px 4px 0 0;
-      }
-
-      @media screen and (max-width: 600px) {
-        height: 200px;
-      }
-    }
-
     &--no-bar {
       margin-bottom: 0;
 

diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
@@ -9,15 +9,25 @@
   .column-0
     .public-account-header.public-account-header--no-bar
       .public-account-header__image
-        - if @instance_presenter.thumbnail.present?
-          = image_tag @instance_presenter.thumbnail&.file&.url, alt: @instance_presenter.title, class: 'parallax'
-        - else
-          %div{:class => ("originalheader")}
-            = logo_as_symbol
-            %h1
-              = link_to root_url, class: 'brand' do
-                = site_title
-
+        %div{:class => ("originalheader")}
+          %h1
+            = link_to root_url, class: 'brand' do
+              = site_title
+          .box-widget
+            %p <a href="/auth/sign_in" id="login" class="btn button button-primary">Sign in</a>
+            - if !closed_registrations?
+              %p <a href="/auth/sign_up" id="register" class="btn button button-primary">Create account</a>
+            - if closed_registrations? && @instance_presenter.closed_registrations_message.present?
+              .closed
+                .rich-formatting
+                  %h3= 'Registrations closed.'
+                  %p= @instance_presenter.closed_registrations_message.html_safe
+            - if closed_registrations? && !@instance_presenter.closed_registrations_message.present?
+              %hr
+                .closed
+                  .rich-formatting
+                    %h3= 'Registrations closed.'
+                    %p= 'This server is closed to registrations.'
   .column-1
     .landing-page__call-to-action{ dir: 'ltr' }
       .row