From b12753a18f7b881e3d18355bb773852648f52ab4 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Sat, 11 Sep 2021 17:36:36 +0100
Subject: [PATCH] [Communities] Table width was wrongly set to 100%.
 Communities link is now clearer. Ribbon image wraps when space is limited.

---
 assets/css/style.css | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 344b863..6cd4f03 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -6,6 +6,7 @@
     -webkit-box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
     box-sizing: border-box !important;
+    scroll-margin: 5rem;
 }
 
 ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, textarea {
@@ -112,6 +113,12 @@ header * {
         height: 3rem !important;
         width: 3rem !important;
     }
+    .content,
+    .ribbon-wrapper,
+    .content-team {
+        top: 0 !important;
+        padding: 3rem !important;
+    }
 }
 
 @media screen and (max-height: 700px) {
@@ -159,8 +166,6 @@ header * {
 .splash {
     text-align: center;
     padding: 3rem;
-    padding-left: 0rem;
-    padding-right: 0rem;
     background-color: #F6F4F6;
 }
 .splash-head {
@@ -221,17 +226,24 @@ header * {
 }
 .ribbon {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
 }
 .ribbon img {
-    max-width: 25%;
+    min-width: 15rem;
     max-height: 200px;
-    margin-right: 2rem;
+    margin: 0 2rem 2rem 2rem;
 }
 .ribbon-content h2 {
     margin-top: unset;
 }
+.ribbon-content a {
+    background-color: #a22430;
+    color: #F6F4F6;
+    padding: 4px 12px;
+    border-radius: 0.5rem;
+}
 
 .content-team {
     z-index: 3;
@@ -262,14 +274,20 @@ header * {
 }
 
 #nodes {
+    display: flex;
+    flex-direction: column;
     border-collapse: collapse;
-    width: 100%;
     padding-bottom: 1rem;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: max-content;
+    width: 100%;
 }
 
 #nodes td, #nodes th {
+    width: 100%;
     border: 1px solid #ddd;
-    padding: 8px;
+    padding: 6px 12px;
 }
 
 #nodes tr:nth-child(even){background-color: #F6F4F6;}