85 lines
1.6 KiB
CSS
85 lines
1.6 KiB
CSS
/* https://color.adobe.com/create/color-contrast-analyzer */
|
|
/*dark theme*/
|
|
body.dark{
|
|
--bg-color: #000;
|
|
/*
|
|
* #5ac
|
|
* */
|
|
--normal-text: #CCC;
|
|
--link-clicked: #B250D8;
|
|
--link-unclicked: #d80;
|
|
--header-bg: #333;
|
|
--nav-link-color: #6B0;
|
|
--content-border-color: #5ac;
|
|
}
|
|
/*
|
|
*#ABABD4;
|
|
*bs-primary-bg-subtle: #cfe2ff;
|
|
--bs-secondary-bg-subtle: #e2e3e5;
|
|
--bs-success-bg-subtle: #d1e7dd;
|
|
--bs-info-bg-subtle: #cff4fc;
|
|
--bs-warning-bg-subtle: #fff3cd;
|
|
--bs-danger-bg-subtle: #f8d7da;
|
|
--bs-light-bg-subtle: #fcfcfd;
|
|
* */
|
|
/*light theme*/
|
|
body.light{
|
|
--bg-color: #e2e3e5;
|
|
--normal-text: #000;
|
|
--link-unclicked: #2535B4;
|
|
--link-clicked: #832244;
|
|
/*#E6DDE6
|
|
* #dce2e5*/
|
|
|
|
--header-bg: #dce5dc;
|
|
/*#841163
|
|
* #115e84*/
|
|
--nav-link-color: #118411;
|
|
--content-border-color: #026;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-color);
|
|
color: var(--normal-text);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--nav-link-color) !important;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-unclicked);
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--link-clicked);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#header {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
background: var(--header-bg);
|
|
width: 100%;
|
|
font-size: 24px;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
#content {
|
|
display: inline-block;
|
|
margin: 1em;
|
|
padding: 1em;
|
|
min-width: calc(100% - 5em);
|
|
border: 0.5em solid var(--content-border-color);
|
|
border-radius: 0.5em;
|
|
}
|