refactor(communities, theme): Theme tweaks for communities ui.

Author: monotasker

assets/less/site/collections/table.overrides

@@ -1,7 +1,7 @@
 
 .ui.table {
     thead th {
-        background-color: @seafoam50;
+        background-color: transparent;  // @seafoam50;
         color: @ivy80;
         line-height: 1.15rem;
     }
@@ -19,12 +19,12 @@
         // }
         tr {
             td:first-child:not(.ignored) {
-            background-color: @seafoam50;
+            background-color: transparent; // @seafoam50;
             color: @ivy80;
             font-weight: normal;
             }
             td:nth-child(2) {
-                border-color: @borderColor;
+                border-color: transparent; // @borderColor;
             }
         }
     }
@@ -47,4 +47,4 @@
             }
         }
     }
-}
+}

assets/less/site/elements/image.overrides

@@ -29,8 +29,27 @@
     }
   }
 }
-.community-header .ui.image.community-image {
+.community-header .ui.image.community-image.community-header-logo {
   margin-top: 1rem;
+  width: 100%;
+  max-width: 100%;
+
+  @media (max-width: @largestMobileScreen) {
+    width: 5rem;
+    max-width: 5rem;
+  }
+
+  img {
+    width: 100%;
+    max-width: none;
+    max-height: none;
+  }
+}
+// also used elsewhere
+img.community-header-logo { 
+  border-radius: @defaultBorderRadius;
+  box-shadow: 0 0 0.5rem rgb(0 0 0 / 5%);
+  border: 1px solid @sidebarBorderColor;
 }
 .communities-frontpage {
   .ui.icon.message > .icon:not(.close) {
@@ -52,11 +71,6 @@
   box-shadow: 0 0 0.5rem rgb(0 0 0 / 5%);
   border: 1px solid @sidebarBorderColor;
 }
-img.community-header-logo {
-  border-radius: @defaultBorderRadius;
-  box-shadow: 0 0 0.5rem rgb(0 0 0 / 5%);
-  border: 1px solid @sidebarBorderColor;
-}
 
 #communities-carousel .carousel .ui.items .item img {
   object-fit: cover;

assets/less/site/globals/site.overrides

@@ -97,6 +97,33 @@ a {
 
 // basic page structure
 
+@supports (view-transition-name: none) {
+  @view-transition {
+    navigation: auto;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    #community-detail-header {
+      view-transition-name: community-detail-header;
+      contain: layout;
+    }
+    main,
+    .community-detail-content,
+    .rel-mt-2.ui.container {
+      view-transition-name: community-detail-content;
+    }
+    ::view-transition-old(community-detail-content),
+    ::view-transition-new(community-detail-content) {
+      animation-duration: 180ms;
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-old(community-detail-header),
+    ::view-transition-new(community-detail-header) {
+      animation-duration: 180ms;
+      animation-timing-function: ease-out;
+    }
+  }
+}
+
 #main {
   flex-grow: 1;
   display: flex;

assets/less/site/globals/site.variables

@@ -31,11 +31,11 @@
       Breakpoints
 --------------------*/
 
-@mobileBreakpoint: 320px;
-@tabletBreakpoint: 768px;
-@computerBreakpoint: 992px;
-@largeMonitorBreakpoint: 1200px;
-@widescreenMonitorBreakpoint: 1920px;
+// @mobileBreakpoint: 320px;
+// @tabletBreakpoint: 768px;
+// @computerBreakpoint: 992px;
+// @largeMonitorBreakpoint: 1200px;
+// @widescreenMonitorBreakpoint: 1920px;
 
 /*-------------------
       Spacing
@@ -295,4 +295,4 @@
   Separators
 ------------------*/
 @listSeparator: ";";
-@listCommaSeparator: ",";
+@listCommaSeparator: ",";