code-differently · michael-mcmasters · Oct 30, 2020 · Oct 30, 2020 · Oct 30, 2020 · Oct 30, 2020
diff --git a/blog-post.html b/blog-post.html
diff --git a/images/beach.jpg b/images/beach.jpg
diff --git a/blog-post.png → images/blog-post.png b/blog-post.png → images/blog-post.png
diff --git a/blog.png → images/blog.png b/blog.png → images/blog.png
diff --git a/images/forest.jpg b/images/forest.jpg
diff --git a/images/grand-canyon.jpg b/images/grand-canyon.jpg
diff --git a/images/greece.jpeg b/images/greece.jpeg
diff --git a/images/honolulu.jpg b/images/honolulu.jpg
diff --git a/images/jm-avatar.jpg b/images/jm-avatar.jpg
diff --git a/images/nate-avatar.jpg b/images/nate-avatar.jpg
diff --git a/images/northern-lights.jpg b/images/northern-lights.jpg
diff --git a/images/pier2.jpeg b/images/pier2.jpeg
diff --git a/images/sunrise.jpg b/images/sunrise.jpg
diff --git a/images/tampa-skyline.jpg b/images/tampa-skyline.jpg
diff --git a/images/tree.jpg b/images/tree.jpg
diff --git a/index.html b/index.html
diff --git a/styles/blog-post.css b/styles/blog-post.css
@@ -0,0 +1,211 @@
+img {
+  transition: opacity 0.2s;
+}
+
+img:hover {
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+
+
+
+/* ------- Article Header ------- */
+
+.c-header-container {
+    width: 100%;
+    height: 5em;
+    display: flex;
+}
+
+.c-header-title {
+    color: rgb(85, 85, 85);
+    font-weight: bold;
+    font-size: 1.1rem;
+    padding-bottom: 0.3em;
+}
+
+.c-date {
+    background-color: rgb(236, 236, 236);
+    border-radius: 50%;
+    min-height: 75px;
+    min-width: 75px;
+
+    color: rgb(85, 85, 85);
+    font-weight: 500;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    /* Using line height to change horizontal space in-between elements. Because changing marging and padding was not doing anything. */
+    line-height: 1.5rem;
+}
+
+/* Use > arrow when using :nth-child so that it only selects direct children. And not children's children. */
+.c-date > :nth-child(1) {
+    font-size: 2em;
+}
+
+.c-date > :nth-child(2) {
+    font-size: 1em;
+}
+
+.c-header-container > :nth-child(2) {
+    flex-grow: 1;
+    align-self: center;
+    padding: 1em;
+    padding-right: 0;
+}
+
+.c-posted-by {
+    color: rgb(153, 153, 153);
+    font-size: 0.7rem;
+    padding-top: 0.3em;
+}
+
+
+
+
+
+/* ------- Content Body ------- */
+
+.c-main-content-image {
+    margin: 2rem 0;
+    width: 100%;
+    height: 400px;
+}
+
+.c-main-content-body {
+    font-size: 0.9rem;
+    padding: 1rem 0;
+}
+
+
+
+
+
+/* ------- Related Posts ------- */
+
+.c-related-posts-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.c-related-posts-container > img {
+    width: 23%;
+    height: 7em;
+}
+
+
+
+
+
+/* ------- Comments ------- */
+
+.c-comment-container {
+    display: flex;
+    align-content: flex-start;
+    align-items: flex-start;
+}
+
+.c-comment-container > img {
+    width: 5em;
+    height: 5em;
+}
+
+.c-comment-body {
+    padding: 1em 1.3em;
+    margin-left: 1em;
+    width: 100%;
+    background-color: rgb(247, 247, 247);;
+    border: 1px solid rgb(225, 225, 225);
+}
+
+.c-comment-username {
+    color: rgb(85, 85, 85);
+    font-weight: bold;
+    font-size: 0.91rem;
+    padding-bottom: 0.3em;
+}
+
+
+
+
+
+
+/* ------- Comment Input Field ------- */
+
+#comment-form {
+    display: flex;
+    flex-direction: column;
+}
+
+.c-input,
+#comment-form > input {
+    margin-bottom: 1rem;
+    padding-left: 0.7rem;
+    height: 2rem;
+    font-size: 0.9rem;
+    background-color: rgb(247, 247, 247);
+    border: 1px solid rgb(225, 225, 225);
+}
+
+::placeholder {
+    color: rgb(85, 85, 85);
+}
+
+textarea {
+    margin-bottom: 1rem;
+    height: 10rem;
+    background-color: rgb(247, 247, 247);
+    border: 1px solid rgb(225, 225, 225);
+}
+
+.c-form-button {
+    max-width: 15%;;
+}
+
+
+
+
+
+
+/* ------- Popular Posts ------- */
+
+.c-popular-container {
+    display: flex;
+    align-content: flex-start;
+    align-items: flex-start;
+}
+
+.c-popular-container > img {
+    width: 5em;
+    height: 5em;
+}
+
+.c-popular-body {
+    margin-left: 1em;
+    width: 100%;
+}
+
+.c-popular-title {
+    color: rgb(85, 85, 85);
+    font-size: 0.9rem;
+    padding-bottom: 0.3em;
+}
+
+.c-popular-date {
+    font-size: 0.7em;
+    color: rgb(153, 153, 153);
+}
+
+@media (max-width: 768px) {
+  .c-popular-resp {
+    border: none;
+    margin-left: 0;
+    margin-top: 3rem;
+    padding-left: 0;
+  }
+}
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,61 @@
+.cust-card-border-bottom {
+  padding-bottom: 3.5em;
+  border-bottom: 1px dotted gray;
+}
+
+.card {
+  background-color: var(--color-gray2);
+  position: relative;
+  left: 0x;
+  bottom: 0px;
+
+  transition: 0.2s;
+}
+
+.card:focus,
+.card:hover {
+  cursor: pointer;
+  background-color: rgb(214, 214, 214); 
+  position: relative;
+  bottom: 10px;
+}
+
+.cust-card-body-container {
+  margin: 1.1em 1.1em 0.7rem 1.1em;
+}
+
+.cust-card-body {
+  margin-top: 0.8em;
+  font-size: 0.9em;
+}
+
+.cust-card-footer {
+  padding-top: 10px;
+  border-top: 1px dotted black;
+  color: rgb(153, 153, 153);
+  font-size: 0.8em;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+
+/* Cards Columns don't work with the regular column classes (col-md-4 for example)
+   They must be defined with @media keys.
+   Source: First answer - @https://stackoverflow.com/questions/34140793/bootstrap-4-responsive-cards-in-card-columns/43117538#43117538
+*/
+@media (min-width: 34em) {
+    .card-columns {
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
+}
+
+@media (min-width: 48em) {
+    .card-columns {
+        -webkit-column-count: 3;
+        -moz-column-count: 3;
+        column-count: 3;
+    }
+}