Add styles for App

Author: tajulafreen

Source-Code/WordCounter/style.css

@@ -0,0 +1,231 @@
+/* General Styles */
+body {
+  background-image: linear-gradient(#fec8d8, #ffdfd3);
+  line-height: 1;
+  width: 700px;
+  margin: 0 auto;
+  background-color: #fafafa;
+  font-family: 'Source Sans Pro', sans-serif;
+  color: #111;
+}
+
+html {
+  box-sizing: border-box;
+  user-select: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Reset Styles */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Typography */
+b {
+  font-weight: bold;
+}
+
+/* Container */
+.container {
+  margin: 2% auto;
+  padding: 15px;
+  background-color: #fff;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* Headings */
+h1 {
+  font-size: 3rem;
+  font-weight: 900;
+  text-align: center;
+  margin: 1% 0 3%;
+}
+
+/* Textarea */
+textarea {
+  width: 100%;
+  height: 250px;
+  padding: 10px;
+  border: 1px solid #d9d9d9;
+  outline: none;
+  font-size: 1rem;
+  resize: none;
+  line-height: 1.5rem;
+  transition: border-color 0.3s;
+}
+
+textarea:hover {
+  border-color: #c0c0c0;
+}
+
+textarea:focus {
+  border-color: #4d90fe;
+}
+
+/* Output Row */
+.output.row {
+  width: 100%;
+  border: 1px solid #ddd;
+  font-size: 1.4rem;
+  margin: 1% 0;
+  background-color: #f9f9f9;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.output.row div {
+  flex: 1 1 42%;
+  padding: 10px 15px;
+  margin: 1%;
+}
+
+.output.row span {
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+/* Readability */
+#readability {
+  width: 52%;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+#readability:hover {
+  background-color: #4d90fe;
+  color: #fff;
+  border-radius: 2px;
+}
+
+#readability:active {
+  background-color: #307af3;
+}
+
+/* Keywords */
+.keywords {
+  display: none;
+  margin: 4% 0 0;
+  font-size: 2rem;
+  font-weight: 900;
+}
+
+.keywords ul {
+  font-weight: 400;
+  border: 1px solid #ddd;
+  font-size: 1.4rem;
+  background-color: #f9f9f9;
+  margin: 2% 0;
+}
+
+.keywords li {
+  display: inline-block;
+  width: 44%;
+  padding: 10px;
+  margin: 1%;
+}
+
+/* Responsive Design */
+@media (max-width: 750px) {
+  body {
+    width: 600px;
+  }
+
+  .output.row {
+    font-size: 1.2rem;
+  }
+
+  .output.row span {
+    font-size: 1.3rem;
+  }
+
+  .keywords ul {
+    font-size: 1.2rem;
+  }
+}
+
+@media (max-width: 600px) {
+  body {
+    width: 95%;
+  }
+
+  .output.row {
+    border: none;
+    background-color: #fff;
+  }
+
+  .output.row div {
+    flex: 1 1 100%;
+    padding: 10px 15px;
+    margin: 2% auto;
+    border: 1px solid #ddd;
+    font-size: 1.8rem;
+    background-color: #f9f9f9;
+  }
+
+  .output.row span {
+    font-size: 2rem;
+  }
+
+  #readability {
+    width: 100%;
+    font-size: 1.6rem;
+    font-weight: 400;
+  }
+
+  .keywords {
+    margin: 10% auto;
+  }
+
+  .keywords ul {
+    font-weight: 400;
+    border: none;
+    font-size: 1.8rem;
+    background-color: #f9f9f9;
+    margin: 5% 0;
+  }
+
+  .keywords li {
+    flex: 1 1 100%;
+    padding: 10px;
+    margin: 2% auto;
+    border: 1px solid #ddd;
+  }
+}