yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix CSS for small devices

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2019-07-20 21:58:09 +02:00
parent bea840981d
commit 1b82f80cb4
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
1 changed files with 138 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

198
src/assets/css/minimalist.css
View file

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