MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (47 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* General typeface. */ | ||
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=IM+Fell+Great+Primer:ital@0;1&display=swap'); | |||
/* | /* Load IM Fell Great Primer for poems */ | ||
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+Great+Primer:ital@0;1&display=swap'); | |||
/* --- Make prose size explicit in the content area (avoids Vector's .875em shrink) --- */ | |||
.skin-vector .mw-parser-output, | |||
.skin-vector-2022 .mw-parser-output, | |||
.mw-parser-output { | |||
font-size: 1.15rem; /* try 1.125–1.2 if you want finer control */ | |||
line-height: 1.75; | |||
} | |||
/* --- Responsive correction for mobile/tablet devices --- */ | |||
@media (max-width: 1024px) { | |||
.mw-parser-output sup, | |||
.mw-parser-output sup.reference, | |||
sup.reference a { | |||
font-size: 0.62rem !important; /* slightly smaller for iPad & phones */ | |||
top: -0.20em !important; /* tiny lift to keep alignment */ | |||
} | |||
} | |||
/* Short Desc Styling */ | |||
#mw-content-subtitle { | |||
font-family: "Alegreya", Georgia, serif; | |||
font-style: italic; | |||
font-size: 1.3rem; | |||
color: #555; | |||
text-align: left; | |||
margin-top: 0.25em; | |||
margin-bottom: 1.25em; | |||
letter-spacing: 0.3px; | |||
padding-left: 0.15em; /* small offset aligns with body text */ | |||
} | |||
/* --- Tablet text tuning for poems --- */ | |||
@media (max-width: 1024px) and (min-width: 600px) { | |||
.mw-parser-output poem, | |||
.mw-parser-output .poem { | |||
font-size: 1.05rem !important; /* roughly +5–7% for tablets */ | |||
line-height: 1.55 !important; /* gives air between lines */ | |||
} | |||
} | |||
/* Keep headings proportionate (optional) */ | |||
.mw-parser-output h1 { font-size: 2rem; } | |||
.mw-parser-output h2 { font-size: 1.6rem; } | |||
.mw-parser-output h3 { font-size: 1.3rem; } | |||
/* --- SITE TITLE (top-left “LitWiki”) --- */ | |||
#p-logo a, | |||
#mw-panel #p-logo a, | |||
.mw-logo-wordmark { | |||
font-family: 'IM Fell Great Primer', serif !important; | |||
font-size: 2em !important; | |||
font-weight: 400; | |||
letter-spacing: 0.02em; | |||
text-transform: none; | |||
} | |||
/* --- MENUS, SIDEBARS, CATEGORIES, NAV ELEMENTS --- */ | |||
#mw-panel, | |||
#mw-panel .portal, | |||
.vector-menu-content-list, | |||
.vector-menu-tabs, | |||
.vector-menu-tabs a, | |||
.vector-menu-content, | |||
.catlinks, | |||
.catlinks a { | |||
font-family: 'Alegreya Sans', sans-serif !important; | |||
font-weight: 500; | |||
} | |||
/* CompFAQ Nav */ | |||
.compfaq-nav { | |||
font-family: "Inter", "Noto Sans", "Helvetica Neue", Arial, sans-serif; | |||
font-size: 0.9rem; | |||
font-weight: 400; | |||
color: #333; | |||
background: transparent; | |||
border: none; | |||
border-top: 1px solid #ddd; | |||
border-bottom: 1px solid #ddd; | |||
padding: 0.4em 0; | |||
margin-bottom: 1em; | |||
text-align: center; | |||
} | |||
.compfaq-nav a { | |||
color: #336699; | |||
text-decoration: none; | |||
margin: 0 0.3em; | |||
} | |||
.compfaq-nav a:hover { | |||
text-decoration: underline; | |||
color: #003d66; | |||
} | |||
/* ===== CompFAQ Search Styling ===== */ | |||
.faq-search { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
gap: 0.5em; | |||
margin: 1em 0 1.5em; | |||
font-family: var(--font-head, "Alegreya Sans SC", system-ui, sans-serif); | |||
} | |||
.faq-search input[type="text"] { | |||
flex: 1 1 300px; | |||
min-width: 220px; | |||
padding: 0.5em 0.7em; | |||
font-size: 1rem; | |||
border: 1px solid #ccc; | |||
border-radius: 6px; | |||
background-color: #fff; | |||
color: #222; | |||
box-shadow: 0 1px 2px rgba(0,0,0,0.05); | |||
} | |||
.faq-search input[type="text"]:focus { | |||
border-color: #006699; | |||
outline: none; | |||
box-shadow: 0 0 4px rgba(0,102,153,0.3); | |||
} | |||
.faq-search input[type="submit"] { | |||
padding: 0.5em 1em; | |||
font-size: 1rem; | |||
font-weight: 600; | |||
border: none; | |||
border-radius: 6px; | |||
color: #fff; | |||
background-color: #006699; | |||
cursor: pointer; | |||
transition: background 0.2s ease-in-out; | |||
} | |||
.faq-search input[type="submit"]:hover { | |||
background-color: #004d73; | |||
} | |||
.faq-search-container { | |||
text-align: center; | |||
} | |||
.compfaq-foot { | |||
font-family: "Alegreya", Georgia, serif; | |||
font-size: 0.95rem; | |||
color: #555; | |||
border-top: 1px solid #ddd; | |||
margin-top: 2.5em; | |||
padding-top: 1em; | |||
line-height: 1.4; | |||
} | |||
.compfaq-foot a { | |||
color: #336699; | |||
text-decoration: none; | |||
} | |||
.compfaq-foot a:hover { | |||
text-decoration: underline; | |||
} | |||
/* --- ADJUST CATEGORY BOXES --- */ | |||
.catlinks { | |||
font-size: 0.95em; | |||
letter-spacing: 0.02em; | |||
} | |||
/* | /* --- TOC & FOOTER --- */ | ||
#toc, | |||
#footer { | |||
font-family: 'Alegreya Sans', sans-serif !important; | |||
} | |||
/* Drop Cap */ | |||
.dropcap { | |||
color: #79716B; | |||
float: left; | |||
font-family: "IM Fell Great Primer", Georgia, "Times New Roman", serif; | |||
font-size: 120px; | |||
font-weight: 400; | |||
line-height: 90px; | |||
padding-top: 10px; | |||
padding-right: 10px; | |||
padding-left: -10px; | |||
padding-bottom: -10px; | |||
} | |||
/* Poem metadata box */ | |||
.poem-meta { | |||
font-family: 'Alegreya Sans', sans-serif; | |||
font-weight: 400; | |||
font-size: 0.9em; | |||
line-height: 1.4; | |||
background-color: #fcfcfa; /* light parchment tone to match IM Fell aesthetic */ | |||
border: 1px solid #ddd; | |||
border-left: 4px solid #777; | |||
color: #333; | |||
padding: 0.6em 1em 0.5em; | |||
margin: 0 auto 1em; | |||
max-width: 28em; | |||
border-radius: 4px; | |||
box-shadow: 0 1px 2px rgba(0,0,0,0.04); | |||
text-align: left; | |||
} | |||
/* Internal text adjustments */ | |||
.poem-meta p { | |||
margin: 0.15em 0; | |||
} | |||
.poem-meta strong { | |||
font-weight: 600; | |||
letter-spacing: 0.03em; | |||
color: #444; | |||
} | |||
/* Full-width breadcrumb banner for poem pages */ | |||
.poem-breadcrumb { | |||
font-family: 'Alegreya Sans', sans-serif; | |||
font-size: 0.9em; | |||
background-color: #fcfcfa; | |||
border-top: 1px solid #ddd; | |||
border-bottom: 1px solid #ddd; | |||
color: #333; | |||
padding: 0.6em 1.2em; | |||
margin: 0 0 1.2em 0; | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
gap: 0.3em; | |||
width: 100%; | |||
box-sizing: border-box; | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); | |||
} | |||
.poem-breadcrumb a { | |||
text-decoration: none; | |||
font-weight: 600; | |||
color: #444; | |||
} | |||
.poem-breadcrumb a:hover { | |||
color: #000; | |||
text-decoration: underline; | |||
} | |||
.poem-breadcrumb .poem-date { | |||
color: #666; | |||
font-style: italic; | |||
margin-left: 0.25em; | |||
} | |||
/* --- Overpass superscripts: final vertical tuning --- */ | |||
.mw-parser-output sup, | |||
.mw-parser-output sup.reference, | |||
sup.reference a { | |||
font-family: "Overpass", Arial, sans-serif !important; | |||
font-size: 0.7rem !important; | |||
line-height: 0 !important; | |||
vertical-align: super !important; | |||
position: relative !important; | |||
top: -0.12em !important; /* lowered slightly from -0.25em */ | |||
font-weight: 400 !important; | |||
letter-spacing: 0 !important; | |||
color: #555 !important; | |||
opacity: 0.95 !important; | |||
} | |||
/* Global typography */ | |||
body, | |||
.mw-body, | |||
.mw-parser-output { | |||
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
font-weight: 400; | |||
font-size: 1.125rem; /* was 1rem */ | |||
line-height: 1.7; /* open it slightly for Alegreya’s tall x-height */ | |||
color: #222; | |||
} | |||
h1, h2, h3, h4, h5, h6 { | |||
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
font-weight: 700; | |||
letter-spacing: -0.01em; | |||
} | |||
/* Poem styling */ | /* Poem styling */ | ||
| Line 28: | Line 310: | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
} | } | ||
| Line 53: | Line 328: | ||
/* Covers some headers */ | /* Covers some headers */ | ||
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5 { | .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5 { | ||
font-family: " | font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
font-weight: 300; | font-weight: 300; | ||
} | } | ||
.firstHeading h1 { | .firstHeading h1 { | ||
font-family: " | font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
font-size: 2.6em; | font-size: 2.6em; | ||
font-weight: 300; | font-weight: 300; | ||