MediaWiki: Common.css: Difference between revisions
From Psalms: Layer by Layer
James.Harris (talk | contribs) mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Also see ../customizations/custom.* on the filesystem */ | |||
/* =================================== */ | |||
/* === ALL PAGES, ALL SKINS */ | |||
/* =================================== */ | |||
/* Corporate font Lora (used for headings) */ | |||
@import url('//fonts.googleapis.com/css2?family=Lora:wght@400..700'); | |||
/* unicode-range specific fonts for Hebrew and Greek. | |||
See https://j.hn/using-css-to-display-fonts-for-greek-and-hebrew-but-not-english/ | |||
https://developers.google.com/fonts/docs/css2 | |||
https://www.onlinewebfonts.com/download/0a08163287a1fa0aceb8e98c2c931bc5 | |||
*/ | |||
/* Hebrew font */ | |||
@font-face { | |||
font-family: "SBL Hebrew"; | |||
unicode-range: U+0590-05FF; | |||
src: url("/customizations/SBL-Hebrew/SBL-Hebrew.eot"); | |||
src: url("/customizations/SBL-Hebrew/SBL-Hebrew.eot?#iefix") format("embedded-opentype"), | |||
url("/customizations/SBL-Hebrew/SBL-Hebrew.woff2") format("woff2"), | |||
url("/customizations/SBL-Hebrew/SBL-Hebrew.woff") format("woff"), | |||
url("/customizations/SBL-Hebrew/SBL-Hebrew.ttf") format("truetype"), | |||
url("/customizations/SBL-Hebrew/SBL-Hebrew.svg#SBL Hebrew") format("svg"); | |||
} | |||
/* Greek font */ | |||
@font-face { | |||
font-family: "Gentium Plus"; /* TODO: subset the font to reduce size */ | |||
unicode-range: U+0370-03FF, U+1F00-1FFF; | |||
src: url("/customizations/Gentium-Plus/Gentium-Plus.eot"); | |||
src: url("/customizations/Gentium-Plus/Gentium-Plus.eot?#iefix") format("embedded-opentype"), | |||
url("/customizations/Gentium-Plus/Gentium-Plus.woff2") format("woff2"), | |||
url("/customizations/Gentium-Plus/Gentium-Plus.woff") format("woff"), | |||
url("/customizations/Gentium-Plus/Gentium-Plus.ttf") format("truetype"), | |||
url("/customizations/Gentium-Plus/Gentium-Plus.svg#Gentium Plus") format("svg"); | |||
} | |||
/* Simple RTL text direction changes. See https://css-tricks.com/almanac/properties/d/direction/ */ | |||
*[dir="ltr"] { direction: ltr; unicode-bidi: embed; } | |||
*[dir="rtl"] { direction: rtl; unicode-bidi: embed; text-align: right; } | |||
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; } | |||
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; text-align: right; } | |||
span[dir] { | |||
unicode-bidi: bidi-override; | |||
} | |||
body { | |||
font-size: 15px; /* default for tweeki skin is 14px */ | |||
font-family: "SBL Hebrew", "Gentium Plus", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |||
} | |||
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { | |||
font-family: "Lora", serif; | |||
} | |||
.navbar-brand img { | |||
height: 22px; | |||
} | |||
/* these were used on timeless skin. still relevant with tweeki? */ | |||
.list-I li { | .list-I li { | ||
list-style-type: upper-roman; | list-style-type: upper-roman; | ||
Line 19: | Line 81: | ||
margin-left: 120px; | margin-left: 120px; | ||
} | } | ||
/* Enable PageForms spreadsheet-style grid to autogrow */ | /* Enable PageForms spreadsheet-style grid to autogrow */ | ||
.jsgrid { | .jsgrid { | ||
Line 29: | Line 90: | ||
.jsgrid-grid-table { height: unset; overflow: auto; | .jsgrid-grid-table { height: unset; overflow: auto; | ||
} | } | ||
.outline > li { | .outline > li { | ||
list-style-type: upper-roman; | list-style-type: upper-roman; | ||
Line 38: | Line 98: | ||
} | } | ||
/* =================================== */ | |||
/* === STYLES FOR SPECIFIC PAGES === */ | |||
/* =================================== */ | |||
/* === Page: Welcome === */ | |||
/* Nav boxes linking to other CDBR sites */ | /* Nav boxes linking to other CDBR sites */ | ||
.page-welcome .nav-boxes { | .page-welcome .nav-boxes { | ||
Line 68: | Line 133: | ||
height: auto; | height: auto; | ||
} | } | ||
/* Index of psalms */ | /* Index of psalms */ | ||
.page-welcome .index { | .page-welcome .index { |
Revision as of 08:38, 20 March 2021
/* CSS placed here will be applied to all skins */ /* Also see ../customizations/custom.* on the filesystem */ /* =================================== */ /* === ALL PAGES, ALL SKINS */ /* =================================== */ /* Corporate font Lora (used for headings) */ @import url('//fonts.googleapis.com/css2?family=Lora:wght@400..700'); /* unicode-range specific fonts for Hebrew and Greek. See https://j.hn/using-css-to-display-fonts-for-greek-and-hebrew-but-not-english/ https://developers.google.com/fonts/docs/css2 https://www.onlinewebfonts.com/download/0a08163287a1fa0aceb8e98c2c931bc5 */ /* Hebrew font */ @font-face { font-family: "SBL Hebrew"; unicode-range: U+0590-05FF; src: url("/customizations/SBL-Hebrew/SBL-Hebrew.eot"); src: url("/customizations/SBL-Hebrew/SBL-Hebrew.eot?#iefix") format("embedded-opentype"), url("/customizations/SBL-Hebrew/SBL-Hebrew.woff2") format("woff2"), url("/customizations/SBL-Hebrew/SBL-Hebrew.woff") format("woff"), url("/customizations/SBL-Hebrew/SBL-Hebrew.ttf") format("truetype"), url("/customizations/SBL-Hebrew/SBL-Hebrew.svg#SBL Hebrew") format("svg"); } /* Greek font */ @font-face { font-family: "Gentium Plus"; /* TODO: subset the font to reduce size */ unicode-range: U+0370-03FF, U+1F00-1FFF; src: url("/customizations/Gentium-Plus/Gentium-Plus.eot"); src: url("/customizations/Gentium-Plus/Gentium-Plus.eot?#iefix") format("embedded-opentype"), url("/customizations/Gentium-Plus/Gentium-Plus.woff2") format("woff2"), url("/customizations/Gentium-Plus/Gentium-Plus.woff") format("woff"), url("/customizations/Gentium-Plus/Gentium-Plus.ttf") format("truetype"), url("/customizations/Gentium-Plus/Gentium-Plus.svg#Gentium Plus") format("svg"); } /* Simple RTL text direction changes. See https://css-tricks.com/almanac/properties/d/direction/ */ *[dir="ltr"] { direction: ltr; unicode-bidi: embed; } *[dir="rtl"] { direction: rtl; unicode-bidi: embed; text-align: right; } bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; } bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; text-align: right; } span[dir] { unicode-bidi: bidi-override; } body { font-size: 15px; /* default for tweeki skin is 14px */ font-family: "SBL Hebrew", "Gentium Plus", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: "Lora", serif; } .navbar-brand img { height: 22px; } /* these were used on timeless skin. still relevant with tweeki? */ .list-I li { list-style-type: upper-roman; } .list-A li { list-style-type: upper-alpha; margin-left: 40px; } .list-1 li { list-style-type: decimal; margin-left: 80px; } .list-a li { list-style-type: lower-alpha; margin-left: 120px; } /* Enable PageForms spreadsheet-style grid to autogrow */ .jsgrid { height: unset !important; overflow: auto; } .jsgrid-grid-body { height: unset; overflow: auto; } .jsgrid-grid-table { height: unset; overflow: auto; } .outline > li { list-style-type: upper-roman; } .outline > li > li { list-style-type: upper-alpha; margin-left: 40px; } /* =================================== */ /* === STYLES FOR SPECIFIC PAGES === */ /* =================================== */ /* === Page: Welcome === */ /* Nav boxes linking to other CDBR sites */ .page-welcome .nav-boxes { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } .page-welcome .nav-boxes .nav-box { flex-grow: 1; display: flex; align-items: flex-end; justify-content: center; padding: 10px; } .page-welcome .nav-boxes .nav-box:nth-child(even) { background: #E7F9F1; } .page-welcome .nav-boxes .nav-box p { display: flex; flex-direction: column; text-align: center; } .page-welcome .nav-boxes .nav-box img { max-width: 100%; height: auto; } /* Index of psalms */ .page-welcome .index { display: flex; flex-wrap: wrap; justify-content: space-between; } .page-welcome .index .index-item { width: 1.7em; font-size: 2em; text-align: right; padding: 0 .2em; } .page-welcome .index .link-deemphasize a { color: silver; }