Dylan Baker 3 lat temu
rodzic
commit
4d052e1291
3 zmienionych plików z 31 dodań i 3 usunięć
  1. 7
    1
      src/lib.rs
  2. 1
    0
      www/index.html
  3. 23
    2
      www/style.css

+ 7
- 1
src/lib.rs Wyświetl plik

@@ -94,7 +94,13 @@ impl Component<Msg> for App {
94 94
                                 ],
95 95
                                 vec![text(if loading { "Loading..." } else { "Generate" })],
96 96
                             ),
97
-                            p(vec![id("result")], output),
97
+                            p(
98
+                                vec![
99
+                                    id("result"),
100
+                                    class(if output.is_empty() { "empty" } else { "" }),
101
+                                ],
102
+                                output,
103
+                            ),
98 104
                         ],
99 105
                     ),
100 106
                 ],

+ 1
- 0
www/index.html Wyświetl plik

@@ -3,6 +3,7 @@
3 3
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
4 4
     <title>Domain Hack Generator</title>
5 5
     <link rel="stylesheet" href="/style.css" />
6
+    <meta name="viewport" content="width=device-width" />
6 7
   </head>
7 8
   <body>
8 9
     <script type="module">

+ 23
- 2
www/style.css Wyświetl plik

@@ -14,6 +14,7 @@ body {
14 14
 .container {
15 15
   margin: auto;
16 16
   max-width: 768px;
17
+  padding: 20px;
17 18
 }
18 19
 
19 20
 .heading {
@@ -41,7 +42,27 @@ body {
41 42
   opacity: 0.5;
42 43
 }
43 44
 
44
-#result {
45
+#result:not(.empty) {
46
+  background: #666666;
47
+  border-radius: 10px;
45 48
   font-size: 56px;
46
-  padding: 2.5em;
49
+  margin-top: 2em;
50
+  padding: 1em;
51
+}
52
+
53
+@media (max-width: 768px) {
54
+  .button {
55
+    font-size: 18px;
56
+    width: 100%;
57
+  }
58
+
59
+  .heading {
60
+    padding: 1em;
61
+  }
62
+
63
+  #result:not(.empty) {
64
+    font-size: 32px;
65
+    margin-top: 1em;
66
+    padding: 0.5em;
67
+  }
47 68
 }

Ładowanie…
Anuluj
Zapisz