الگو:صفحهٔ اصلی/styles.css: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

@@ خط ۱: / خط ۱: @@
+/* ==========================================================================
+   ۱. بنر بالای صفحه (Top Banner)
+   ========================================================================== */
 .mp-topbanner {
    position: relative;
@@ خط ۱۰۲: / خط ۱۰۵: @@
 }
+/* ==========================================================================
+   ۲. چیدمان کلی دو ستونه (Main Layout Wrapper)
+   ========================================================================== */
+.mainpage_body_box, #mp-upper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 15px;
+}
+/* ==========================================================================
+   ۳. ستون راست / اصلی (Article & Main Content)
+   ========================================================================== */
 #mp-article, #mp-help {
-   flex: 1 1 67%;
+   flex: 1 1 65%;
-  margin-left: 2px;
    display: flex;
    flex-direction: column;
@@ خط ۱۱۰: / خط ۱۲۵: @@
 .mp-article-box, #mp-article-box, #mp-help-box {
-  margin-left: 0.3em;
    margin-bottom: 1em;
    padding: 1.2em;
@@ خط ۱۲۶: / خط ۱۴۰: @@
 #mp-help-box {
    background: #f4f5f0;
-}
-#mp-sidebar {
-  flex: 1 1 33%;
-}
-#mp-sidebar-box {
-  margin-right: 0.3em;
-  margin-bottom: 1em;
-  padding: 1.2em;
-  background: #ffffff;
-  border-radius: 10px;
-  border: 1px solid #a3b18a;
-  border-top: 4px solid #3a5a40;
-  box-shadow: 0 4px 12px rgba(52, 78, 65, 0.05);
 }
@@ خط ۱۵۷: / خط ۱۵۶: @@
    color: #ffffff;
 }
 .mp-article-footer {
    border-top: 1px dashed #a3b18a;
@@ خط ۱۶۶: / خط ۱۶۵: @@
    color: #344e41;
 }
+/* ==========================================================================
+   ۴. ستون چپ (Sidebar & Left Boxes)
+   ========================================================================== */
+#mp-left, .mainpage_body_left, #mp-sidebar {
+  flex: 1 1 30%;
+  display: flex;
+  flex-direction: column;
+}
+.mainpage_box, #mp-sidebar-box {
+  background: #ffffff;
+  border: 1px solid #a3b18a;
+  border-radius: 10px;
+  margin-bottom: 1.2em;
+  box-shadow: 0 4px 12px rgba(52, 78, 65, 0.05);
+  overflow: hidden;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.mainpage_box:hover, #mp-sidebar-box:hover {
+  box-shadow: 0 6px 16px rgba(52, 78, 65, 0.1);
+  border-color: #588157;
+}
+.mainpage_box_header {
+  background: linear-gradient(135deg, #3a5a40 0%, #588157 100%);
+  color: #ffffff !important;
+  font-weight: bold;
+  font-size: 15px;
+  padding: 10px 15px;
+  border-bottom: 2px solid #a3b18a;
+}
+.mainpage_box_content {
+  padding: 15px;
+  color: #344e41;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.mainpage_box > *:not(.mainpage_box_header):not(.mainpage_box_content) {
+  padding: 15px;
+}
+.mainpage_box a {
+  color: #3a5a40;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.mainpage_box a:hover {
+  color: #588157;
+  text-decoration: underline;
+}
+.mainpage_box ul, .mainpage_box ol {
+  margin: 5px 15px 5px 0;
+  padding: 0;
+}
+.mainpage_box li {
+  margin-bottom: 6px;
+  color: #344e41;
+}
+/* ==========================================================================
+   ۵. جزئیات جانبی و لیست‌ها
+   ========================================================================== */
 #mp-more {
    float: left;
@@ خط ۲۰۱: / خط ۲۶۸: @@
 }
+/* ==========================================================================
+   ۶. تنظیمات واکنش‌گرایی (Responsive / Mobile)
+   ========================================================================== */
 @media (max-width: 875px) {
    .mp-topbanner {
-     margin: 5px 0;
+     margin: 10px 0;
    }
@@ خط ۲۱۰: / خط ۲۸۰: @@
    }
-   .mp-menu {
+   .mainpage_body_box, #mp-upper, #mp-bottom {
-    border-bottom: 0;
-  }
-  .mp-menu .hlist > ul li {
-    margin-left: 0;
-  }
-  #mp-upper, #mp-bottom {
      flex-direction: column;
    }
-   .mp-article-box, #mp-article-box {
+   #mp-article, #mp-help, #mp-left, .mainpage_body_left, #mp-sidebar {
+    flex: 1 1 100%;
      margin-left: 0;
-  }
-  #mp-sidebar-box {
      margin-right: 0;
    }
-   #mp-help-box {
+   .mp-logo-box {
-     background: #f4f5f0;
+     position: static;
+    margin-bottom: 10px;
    }
 }