Fix CSS for small devices
This commit is contained in:
parent
bea840981d
commit
1b82f80cb4
|
@ -1,5 +1,4 @@
|
||||||
/* CSS to be used for HTML Org-mode export
|
/* CSS to be used for HTML Org-mode export
|
||||||
|
|
||||||
Author: Yann Esposito
|
Author: Yann Esposito
|
||||||
*/
|
*/
|
||||||
body {
|
body {
|
||||||
|
@ -24,42 +23,68 @@ body {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
#preamble:focus,#postamble:focus,
|
#preamble:focus,#postamble:focus, #preamble:hover,#postamble:hover {
|
||||||
#preamble:hover,#postamble:hover {
|
|
||||||
opacity:1;
|
opacity:1;
|
||||||
}
|
}
|
||||||
#content,.content {
|
#content,.content {
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6, pre, code, blockquote, ol, ul, ol ol, ul ul, ul ol, ol
|
||||||
pre, code, blockquote, ol, ul,
|
ul, li, p, section, header, footer {
|
||||||
ol ol, ul ul, ul ol, ol ul, li,
|
|
||||||
p, section, header, footer {
|
|
||||||
float: none;
|
float: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header,
|
||||||
pre, code, blockquote,
|
.figure {
|
||||||
p, ul, ol, section, header, .figure {
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
h1 { font-size: 1em; }
|
|
||||||
h2 { font-size: 1em; }
|
figure {
|
||||||
h3 { font-size: 1em; }
|
margin: 20px 0px;
|
||||||
h4 { font-size: 1em; }
|
}
|
||||||
h5 { font-size: 1em; }
|
|
||||||
h6 { font-size: 1em; }
|
h1 {
|
||||||
h1::before { content: "# "; }
|
font-size: 1em;
|
||||||
h2::before { content: "## "; }
|
}
|
||||||
h3::before { content: "### "; }
|
h2 {
|
||||||
h4::before { content: "#### "; }
|
font-size: 1em;
|
||||||
h5::before { content: "##### "; }
|
}
|
||||||
h6::before { content: "###### "; }
|
h3 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
h1::before {
|
||||||
|
content: "# ";
|
||||||
|
}
|
||||||
|
h2::before {
|
||||||
|
content: "## ";
|
||||||
|
}
|
||||||
|
h3::before {
|
||||||
|
content: "### ";
|
||||||
|
}
|
||||||
|
h4::before {
|
||||||
|
content: "#### ";
|
||||||
|
}
|
||||||
|
h5::before {
|
||||||
|
content: "##### ";
|
||||||
|
}
|
||||||
|
h6::before {
|
||||||
|
content: "###### ";
|
||||||
|
}
|
||||||
hr {
|
hr {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
@ -93,7 +118,9 @@ pre::before {
|
||||||
code {
|
code {
|
||||||
font-family: menlo, monospace;
|
font-family: menlo, monospace;
|
||||||
}
|
}
|
||||||
pre code { background: none; }
|
pre code {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
blockquote {
|
blockquote {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -101,8 +128,12 @@ blockquote {
|
||||||
padding-left: 2ch;
|
padding-left: 2ch;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
blockquote *:first-child {margin-top: 0;}
|
blockquote *:first-child {
|
||||||
blockquote *:last-child {margin-bottom: 0;}
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
blockquote *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
blockquote:after {
|
blockquote:after {
|
||||||
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
|
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
|
@ -112,12 +143,13 @@ blockquote:after {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
li li { padding-left: 20px; }
|
li li {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
ul > li:before {
|
ul > li:before {
|
||||||
content: "– ";
|
content: "– ";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -157,6 +189,8 @@ table {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border: solid 1px;
|
border: solid 1px;
|
||||||
|
display: block;
|
||||||
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
td, th {
|
td, th {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
@ -170,7 +204,7 @@ navigation {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: menlo, monospace;
|
font-family: menlo, monospace;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 20px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
navigation > a {
|
navigation > a {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
@ -185,18 +219,21 @@ navigation > a {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* org mode statuses */
|
/* org mode statuses */
|
||||||
.timestamp-wrapper { font-family: menlo, monospace; font-size: 12px; }
|
.timestamp-wrapper {
|
||||||
.todo, .done { font-family: menlo, monospace;
|
font-family: menlo, monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
}
|
||||||
line-height: 20px;
|
.todo, .done {
|
||||||
padding: 1px 1ex;
|
font-family: menlo, monospace;
|
||||||
}
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
/* colors */
|
line-height: 20px;
|
||||||
|
padding: 1px 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* colors theme */
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark; /* support color scheme */
|
||||||
--base03: #002b36;
|
--base03: #002b36;
|
||||||
--base02: #073642;
|
--base02: #073642;
|
||||||
--base01: #586e75;
|
--base01: #586e75;
|
||||||
|
@ -223,9 +260,10 @@ navigation > a {
|
||||||
--todo-txt: #000;
|
--todo-txt: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* org colors */
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--main-background: #fafafa;
|
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
|
||||||
--main-foreground: var(--base01);
|
--main-foreground: var(--base01);
|
||||||
--second-foreground: var(--base00);
|
--second-foreground: var(--base00);
|
||||||
--reveal-background: var(--base3);
|
--reveal-background: var(--base3);
|
||||||
|
@ -238,33 +276,73 @@ body {
|
||||||
background: var(--main-background);
|
background: var(--main-background);
|
||||||
color: var(--main-foreground);
|
color: var(--main-foreground);
|
||||||
}
|
}
|
||||||
a, a:visited { color: var(--base1); }
|
a, a:visited {
|
||||||
a:hover, a:active, a:focus { color: var(--yellow); }
|
color: var(--base1);
|
||||||
thead { background-color: var(--reveal-background);
|
}
|
||||||
color: var(--second-fg); }
|
a:hover, a:active, a:focus {
|
||||||
tr:hover { background-color: var(--reveal-background); }
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
background-color: var(--reveal-background);
|
||||||
|
color: var(--second-fg);
|
||||||
|
}
|
||||||
|
tr:hover {
|
||||||
|
background-color: var(--reveal-background);
|
||||||
|
}
|
||||||
#postamble:hover, #preamble:hover {
|
#postamble:hover, #preamble:hover {
|
||||||
background-color: var(--reveal-background);
|
background-color: var(--reveal-background);
|
||||||
border-color: var(--border-color);
|
border-color: var(--border-color);
|
||||||
}
|
}
|
||||||
h1 { color: var(--violet);}
|
h1 {
|
||||||
h2 { color: var(--magenta);}
|
color: var(--violet);
|
||||||
h3 { color: var(--red);}
|
}
|
||||||
h4 { color: var(--orange);}
|
h2 {
|
||||||
h5 { color: var(--yellow);}
|
color: var(--magenta);
|
||||||
h6 { color: var(--green);}
|
}
|
||||||
table, td, th { border-color: var(--border-color); }
|
h3 {
|
||||||
code { background: var(--reveal-background); }
|
color: var(--red);
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
table, td, th {
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
background: var(--reveal-background);
|
||||||
|
}
|
||||||
#preamble,#postamble {
|
#preamble,#postamble {
|
||||||
border-color: var(--transparent);
|
border-color: var(--transparent);
|
||||||
}
|
}
|
||||||
/* -------- */
|
/* -------- */
|
||||||
/* org colors */
|
/* org colors */
|
||||||
.todo, .done { color: var(--todo-txt); }
|
.todo, .done {
|
||||||
.TODO { background-color: var(--red); }
|
color: var(--todo-txt);
|
||||||
.IN_PROGRESS { background-color: var(--yellow); }
|
}
|
||||||
.IN_REVIEW { background-color: var(--cyan); }
|
.TODO {
|
||||||
.HOLD { background-color: var(--violet); }
|
background-color: var(--red);
|
||||||
.WAITING { background-color: var(--violet); }
|
}
|
||||||
.DONE { background-color: var(--green); }
|
.IN_PROGRESS {
|
||||||
.CANCELED { background-color: var(--magenta); }
|
background-color: var(--yellow);
|
||||||
|
}
|
||||||
|
.IN_REVIEW {
|
||||||
|
background-color: var(--cyan);
|
||||||
|
}
|
||||||
|
.HOLD {
|
||||||
|
background-color: var(--violet);
|
||||||
|
}
|
||||||
|
.WAITING {
|
||||||
|
background-color: var(--violet);
|
||||||
|
}
|
||||||
|
.DONE {
|
||||||
|
background-color: var(--green);
|
||||||
|
}
|
||||||
|
.CANCELED {
|
||||||
|
background-color: var(--magenta);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue