diff options
| author | Anhgelus Morhtuuzh <anhgelus@anhgelus.world> | 2024-12-01 14:08:56 +0100 |
|---|---|---|
| committer | Anhgelus Morhtuuzh <anhgelus@anhgelus.world> | 2024-12-01 14:08:56 +0100 |
| commit | 26c50463fc8af1d05f003d29b6e290616bb8fcb6 (patch) | |
| tree | 7cc309fda0863ff063a3bb5e31b3f4bc12fe7d64 | |
| parent | 1bd65213097cfdac6b3bb0164821299d99d7e351 (diff) | |
feat(card): better style on large screen
| -rw-r--r-- | scss/main.scss | 12 | ||||
| -rw-r--r-- | scss/vars.scss | 3 | ||||
| -rw-r--r-- | 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}} |