simulacrumparty
/
domain-hacks
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Styles

master
Dylan Baker 3 years ago
parent
944d197945
commit
4d052e1291
3 changed files with 31 additions and 3 deletions
Unified View Show Diff Stats
  1. 7
    1
      src/lib.rs
  2. 1
    0
      www/index.html
  3. 23
    2
      www/style.css

+ 7
- 1
src/lib.rs View File

94 
                                 ],
 94 
                                 ],
95 
                                 vec![text(if loading { "Loading..." } else { "Generate" })],
 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 View File

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

+ 23
- 2
www/style.css View File

14 
 .container {
 14 
 .container {
15 
   margin: auto;
 15 
   margin: auto;
16 
   max-width: 768px;
 16 
   max-width: 768px;
17 
+  padding: 20px;
17 
 }
 18 
 }
18
19
19 
 .heading {
 20 
 .heading {
41 
   opacity: 0.5;
 42 
   opacity: 0.5;
42 
 }
 43 
 }
43
44
44 
-#result {
45 
+#result:not(.empty) {
46 
+  background: #666666;
47 
+  border-radius: 10px;
45 
   font-size: 56px;
 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 
 }

Write Preview
Loading…
Cancel
Save