Add Normalize.css. Set font-size 14px html, body

TotoroSyd · Sep 12, 2020 · adc7644 · adc7644
1 parent 074c397
commit adc7644
Show file tree

Hide file tree

Showing 3 changed files with 374 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -9,19 +9,19 @@
     />
 
     <!-- Bootstrap CSS -->
+    <link rel="stylesheet" media='all' href="style/normalize.css" type="text/css" />
+    <link rel="stylesheet" media='all' href="style/min1200px.css" type="text/css" />
     <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
-      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
-      crossorigin="anonymous"
-      type="text/css"
+    rel="stylesheet"
+    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+    crossorigin="anonymous"
+    type="text/css"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" media='all' href="style/min1200px.css" type="text/css" />
-    <!-- <link rel="stylesheet" media='screen and (min-width: 992px)' href="style/min992px.css" type="text/css" /> -->
     <link rel="icon" type="image/png" href="image/logo-orangebg.svg" />
     <title>Eatthefrog</title>
   </head>

diff --git a/style/min1200px.css b/style/min1200px.css
@@ -1,4 +1,3 @@
-/* Retina Screen large laptops and desktops*/
 /* Attribute
   Icons made by <a href="https://www.flaticon.com/authors/kiranshastry" title="Kiranshastry">Kiranshastry</a> 
   from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a> */
@@ -10,8 +9,7 @@ html,
 body {
   font-family: sans-serif;
   height: 100vh;
-  /* display: flex;
-    flex-direction: column; */
+  font-size: 14px;
 }
 
 /* Normal button */
@@ -166,19 +164,19 @@ h5 {
   text-align: center;
   padding-top: 3rem;
   /* style when using blurry card under */
-  /* position: relative; */
-  /* top: 9rem; */
-  /* z-index: 1; */
+  /* position: relative;
+  top: 9rem;
+  z-index: 1; */
   transition: transform 0.5s;
 }
 /* style when using blurry card under */
 /* .summary_card {
-    width: 8rem;
-    height: 8rem;
-    background-color: white;
-    opacity: 50%;
-    border-radius: 10px;
-  } */
+  width: 8rem;
+  height: 8rem;
+  background-color: white;
+  opacity: 50%;
+  border-radius: 10px;
+} */
 
 .welcome_button_more {
   padding-top: 2rem;
@@ -249,9 +247,9 @@ h5 {
   font-weight: 500;
   font-size: 1.25rem;
 }
-#edit {
-  padding-right: 5px;
-}
+/* #edit {
+  padding-right: 1rem;
+} */
 
 #taskName,
 #description,
@@ -264,7 +262,7 @@ h5 {
 
 .card-header {
   background-color: #fea768;
-  height: 4em;
+  height: 4rem;
   position: sticky;
   top: 0;
   /* z-index: 1; */