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

2025년 8월 30일 (토) 03:39 판

/* All CSS here will be loaded for users of the MinervaNeue skin */

/* ===== Minerva Monochrome Home ===== */

/* 링크/버튼 무채색 */
.skin-minerva .mw-parser-output a,
.skin-minerva a { color:#222 !important; }
.skin-minerva a:visited { color:#555 !important; }
.skin-minerva a:hover, .skin-minerva a:focus { color:#000 !important; }
.skin-minerva a.new, .skin-minerva a.new:visited { color:#777 !important; }

/* 배너/알림/입력 */
.skin-minerva .banner {
  background:#f7f7f7; border:1px solid #e5e5e5; padding:14px; border-radius:10px; margin:0 0 16px;
}
.skin-minerva .notice {
  border-left:4px solid #888; background:#fafafa; padding:10px 12px; border-radius:6px; margin:12px 0;
}
.skin-minerva input, .skin-minerva select, .skin-minerva textarea {
  background:#fff !important; color:#111 !important; border:1px solid #dcdcdc !important;
}

/* 카드형 그리드 (모바일 1열 → 태블릿 2열 → 데스크톱 3열) */
.skin-minerva .homegrid { display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 16px; }
.skin-minerva .homegrid .card {
  background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:12px;
}
.skin-minerva .homegrid .card h3 { margin:0 0 6px; font-size:1.05rem; }
.skin-minerva .homegrid .card ul { margin:.25rem 0 0 1.1rem; }
@media (min-width: 720px)  { .skin-minerva .homegrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .skin-minerva .homegrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* 접고 펴는 상자 기본 톤 */
.skin-minerva .mw-collapsible { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:10px; }
.skin-minerva .mw-collapsible-toggle { font-weight:600; }

/* (선택) 메인 페이지 제목 크기 살짝 줄이기 */
.skin-minerva #firstHeading { font-size:1.25rem; }

/* ===== Home hero (Minerva) ===== */

/* A) 뷰포트 중앙 배치(첫 화면에서 정중앙) */
.skin-minerva .home-hero {
  min-height: 58vh;                 /* 화면 높이의 약 60% */
  display: grid;
  place-content: center;             /* 가로/세로 중앙 정렬 */
  text-align: center;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
}

/* B) 스크롤해도 중간쯤에 들러붙게(sticky)
   top 값을 조절하면 고정되는 세로 위치가 바뀝니다. (예: 25vh ~ 50vh) */
@supports (position: sticky) {
  .skin-minerva .home-hero.sticky {
    position: sticky;
    top: 30vh;      /* 대략 화면의 30% 지점에 '고정' */
    z-index: 3;
  }
}

/* (선택) 글자가 너무 붙어 보이면 */
.skin-minerva .home-hero p { margin: .3rem 0 .6rem; }

/* 대문 편집 버튼 */
.skin-minerva .mp-edit { text-align:right; margin:6px 0 12px; }
.skin-minerva .mp-edit a {
  display:inline-block; padding:8px 12px;
  background:#e6e6e6; border:1px solid #cfcfcf; border-radius:10px;
  color:#111 !important; text-decoration:none; font-weight:600;
}
.skin-minerva .mp-edit a:hover { background:#d9d9d9; }