Small UX tweaks

static/css/main.css

@@ -299,14 +299,14 @@ a:hover {
 
 .btn {
     display: inline-block;
-    padding: 12px 24px;
+    padding: 4px 12px;
     background: var(--e2c-yellow);
     color: var(--text-primary);
     text-decoration: none;
-    border-radius: 24px;
-    margin: 8px 0;
+    border-radius: 12px;
+    margin: 4px 0;
     font-weight: 500;
-    font-size: 15px;
+    font-size: 14px;
     transition: all 0.2s ease;
     border: 2px solid var(--e2c-yellow);
 }
@@ -725,24 +725,26 @@ a:hover {
 /* Tags and button layout for content pages */
 .tags-and-button {
     display: flex;
-    justify-content: space-between;
     align-items: flex-start;
     margin: 0.5rem 0;
     gap: 1rem;
+    flex-wrap: wrap;
 }
 
 .tags {
-    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
 .tag {
     display: inline-block;
     background: #e9ecef;
     color: #495057;
-    padding: 0.25rem 0.5rem;
+    padding: 6px 10px;
     margin: 0.25rem 0.25rem 0 0;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
+    border-radius: 8px;
+    font-size: 14px;
     text-decoration: none;
     transition: all 0.2s ease;
 }
@@ -759,13 +761,8 @@ a:hover {
 
 @media (max-width: 768px) {
     .tags-and-button {
-        flex-direction: column;
         gap: 0.5rem;
     }
-    
-    .article-external-button {
-        align-self: flex-start;
-    }
 }
 
 @media (max-width: 768px) {