177 lines
3.8 KiB
CSS
177 lines
3.8 KiB
CSS
/*
|
|
* Color palette
|
|
*/
|
|
|
|
:root {
|
|
--bs-danger-rgb: 159, 19, 19;
|
|
--bs-primary-rgb: 55, 106, 48;
|
|
--bs-secondary-rgb: 255, 255, 255;
|
|
--bs-primary: #376A30;
|
|
--bs-link-color-rgb: 55, 106, 48;
|
|
--bs-link-hover-color-rgb: 40, 89, 33;
|
|
}
|
|
|
|
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
|
|
--bs-btn-bg: var(--bs-primary) !important;
|
|
--bs-btn-hover-bg: var(--bs-primary) !important;
|
|
--bs-btn-border-color: var(--bs-primary) !important;
|
|
--bs-btn-active-bg: var(--bs-primary) !important;
|
|
--bs-link-color-rgb: 255, 255, 255;
|
|
--bs-link-hover-color-rgb: 230, 230, 230;
|
|
}
|
|
|
|
|
|
/*
|
|
* Page width settings
|
|
*/
|
|
|
|
/* Override bootstrap sass variables for container-max-width */
|
|
@media (min-width: 1400px) {
|
|
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
|
|
.ratio-4x3 {
|
|
@media (min-width: 768px) {
|
|
--bs-aspect-ratio: 33.33%; // 1x3
|
|
}
|
|
}
|
|
|
|
/* Without this images like to pop-out*/
|
|
#content img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
* Caroussel settings
|
|
*/
|
|
|
|
/* Makes caroussel buttons under caroussel */
|
|
.carousel-control-prev,
|
|
.carousel-control-next{
|
|
align-self: flex-end; /* Aligns it at the bottom */
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
/*
|
|
* Card settings
|
|
*/
|
|
|
|
.card {
|
|
padding: 0px 30px;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/*
|
|
* Fonts settings
|
|
*/
|
|
|
|
/* Applies link-underline to a within a div, rather than a directly */
|
|
.link-underline a {
|
|
text-decoration-color: rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1)) !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
--bs-text-opacity: 1;
|
|
color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* enlarge body point size for charter for larger displays */
|
|
@media (min-device-width: 750px) {
|
|
body {
|
|
font-size: 20px;
|
|
line-height: 1.5; /* default in FF is ~1.48, try seems a bit to sparse */
|
|
}
|
|
/* to match the other bootstrap workaround, below */
|
|
blockquote {
|
|
font-size: 18px;
|
|
}
|
|
/* UI elements should be a little more intrusive */
|
|
.btn, .navbar, .footer {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/* Font stacks from: https://modernfontstacks.com/#font-stacks */
|
|
.navbar, .footer, body {
|
|
font-family: 'OpenDyslexic', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
}
|
|
|
|
/*
|
|
* Navbar
|
|
*/
|
|
|
|
/* Language switchers */
|
|
.language-switcher {
|
|
font-size: 14px;
|
|
background: #f8f8f8;
|
|
color: #333;
|
|
border-color: #ccc;
|
|
}
|
|
|
|
.language-switcher:hover {
|
|
background: #e6e6e6;
|
|
}
|
|
|
|
/* Main buttons */
|
|
.action-button:hover {
|
|
background: #e6e6e6;
|
|
}
|
|
|
|
/* In this case used for the language drop-down menu */
|
|
.dropdown-menu li a {
|
|
font-size: 14px;
|
|
display: block;
|
|
padding: 3px 20px;
|
|
clear: both;
|
|
font-weight: 400;
|
|
line-height: 1.42857143;
|
|
color: #333;
|
|
border-color: #ccc;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
--bs-dropdown-bg: #fff;
|
|
--bs-dropdown-border-color: #000;
|
|
}
|
|
|
|
.dropdown-menu li a:hover {
|
|
background: #e6e6e6;
|
|
}
|
|
|
|
/* Usually is set automatically by bootstrap, but do it manually to let ikiwiki handle links */
|
|
.nav-link {
|
|
--bs-nav-link-padding-y: 5px;
|
|
--bs-nav-link-padding-x: 15px;
|
|
}
|
|
|
|
.nav-link li a, .nav-link .selflink {
|
|
display: block;
|
|
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
|
|
font-size: var(--bs-nav-link-font-size);
|
|
font-weight: var(--bs-nav-link-font-weight);
|
|
color: #FFFFFF;
|
|
text-decoration: none;
|
|
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
|
|
}
|
|
|
|
.nav-link .selflink {
|
|
color: #a6a6a6;
|
|
}
|
|
|
|
.nav-link li a:hover, .nav-link .selflink:hover {
|
|
color: #a6a6a6;
|
|
}
|
|
|