bundle styles correctly

2 files changed, 93 insertions, 1 deletions

diff --git a/src/index.js b/src/index.js
index bfe31f4..a1b9967 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,7 @@ const app = express();
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'pug');
 
-app.use(express.static('public'));
+app.use(express.static(path.join(__dirname, 'public')));
 app.use('/', routes);
 
 const server = app.listen(3000, () => {
diff --git a/src/public/styles.css b/src/public/styles.css
new file mode 100644
index 0000000..1a541de
--- /dev/null
+++ b/src/public/styles.css
@@ -0,0 +1,92 @@
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+}
+
+.post, .comments-container, .header {
+  padding: 0.3rem;
+  flex: 1 1 95%;
+  font-size: 1rem;
+  width: 95%;
+}
+
+@media (min-width: 768px) {
+  .post, .comments-container, .header {
+    flex: 1 1 65%;
+    width: 65%;
+  }
+}
+
+@media (min-width: 1080px) {
+  .post, .comments-container, .header {
+    flex: 1 1 50%;
+    width: 50%;
+  }
+}
+
+.comments-container, .self-text {
+  text-align: justify;
+}
+
+.comment, .more {
+  width: 100%;
+  border-left: 1px dashed;
+  padding: 10px 0px 10px 24px;
+  box-sizing: border-box;
+}
+
+.more {
+  margin-bottom: 0px;
+  font-size: 0.7rem;
+  color: #777;
+}
+
+.first {
+  border-left: none;
+  padding-left: 0;
+  margin: 0;
+  margin-top: 12px;
+}
+
+.post-container {
+  align-self: stretch;
+  display: flex;
+}
+
+.post-text {
+  flex-direction: column;      
+  align-items: stretch;        
+  justify-content: space-between;
+}
+
+.media-preview {
+  padding-left: 10px;
+  margin-left: auto;
+}
+
+.post-media {
+  max-width: 100%;
+}
+
+.title-container,.info-container {
+  flex: 1;                     
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.info-container {
+  color: #777;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;        
+}
+
+.info-item {
+  margin-right: 10px;
+}
+
+hr {
+  border 1px solid #000;
+}