"틀:대문/style.css"의 두 판 사이의 차이
(내용을 " <style> @media (max-width: 600px) { .responsive-left, .responsive-right { width: 100% !important; } } </..."(으)로 바꿈) |
|||
(같은 사용자의 중간 판 하나는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
− | + | /* [[위키백과:대문]], [[위키백과:사용자 모임]] 에 적용되는 css 값입니다. | |
− | + | 이 스크립트를 수정하기 이전에 [[틀:대문/임시2/style.css]]에서 정상적으로 동작하는지 확인해 주세요! */ | |
− | + | ||
− | + | .main-box { | |
− | + | background: #FFF; | |
− | + | border: solid #C8CCD1; | |
− | + | border-radius: 2px; | |
+ | border-width: 1px; | ||
+ | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | ||
+ | padding: 0 0 0.5rem 0; | ||
+ | } | ||
+ | |||
+ | .main-top { | ||
+ | padding: 0 1.5rem 0 0; | ||
+ | align-items: center; | ||
+ | width: 100%; | ||
+ | box-sizing: border-box; | ||
+ | background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg"); | ||
+ | background-position: right; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | .main-top-left { | ||
+ | flex: 3; | ||
+ | background-image: linear-gradient(to right, white 0%, white 33%, rgba(255, 255, 255, 0)); | ||
+ | padding: 1rem 0 1rem 1.5rem; | ||
+ | } | ||
+ | |||
+ | .main-top-left-subtitle { | ||
+ | font-size: 1rem; | ||
+ | margin-top: 0.1em; | ||
+ | } | ||
+ | |||
+ | .main-top-left-subtitle-count { | ||
+ | font-size: 0.95rem; | ||
+ | } | ||
+ | |||
+ | .main-top-right { | ||
+ | flex: 2; | ||
+ | } | ||
+ | |||
+ | .main-top-right-text { | ||
+ | font-size: 1rem; | ||
+ | margin-top: 1em; | ||
+ | margin-bottom: 0; | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | .main-pane { | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .main-pane-left { | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | @media (max-width: 981px) { | ||
+ | .main-pane { | ||
+ | display: block; | ||
+ | } | ||
+ | .main-pane-left { | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | .main-top { | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | .main-top-left { | ||
+ | align-self: flex-start; | ||
+ | background-image: linear-gradient(to right, white 0%, white 66%, rgba(255, 255, 255, 0)); | ||
+ | } | ||
+ | .main-top-left-subtitle { | ||
+ | font-size: 0.8em; | ||
+ | margin-left: 0.2em; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | .main-top-left>p:first-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .main-top-right { | ||
+ | align-self: flex-end; | ||
+ | padding-left: 1rem; | ||
+ | } | ||
+ | .main-top-right-text { | ||
+ | font-size: 0.9rem; | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 1rem; | ||
+ | } | ||
+ | } |
2024년 6월 6일 (목) 16:53 기준 최신판
/* 위키백과:대문, 위키백과:사용자 모임 에 적용되는 css 값입니다.
이 스크립트를 수정하기 이전에 틀:대문/임시2/style.css에서 정상적으로 동작하는지 확인해 주세요! */
.main-box { background: #FFF; border: solid #C8CCD1; border-radius: 2px; border-width: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); padding: 0 0 0.5rem 0; }
.main-top { padding: 0 1.5rem 0 0; align-items: center; width: 100%; box-sizing: border-box; background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg"); background-position: right; background-repeat: no-repeat; }
.main-top-left { flex: 3; background-image: linear-gradient(to right, white 0%, white 33%, rgba(255, 255, 255, 0)); padding: 1rem 0 1rem 1.5rem; }
.main-top-left-subtitle { font-size: 1rem; margin-top: 0.1em; }
.main-top-left-subtitle-count { font-size: 0.95rem; }
.main-top-right { flex: 2; }
.main-top-right-text { font-size: 1rem; margin-top: 1em; margin-bottom: 0; text-align: right; }
.main-pane { display: flex; }
.main-pane-left { margin-right: 20px; } @media (max-width: 981px) { .main-pane { display: block; } .main-pane-left { margin-right: 0; } .main-top { flex-direction: column; } .main-top-left { align-self: flex-start; background-image: linear-gradient(to right, white 0%, white 66%, rgba(255, 255, 255, 0)); } .main-top-left-subtitle { font-size: 0.8em; margin-left: 0.2em; margin-top: 0; } .main-top-left>p:first-child { margin-bottom: 0; } .main-top-right { align-self: flex-end; padding-left: 1rem; } .main-top-right-text { font-size: 0.9rem; margin-top: 0; margin-bottom: 1rem; } }