mirror of
https://github.com/mrrpnya/lipu-sona.git
synced 2025-02-13 16:44:39 +00:00
Update style
* Use var() instead of defines * Update link and card colours for better contrast * Add .page-nav for later use * Use sans-serif for text * Use relative paths
This commit is contained in:
AcipenserSturio
kala Asi
parent
a86d38c3e3
commit
84258062ec
2 changed files with 307 additions and 325 deletions
307
static/style.css
Normal file
307
static/style.css
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
:root {
|
||||
--page-bg: #d3d7cf;
|
||||
--header-bg: #fce94f;
|
||||
--body-bg: #eeeeec;
|
||||
--footer-bg: #2e3436;
|
||||
|
||||
--header-fg: #8f5902;
|
||||
--body-fg: #000000;
|
||||
--footer-fg: #d3d7cf;
|
||||
--bleak-fg: #888a85;
|
||||
|
||||
--b-border: #555753;
|
||||
|
||||
--link: #603407;
|
||||
--link-hover: #000000;
|
||||
--footer-link: #729fcf;
|
||||
|
||||
--hv-border: #888a85;
|
||||
--lt-border: #babdb6;
|
||||
|
||||
--err-fg: #eeeeec;
|
||||
--err-brd: #a40000;
|
||||
--err-bg: #ef2929;
|
||||
|
||||
--inf-fg: #2e3436;
|
||||
--inf-brd: #4e9a06;
|
||||
--inf-bg: #8ae234;
|
||||
|
||||
--wrn-fg: #8f5902;
|
||||
--wrn-brd: #c4a000;
|
||||
--wrn-bg: #fce94f;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--body-bg: #2e3436;
|
||||
--body-fg: #d3d7cf;
|
||||
|
||||
--link: #f2e788;
|
||||
--link-hover: #ffe82a;
|
||||
|
||||
--hv-border: #888a85;
|
||||
--lt-border: #555753;
|
||||
|
||||
--err-fg: #eeeeec;
|
||||
--err-brd: #ef2929;
|
||||
--err-bg: #a40000;
|
||||
|
||||
--inf-fg: #baccdf;
|
||||
--inf-brd: #729fcf;
|
||||
--inf-bg: #204a87;
|
||||
|
||||
--wrn-fg: #fff391;
|
||||
--wrn-brd: #e9b96e;
|
||||
--wrn-bg: #664a1d;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "linja pimeja";
|
||||
src: url("linjapimeja19.woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "insa pi supa lape";
|
||||
src: url("supalape.woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "sitelen pona pona";
|
||||
src: url("sitelen-pona-pona.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
overflow-y: scroll;
|
||||
/* C_LGREEN doesn't exist */
|
||||
/*scrollbar-color: C_LGREEN var(--link-hover);*/
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--body-bg);
|
||||
color: var(--body-fg);
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 6pt;
|
||||
padding-inline: 1em;
|
||||
border-inline-start: 4px solid var(--lt-border);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
margin: 0.7em 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
table {
|
||||
background: var(--body-bg);
|
||||
border: 2px solid var(--hv-border);
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid var(--lt-border);
|
||||
padding: 4pt;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: var(--header-bg);
|
||||
color: var(--header-fg);
|
||||
font-family: sans-serif;
|
||||
min-height: 1px;
|
||||
|
||||
}
|
||||
|
||||
.header_text {
|
||||
padding-block: 0.5em;
|
||||
}
|
||||
|
||||
.header a, .header a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.header h2, .header h3 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-nav > p {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-nav > p > * {
|
||||
padding: 5px;
|
||||
border: solid 2px var(--b-border);
|
||||
}
|
||||
.page-nav > p > *:not(:first-child) { border-left: none; }
|
||||
|
||||
.footer {
|
||||
background: var(--footer-bg);
|
||||
color: var(--footer-fg);
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
font-size: 0.8em;
|
||||
padding: 12pt 6pt;
|
||||
}
|
||||
|
||||
.footer a, .footer a:visited {
|
||||
display: inline-block;
|
||||
color: var(--footer-link);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 6pt;
|
||||
color: var(--body-fg);
|
||||
/*font-family: serif;*/
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content a:link, .content a:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.content a:focus, .content a:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
.info, .warning, .error {
|
||||
margin: 6pt;
|
||||
padding-inline-start: 0.5em;
|
||||
font-family: sans-serif;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.info:before, .warning:before, .error:before {
|
||||
font-family: "Xolonium", sans-serif;
|
||||
float:inline-end;
|
||||
font-size: 3em;
|
||||
padding-inline-end: 0.2em;
|
||||
}
|
||||
|
||||
.info:before {
|
||||
content: "★";
|
||||
}
|
||||
|
||||
.warning:before {
|
||||
content: "⚠";
|
||||
}
|
||||
|
||||
.error:before {
|
||||
content: "⛔";
|
||||
}
|
||||
|
||||
.info {
|
||||
border: 2px solid var(--inf-brd);
|
||||
background: var(--inf-bg);
|
||||
color: var(--inf-fg);
|
||||
}
|
||||
|
||||
.warning {
|
||||
border: 2px solid var(--wrn-brd);
|
||||
background: var(--wrn-bg);
|
||||
color: var(--wrn-fg);
|
||||
}
|
||||
|
||||
.error {
|
||||
border: 2px solid var(--err-brd);
|
||||
background: var(--err-bg);
|
||||
color: var(--err-fg);
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
border: 2px solid var(--hv-border);
|
||||
color:;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.pona .latin {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.pona.pimeja {
|
||||
font-family:"linja pimeja";
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.pona.supalape {
|
||||
font-family:"insa pi supa lape";
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.pona.ponapona {
|
||||
font-family:"sitelen pona pona";
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.def {
|
||||
text-decoration: dotted underline;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
|
||||
html {
|
||||
background: var(--page-bg) url("hexagonal_bg.gif");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 608pt;
|
||||
border-radius: 6px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header_text {
|
||||
padding-inline: 2em;
|
||||
padding-block: 2em;
|
||||
}
|
||||
.content {
|
||||
padding-inline: 1em;
|
||||
padding-block: 1em;
|
||||
}
|
||||
|
||||
.info, .warning, .error {
|
||||
padding: 6pt;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width:768pt) {
|
||||
.header {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 768pt;
|
||||
border: 2px solid var(--b-border);
|
||||
margin: 24pt auto;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
#define HASH(x) x
|
||||
|
||||
#define C_PAGEBG #d3d7cf
|
||||
#define C_HEADERBG #fce94f
|
||||
#define C_BODYBG #eeeeec
|
||||
#define C_FOOTERBG #2e3436
|
||||
|
||||
#define C_HEADERFG #8f5902
|
||||
#define C_BODYFG #000000
|
||||
#define C_FOOTERFG #d3d7cf
|
||||
#define C_BLEAKFG #888a85
|
||||
|
||||
#define C_BBORDER #555753
|
||||
|
||||
#define C_DLINK #000000
|
||||
#define C_LINK #204a87
|
||||
#define C_VISLINK #5c3566
|
||||
#define C_FOOTLINK #729fcf
|
||||
|
||||
#define C_HVBORDER #888a85
|
||||
#define C_LTBORDER #babdb6
|
||||
|
||||
#define C_ERRFG #eeeeec
|
||||
#define C_ERRBRD #a40000
|
||||
#define C_ERRBG #ef2929
|
||||
|
||||
#define C_INFFG #2e3436
|
||||
#define C_INFBRD #4e9a06
|
||||
#define C_INFBG #8ae234
|
||||
|
||||
#define C_WRNFG #8f5902
|
||||
#define C_WRNBRD #c4a000
|
||||
#define C_WRNBG #fce94f
|
||||
|
||||
#define C_BODYBG_DARK #2e3436
|
||||
#define C_BODYFG_DARK #d3d7cf
|
||||
|
||||
#define C_LINK_DARK #729fcf
|
||||
#define C_DLINK_DARK #3465a4
|
||||
|
||||
#define C_WRNBG_DARK #8f5902
|
||||
#define C_WRNBRD_DARK #e9b96e
|
||||
#define C_WRNFG_DARK #fce94f
|
||||
|
||||
#define C_INFBG_DARK #204a87
|
||||
#define C_INFBRD_DARK #729fcf
|
||||
#define C_INFFG_DARK #729fcf
|
||||
|
||||
#define C_ERRBG_DARK #a40000
|
||||
#define C_ERRBRD_DARK #ef2929
|
||||
#define C_ERRFG_DARK #eeeeec
|
||||
|
||||
#define C_HVBORDER_DARK #888a85
|
||||
#define C_LTBORDER_DARK #555753
|
||||
|
||||
@font-face {
|
||||
font-family: "linja pimeja";
|
||||
src: url("/linjapimeja19.woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "insa pi supa lape";
|
||||
src: url("/supalape.woff")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "sitelen pona pona";
|
||||
src: url("/sitelen-pona-pona.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
overflow-y: scroll;
|
||||
scrollbar-color: C_LGREEN C_DLINK;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
background: C_BODYBG;
|
||||
color:C_BODYFG;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 6pt;
|
||||
padding-inline: 1em;
|
||||
border-inline-start: 4px solid C_LTBORDER;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
background: C_BODYBG;
|
||||
border: 2px solid C_HVBORDER;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid C_LTBORDER;
|
||||
padding: 4pt;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: C_HEADERBG;
|
||||
color: C_HEADERFG;
|
||||
font-family: sans-serif;
|
||||
min-height: 1px;
|
||||
|
||||
}
|
||||
|
||||
.header_text {
|
||||
padding-block: 0.5em;
|
||||
}
|
||||
|
||||
.header a, .header a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.header h2, .header h3 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: C_FOOTERBG;
|
||||
color: C_FOOTERFG;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
font-size: 0.8em;
|
||||
padding: 12pt 6pt;
|
||||
}
|
||||
|
||||
.footer a, .footer a:visited {
|
||||
display: inline-block;
|
||||
color: C_FOOTLINK;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 6pt;
|
||||
color: C_BODYFG;
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content a:link, .content a:visited {
|
||||
color: C_LINK;
|
||||
}
|
||||
|
||||
.content a:focus, .content a:hover {
|
||||
color: C_DLINK;
|
||||
}
|
||||
|
||||
.info, .warning, .error {
|
||||
margin: 6pt;
|
||||
padding-inline-start: 0.5em;
|
||||
font-family: sans-serif;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.info:before, .warning:before, .error:before {
|
||||
font-family: "Xolonium", sans-serif;
|
||||
float:inline-end;
|
||||
font-size: 3em;
|
||||
padding-inline-end: 0.2em;
|
||||
}
|
||||
|
||||
.info:before {
|
||||
content: "★";
|
||||
}
|
||||
|
||||
.warning:before {
|
||||
content: "⚠";
|
||||
}
|
||||
|
||||
.error:before {
|
||||
content: "⛔";
|
||||
}
|
||||
|
||||
.info {
|
||||
border: 2px solid C_INFBRD;
|
||||
background: C_INFBG;
|
||||
color: C_INFFG;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border: 2px solid C_WRNBRD;
|
||||
background: C_WRNBG;
|
||||
color: C_WRNFG;
|
||||
}
|
||||
|
||||
.error {
|
||||
border: 2px solid C_ERRBRD;
|
||||
background: C_ERRBG;
|
||||
color: C_ERRFG;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
border: 2px solid C_HVBORDER;
|
||||
color:;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.pona .latin {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.pona.pimeja {
|
||||
font-family:"linja pimeja";
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.pona.supalape {
|
||||
font-family:"insa pi supa lape";
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.pona.ponapona {
|
||||
font-family:"sitelen pona pona";
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.def {
|
||||
text-decoration: dotted underline;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
|
||||
html {
|
||||
background:C_PAGEBG url("/hexagonal_bg.gif");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 608pt;
|
||||
border-radius: 6px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header_text {
|
||||
padding-inline: 2em;
|
||||
padding-block: 2em;
|
||||
}
|
||||
.content {
|
||||
padding-inline: 1em;
|
||||
padding-block: 1em;
|
||||
}
|
||||
|
||||
.info, .warning, .error {
|
||||
padding: 6pt;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width:768pt) {
|
||||
.header {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 768pt;
|
||||
border: 2px solid C_BBORDER;
|
||||
margin: 24pt auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: C_BODYBG_DARK;
|
||||
color: C_BODYFG_DARK;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: C_BODYFG_DARK;
|
||||
}
|
||||
|
||||
.content a:link, .content a:visited {
|
||||
color: C_LINK_DARK;
|
||||
}
|
||||
|
||||
.content a:focus, .content a:hover {
|
||||
color: C_DLINK_DARK;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: C_WRNBG_DARK;
|
||||
color: C_WRNFG_DARK;
|
||||
border-inline-start-color: C_WRNBRD_DARK;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: C_INFBG_DARK;
|
||||
color: C_INFFG_DARK;
|
||||
border-inline-start-color: C_INFBRD_DARK;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: C_ERRBG_DARK;
|
||||
color: C_ERRFG_DARK;
|
||||
border-inline-start-color: C_ERRBRD_DARK;
|
||||
}
|
||||
|
||||
table {
|
||||
background: C_BODYBG_DARK;
|
||||
border-color: C_HVBORDER_DARK;
|
||||
}
|
||||
|
||||
th,td {
|
||||
border-color: C_LTBORDER_DARK;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue