pronounmail wiki

Template:Spec.css: Difference between revisions

← Older edit
No edit summary
Undo revision 4738 by Leah (talk)
Tag: Undo
 
(106 intermediate revisions by 2 users not shown)
Line 1: Line 1:
:root {
--inner-width: 56rem;
}
#content {
#content {
  font-family: 'Besley', serif !important;
font-family: 'Besley', serif !important;
counter-reset: section;
}
}
#firstHeading {
#firstHeading {
font-weight: 400;
font-weight: 800;
text-align: center;
font-size: 2.5rem;
font-stretch: 75%;
font-style: italic;
font-size: clamp(2rem, 12vw, 12rem);
font-family: 'Besley', serif !important;
font-family: 'Besley', serif !important;
color: var(--colour-grey-800);
color: var(--colour-grey-950);
margin: auto;
margin-top: 4rem;
margin-bottom: .25em;
margin-bottom: .25em;
border: none;
border: none;
max-width: var(--inner-width);
width: 100%;
     &:has(+ #bodyContent .lede) {
     &:has(+ #bodyContent .lede) {
Line 18: Line 25:
&::after {
&::after {
display: block;
font-size: 0.8rem;
text-transform: uppercase;
font-stretch: 100%;
font-style: normal;
font-weight: 500;
font-weight: 500;
margin-top: .5rem;
color: var(--colour-grey-400);
letter-spacing: 9%;
color: var(--colour-grey-600);
}
}
}
}
Line 36: Line 36:


#mw-content-text {
#mw-content-text {
  font-family: 'Besley', serif !important;
font-family: 'Besley', serif !important;
  max-width: 56rem;
max-width: var(--inner-width);
  margin: auto;
margin: auto;
  color: var(--colour-grey-800);
color: var(--colour-grey-800);
margin-bottom: 4rem;
}
}
span.required, .required code {
span.required, .required code {
color: var(--colour-bubblegum-700);
color: var(--colour-bubblegum-700);
}
}


span.optional, .optional code {
span.optional, .optional code {
color: var(--colour-ectoplasm-700);
color: var(--colour-ectoplasm-700);
}
}


span.multiple, .multiple code {
span.multiple, .multiple code {
color: var(--colour-yellow-700);
color: var(--colour-yellow-700);
}
 
span.symbol {
font-family: 'Noto Sans Symbols 2';
}
}


ul {
ul {
  list-style-type: "❊ ";
list-style-type: "❊ ";
  list-style-image: none;
list-style-image: none;
}
 
.must {
color: var(--colour-bubblegum-700); font-weight: bold;
}
 
.mustnt {
color: var(--colour-aubergine-700); font-weight: bold;
}
}


.must { color: var(--colour-bubblegum-700); font-weight: bold; }
.should {
.mustnt { color: var(--colour-aubergine-700); font-weight: bold; }
color: var(--colour-orange-700); font-weight: bold;
.should { color: var(--colour-orange-700); font-weight: bold; }
}
.shouldnt { color: var(--colour-weezer-700); font-weight: bold; }
 
.may { color: var(--colour-ectoplasm-700); font-weight: bold; }
.shouldnt {
color: var(--colour-weezer-700); font-weight: bold;
}
 
.may {
color: var(--colour-ectoplasm-700); font-weight: bold;
}


#toc {
#toc {
  display: block;
display: block;
  max-width: 24rem;
max-width: 24rem;
  margin: auto;
background: transparent;
  background: transparent;
border: none;
  border: none;
color: var(--colour-grey-500);
  color: var(--colour-grey-500);
float: right;
margin-left: 1rem;
}
}
.toctitle {
.toctitle {
  margin-bottom: .5rem;
margin-bottom: .5rem;
  display: grid;
display: flex;
  grid-template-columns: 1fr 2fr 1fr;
justify-content: space-between;
  justify-content: center;
align-items: baseline;
  align-items: baseline;
}
}
.toctogglespan {
.toctogglespan {
  grid-column: 3;
grid-column: 3;
  color: var(--colour-grey-300);
color: var(--colour-grey-300);
  label { color: var(--colour-grey-500); }
label {
  label:hover { color: var(--colour-grey-700); }
color: var(--colour-grey-500);
}
label:hover {
color: var(--colour-grey-700);
}
}
}
#mw-toc-heading {
 
  color: var(--colour-grey-600);
#content h2#mw-toc-heading {
  font-family: inherit;
color: var(--colour-grey-600);
  text-transform: uppercase;
font-family: inherit;
  font-weight: 500;
text-transform: uppercase;
  letter-spacing: 7%;
font-weight: 500;
  font-size: 1rem;
letter-spacing: 7%;
  grid-column: 2;
font-size: .85rem;
margin-top: 0;
margin-right: 0.5rem;
}
}


#content :is(h1, h2, h3, h4, h5, h6) {
#content :is(h1, h2, h3, h4, h5, h6, span.mw-editsection) {
font-family: inherit;
font-family: inherit;
}
}


#content h2 {
#content h2 {
position: relative;
border-bottom: 0;
border-bottom: 0;
font-size: 1.75em;
font-size: 1.75em;
font-weight: 500;
font-weight: 500;
}
h2 .mw-headline::before {
position: absolute;
right: 100%;
top: 0.175rem;
display: grid;
align-content: center;
justify-content: center;
aspect-ratio: 1 / 1;
width: auto;
height: 100%;
white-space: nowrap;
counter-increment: section;
content: counter(section);
font-size: 1rem;
color: var(--colour-grey-700);
background-color: var(--colour-grey-100);
font-weight: 600;
margin-right: .5rem;
}
#content :is(pre, code) {
font-family: "Drafting", monospace !important;
}
}


#content a {
#content a {
  font-variant: small-caps;
font-variant: small-caps;
  letter-spacing: 5%;
letter-spacing: 5%;
color: var(--colour-denim-800);
}
 
#content a:visited {
    color: var(--colour-aubergine-800);
}
}


.lede {
.lede {
  font-size: 1.1rem;
font-size: 1.1rem;
  color: var(--colour-grey-700);
color: var(--colour-grey-700);
  text-align: center !important;
text-align: left !important;
  max-width: 36rem;
max-width: 36rem;
  margin-left: auto !important;
margin-right: auto !important;
  margin-right: auto !important;
margin-top: 0;
  margin-top: 0;
margin-bottom: .5rem;
  margin-bottom: .5rem;
}
 
s, .todo {
color: var(--colour-grey-500);
}
 
.todo::before {
content: "❊ todo: ";
}
 
.mw-highlight .nt {
color: var(--colour-ectoplasm-700);
}
 
.mw-highlight .na {
color: var(--colour-olive-700);
}
 
.mw-highlight .s {
color: var(--colour-red-700);
}
 
.mw-highlight .cm {
color: var(--colour-weezer-700);
}
 
pre, code, .mw-code {
    color: var(--colour-grey-800);
    background-color: var(--colour-grey-50);
    border: 1px solid var(--colour-grey-200);
}
 
code {
    white-space: nowrap;
}
 
.wikitable {
color: var(--colour-grey-800);
background-color: var(--colour-grey-50);
& > tr > th, > * > tr > th {
color: var(--colour-grey-800);
background-color: var(--colour-grey-100);
}
& > tr > th, > tr > td, > * > tr > th, > * > tr > td {
border: 1px solid var(--colour-grey-300);
& > code, > * > code {
background-color: white;
}
}
}
 
.tocnumber, .toctext {
    font-variant-numeric: oldstyle-nums;
}
}
Retrieved from "https://wiki.pronounmail.com/wiki/Template:Spec.css"