fix layout

my-blog/static/css/style.css

@@ -330,7 +330,7 @@ a.view-markdown:any-link {
 .article-container {
     display: grid;
     grid-template-columns: 1fr 240px;
-    gap: 40px;
+    /* gap: 40px; */
     max-width: 1000px;
     margin: 0 auto;
 }
@@ -658,7 +658,7 @@ article.article-content {
 
 .main-footer p {
     color: #656d76;
-    font-size: 14px;
+    font-size: 20px;
     margin: 0;
 }
 

oauth/src/App.css

@@ -11,6 +11,7 @@
   --background: #ffffff;
   --background-secondary: #f6f8fa;
   --border: #d1d9e0;
+  --border-dark: #b8c0c8;
   --hover: rgba(15, 20, 25, 0.1);
 }
 
@@ -268,6 +269,23 @@ body {
   padding: 20px 0;
 }
 
+/* Bluesky Footer */
+.bluesky-footer {
+  text-align: center;
+  padding: 40px 0;
+  color: var(--primary);
+  opacity: 0.3;
+  transition: opacity 0.3s;
+}
+
+.bluesky-footer:hover {
+  opacity: 0.6;
+}
+
+.bluesky-footer .fa-bluesky {
+  font-size: 20px;
+}
+
 .content-area {
   background: var(--background);
 }
@@ -374,14 +392,29 @@ body {
 
 /* Record List */
 .record-item {
-  border-bottom: 1px solid var(--border);
+  border: 1px solid var(--border);
+  border-radius: 0;
   padding: 16px;
-  transition: background 0.2s;
+  transition: background 0.2s, border-color 0.2s;
   position: relative;
+  margin-bottom: -1px; /* Overlap borders */
+}
+
+.record-item:first-child {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.record-item:last-child {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  margin-bottom: 0;
 }
 
 .record-item:hover {
   background: var(--background-secondary);
+  border-color: var(--border-dark);
+  z-index: 1; /* Bring to front when hovering */
 }
 
 .record-header {
@@ -768,10 +801,15 @@ body {
   .record-item {
     padding: 15px !important;
     margin: 0px !important;
+    border-radius: 0 !important;
     border-left: none !important;
     border-right: none !important;
   }
   
+  .record-item:first-child {
+    border-top: 1px solid var(--border) !important;
+  }
+  
   .record-content {
     word-wrap: break-word !important;
     overflow-wrap: break-word !important;

oauth/src/App.jsx

@@ -463,6 +463,10 @@ Answer:`
               </button>
             </div>
           )}
+          
+          <div className="bluesky-footer">
+            <i className="fab fa-bluesky"></i>
+          </div>
         </div>
       </div>
     </div>