108 lines
1.8 KiB
CSS
108 lines
1.8 KiB
CSS
/* root */
|
|
:root {
|
|
--lr-width: 45%;
|
|
|
|
/* mellow theme colors */
|
|
--bg: #161617;
|
|
--fg: #c9c7cd;
|
|
--bg-dark: #131314;
|
|
--black: #27272a;
|
|
--red: #f5a191;
|
|
--green: #90b99f;
|
|
--yellow: #e6b99d;
|
|
--blue: #aca1cf;
|
|
--magenta: #e29eca;
|
|
--cyan: #ea83a5;
|
|
--white: #c1c0d4;
|
|
--bright_black: #353539;
|
|
--bright_red: #ffae9f;
|
|
--bright_green: #9dc6ac;
|
|
--bright_yellow: #f0c5a9;
|
|
--bright_blue: #b9aeda;
|
|
--bright_magenta: #ecaad6;
|
|
--bright_cyan: #f591b2;
|
|
--bright_white: #cac9dd;
|
|
--gray01: #1b1b1d;
|
|
--gray02: #2a2a2d;
|
|
--gray03: #3e3e43;
|
|
--gray04: #57575f;
|
|
--gray05: #757581;
|
|
--gray06: #9998a8;
|
|
--gray07: #c1c0d4;
|
|
}
|
|
|
|
html, body {
|
|
max-height: 100%;
|
|
}
|
|
|
|
/* desktop mode */
|
|
@media only screen and (min-width: 100ch) {
|
|
#master {
|
|
width: 95ch;
|
|
}
|
|
div#master #left {
|
|
float: left;
|
|
text-align: left;
|
|
width: var(--lr-width);
|
|
}
|
|
div#master #right {
|
|
float: right;
|
|
text-align: right;
|
|
width: var(--lr-width);
|
|
ul {
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
p#blogpreview a {
|
|
max-width: 30ch;
|
|
}
|
|
}
|
|
/* mobile mode */
|
|
@media only screen and (max-width: 100ch) {
|
|
#master {
|
|
width: 85%;
|
|
}
|
|
p#blogpreview a {
|
|
max-width: 50vw;
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
body[id=blog] {
|
|
background-color: var(--bg);
|
|
display: unset !important;
|
|
max-width: 80ch;
|
|
margin: auto;
|
|
}
|
|
div#master header {
|
|
text-align: center;
|
|
font-size: 30px;
|
|
}
|
|
div#group hgroup {
|
|
text-align: center;
|
|
}
|
|
#font, p, ul, ol, h1, h2, h3, h4, h5 {
|
|
font-family: sans-serif;
|
|
color: white;
|
|
}
|
|
p#blogpreview a {
|
|
float: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
p#blogpreview span {
|
|
float: right;
|
|
}
|
|
a {
|
|
font-family: sans-serif;
|
|
text-decoration: none;
|
|
color: var(--cyan);
|
|
}
|
|
a:hover, a:active {
|
|
text-decoration: underline;
|
|
}
|