미디어위키:Common.css: 두 판 사이의 차이

다음 편집 →

@@ 1번째 줄: / 1번째 줄: @@
 /* 이 CSS 설정은 모든 스킨에 적용됩니다 */
-/*
+/* This is the CSS common to all desktop skins on Worldtravelwiki.
- * This is the CSS common to all desktop skins on Worldtravelwiki.
+/* Styling inside .mw-parser-output should generally use TemplateStyles.
- * Styling inside .mw-parser-output should generally use TemplateStyles.
   */
 /* Reset italic styling set by user agent */
@@ 417번째 줄: / 416번째 줄: @@
   * comment above.
   */
+/* Adjustments for mobile screens */
+@media screen and (max-width: 768px) {
+  /* General adjustments */
+  body {
+    font-size: 14px; /* Adjust base font size */
+  }
+  /* Adjustments for .color-box */
+  .color-box {
+    padding: 0.3em; /* Reduce padding for smaller screens */
+  }
+  .color-box-title {
+    font-size: 1em; /* Reduce title font size */
+    padding: 0.2em;
+  }
+  .color-box-content {
+    padding: 0.3em; /* Reduce content padding */
+  }
+  /* Adjustments for .content-grid */
+  .content-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Reduce minimum column width */
+    gap: 0.3em; /* Reduce gap between grid items */
+    padding: 0.3em; /* Reduce overall padding */
+  }
+  /* Adjustments for infoboxes */
+  .infobox {
+    font-size: 80%; /* Further reduce font size for infoboxes */
+  }
+}
+/* Extra small screens */
+@media screen and (max-width: 480px) {
+  /* Further adjustments for very small screens if needed */
+  .content-grid {
+    grid-template-columns: 1fr; /* Force single column layout */
+  }
+    /* General adjustments */
+  body {
+    font-size: 13px; /* Further reduce base font size */
+  }
+}