MediaWiki:Common.css
From Psalms: Layer by Layer
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */ /* Also see ../customizations/custom.* on the filesystem */ /* =================================== */ /* === ALL PAGES, ALL SKINS */ /* =================================== */ /* See wgHooks for loading google fonts in the head block */ /* Hebrew font */ @font-face { font-family: "SBL Hebrew"; unicode-range: U+0590-05FF; src: url("/customizations/SBL-Hebrew/subset-hebrew/SBL-Hebrew.woff2") format("woff2"), url("/customizations/SBL-Hebrew/subset-hebrew/SBL-Hebrew.woff") format("woff"); font-display: swap; } /* Greek font */ @font-face { font-family: "Gentium Plus"; unicode-range: U+0370-03FF, U+1F00-1FFF; src: url("/customizations/Gentium-Plus/subset-greek/GentiumPlus-Regular.woff2") format("woff2"), url("/customizations/Gentium-Plus/subset-greek/GentiumPlus-Regular.woff") format("woff"); font-display: swap;; } /* 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; } /* === CSS Variables === */ :root { /* Font families */ --font-sans: "SBL Hebrew", "Gentium Plus", "Open Sans", "Segoe UI", "Helvetica Neue", "Roboto", Arial, sans-serif; --font-serif: "SBL Hebrew", "Gentium Plus", "Lora", serif; /* Scriptura Brand Colors */ --color-brand-orange: #de835e; /* warm clay orange */ --color-brand-red1: #9a393b; /* rich red */ --color-brand-red: #9a393b; /* alias for brand-red1 */ --color-brand-red2: #7d2b2d; /* deeper red */ --color-brand-red-dark: #7d2b2d; /* alias for brand-red2 */ --color-brand-mustard1: #f2c256; /* golden mustard */ --color-brand-mustard: #f2c256; /* alias for brand-mustard1 */ --color-brand-mustard2: #ffd85c; /* sunny mustard */ --color-brand-mustard-light: #ffd85c; /* alias for brand-mustard2 */ --color-grand-green: #28615e; /* deep forest green */ --color-brand-blue: #3eb9cf; /* bright cyan-blue */ --color-brand-sand: #f4eadb; /* light parchment beige */ --color-brand-dark-gray: #382c34; /* very dark gray with warm brown tint */ --color-brand-gray-dark: #382c34; /* alias for brand-dark-gray */ /* Brand Color Variations */ --color-red-light: #ba6d72; /* softer version of brand-red */ --color-sand-light: #f8f3eb; /* lighter version of brand-sand */ --color-sand-lighter: #fbf9f4; /* even lighter version of brand-sand */ --color-sand-lightest: #fdfcf8; /* near white version of brand-sand */ --color-gray: #7a6f73; /* muted version of brand-dark-gray, similar to #777 */ /* Semantic Color Assignments */ --color-text-main: var(--color-brand-gray-dark); /* Main body text – dark gray with warm tint */ --color-text-muted: var(--color-gray); /* Muted/subtext – soft, desaturated gray */ --color-heading-main: var(--color-brand-red); /* Primary headings – rich red */ --color-heading-sub: var(--color-brand-blue); /* Subheadings – bright cyan-blue */ --color-link-default: var(--color-red-light); /* Default links – softer red tone */ --color-link-hover: var(--color-brand-red-dark); /* Link hover – deeper red for emphasis */ --color-link-new: var(--color-brand-gray-dark); /* Nonexistent page links ('redlink') – fallback to main text tone */ --color-site-notice: var(--color-brand-mustard-light); /* Site notice background – sunny mustard */ /* Legend Color Assignments */ --color-legend-completed: var(--color-brand-red1); --color-legend-inprogress: var(--color-brand-orange); --color-legend-planning: var(--color-brand-sand); } body { font-family: var(--font-sans); font-size: 16px; /* default for tweeki skin is 14px */ line-height: 1.6; background-color: var(--color-sand-lightest); background-color: var(--white); color: var(--color-brand-gray-dark); } /* Headings */ h1, .h1 { font-family: var(--font-serif); font-size: 3.0rem; font-weight: 600; color: var(--color-brand-red); letter-spacing: 0em; word-spacing: 0em; margin-top: 3.2rem; margin-bottom: 1.2rem; } #bodyContent h1:not(:first-of-type):before, #bodyContent .h1:not(:first-of-type):before { display: block; content: ""; padding: 2rem 0 0 !important; border-top: 1px solid #ddd; height: 1px; width: 100%; } #bodyContent h1:first-of-type { margin-top: 2.0rem; } h2, .h2 { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 600; color: var(--color-brand-red); letter-spacing: 0.01em; word-spacing: 0.01em; margin-top: 2.5rem; margin-bottom: 1.0rem; } h3, .h3 { font-family: var(--font-serif); font-size: 1.5rem; font-size: 1.7rem; font-weight: 600; color: var(--color-brand-gray-dark); letter-spacing: 0.015em; word-spacing: 0.02em; margin-top: 2.0rem; margin-bottom: 0.75rem; } h4, .h4 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--color-brand-blue); letter-spacing: 0.03em; word-spacing: 0.03em; margin-top: 1.6rem; margin-bottom: 0.6rem; text-transform: uppercase; } h5, .h5 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--color-brand-gray-dark); letter-spacing: 0.01em; word-spacing: 0.02em; margin-top: 1.3rem; margin-bottom: 0.54em; } h6, .h6 { font-family: var(--font-serif); font-size: 0.9rem; font-weight: 600; color: var(--color-brand-blue); letter-spacing: 0.02em; word-spacing: 0.02em; margin-top: 1.0rem; margin-bottom: 0.3rem; text-transform: uppercase; } /* Reduce top margin between any two stacked headings */ h1 + h2, h1 + h3, h1 + h4, h2 + h3, h2 + h4, h3 + h4, h3 + h5, h4 + h5, h5 + h6 { margin-top: 0.5rem; } .firstHeading, .tweekiFirstHeading { font-weight: 600; letter-spacing: 0em; color: var(--color-brand-gray-dark); } h1.firstHeading, h1.tweekiFirstHeading { margin-top: 0; } h1 .heHeading { padding-inline: 1%; } /* Hebrew specific headings and text */ .heHeading { font-size: 115%; line-height: 120%; padding-inline: 0.25%; letter-spacing: -1%; word-spacing: 50%; direction: rtl; unicode-bidi: isolate; display: inline-block; /* Needed for padding to work on inline headings */ overflow: visible; text-transform: none; } .he { font-size: 120%; line-height: 125%; /* a rough calculation of a browser's line-height:normal value of ~1.2 applied as follows: ~1.2 × 1.25 = 1.5, which is the line-height for the entire page */ padding-inline: 0.2%; letter-spacing: 1%; word-spacing: 50%; text-transform: none; vertical-align: baseline; direction: rtl; unicode-bidi: isolate; display: inline; overflow: visible; text-transform: none; } .lead { font-family: var(--font-serif); color:#000000; } .lead b, .lead strong { font-weight: bold; } #bodyContent #contentSub { margin-left: 0; } #siteNotice { background-color: var(--color-brand-mustard-light); } #siteNotice h1 { margin-top: 0; color: #000; } #tweekiTOC #toctitle h2, #tweekiTOC .toctitle h2 { font-family: var(--font-sans); font-weight: 600; color: var(--color-gray); margin-bottom: 0.2rem; } tweekiTOC #toctitle h2 a, #tweekiTOC .toctitle h2 a { font-weight: 600; color: var(--color-gray); } /* collapse completely empty <p> tags and <p><br></p> tags */ p:empty:not(:focus), p > br:only-child:not(:focus) { display: none; } /* navbar adjustments */ #mw-navigation { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .bg-light { background-color: var(--color-sand-light) !important; } #searchInput { min-width: 255px; font-size: 0.9rem; } /* for images that exceed the page width, put a <div class="img-fluid"> around them */ .responsive-img img { max-width: 100%; height: auto; } .navbar-brand img { height: 30px; margin-top: 0; } header .navbar-nav .nav-item { padding-right: 10px; } footer#footer { padding-top: 0; padding-bottom: 0; } footer#footer #n-login-ext { -webkit-appearance: none; } /* Link styles */ a, a:visited, #content a, #content a:visited { color: var(--color-link-default); } a:hover, a:focus, #content a:hover, #content a:focus { color: var(--color-brand-red); text-decoration: underline; } a.external, a.external:visited, #content a.external, #content a.external:visited { color: var(--color-link-default) !important; } a.external:hover, a.external:focus, #content a.external:hover, #content a.external:focus { color: var(--color-brand-red) !important; } a.new, a.new:visited, a.new:hover, a.new:focus, #content a.new, #content a.new:visited, #content a.new:hover, #content a.new:focus { /* class automatically assigned for links to pages that do not yet exist */ color: var(--color-brand-gray-dark); } /* for MsUpload */ #msupload-dropzone, #msupload-bottom { height: auto; } /* remove excess and irregular gutters to get more usable display area at every screen size */ /* for bootstrap 4 tweeki skin */ #content.mw-body { padding-left: 0; padding-right: 0; } @media (min-width: 576px) { nav#mw-navigation > div.container { padding-left: 15px; padding-right: 15px; } } /* hide sidebsar-right on small screens rather than displaying at the bottom of the screen */ div#sidebar-right { display: none; } @media (min-width: 768px) { /* Show sidebar on md (≥768px) and larger */ div#sidebar-right { display: block; } } /* glyphicons are a tad tall and mess up vertical spacing, especially in the EDIT split dropdown button group */ #sidebar-right > .btn-block > a > .glyphicon { line-height: 0.9; } /* When editing a page, stop sidebar getting in the way of SMW Form edit tools by shortening the sidebar */ #contentwrapper.editable #sidebar-right { height: 50px; } /* Accordion styling */ .accordion { margin: 0 0 1.6em 1.6em; } .card { background-color: unset; border: 0; padding: 0; } .card-header { padding: 0; background-color: unset; border-bottom: 0; } .card-header h2 { margin-top: 0; font-family: var(--font-sans); } .card-header .btn { padding: 0; } .card-body { padding: 0; } .card-body pre { margin-bottom: 0; } .user-show, .editor-show { display: none; } /* 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; } .wikitable { width:100% } /* === DJR PROPOSED EXPLANATION BOX === */ /* Main explainer block */ .explainer { display: block; transition: height 0.35s ease; min-height: 1px; margin-bottom: 1rem; /* consistent spacing below any explainer */ } /* Hide inner content when collapsed, prevent layout shifts */ .explainer:not(.show) .explainer-inner { display: none; } /* Inner content styling */ .explainer-inner { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.4; } /* FA icon for explainer, tightly nestled with heading */ .explainer-icon { font-size: 0.4em; vertical-align: super; color: var(--color-link-default); margin-left: 0.25em; /* slight breathing room */ white-space: nowrap; } /* =================================== */ /* === STYLES FOR SPECIFIC PAGES === */ /* =================================== */ /* === Page: Welcome === */ /* Nav boxes linking to other Scriptura 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-top: 1rem; padding-bottom: 1rem; } .page-welcome .nav-boxes .nav-box:nth-child(even) { background: #FBF9F7; } .page-welcome .nav-boxes .nav-box:nth-child(odd) { background: #F3EEE6; } .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; padding: 1rem; } /* Index of psalms */ .page-welcome .index { display: flex; flex-wrap: wrap; justify-content: space-between; } .page-welcome .index .index-item { width: 3.2em; /*1.7em;*/ font-size: 1.5em; text-align: right; padding: .3em .5em; } .page-welcome .index .link-deemphasize a { color: #888; font-weight: lighter; } /* Color Legend */ /* Container for legend items */ .color-legend-container { max-width: 600px; margin: 0 auto; padding-top: 1rem; transform: scale(0.7); } .color-legend-row { display: flex; justify-content: center; align-items: center; text-align: center; flex-wrap: wrap; } /* Shared styling for outer circle */ .legend-circle-outer { width: 60px; height: 60px; border-radius: 50%; border: 2px solid white; display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* Shared styling for inner circle */ .legend-circle-inner { width: 50px; height: 50px; border-radius: 50%; border: 2px solid white; position: relative; text-align: center; line-height: 50px; font-weight: bold; font-size: 16px; display: inline-block; } /* Color variants */ .legend-completed { background-color: var(--color-legend-completed); } .legend-inprogress { background-color: var(--color-legend-inprogress); } .legend-planning { background-color: var(--color-legend-planning); } /* Label text below icon */ .legend-label { djr-font-weight: bold; padding: 0.25rem; } /* === Page: Access Request Thank You === */ .page-Request_Access_Thank_You #contentSub { display: none; } /* === Page: all pages using the GrammarLayerSection tempalte === */ /* Increase Hebrew text size (but not Hebrew text in svg diagrams) */ .GrammarLayerSection > .hebrew { font-size: 1.75rem; text-align: right; } /* === Gray out Diagrammer glosses when there is a phrase-level gloss as a sibling === */ /* This should be done in the diagrammer itself. */ /* This solution is slow for large DOMs and isn't supported in older browsers */ /* The idea is to find any parent of a g.phrase-gloss and from there find all descendants with class="hebrew" and target the text or tspan tag below it */ *:has( > g.phrase-gloss) .gloss text, *:has( > g.phrase-gloss) .gloss tspan { fill:#aaa; } /* =================================== */ /* ====== MICHAEL'S CSS EDITS ======= */ /* =================================== */ /* === Page: ResourceSite/Welcome-Mike === */ /* == Centering Items in the "mw-parser-output" element == */ .page-ResourceSite_Welcome-Mike #maincontentwrapper { display: flex; flex-direction: column; justify-content: center; padding: 120px; } /* == Adjusting the nav boxes and putting the index in columns and rows == */ .page-ResourceSite_Welcome-Mike .nav-boxes { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } .page-ResourceSite_Welcome-Mike .nav-boxes .nav-box { flex-grow: 1; display: flex; align-items: flex-end; justify-content: center; } .page-ResourceSite_Welcome-Mike .nav-boxes .nav-box:nth-child(even) { background: #FBF9F7; } .page-ResourceSite_Welcome-Mike .nav-boxes .nav-box:nth-child(odd) { background: #F3EEE6; } .page-ResourceSite_Welcome-Mike .nav-boxes .nav-box p { display: flex; flex-direction: column; text-align: center; } .page-ResourceSite_Welcome-Mike .nav-boxes .nav-box img { max-width: 100%; height: auto; padding: 1rem; } /* Index of psalms */ .page-ResourceSite_Welcome-Mike .index { display: flex; flex-wrap: wrap; justify-content: space-between; } .page-ResourceSite_Welcome-Mike .index .index-item { width: 3.2em; /*1.7em;*/ font-size: 1.5em; text-align: right; padding: .3em .5em; } .page-ResourceSite_Welcome-Mike .index .link-deemphasize a { color: #888; font-weight: lighter; } /* == Using negative margins to cover over the whitespace == */ .page-ResourceSite_Welcome-Mike .mw-body { margin-top: -150px !important; } /* == Editing the Header Title == */ .page-ResourceSite_Welcome-Mike .firstHeading { color: #333; display: none !important; opacity: 0 !important; } .image-gallery { display: flex; flex-wrap: wrap; /* Allows wrapping to next line if needed */ gap: 10px; /* Space between items */ justify-content: center; /* Center align the gallery */ } .image-gallery-item { text-align: center; /* Centers captions under the image */ width: 300px; /* Ensures a consistent width for each item */ flex: 0 1 auto; /* Prevents items from stretching unevenly */ } .image-gallery-item img { width: 100%; /* Ensures images fit within their container */ height: auto; /* Maintains the aspect ratio */ } /* =================================== */ /* ====== RESOURCE SITE V2 CSS ====== */ /* =================================== */ /* == Highlights anchor text when clicking on an anchor link == */ span:target { background-color: #EAF3FF; } p:target { background-color: #EAF3FF; } /* == Responsive grid for cards == */ .cards { max-width: 1200px; margin: 0 auto; display: grid; gap: 1rem; } @media (min-width: 1080px) { .cards { grid-template-columns: repeat(2, 1fr); } } /* == Adjust elements for mobile == */ @media screen and (min-width: 960px) { /* Desktop view */ .responsive { overflow-y:scroll; height:75vh; } } @media screen and (max-width: 960px) { /* Mobile view */ .responsive { display: block; } } @media screen and (min-width: 960px) { /* Desktop view */ .responsive-med { overflow-y:scroll; } } @media screen and (max-width: 960px) { /* Mobile view */ .responsive-med { display: block; } } @media screen and (min-width: 960px) { /* Desktop view */ .sbs-container { display: flex; position:relative; overflow-y:scroll; flex:1 } } @media screen and (max-width: 960px) { /* Mobile view */ .sbs-container { display: block; } } @media screen and (min-width: 960px) { /* Desktop view */ .sbs { display: flex; flex-direction: column; position:absolute; } } @media screen and (max-width: 960px) { /* Mobile view */ .sbs { display:block; } } /* :not(.limiter)>div { flex-basis: 0px; flex-grow: 1; overflow-y: auto; } */ /* TOC Buttons */ .grid-container { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); } /* Cropped banners */ @media screen and (min-width: 960px) { /* Desktop view */ .cropped { aspect-ratio: 5 / 1; width:100%; height:auto; object-fit: cover; object-position: 50% 50%; } } @media screen and (max-width: 960px) { /* Mobile view */ .cropped { aspect-ratio: 16 / 9; width:100%; height:auto; object-fit: cover; object-position: 50% 50%; } } .cropped-home { aspect-ratio: 16 / 9; width:100%; height:auto; object-fit: cover; object-position: 50% 50%; } @media screen and (min-width: 960px) { /* Desktop view */ .banner-mobile { display:none; } .banner-desktop { width:100%; height:auto; } } @media screen and (max-width: 960px) { /* Mobile view */ .banner-desktop { display:none; } .banner-mobile { width:100%; height:auto; } } /* Banner text overlay */ /* Container holding the image and the text */ .banner-container { position: relative; display:inline-block; color: white; } .mid { font-weight: 900; color: white; margin: 0; position: absolute; display:inline-block; text-align:center; top: 50%; left: 50%; font-size: 2rem; filter:drop-shadow(5px 5px 4px #000000); transform: translate(-50%, -50%); } /* Centered text */ .centered { position: absolute; display:inline-block; width:100%; text-align:center; vertical-align:middle; font-family: var(--font-serif); color:#ffffff; filter:drop-shadow(5px 5px 4px #000000); } /* == Floating buttons == */ @media screen and (min-width: 960px) { /* Desktop view */ .float-button{ position:fixed; width:50px; height:50px; border-radius: 50%; border:none; background-color:#9DC0AF; display:flex; align-items:center; justify-content:center; color:white; bottom: 10px; right:10px; z-index:9999; } } @media screen and (max-width: 960px) { /* Mobile view */ .float-button{ position:fixed; width:50px; height:50px; border-radius: 50%; border:none; background-color:#9DC0AF; display:flex; align-items:center; justify-content:center; color:white; bottom: 10px; right:10px; z-index:9999; } } @media screen and (min-width: 960px) { /* Desktop view */ .navi-button{ border-radius: 12px; border:none; background-color:#9DC0AF; display:inline-block; padding:0.5rem; align-items:center; justify-content:center; color:white; z-index:9999; } } @media screen and (max-width: 960px) { /* Mobile view */ .navi-button{ position:fixed; width:50px; height:50px; border-radius: 50%; border:none; background-color:#9DC0AF; display:flex; align-items:center; justify-content:center; color:white; bottom: 10px; left:10px; z-index:9999; } } @media screen and (min-width: 960px) { /* Desktop view */ .ps-navi { position:fixed; top:70px; left:85px; border-radius: 12px; border:none; background-color:#9DC0AF; color:white; z-index:9999; height: 50px; width:auto; max-width:50px; display: inline-flex; align-items: center; justify-content: flex-start; overflow:hidden; -webkit-transition: max-width 0.5s; transition: max-width 0.5s; } } @media screen and (min-width: 960px) { /* Desktop view */ .ps-navi:hover { max-width: 24rem; } } @media screen and (max-width: 960px) { /* Mobile view */ .ps-navi{ position:fixed; width:50px; height:50px; border-radius: 12px; border:none; background-color:#9DC0AF; display:flex; align-items:center; justify-content: flex-start; color:white; top: 70px; left:10px; z-index:9999; } } .dropdown-menu{ max-height: 75vh; overflow-y: auto; z-index:9999; } @media screen and (max-width: 960px) { /* Mobile view */ .btn-hide-text { display: none; } .btn-hide-text .fa { display:inline; } } .navi-hide-text { white-space: nowrap; padding-left: 15px; max-height:1rem; -webkit-transition: color .25s 1.5s, max-width 2s; overflow: hidden; } @media screen and (max-width: 960px) { /* Mobile view */ .navi-hide-text { display: none; } .navi-hide-text .fa { display:inline; } } .flex-icon { margin-right: 1rem; display: flex; align-items: center; } /* Drop-shadow for AAG icons */ .aag-icon { filter:drop-shadow(1px 1px 1px #000); } /* glosses for joint hovering over Hebrew & English */ .word, .gloss { cursor: pointer; /*padding: 2px 4px;*/ /*border-radius: 4px;*/ transition: background 0.15s ease; } .highlighted { background-color: #ffff99; } /* try to REMOVE the extra space put between Hebrew words */ span.word, span.hebrew { font-family: inherit; font-size: inherit; direction: rtl; white-space: nowrap; display: inline-block; margin: 0; padding: 0; border: none; letter-spacing: -0.05em; /* optional tweak */ } /*Tab background colors*/ .nav-tabs .nav-link:hover { background-color: #f6f6f6; } .nav-tabs .nav-link.active { border-top: 3px solid #9DC0AF; border-left: 1px solid #9DC0AF; border-right: 1px solid #9DC0AF; } /* Background textures */ .texture-red { background-image: url('https://psalms.scriptura.org/mediawiki/images/6/61/Texture-red.jpg'); /* Replace with your image path */ background-size: cover; /* Scales image to cover the entire div */ background-position: center; /* Centers the image */ background-repeat: no-repeat; /* Prevents tiling */ } .texture-orange { background-image: url('https://psalms.scriptura.org/mediawiki/images/d/db/Texture-orange.jpg'); /* Replace with your image path */ background-size: cover; /* Scales image to cover the entire div */ background-position: center; /* Centers the image */ background-repeat: no-repeat; /* Prevents tiling */ } .texture-yellow { background-image: url('https://psalms.scriptura.org/mediawiki/images/a/a8/Texture-yellow.jpg'); /* Replace with your image path */ background-size: cover; /* Scales image to cover the entire div */ background-position: center; /* Centers the image */ background-repeat: no-repeat; /* Prevents tiling */ } .texture-sand { background-image: url('https://psalms.scriptura.org/mediawiki/images/9/90/Texture-sand.jpg'); /* Replace with your image path */ background-size: cover; /* Scales image to cover the entire div */ background-position: center; /* Centers the image */ background-repeat: no-repeat; /* Prevents tiling */ } body.page-Welcome-alt { /* background-image: url("https://staging.scriptura.org/mediawiki/images/b/bb/Texture-blank-bg.jpg"); */ background-color: var(--color-brand-sand); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center; } /* Tab pill formatting */ .nav-pills .nav-link.active { background-color:var(--color-brand-red-dark); color:#ffffff; } /* Home Page TOC */ .toc-container { display: grid; grid-template-columns: repeat(autofit); padding: 1rem; position:fixed; top:70px; left:85px; } .toc-item { padding: 1rem; text-align: center; }