MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
 
(61 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Serif Font for body text. */
/* General typeface. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@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');


/* Sans-serif for headlines. */
/* Load IM Fell Great Primer for poems */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+Great+Primer:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;1,300&display=swap');


/* Covers most text */  
/* --- Make prose size explicit in the content area (avoids Vector's .875em shrink) --- */
body {
.skin-vector .mw-parser-output,
     font-family: "Newsreader", serif;
.skin-vector-2022 .mw-parser-output,
     font-size: 1.3em;
.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;
     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 */
div.poem,
pre.poem {
  font-family: "IM Fell Great Primer", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;      /* slightly larger than default for readability */
  line-height: 1.6;        /* add breathing room */
  letter-spacing: 0.015em; /* improves flow of this rugged face */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 1.25em 0;
  color: #222;
}
/* Optional: center poems for visual isolation */
div.poem {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}
}


/* Bring the text to 14px */
/* Bring the text to 14px */
#mw-content-text {
#mw-content-text b {
font-size: 1.2em;
font-weight: 600;
}
}


/* Tweaks to links */
/* Tweaks to links */
#bodyContent a {
#bodyContent a {
font-weight: 700;
font-weight: 600;
}
}


Line 28: Line 327:


/* Covers some headers */  
/* Covers some headers */  
.mw-body h1, .mw-body h2, .mw-body h4, .mw-body h5 {
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5 {
     font-family: "Kanit", serif;
     font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: 300;
     font-weight: 300;
}
}


.firstHeading h1 {
.firstHeading h1 {
font-family: "Kanit", serif;
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.6em;
font-size: 2.6em;
font-weight: 300;
font-weight: 300;
}
/* System items font. */
.catlinks, #mw-navigation, #p-personal {
font-family: "Kanit", serif;
}
}