From 9b55c6fccd785c52e56f152e88516f465f6c4fa3 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Thu, 22 Jun 2023 22:17:25 +0200
Subject: [PATCH] some style improvements

---
 main/_includes/post.html   |  2 +-
 main/_includes/social.html |  2 +-
 main/style/style.css       | 49 ++++++++------------------------------
 3 files changed, 12 insertions(+), 41 deletions(-)

diff --git a/main/_includes/post.html b/main/_includes/post.html
index 49792d1..2bbc481 100644
--- a/main/_includes/post.html
+++ b/main/_includes/post.html
@@ -1,8 +1,8 @@
 <div class="card bg-light blog-entry rounded-0 {% for tag in include.post.tags %} blog-tag-{{ tag | slugify}} {% endfor %}">
     <div class="card-body">
+        <span class="text-muted blog-cat">{{ include.post.tags | join: ", " }}</span>
         <h4 class="card-title blog-title"><a class="title-button" href="{{ include.post.url }}">{{ include.post.title }}</a></h4>
         <div class="card-text blog-summary">{{ include.post.description }}</div>
         <span class="text-muted project-status">{{ include.post.date | date_to_string }}</span>
-        <span class="text-muted blog-cat">{{ include.post.tags | join: ", " }}</span>
     </div>
 </div>
diff --git a/main/_includes/social.html b/main/_includes/social.html
index 51d7fa3..d8d366e 100644
--- a/main/_includes/social.html
+++ b/main/_includes/social.html
@@ -31,7 +31,7 @@
             </ul>
         </div>
         <div class="col-md-auto" id="discord-div">
-            <iframe id="discord-widget" title="Ellpeck's Discord server" width="300" height="450" allowtransparency="true" frameborder="0"></iframe>
+            <iframe id="discord-widget" title="Ellpeck's Discord server" width="300" height="500" allowtransparency="true" frameborder="0"></iframe>
         </div>
 
         <script>
diff --git a/main/style/style.css b/main/style/style.css
index 3c0b2cf..c5cee44 100644
--- a/main/style/style.css
+++ b/main/style/style.css
@@ -21,7 +21,7 @@ h1, h2, h3, h4, h5, h6, .nav-item {
 }
 
 .list-display {
-    width: 85%;
+    max-width: 850px;
     display: block;
     margin-top: 40px;
     margin-left: auto;
@@ -31,7 +31,7 @@ h1, h2, h3, h4, h5, h6, .nav-item {
 }
 
 .alert {
-    width: 85%;
+    max-width: 850px;
     display: block;
     margin-top: 40px;
     margin-left: auto;
@@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, h6, .nav-item {
 }
 
 .jumbotron {
-    width: 85%;
+    max-width: 850px;
     margin: 40px auto 0;
     background-color: white;
 }
@@ -58,18 +58,16 @@ h1, h2, h3, h4, h5, h6, .nav-item {
 
 .project-status {
     position: absolute;
-    right: 20px;
-    bottom: 15px;
+    right: 1.25rem;
+    bottom: 1.25rem;
 }
 
 .blog-cat {
-    position: absolute;
-    right: 20px;
-    top: 15px;
+    float: right;
 }
 
 .social-button {
-    width: 200px;
+    width: 175px;
     margin: 10px;
     line-height: 40px;
 }
@@ -126,15 +124,10 @@ h1, h2, h3, h4, h5, h6, .nav-item {
     margin-top: 15px;
 }
 
-.blog-summary,
-.blog-title {
-    width: 85%;
-}
-
 .navbar {
     margin-left: auto;
     margin-right: auto;
-    max-width: 1200px;
+    max-width: 1000px;
 }
 
 .footer {
@@ -144,7 +137,7 @@ h1, h2, h3, h4, h5, h6, .nav-item {
     bottom: 0;
     margin-left: auto;
     margin-right: auto;
-    max-width: 1200px;
+    max-width: 1000px;
     background-color: #f8f9fa;
     padding-left: 15px;
     padding-right: 15px;
@@ -210,7 +203,7 @@ hr {
     bottom: 0;
     margin-left: auto;
     margin-right: auto;
-    max-width: 1200px;
+    max-width: 1000px;
     height: 40px;
     line-height: 40px;
     text-align: center;
@@ -245,16 +238,6 @@ pre.highlight {
     border-top: 2px solid rgba(0, 0, 0, 0.2);
 }
 
-@media (max-width: 1199px) {
-    .blog-title {
-        margin-top: 15px;
-    }
-
-    .blog-summary {
-        margin-bottom: 10px;
-    }
-}
-
 @media (max-width: 768px) {
     .container {
         max-width: none;
@@ -288,16 +271,4 @@ pre.highlight {
         top: -18px;
         width: 50px;
     }
-
-    .project-status {
-        position: absolute;
-        right: 10px;
-        bottom: 5px;
-    }
-
-    .blog-cat {
-        position: absolute;
-        right: 10px;
-        top: 5px;
-    }
 }