Changed some file names + new article

1 files changed, 167 insertions, 0 deletions

diff --git a/public/styles.css.bk b/public/styles.css.bk
new file mode 100644
index 0000000..2ac1e90
--- /dev/null
+++ b/public/styles.css.bk
@@ -0,0 +1,167 @@
+/* styles.css */
+
+
+body {
+  background-color: #272727;
+  color: #e6e6e6;
+  font-family: 'FreeSerif', serif;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+header {
+  text-align: center;
+  padding: 20px;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  text-align: center;
+}
+
+nav ul li {
+  display: inline-block;
+  margin-right: 20px;
+}
+
+nav ul li.logo img {
+  max-height: 70px;
+}
+
+nav ul li a {
+  color: #716181;
+  text-decoration: none;
+}
+
+a {
+  color: #5e4d96;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+main{
+  margin: 20px auto;
+  font-size: 18px;
+  max-width: 90%;
+  padding: 0 10px;
+}
+
+.tags {
+  margin: 20px auto;
+  font-size: 18px;
+  max-width: 40%;
+  padding: 0 10px;
+}
+
+.tags2 {
+  margin: 20px auto;
+  font-size: 18px;
+  max-width: 68%;
+  padding: 0 10px;
+}
+
+.posts {
+  border-top: 1px solid #C0C0C0;
+  padding-top: 10px;
+}
+
+.posts h2 {
+  font-size: 24px;
+  padding-bottom: 5px;
+}
+
+.posts ul {
+  list-style: none;
+  padding: 0;
+}
+
+.posts ul li {
+  margin-bottom: 10px;
+}
+
+.right-image {
+  float: right;
+  margin: 0 0 10px 10px;
+  height: auto;
+}
+
+.left-image {
+  float: left;
+  height: auto;
+}
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 70%;
+}
+
+.code-box {
+  padding-top: 100px;
+  background-color: #c8c8c8;
+  font-family: 'FreeSans', sans-serif;
+  font-size: 15px;
+  color: #000000;
+  border: 2px solid; 
+  padding: 7px;
+}
+
+/* Media Queries for responsiveness */
+@media (max-width: 768px) {
+  body {
+    max-width: 100%;
+    padding: 0 10px;
+  }
+
+  .title {
+    font-size: 28px;
+  }
+
+  nav ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  nav ul li {
+    display: block;
+    margin: 10px 0;
+    text-align: center;
+  }
+
+  nav ul li.logo img {
+    max-height: 50px;
+  }
+
+  .description {
+    font-size: 16px;
+  }
+
+  .posts h2 {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 480px) {
+  .title {
+    font-size: 24px;
+  }
+
+  .description {
+    font-size: 14px;
+  }
+
+  .posts h2 {
+    font-size: 20px;
+  }
+
+  nav ul li {
+    margin: 5px 0;
+  }
+}
+