Make the other infos on home screen less appealing

Flaburgan · May 12, 2024 · bedcdcd · bedcdcd
1 parent 6a155ee
commit bedcdcd
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/components/instructions.tsx b/components/instructions.tsx
@@ -33,9 +33,10 @@ export default function Instructions(props: Props) {
         <div className={styles.startButton}>
           <Button onClick={start} big={true} disabled={!selectedCategories.includes(true)}><Trans>Start game</Trans></Button>
         </div>
-        <RealCardsGame />
       </div>
 
+      <RealCardsGame />
+
       <div className={styles.about}>
         <p><Trans>Made with <img src="/images/heart.svg" title={_(msg`love`)} alt={_(msg`love`)} className={styles.heartImg} /> by <a href="https://antoine.duparay.fr" rel="noreferrer" target="_blank">Fla</a> &amp; Sara.</Trans></p>
         <p><Trans>License AGPL - Source code available <a href="https://github.com/flaburgan/disco2very" rel="noreferrer" target="_blank">on github</a>.</Trans></p>

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -46,7 +46,7 @@ a {
   font-weight: 700;
   font-style: italic;
   white-space: nowrap;
-  min-width: 140px;
+  min-width: 120px;
 
   &:hover {
     filter: brightness(1.3);

diff --git a/styles/instructions.module.scss b/styles/instructions.module.scss
@@ -22,7 +22,7 @@
     flex-direction: column;
     justify-content: center;
     text-align: center;
-    max-width: 1015px;
+    max-width: $content-max-width;
 
     .highscoreWrapper {
       margin-top: 2rem;
@@ -39,6 +39,7 @@
     flex-grow: 0;
     text-align: center;
     margin-bottom: 10px;
+    color: $text-muted;
 
     .heartImg {
       vertical-align: bottom;
@@ -51,6 +52,11 @@
 
     a {
       margin-bottom: 10px;
+      color: $text-muted;
+
+      &:hover {
+        color: $text-light;
+      }
     }
 
     .ico2logo {

diff --git a/styles/real-cards-game.module.scss b/styles/real-cards-game.module.scss
@@ -1,14 +1,17 @@
 @import "./variables";
 
 .realCardsGame {
-  padding: 2rem;
-  border: 2px solid $text-light;
+  max-width: $content-max-width;
+  padding: 1.2rem;
+  border: 2px solid $text-muted;
   border-radius: $small-border-radius;
+  color: #ddd;
   background-color: $box-background;
   text-align: left;
 
   h2 {
     margin: 0;
+    font-size: 1.3rem;
   }
 
   form {
@@ -19,6 +22,7 @@
 
     [type=email] {
       width: 250px;
+      background-color: #ddd;
     }
   }
 }
diff --git a/styles/variables.scss b/styles/variables.scss
@@ -12,6 +12,7 @@ $primary: #069;
 $small-border-radius: 5px;
 $box-border-radius: 8px;
 $button-border-radius: 20px;
+$content-max-width: 1015px;
 $card-width: 150px;
 $card-height: 200px;
 $card-margin: 20px;