MediaWiki:Common.css: Difference between revisions
m Increased dc font weight. |
mNo edit summary |
||
| (24 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/ | @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500;1,700;1,800&family=Alegreya:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Overpass+Mono&display=swap'); | ||
/* Covers most text */ | /* Covers most text */ | ||
| Line 7: | Line 5: | ||
font-family: "Alegreya Sans", serif; | font-family: "Alegreya Sans", serif; | ||
font-size: 1.3em; | font-size: 1.3em; | ||
font-weight: 400; | |||
} | } | ||
| Line 17: | Line 16: | ||
#bodyContent a { | #bodyContent a { | ||
font-weight: 500; | font-weight: 500; | ||
} | |||
/* Front Page Styling */ | |||
.pm-box-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1.5em; | |||
margin-top: 1em; | |||
justify-content: flex-start; /* ← important change */ | |||
} | |||
.pm-wide-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1.5em; | |||
justify-content: space-between; | |||
margin-top: 2em; | |||
} | |||
.pm-wide-grid .pm-box { | |||
flex: 1 1 calc(33.333% - 1em); /* 3 in a row */ | |||
max-width: 100%; | |||
} | |||
@media (max-width: 800px) { | |||
.pm-wide-grid .pm-box { | |||
flex: 1 1 100%; /* stack on narrow screens */ | |||
} | |||
} | |||
.pm-box { | |||
flex: 1 1 300px; | |||
max-width: 400px; | |||
background: #f9f7f3; | |||
padding: 1.2em 1.5em; | |||
border: 1px solid #e0e0e0; | |||
border-radius: 8px; | |||
box-shadow: 0 2px 6px rgba(0,0,0,0.04); | |||
transition: box-shadow 0.3s ease; | |||
} | |||
.pm-full { | |||
flex-basis: 100%; | |||
max-width: none; | |||
} | |||
.pm-emphasis { | |||
background-color: #fef6e9; | |||
border-left: 5px solid #d88c3d; | |||
} | |||
.pm-blue { | |||
background-color: #eef4f9; | |||
border-left: 5px solid #4a6fa5; /* Slate Blue accent */ | |||
} | |||
.pm-gold { | |||
background-color: #fdf5e6; | |||
border-left: 5px solid #b48a52; | |||
} | |||
.pm-box:hover { | |||
box-shadow: 0 4px 10px rgba(0,0,0,0.08); | |||
} | |||
.pm-box-label { | |||
font-weight: 600; | |||
font-size: 1.2em; | |||
margin-bottom: 0.5em; | |||
color: #2c3e50; | |||
border-bottom: 1px solid #ccc; | |||
padding-bottom: 0.25em; | |||
} | |||
.pm-highlight { | |||
border-color: #4a6fa5; | |||
background-color: #eef2f7; | |||
} | |||
.pm-news-list { | |||
list-style: none; | |||
padding-left: 0; | |||
margin-top: 1em; | |||
} | |||
.pm-news-list li { | |||
margin-bottom: 1em; | |||
padding-left: 1em; | |||
border-left: 3px solid #4a6fa5; | |||
position: relative; | |||
} | |||
.pm-news-date { | |||
font-weight: bold; | |||
color: #4a6fa5; | |||
display: block; | |||
margin-bottom: 0.25em; | |||
} | |||
.pm-site-intro { | |||
text-align: center; | |||
margin-bottom: 2em; | |||
} | |||
.pm-site-intro h2 { | |||
font-size: 1.8em; | |||
color: #2c3e50; | |||
margin-bottom: 0.25em; | |||
} | |||
/* Works & Days Ad */ | |||
.works-days-callout { | |||
background-color: #eef4f9; /* same pale blue */ | |||
border-left: 5px solid #4a6fa5; | |||
margin-top: 3em; | |||
} | |||
.works-days-callout .pm-box-label { | |||
font-size: 1.3em; | |||
color: #2c3e50; | |||
} | |||
.works-days-callout em { | |||
font-style: italic; | |||
font-weight: bold; | |||
} | } | ||
/* Covers some headers */ | /* Covers some headers */ | ||
.mw-body h1, .mw-body h2, .mw-body h3 { | .mw-body h1, .mw-body h2, .mw-body h4, .mw-body h5 { | ||
font-family: "Alegreya", sans-serif; | font-family: "Alegreya", serif; | ||
font-weight: 500; | |||
} | |||
.firstHeading h1 { | |||
font-family: "Alegreya", serif; | |||
font-size: 2.6em; | |||
font-weight: 700; | |||
} | |||
.mw-body h2 { | |||
font-size: 1.8em; | |||
} | |||
.mw-body h3 { | |||
font-family: "Alegreya Sans SC", sans-serif; | |||
font-size: 1.6em; | |||
font-weight: 500; | |||
} | |||
.mw-body h4 { | |||
font-size: 1.4em; | |||
} | |||
.mw-body h5 { | |||
font-size: 1.2em; | |||
} | } | ||
| Line 27: | Line 176: | ||
code, pre, samp, kbd, tt, .example-mono, .userlinks-username, .monospaced, .keyboard-key, .button, .plaincode { | code, pre, samp, kbd, tt, .example-mono, .userlinks-username, .monospaced, .keyboard-key, .button, .plaincode { | ||
font-family: "Overpass Mono", monospace !important; | font-family: "Overpass Mono", monospace !important; | ||
} | |||
/* Added <del> and <ins> formatting for Lipton's Journal */ | |||
:root { | |||
--del-color: #ff92bf; | |||
--ins-color: #ddff92; | |||
} | |||
del { | |||
--color: var(--del-color, red); | |||
text-decoration: none; | |||
padding: 0 .5em; | |||
background-repeat: no-repeat; | |||
background-image: | |||
linear-gradient(to left, rgba(255, 255, 255, .5), transparent), | |||
linear-gradient(2deg, var(--color) 50%, transparent 50%), | |||
linear-gradient(-.9deg, var(--color) 50%, transparent 50%), | |||
linear-gradient(-60deg, var(--color) 50%, transparent 50%), | |||
linear-gradient(120deg, var(--color) 50%, transparent 50%); | |||
background-size: | |||
30% 1.5px, | |||
calc(100% - 20px) 10px, | |||
calc(100% - 20px) 10px, | |||
10px 10px, | |||
8px 8px; | |||
background-position: | |||
100% calc(50% + 2px), | |||
center center, | |||
center center, | |||
2px 50%, | |||
calc(100% - 3px) calc(50% + 1px); | |||
} | |||
ins { | |||
background: var(--ins-color, green); | |||
text-decoration: none; | |||
} | } | ||
| Line 56: | Line 243: | ||
/* Drop cap & Start for Template:Dc */ | /* Drop cap & Start for Template:Dc */ | ||
.dropcap { | .dropcap { | ||
font-family: "Alegreya", sans-serif; | |||
padding-right: 5px; | |||
float : left; | float : left; | ||
font-size : | font-size : 4em; | ||
line-height : 0.5; | line-height : 0.5; | ||
margin : 0.205em 0.153em 0 0; | margin : 0.205em 0.153em 0 0; | ||