style: add font and use flexbox for footer

derlin · Jan 2, 2023 · e77561e · e77561e
1 parent a7acda1
commit e77561e
Showing 1 changed file with 34 additions and 22 deletions.
diff --git a/rickroll/assets/style.css b/rickroll/assets/style.css
@@ -1,43 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');
+
 :root {
-  --main-font: monospace;
+  --main-font: 'Roboto Mono', monospace;
   --main-letter-spacing: -0.5px;
-  --main-font-size: 1.5em;
+  --main-font-size: 1.2rem;
   --background: #efefef;
-  --text-color: #111;
+  --text-color: #333;
   --text-color-disabled: #999;
 
   --primary: #333;
   --input-background: #f9f9f9; /* #CECECE */
   --max-width: 1000px;
 }
 
-html,
-body {
-  height: 100%;
-  margin: 0;
+* {
   box-sizing: border-box;
 }
 
-#main {
-  margin: auto;
-  max-width: var(--max-width);
+html {
+  height: 100%;
+  margin: 0;
+
+  background: var(--background);
+  background-image: url("https://cdn.vox-cdn.com/thumbor/9j-s_MPUfWM4bWdZfPqxBxGkvlw=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/22312759/rickroll_4k.jpg");
+  background-blend-mode: color-burn;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  margin: 0;
+
   font-family: var(--main-font);
   letter-spacing: var(--main-letter-spacing);
   font-size: var(--main-font-size);
-  /* line-height: var(--main-line-height); */
-  padding: 10px;
-  background: var(--background);
   color: var(--text-color);
   text-align: center;
+}
 
-  background-image: url("https://cdn.vox-cdn.com/thumbor/9j-s_MPUfWM4bWdZfPqxBxGkvlw=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/22312759/rickroll_4k.jpg");
-  background-blend-mode: color-burn;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+#main {
+  margin: auto;
+  flex-grow: 1;
+  width: 100%;
+  max-width: var(--max-width);
+  padding: 10px 10px 30px 10px; /* for the footer */
 }
 
 a:hover {
@@ -61,7 +71,7 @@ form {
 
 input[type="url"], input[type="number"] {
   border: none;
-  font-family: monospace;
+  font-family: inherit;
   font-size: 0.9em;
   color: var(--text-color);
   padding: 8px 5px;
@@ -161,17 +171,19 @@ details {
   margin: auto;
 }
 
+details summary { 
+  cursor: pointer;
+}
+
 details div {
   background: rgba(255, 255, 255, 0.8);
   margin-top: 1em;
   padding: 1em;
 }
 
 footer {
-  position: absolute;
-  bottom: 0;
+  flex-shrink: 0;
   width: 100%;
-  height: 20px;
   text-align: left;
   padding: 10pt 6pt;
 }