put .subtitle divs into controls-row div in html

minor style edits
RDjarbeng · Dec 25, 2021 · dcf994f · dcf994f
1 parent 513cdd0
commit dcf994f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -22,8 +22,10 @@
                     (hr: min: sec)
                 </div>
             </div>
-            <div class="subtitle" onclick="restartTime()">Midnight approaches</div>
-            <div class="subtitle2" onclick="stopClock()">The end... You cannot stop me</div>
+            <div class="controls-row">
+                <div class="subtitle" onclick="restartTime()">Midnight approaches</div>
+                <div class="subtitle" onclick="stopClock()">The end... You cannot stop me</div>
+            </div>
         </div>
     </main>
 </body>

diff --git a/styles.css b/styles.css
@@ -18,23 +18,24 @@
   --color-primary: hsl(230deg, 100%, 67%);
   --color-text: hsl(0deg, 0%, 100%);
 }
+
 body {
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='600' height='240' preserveAspectRatio='none' viewBox='0 0 600 240'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1062%26quot%3b)' fill='none'%3e%3cpath d='M13.4 60C13.4 50.02 2.41 51.97 0 41.19C-4.29 21.97 -12.21 8.38 0 0C17.79 -12.21 30 0 60 0C90 0 90 0 120 0C150 0 150 0 180 0C210 0 210 0 240 0C261.11 0 263.12 -5.18 282.22 0C293.12 2.96 290.75 16.27 300 16.27C310.3 16.27 309.04 3.33 321.33 0C339.04 -4.8 340.66 0 360 0C390 0 390 0 420 0C440.52 0 444.01 -7.05 461.05 0C474.01 5.36 471.61 24.83 480 24.83C487.51 24.83 481.69 4.62 492.86 0C511.69 -7.79 516.43 0 540 0C560.31 0 566.39 -9.64 580.62 0C596.39 10.69 593.22 19.67 600 40.65C602.91 49.67 600 50.33 600 60C600 90 600 90 600 120C600 146.67 601.39 146.98 600 173.33C599.81 176.98 596.84 176.97 596.84 180C596.84 181.76 599.89 180.8 600 182.9C601.47 210.8 614.63 226.08 600 240C584.63 254.63 570 240 540 240C511.45 240 495.41 254.6 482.9 240C469.7 224.6 485.07 209.92 488.57 180C492.09 149.92 499.55 148.94 496.94 120C495.26 101.38 493.32 84.88 480 84.88C458.19 84.88 451.92 101.01 426.67 120C421.92 123.57 422.5 124.55 420 130C408.7 154.55 413.54 157.55 399.07 180C383.54 204.09 378.87 201 360 223.08C353.23 231 356.9 237.43 347.78 240C326.9 245.89 323.89 240 300 240C270 240 270 240 240 240C218.42 240 217.34 243.69 196.84 240C187.34 238.29 187.09 236.17 180 229.21C156.55 206.17 156.15 205.87 135.76 180C126.15 167.81 128.31 153.1 120 153.1C111.36 153.1 103.73 164.83 101.86 180C98.38 208.28 120.82 223.47 109.29 240C99.89 253.47 84.65 240 60 240C30 240 15 255 0 240C-15 225 0 210 0 180C0 150 0 150 0 120C0 104 -3.4 103.23 0 88C3.3 73.23 13.4 73.42 13.4 60' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M120 49.09C118.98 49.09 118.4 54.66 118.4 60C118.4 61.88 119.03 63.53 120 63.53C121.08 63.53 122.5 62.01 122.5 60C122.5 54.79 121.03 49.09 120 49.09' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M540 43.28C524.62 43.28 510 52.37 510 60C510 67.27 524.75 73.08 540 73.08C558.64 73.08 577.78 67.33 577.78 60C577.78 52.43 558.51 43.28 540 43.28' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M29.36 60C28.54 37.9 10.7 40.68 0 18.81C-3.98 10.68 -7.16 2.24 0 0C22.84 -7.16 30 0 60 0C81.11 0 94.3 -12.38 102.22 0C113.5 17.62 93.65 31.22 98.4 60C102.54 85.04 108.23 84.38 120 107.65C123.41 114.38 128.75 114.4 128.75 120C128.75 124.2 123.36 122.7 120 127.24C101.19 152.7 99.64 152.22 84.42 180C69.64 206.98 80.9 227.48 60 236.76C38.69 246.23 18.81 235.29 0 217.5C-11.19 206.91 0 198.75 0 180C0 150.73 -1.75 149.53 0 121.46C0.12 119.53 2.9 121.79 3.75 120C17.58 91.06 30.42 88.5 29.36 60' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M153.75 60C138.94 33.71 127.13 17.45 134.77 0C140.26 -12.55 157.38 0 180 0C210 0 210 0 240 0C247.22 0 254.44 -3.75 254.44 0C254.44 6.52 247.74 10.66 240 20.53C224.21 40.66 225.4 42.06 207.39 60C195.4 71.95 193.59 80.32 180 80.32C166.77 80.32 161.56 73.87 153.75 60' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M274.88 60C274.88 49.94 287.58 51.03 300 41.69C327.47 21.03 326.83 19.35 354.67 0C356.83 -1.5 357.34 0 360 0C390 0 390 0 420 0C420.79 0 421.58 -0.51 421.58 0C421.58 1.25 420.68 1.72 420 3.53C409.45 31.72 403.78 30.84 399.13 60C394.49 89.08 409.44 92.43 401.41 120C391.97 152.43 383.21 150.31 364.19 180C362.51 182.62 362.11 184.62 360 184.62C357.87 184.62 357.34 182.69 355.71 180C337.74 150.38 338.3 149.98 320.8 120C310.44 102.25 312.38 100.73 300 84.55C289.42 70.73 274.88 71.37 274.88 60' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M540 18.69C530.17 18.69 519.64 5.38 519.64 0C519.64 -3.96 529.82 0 540 0C548.77 0 557.54 -3.8 557.54 0C557.54 5.55 549.12 18.69 540 18.69' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M514.59 120C519.91 103.12 524.59 92.31 540 92.31C566.49 92.31 590.84 98.33 598.38 120C606.1 142.18 570.03 152.87 570.53 180C570.84 196.42 591.91 190.63 600 207.1C606.65 220.63 610.62 234.17 600 240C580.62 250.62 570 240 540 240C523.55 240 511.98 250.6 507.1 240C498.17 220.6 510.5 210.05 512.38 180C514.25 150.05 506.1 146.97 514.59 120' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M150.91 180C150.91 163.82 161.29 153.74 180 147.64C205.84 139.22 213.2 141.57 240 150.95C259.43 157.75 258.41 163.58 272.47 180C288.41 198.63 284.74 201.79 300 221.05C308.51 231.79 320 234.51 320 240C320 243.99 310 240 300 240C270 240 270 240 240 240C231.58 240 230.58 243.42 223.16 240C200.58 229.6 199.54 228.58 180 212.36C163.41 198.58 150.91 196.18 150.91 180' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M45.32 60C31.46 29.25 9.75 17.87 14.12 0C17.09 -12.13 37.06 0 60 0C67.22 0 72.66 -5.81 74.44 0C81.86 24.19 82.5 31.07 78.4 60C75.28 81.98 68.4 101.82 60 101.82C51.86 101.82 54.4 80.16 45.32 60' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M180 51.43C165.64 51.43 157.85 18.43 157.85 0C157.85 -7.29 168.93 0 180 0C200 0 220 -9.78 220 0C220 15.93 196.71 51.43 180 51.43' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M335 60C338.01 48.78 349.36 48.46 360 48.46C365.12 48.46 364.72 53.66 366.52 60C374.86 89.43 382.31 91.57 380.28 120C379.05 137.22 369.95 151.3 360 151.3C350.21 151.3 345.53 137.28 340.8 120C333.03 91.63 328.41 84.55 335 60' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M532.24 120C532.55 114.51 535.29 111.54 540 111.54C548.09 111.54 557.33 111.68 557.84 120C559.43 145.91 534.76 155.07 544.21 180C555.84 210.71 574.98 204.38 600 231.29C602.88 234.38 603.8 239.45 600 240C573.8 243.8 570 240 540 240C535.64 240 531.53 243.79 531.29 240C529.63 213.79 535.95 210.02 536.19 180C536.43 150.02 530.64 148.74 532.24 120' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 158.05C22.02 147.04 37.8 142.73 60 150C71.29 153.7 66.98 165.31 66.98 180C66.98 188.42 67.61 194.62 60 196.22C34.12 201.65 24.31 200.63 0 194.06C-5.69 192.52 0 187.03 0 180C0 169.02 -7.98 162.04 0 158.05' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3cpath d='M166.06 180C166.06 172.25 170.47 166.2 180 164.49C207.44 159.57 211.9 160.91 240 166.74C249.31 168.67 254.82 171.47 254.82 180C254.82 199.1 255.13 218.86 240 222C217.72 226.62 208.05 211.44 180 195.51C171.08 190.44 166.06 187.75 166.06 180' stroke='rgba(255%2c 255%2c 255%2c 0.11)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1062'%3e%3crect width='600' height='240' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e") var(--color-background-dark) center no-repeat;
   background-size: cover;
   background-blend-mode: soft-light;
   color: var(--color-text);
-  height: 100vh;
-  width: 100vw;
 }
+
 .container {
   height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
-  /*     justify-content: center; */
   flex-direction: column;
-  gap: 2em;
+  gap: 3em;
+  overflow-x: hidden;
 }
+
 .banner-row {
   display: flex;
   justify-content: center;
@@ -70,7 +71,7 @@ body {
   box-shadow: 4, 4;
   border: 2px solid rgba(255, 255, 255, 0.2);
 }
-/* the background circle shapes */
+/* the background circles */
 .clock-row::after,
 .clock-row::before {
   position: absolute;
@@ -93,13 +94,14 @@ body {
 
 .clock {
   text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
+  overflow-wrap: break-word;
+  width: 100%;
 }
 
 .clock-help {
   font-size: 0.2em;
 }
 
-.clock {
-  overflow-wrap: break-word;
-  width: 100%;
+.subtitle {
+  margin-top: 1em;
 }