Improved overall typography and layout

Enhancements include:
- Global typography optimization with adjusted line-height, font-size, and color
- Container width and padding adjustments for better layout
- Title margins and line-height improvements for readability
- Paragraph margin adjustments for better text flow
- Responsive design tweaks to accommodate smaller screens
- Navbar enhancements including box-shadow and padding adjustments
- Card style improvements with added hover effect
- Updated import link for Montserrat font with additional weights
- Added new color variables and global color settings
- Adjusted section padding in responsive design.

Author: awesome-doge

_sass/_layout.scss

@@ -23,3 +23,62 @@ div.highlight {
         }
     }
 }
+
+// 全局排版優化
+body {
+    line-height: 1.6;
+    font-size: 16px;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    padding: 0 1rem;
+    margin: 0 auto;
+}
+
+// 標題優化
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+}
+
+// 段落優化
+p {
+    margin-bottom: 1.5rem;
+}
+
+// 響應式優化
+@media screen and (max-width: 768px) {
+    body {
+        font-size: 15px;
+    }
+    
+    .container {
+        padding: 0 0.75rem;
+    }
+}
+
+// 導航欄優化
+.navbar {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    
+    .navbar-brand {
+        font-weight: 700;
+    }
+    
+    .navbar-item {
+        padding: 0.5rem 1rem;
+    }
+}
+
+// 卡片優化
+.card {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: transform 0.2s ease;
+    
+    &:hover {
+        transform: translateY(-2px);
+    }
+}

_sass/_main.scss

@@ -1,12 +1,50 @@
 @charset "utf-8";
-@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 
+// 基礎變量設置
 $family-sans-serif: 'Montserrat', sans-serif;
 $primary: #188eac !default;
+$secondary: #2c3e50;
+$accent: #e74c3c;
+$background: #f8f9fa;
+$text: #2c3e50;
 
+// 全局顏色設置
+$body-background-color: $background;
+$text-color: $text;
+$link-color: $primary;
+$link-hover-color: darken($primary, 10%);
+
+// 組件顏色設置
 $tabs-link-active-color: $primary;
 $tabs-link-active-border-bottom-color: $primary;
+$button-primary-background-color: $primary;
+$button-primary-hover-background-color: darken($primary, 10%);
 
+// 導入 Bulma
 @import "../node_modules/bulma/bulma.sass";
+
+// 自定義樣式
+.section {
+    padding: 3rem 1.5rem;
+}
+
+.title {
+    color: $secondary;
+    font-weight: 600;
+}
+
+.subtitle {
+    color: lighten($secondary, 20%);
+}
+
+// 響應式調整
+@media screen and (max-width: 768px) {
+    .section {
+        padding: 2rem 1rem;
+    }
+}
+
+// 導入其他樣式文件
 @import "layout";
-@import "syntax"
+@import "syntax";