From 26c50463fc8af1d05f003d29b6e290616bb8fcb6 Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <anhgelus@anhgelus.world>
Date: Sun, 1 Dec 2024 14:08:56 +0100
Subject: [PATCH] feat(card): better style on large screen

---
 scss/main.scss              | 12 +++++++++++-
 scss/vars.scss              |  3 ++-
 templates/page/legal.gohtml |  4 ++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/scss/main.scss b/scss/main.scss
index 04d452e..b416b46 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -74,6 +74,7 @@ main {
   max-height: 75vh;
   overflow: auto;
   scrollbar-width: thin;
+  max-width: 800px;
   & h1, h2, h3 {
     margin: 0;
   }
@@ -135,7 +136,11 @@ h4 {
   align-items: center;
   gap: 2rem;
   margin-bottom: 2rem;
+  margin-left: calc(33% - 135px);
   color: var(--text-color);
+  @media only screen and (max-width: vars.$bp-large) {
+    margin-left: 0; 
+  }
   @media only screen and (max-width: vars.$bp-little) {
     flex-direction: column;
   }
@@ -145,9 +150,12 @@ h4 {
     //width: 100%;
     margin-right: 1rem;
     flex-direction: column;
-    align-items: center;
+    align-items: left;
     justify-content: center;
     gap: 0.5rem;
+    @media only screen and (max-width: vars.$bp-large) {
+      align-items: center;
+    }
     @media only screen and (max-width: vars.$bp-little) {
       margin-right: 0;
       text-align: center;
@@ -225,4 +233,6 @@ h4 {
 
 .credits-legal {
   width: 70%;
+  padding: 0 2rem 1rem 2rem;
+  border-radius: 32px;
 }
diff --git a/scss/vars.scss b/scss/vars.scss
index 22ff974..146dbbb 100644
--- a/scss/vars.scss
+++ b/scss/vars.scss
@@ -1,2 +1,3 @@
+$bp-large: 1350px;
 $bp-mid: 1000px;
-$bp-little: 650px;
\ No newline at end of file
+$bp-little: 650px;
diff --git a/templates/page/legal.gohtml b/templates/page/legal.gohtml
index 6452f5f..0e37f49 100644
--- a/templates/page/legal.gohtml
+++ b/templates/page/legal.gohtml
@@ -1,5 +1,5 @@
 {{define "body"}}
-    <div class="credits-legal">
+    <div class="credits-legal" style="{{ .GetBackground }}">
         <h2>Legal information</h2>
         <p>
             Other legal information are available <a href="{{ .Legal.LegalInformationLink }}" target="_blank">here</a>.
@@ -16,4 +16,4 @@
         <h3>Font credits</h3>
         <p>{{ .Legal.FontSource }}</p>
     </div>
-{{end}}
\ No newline at end of file
+{{end}}