Compare commits

...

1 commit
master ... ycss

Author SHA1 Message Date
Yann Esposito (Yogsototh) 0dcc9635db
solarized styling 2019-09-15 19:00:01 +02:00

View file

@ -1,194 +1,504 @@
html { :root {
height: 102%; color-scheme: light dark; /* support color scheme */
} --base03: #002b36;
--base02: #073642;
body { --base01: #586e75;
height: 102%; --base00: #657b83;
word-wrap: break-word; --base0: #839496;
} --base1: #93a1a1;
--base2: #eee8d5;
button { --base3: #fdf6e3;
background:none; --yellow: #b58900;
border:none; --orange: #cb4b16;
padding:0; --red: #dc322f;
cursor:pointer; --magenta: #d33682;
} --violet: #6c71c4;
--blue: #268bd2;
button:focus { --cyan: #2aa198;
outline: none; --green: #859900;
} --transparent: rgba(255,255,255,0);
/* --main-background: #00151b; /* 0.5 darker than #002b36; */
[hidden] { --main-background: var(--base03); /* 0.5 darker than #002b36; */
display: none !important --main-foreground: var(--base1);
} --second-foreground: var(--base0);
input::placeholder { --reveal-background: var(--base02);
color: lightgray --soft-foreground: var(--base01);
} --border-color: var(--base02);
.queryInput { --todo-txt: #000;
width: 128px; --color-h1: var(--cyan);
padding: 0 22px 0 2px; --color-h2: var(--green);
border-radius: 3px; --color-h3: var(--yellow);
border-style: solid; --color-h4: var(--orange);
border-width: 1px; --color-h5: var(--red);
border-color: gray; --color-h6: var(--magenta);
height: 22px; --color-link: var(--magenta);
line-height: 22px; }
transition: width .1s ease-in-out
} html {
.queryInput.search-inactive {} height: 102%;
.queryInput:focus { }
width: 175px;
} body {
.submitting .queryInput, height: 102%;
.queryInput.search-active { word-wrap: break-word;
border-color: #990; background-color: var(--main-background);
border-width: 2px; color: var(--main-foreground);
background-color: #FF9; }
width: 175px; a {
} color: var(--blue);
.queryIcon { }
position: absolute; a:visited { color: var(--violet);}
right: 0;
top:1px; a:hover, a:active, .top_menu a:hover {color: var(--magenta);}
cursor:pointer; .bg-white { background-color: var(--main-background); }
width:20px; input, textarea {
height: 20px; background-color: var(--reveal-background);
fill: currentColor; color: var(--main-foreground);
} border: solid 1px var(--border-color);
label { }
cursor: pointer; .gold { color: var(--yellow); }
} .hover-orange:hover { color: var(--orange); }
.close-x-wrap { button, .button {color: white;}
float: left; .bg-white input:focus, .bg-white textarea:focus {
width: 17px; border: solid 1px var(--blue);
height: 17px; box-shadow: none;
top: 2px; }
position: relative; button {
right: 2px; background:none;
} border:none;
.close-x { padding:0;
stroke: gray; cursor:pointer;
fill: transparent; }
stroke-linecap: round;
stroke-width: 3; button:focus {
} outline: none;
.query-info-icon { }
position: absolute;
top: 0px;
right: -18px; [hidden] {
text-decoration: none; display: none !important
font-size: 12px; }
padding: 0 8px 8px 0; input::placeholder {
} color: var(--soft-foreground);
.star { }
margin-left:-20px; .queryInput {
font-size:1.2em; width: 128px;
position:relative; padding: 0 22px 0 2px;
top:-2px; border-radius: 3px;
} border-style: solid;
border-width: 1px;
.star button { border-color: var(--border-color);
transition: color .1s; height: 22px;
} line-height: 22px;
.star.selected button { transition: width .1s ease-in-out
color:#22a; }
} .queryInput.search-inactive {}
.edit_links button { .queryInput:focus {
transition: color .1s ease-in; width: 175px;
} }
.submitting .queryInput,
.tag { .queryInput.search-active {
color:#a51; border-color: var(--border-color);
line-height:190%; border-width: 2px;
} background-color: var(--reveal-background);
width: 175px;
.private { background:#ddd;border:1px solid #d1d1d1; } }
.unread { color:#b41 } .queryIcon {
.mark_read {color: #a81;} position: absolute;
.flash { color:green;background:#efe } right: 0;
top:1px;
.top_menu { cursor:pointer;
margin-top:6px; width:20px;
} height: 20px;
.top_menu a { fill: currentColor;
color: blue; }
} label {
.bookmarklet { cursor: pointer;
padding:1px 2px 0px 2px; }
} .close-x-wrap {
float: left;
.alert { width: 17px;
background:#ced; height: 17px;
border:1px solid #acc; top: 2px;
} position: relative;
right: 2px;
.edit_bookmark_form {color:#888;} }
.edit_bookmark_form input {border:1px solid #ddd;} .close-x {
.edit_bookmark_form textarea {border:1px solid #ddd;} stroke: var(--second-foreground);
fill: transparent;
.nav-active { stroke-linecap: round;
background:#ff8; stroke-width: 3;
color:blue; }
} .query-info-icon {
position: absolute;
/* mobile device */ top: 0px;
@media only screen and (max-width : 750px) { right: -18px;
body { text-decoration: none;
-webkit-text-size-adjust: none; font-size: 12px;
} padding: 0 8px 8px 0;
.display { }
float: none .star {
} margin-left:-20px;
} font-size:1.2em;
position:relative;
@media only screen and (max-width : 500px) { top:-2px;
.filters { }
clear: both;
position: relative; .star button {
top: 2px; transition: color .1s;
} }
} .star.selected button {
color:var(--magenta);
.rdim { }
opacity: .8; .edit_links button {
transition: all .15s ease-in; transition: color .1s ease-in;
} }
.rdim:hover,
.rdim:focus { .tag {
opacity: 1; color:var(--cyan);
transition: all .15s ease-in; line-height:190%;
} }
.display .description > div p,
.display .description > div pre .private { background:var(--reveal-background);border:1px solid var(--border-color); }
{ .unread { color:var(--yellow); }
margin-top: 9px; .mark_read {color: var(--yellow);}
margin-bottom: 9px; .flash { color:var(--green); }
}
.display .description > div > *:first-child { .top_menu {
margin-top: 2px; margin-top:6px;
} }
.display .description > div > *:last-child { .top_menu a {
margin-bottom: 2px; color: var(--blue);
} }
.display .description > div > ol li p { .bookmarklet {
margin-top: 0; padding:1px 2px 0px 2px;
margin-bottom: 0; }
}
.display .description > div > ul li p { .alert {
margin-top: 0; background:var(--reveal-background);
margin-bottom: 0; border:1px solid var(--border-color);
} }
.display .description > div ol {
padding-left: 23px; .edit_bookmark_form {color:var(--second-foreground);}
} .edit_bookmark_form input {border:1px solid var(--border-color);}
.display .description > div ul { .edit_bookmark_form textarea {border:1px solid var(--border-color);}
padding-left: 23px;
} .nav-active {
code, pre { background-color: var(--reveal-background);
font-size:13px; color: var(--yellow);
} }
#content:not([view-rendered]) .view-delay { /* mobile device */
display: none !important @media only screen and (max-width : 750px) {
} body {
-webkit-text-size-adjust: none;
}
.display {
float: none
}
}
@media only screen and (max-width : 500px) {
.filters {
clear: both;
position: relative;
top: 2px;
}
}
.rdim {
opacity: .8;
transition: all .15s ease-in;
}
.rdim:hover,
.rdim:focus {
opacity: 1;
transition: all .15s ease-in;
}
.display .description > div p,
.display .description > div pre
{
margin-top: 9px;
margin-bottom: 9px;
}
.display .description > div > *:first-child {
margin-top: 2px;
}
.display .description > div > *:last-child {
margin-bottom: 2px;
}
.display .description > div > ol li p {
margin-top: 0;
margin-bottom: 0;
}
.display .description > div > ul li p {
margin-top: 0;
margin-bottom: 0;
}
.display .description > div ol {
padding-left: 23px;
}
.display .description > div ul {
padding-left: 23px;
}
code, pre {
font-size:13px;
}
#content:not([view-rendered]) .view-delay {
display: none !important
}
/* CSS to be used for HTML Org-mode export
Author: Yann Esposito
*/
:root {
--font-size: 12px;
--line-height: 14px;
}
/* Fonts */
body {
font-family: Menlo, Monaco, monospace;
font-size: var(--font-size);
line-height: var(--line-height);
}
code {
font-family: Menlo, Monaco, monospace;
}
pre, pre code {
font-family: Menlo, Monaco, monospace;
}
.todo, .done {
font-family: Menlo, Monaco, monospace;
}
/* Layout */
body {
margin: 0;
padding: 0;
border: 0;
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
}
h1, h2, h3, h4, h5, h6, pre, code, blockquote, ol, ul, ol ol, ul ul, ul ol, ol
ul, li, p, section, header, footer {
float: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header,
figure {
margin-top: 1em;
margin-bottom: 1em;
}
figure {
margin: 1em 0px;
}
figure > img {
margin: 0px;
}
li {
position: relative;
display: block;
padding-left: 1.5em;
}
ul > li:before {
content: " ";
opacity: 0.5;
float: left;
position: relative;
left: -1.5em;
text-align: right;
width: 0;
}
ol {
counter-reset: ol;
}
ol > li:before {
content: counter(ol) ". ";
counter-increment: ol;
float: left;
text-align: right;
position: relative;
left: -1.5em;
width: 0;
}
ol > li:nth-child(n+10) {
padding-left:28px;
}
ol > li:nth-child(n+10):before {
left: -28px;
}
img {
max-width: 100%;
max-height: 800px;
margin: 1em auto;
}
p > img, li > img {
max-height: 1em;
margin: 0;
vertical-align: middle;
}
table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
border: solid 1px;
display: block;
overflow: scroll;
}
td, th {
height: 1em;
padding: 0 10px;
text-align: left;
vertical-align: middle;
border-right: solid 1px;
border-left: solid 1px;
}
/* Markdown tricks */
h1 {
font-size: 1em;
}
h2 {
font-size: 1em;
}
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 {
position: relative;
height: 1em;
font-size: 0;
line-height: 0;
overflow: hidden;
border: 0;
}
hr:after {
content: "----------------------------------------------------------------------------------------------------";
position: absolute;
top: 0;
left: 0;
width: 100%;
word-wrap: break-word;
}
pre { max-width: 100%; overflow: scroll; }
pre::after,pre::before {
content: "~~~~~~~~~";
display: block; }
pre::before {
content: "~~~~~~~~~ " attr(class);
}
pre code {
background: none;
}
blockquote {
margin-left: 0;
position: relative;
padding-left: 17px;
padding-left: 2ch;
overflow: hidden;
}
.notes *:first-child,
blockquote *:first-child {
margin-top: 0;
}
.notes *:last-child,
blockquote *:last-child {
margin-bottom: 0;
}
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>";
white-space: pre;
position: absolute;
top: 0;
left: 0;
}
navigation {
font-weight: bold;
display: block;
margin: 10px 0;
}
navigation > a {
margin-right: 10px;
}
/* org mode ids and classes */
.figure {
margin-top: 1em;
margin-bottom: 1em;
}
#content,.content {
margin: 0 1em;
padding: 1px;
}
#content:first-child {
margin-top: 0;
}
.timestamp-wrapper {
font-size: 12px;
}
.todo, .done {
font-size: 12px;
font-weight: bold;
padding: 1px 1ex;
}
.article-date {
font-size: 0.8em;
font-style: italic;
float: right;
}
.footpara {
display: inline;
}
.footdef > sup {
vertical-align: middle;
}
.footdef > sup::after {
content: ": ";
}
.notes {
padding: 5px 10px;
}
.notes::before {
content: "☞";
float: left;
display: inline-block;
width: 1.5em;
}
.underline {
text-decoration: underline;
}
table, tr, td { border-color: transparent; }
.dark-gray { color: var(--second-foreground);}
.mid-gray { color: var(--second-foreground);}