👋🐟 Checkpoint

./views/index.html:1954897/36904 ./public/styles.css:1954897/6976
2019-06-28 03:43:15 +00:00
parent 8c0d6f99b5
commit 05bc811531
2 changed files with 26 additions and 14 deletions
@@ -48,12 +48,17 @@ body {
  line-height: 1.5;
  font-size: 16px;
  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }

 .container {
  padding: 2rem 1rem;
  max-width: 720px;
  width: 100%;
+  margin: 0 auto;
+}
+.container.center {
  margin: auto;
 }

@@ -87,4 +92,10 @@ body {
  flex: 1;
  margin: .5em;
  min-width: 200px;
+}
+
+.warn {
+  padding: 1rem;
+  border: 1px solid red;
+  border-radius: .2em;
 }
@@ -4,7 +4,7 @@
    Hecho con amor por MindfulMinun
    https://benjic.xyz
 -->
-<html lang="es-US" dir="ltr">
+<html lang="es-US" dir="ltr" class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Tabú</title>
@@ -16,9 +16,13 @@
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i">
        <link rel="stylesheet" href="./reset.css">
        <link rel="stylesheet" href="./styles.css">
+        <script>document.documentElement.classList.remove('no-js')</script>
+        <style media="screen">
+            .no-js .no-js-hide { display: none; }
+        </style>
    </head>
    <body>
-        <div class="container">
+        <div class="container center" id="main">
            <div class="lead">
                <h1>Tabú</h1>
                <p>
@@ -26,23 +30,20 @@
                    El objetivo es hacer que estos la digan.
                </p>
            </div>
-            <p>Este juego requiere que JavaScript esté habilitado. Por favor préndalo e intente de nuevo.</p>
-        </div>
-        <div class="container" id="view-1" hidden>
-            <div class="lead">
-                <h1>Tabú</h1>
-                <p>
-                    Cada quien tendrá una palabra o frase en la frente.<br>
-                    El objetivo es hacer que estos la digan.
-                </p>
-            </div>
-            <div class="flex">
+            <noscript>
+                <p class="warn">Este juego requiere que JavaScript esté habilitado. Por favor préndalo y actualiza la página.</p>
+            </noscript>
+            <div class="flex no-js-hide">
                <button class="btn">Jugar</button>
                <button class="btn">Repasar las reglas</button>
            </div>
        </div>
        <div class="container" id="view-2" hidden>
-            
+            <h1>Reglas</h1>
+            <p>
+                Cada quien tendrá una palabra o frase en la frente.<br>
+                El objetivo es hacer que estos la digan.
+            </p>
        </div>
    </body>
 </html>