Merge pull request #3 from ElFrogster/design

increase bottom padding above fold
AeonDesktop · May 20, 2024 · e2a2433 · e2a2433
2 parents bddb5b9 + 2931a63
commit e2a2433
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 30 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -136,9 +136,9 @@ <h2>Get In Touch</h2>
                 Drop by one of the chat rooms to discuss the project:
                 </p>
                 <p class="button-row">
-                <a class="button secondary" href="https://t.me/openSUSE_Aeon">Telegram</a>
-                <a class="button secondary" href="https://matrix.to/#/#aeon:opensuse.org">Matrix</a>
-                <a class="button secondary" href="https://discord.gg/opensuse">Discord</a>
+                <a class="button cta" href="https://t.me/openSUSE_Aeon">Telegram</a>
+                <a class="button cta" href="https://matrix.to/#/#aeon:opensuse.org">Matrix</a>
+                <a class="button cta" href="https://discord.gg/opensuse">Discord</a>
                 </p>
             </div>
         </div>

diff --git a/docs/theme/css/main.css b/docs/theme/css/main.css
@@ -21,7 +21,7 @@ body {
 #above-the-fold {
     background-color: var(--grey-primary);
     color: var(--green-base);
-    padding: 10px;
+    padding: 10px 10px 20px 10px;
     text-align: center;
     -moz-box-shadow: inset 0 -10px 10px -10px #000000;
     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
@@ -53,7 +53,7 @@ body {
 
 .two-grid .grid-item {
     width: 40%;
-    margin: 10px;
+    margin: 15px 10px;
     background: var(--grey-primary);
     color: white;
     border-radius: 10px;
@@ -85,11 +85,15 @@ h1 {
 }
 
 h2 {
-    font-size: 2rem;
+    font-size: 2.2rem;
+    margin-top: 0px;
+    margin-bottom: 0.5em;
+    text-align: center;
+
 }
 
 section {
-    padding: 15px;
+    padding: 30px;
     -moz-box-shadow: inset 0 -10px 10px -10px #000000;
     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
     box-shadow: inset 0 -10px 10px -10px #000000;
@@ -197,9 +201,8 @@ section:nth-of-type(odd) a{
 }
 
 footer {
-    background: #f8f9fa;
-    color: #6c757d;
-    border-top: 1px solid #d4d4d4;
+    background: var(--grey-primary);
+    color: white;
     padding: 20px;
 }
 

diff --git a/output/index.html b/output/index.html
@@ -136,9 +136,9 @@ <h2>Get In Touch</h2>
                 Drop by one of the chat rooms to discuss the project:
                 </p>
                 <p class="button-row">
-                <a class="button secondary" href="https://t.me/openSUSE_Aeon">Telegram</a>
-                <a class="button secondary" href="https://matrix.to/#/#aeon:opensuse.org">Matrix</a>
-                <a class="button secondary" href="https://discord.gg/opensuse">Discord</a>
+                <a class="button cta" href="https://t.me/openSUSE_Aeon">Telegram</a>
+                <a class="button cta" href="https://matrix.to/#/#aeon:opensuse.org">Matrix</a>
+                <a class="button cta" href="https://discord.gg/opensuse">Discord</a>
                 </p>
             </div>
         </div>

diff --git a/output/theme/css/main.css b/output/theme/css/main.css
@@ -21,7 +21,7 @@ body {
 #above-the-fold {
     background-color: var(--grey-primary);
     color: var(--green-base);
-    padding: 10px;
+    padding: 10px 10px 20px 10px;
     text-align: center;
     -moz-box-shadow: inset 0 -10px 10px -10px #000000;
     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
@@ -53,7 +53,7 @@ body {
 
 .two-grid .grid-item {
     width: 40%;
-    margin: 10px;
+    margin: 15px 10px;
     background: var(--grey-primary);
     color: white;
     border-radius: 10px;
@@ -85,11 +85,15 @@ h1 {
 }
 
 h2 {
-    font-size: 2rem;
+    font-size: 2.2rem;
+    margin-top: 0px;
+    margin-bottom: 0.5em;
+    text-align: center;
+
 }
 
 section {
-    padding: 15px;
+    padding: 30px;
     -moz-box-shadow: inset 0 -10px 10px -10px #000000;
     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
     box-shadow: inset 0 -10px 10px -10px #000000;
@@ -197,9 +201,8 @@ section:nth-of-type(odd) a{
 }
 
 footer {
-    background: #f8f9fa;
-    color: #6c757d;
-    border-top: 1px solid #d4d4d4;
+    background: var(--grey-primary);
+    color: white;
     padding: 20px;
 }
 

diff --git a/themes/aeon/static/css/main.css b/themes/aeon/static/css/main.css
@@ -21,7 +21,7 @@ body {
 #above-the-fold {
     background-color: var(--grey-primary);
     color: var(--green-base);
-    padding: 10px;
+    padding: 10px 10px 20px 10px;
     text-align: center;
     -moz-box-shadow: inset 0 -10px 10px -10px #000000;
     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
@@ -53,7 +53,7 @@ body {
 
 .two-grid .grid-item {
     width: 40%;
-    margin: 10px;
+    margin: 15px 10px;
     background: var(--grey-primary);
     color: white;
     border-radius: 10px;
@@ -85,11 +85,15 @@ h1 {
 }
 
 h2 {
-    font-size: 2rem;
+    font-size: 2.2rem;
+    margin-top: 0px;
+    margin-bottom: 0.5em;
+    text-align: center;
+
 }
 
 section {
-    padding: 15px;
+    padding: 30px;
     -moz-box-shadow: inset 0 -10px 10px -10px #000000;
     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
     box-shadow: inset 0 -10px 10px -10px #000000;
@@ -197,9 +201,8 @@ section:nth-of-type(odd) a{
 }
 
 footer {
-    background: #f8f9fa;
-    color: #6c757d;
-    border-top: 1px solid #d4d4d4;
+    background: var(--grey-primary);
+    color: white;
     padding: 20px;
 }
 

diff --git a/themes/aeon/templates/index.html b/themes/aeon/templates/index.html
@@ -126,9 +126,9 @@ <h2>Get In Touch</h2>
                 Drop by one of the chat rooms to discuss the project:
                 </p>
                 <p class="button-row">
-                <a class="button secondary" href="https://t.me/openSUSE_Aeon">Telegram</a>
-                <a class="button secondary" href="https://matrix.to/#/#aeon:opensuse.org">Matrix</a>
-                <a class="button secondary" href="https://discord.gg/opensuse">Discord</a>
+                <a class="button cta" href="https://t.me/openSUSE_Aeon">Telegram</a>
+                <a class="button cta" href="https://matrix.to/#/#aeon:opensuse.org">Matrix</a>
+                <a class="button cta" href="https://discord.gg/opensuse">Discord</a>
                 </p>
             </div>
         </div>