SevenOfAces/lipu-sona
1
0
Fork 0
mirror of https://github.com/mrrpnya/lipu-sona.git synced 2025-02-13 16:44:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update style

Browse source 
* 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 2024-08-20 21:19:19 +05:00 • committed by kala Asi
parent a86d38c3e3
commit 84258062ec
2 changed files with 307 additions and 325 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

307
static/style.css Normal file
View 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;
}
}

325
static/style.css.h
View file

@ -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;
}
}