| f57014f5 |
:root {
--zenburn-fg-plus-2: #FFFFEF;
--zenburn-fg-plus-1: #F5F5D6;
--zenburn-fg: #DCDCCC;
--zenburn-fg-1: #A6A689;
--zenburn-fg-2: #656555;
--zenburn-black: #000000;
--zenburn-bg-2: #000000;
--zenburn-bg-1: #2B2B2B;
--zenburn-bg-05: #383838;
--zenburn-bg: #3F3F3F;
--zenburn-bg-plus-05: #494949;
--zenburn-bg-plus-1: #4F4F4F;
--zenburn-bg-plus-2: #5F5F5F;
--zenburn-bg-plus-3: #6F6F6F;
--zenburn-red-plus-2: #ECB3B3;
--zenburn-red-plus-1: #DCA3A3;
--zenburn-red: #CC9393;
--zenburn-red-1: #BC8383;
--zenburn-red-2: #AC7373;
--zenburn-red-3: #9C6363;
--zenburn-red-4: #8C5353;
--zenburn-red-5: #7C4343;
--zenburn-red-6: #6C3333;
--zenburn-orange: #DFAF8F;
--zenburn-yellow: #F0DFAF;
--zenburn-yellow-1: #E0CF9F;
--zenburn-yellow-2: #D0BF8F;
--zenburn-green-5: #2F4F2F;
--zenburn-green-4: #3F5F3F;
--zenburn-green-3: #4F6F4F;
--zenburn-green-2: #5F7F5F;
--zenburn-green-1: #6F8F6F;
--zenburn-green: #7F9F7F;
--zenburn-green-plus-1: #8FB28F;
--zenburn-green-plus-2: #9FC59F;
--zenburn-green-plus-3: #AFD8AF;
--zenburn-green-plus-4: #BFEBBF;
--zenburn-cyan: #93E0E3;
--zenburn-blue-plus-3: #BDE0F3;
--zenburn-blue-plus-2: #ACE0E3;
--zenburn-blue-plus-1: #94BFF3;
--zenburn-blue: #8CD0D3;
--zenburn-blue-1: #7CB8BB;
--zenburn-blue-2: #6CA0A3;
--zenburn-blue-3: #5C888B;
--zenburn-blue-4: #4C7073;
--zenburn-blue-5: #366060;
--zenburn-magenta: #DC8CC3;
}
|
| 79f9884d |
* {
|
| 15c32158 |
box-sizing: border-box;
transition: font-size 0.2s ease;
|
| 79f9884d |
}
|
| 25a661c3 |
body {
|
| 15c32158 |
margin: 0px;
font-family: "Lato", "Alegreya Sans", sans-serif;
|
| f57014f5 |
background: var(--zenburn-bg);
color: var(--zenburn-fg);
|
| 15c32158 |
font-weight: 300;
|
| 6b5fe892 |
}
.current {
|
| f57014f5 |
background-color: var(--zenburn-bg-plus-1);
color: var(--zenburn-fg-plus-1);
|
| 25a661c3 |
}
#container {
|
| 15c32158 |
opacity: 1;
transition: 0.1s ease opacity;
|
| 25a661c3 |
}
#container[v-cloak] {
|
| 15c32158 |
opacity: 0;
|
| 25a661c3 |
}
a {
|
| f57014f5 |
color: var(--zenburn-fg);
|
| 15c32158 |
border: thin solid transparent;
|
| f57014f5 |
cursor: pointer;
|
| 79f9884d |
}
|
| 15c32158 |
.current_feed a,
.feeds a {
display: inline-block;
vertical-align: middle;
text-decoration: none;
cursor: pointer;
margin-right: 1em;
width: 100%;
|
| 25a661c3 |
}
|
| 79f9884d |
a:hover {
|
| f57014f5 |
border-color: var(--zenburn-blue-1);
background-color: var(--zenburn-fg-1);
|
| 79f9884d |
}
a:focus {
|
| 15c32158 |
text-decoration: underline;
|
| 6b5fe892 |
}
header * {
|
| 15c32158 |
padding: 0;
margin: 0;
|
| 25a661c3 |
}
|
| 6b5fe892 |
#container > .left,
|
| 2f3de0b8 |
#container > .right {
|
| 15c32158 |
top: 7em;
|
| 6b5fe892 |
}
#container > .left.collapsed,
#container > .right.v-expand {
|
| 15c32158 |
top: 3em;
|
| 6b5fe892 |
}
#container > .right.v-expand .article-title {
|
| 15c32158 |
font-size: 0.75rem;
|
| 6b5fe892 |
}
#container > header {
|
| 15c32158 |
height: 7em;
|
| 6b5fe892 |
}
#container > header.v-collapse {
|
| 15c32158 |
height: 3em;
|
| 6b5fe892 |
}
#container > header.v-collapse .general-info {
|
| 15c32158 |
line-height: 3em;
|
| 6b5fe892 |
}
#container > header {
|
| 15c32158 |
width: 100vw;
|
| f57014f5 |
background: var(--zenburn-bg);
border-bottom: 4px double var(--zenburn-green);
|
| 15c32158 |
box-sizing: border-box;
position: absolute;
display: block;
right: 0;
font-size: 16px;
line-height: 1.25;
transition: height 0.2s ease, line-height 0.2s ease;
overflow: hidden;
z-index: 1000;
|
| 6b5fe892 |
}
#container > header > * {
|
| 15c32158 |
vertical-align: middle;
|
| 6b5fe892 |
}
#container > header > .general-info {
|
| 15c32158 |
width: 24vw;
height: 100%;
line-height: 6rem;
display: block;
float: left;
text-align: right;
padding-right: 1em;
|
| f57014f5 |
border-right: 3px var(--zenburn-green) double;
|
| 15c32158 |
transition: width 0.2s ease, padding 0.2s ease;
overflow: hidden;
|
| 6b5fe892 |
}
.collapsed + .right > .article-container {
|
| 15c32158 |
width: 38em;
|
| 6b5fe892 |
}
#container > header > .general-info.collapsed {
|
| 15c32158 |
padding-right: 0em;
|
| 6b5fe892 |
}
#container > header > .feed-info {
|
| 15c32158 |
width: 75vw;
height: 100%;
line-height: 2rem;
display: block;
float: right;
|
| 6b5fe892 |
}
|
| 15c32158 |
header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
max-height: 1.2em;
width: auto;
border: none;
margin: 0.1em 0;
|
| 6b5fe892 |
}
#container > header > .general-info.collapsed + .feed-info .description {
|
| 15c32158 |
display: none;
|
| 6b5fe892 |
}
|
| 15c32158 |
|
| 6b5fe892 |
#container > header.v-collapse > .feed-info h2,
#container > header.v-collapse > .feed-info h3 {
|
| 15c32158 |
display: inline-block;
font-size: 1rem;
|
| 25a661c3 |
}
|
| 2f3de0b8 |
#container > .right {
|
| 15c32158 |
overflow-y: auto;
width: 50vw;
box-sizing: border-box;
position: absolute;
display: block;
bottom: 0;
right: 0;
font-size: 16px;
line-height: 1.25;
|
| 25a661c3 |
}
|
| 15c32158 |
h1,
h2,
h3,
h4,
h5,
h6 {
border-bottom: 3px #28b0b1 double;
|
| 25a661c3 |
}
|
| 15c32158 |
#container > *,
#container > .left > * {
transition: width 0.2s ease, top 0.2s ease;
|
| 2f3de0b8 |
}
.article-container {
|
| 15c32158 |
width: 30em;
margin: auto;
transition: width 0.2s ease;
letter-spacing: +0.25px;
line-height: 1.5;
|
| 6b5fe892 |
}
.article-title {
|
| 15c32158 |
padding: 0.5em 1em;
position: relative;
|
| 6b5fe892 |
}
.article-title a {
|
| 15c32158 |
display: block;
|
| 6b5fe892 |
}
.article-title button {
|
| 15c32158 |
font-family: "Source Code Pro", "Courier New", monospace;
position: absolute;
right: 1em;
bottom: 0.5em;
|
| 2f3de0b8 |
}
|
| f57014f5 |
.like_button {
padding: 0.3em;
}
|
| 2f3de0b8 |
#container > .left {
|
| f57014f5 |
border-right: 4px var(--zenburn-blue) double;
|
| 15c32158 |
width: 50vw;
overflow: hidden;
box-sizing: border-box;
position: absolute;
display: block;
left: 0;
bottom: 0;
|
| 25a661c3 |
}
|
| 6b5fe892 |
div.description {
|
| 15c32158 |
line-height: 1em;
margin-top: 0.5em;
|
| 6b5fe892 |
}
|
| 25a661c3 |
|
| 2f3de0b8 |
#container > .right img {
|
| 15c32158 |
max-width: 95%;
height: auto;
display: block;
margin: auto;
|
| 25a661c3 |
}
|
| 79f9884d |
|
| 15c32158 |
.current_feed,
.feeds {
overflow-x: hidden;
overflow-y: scroll;
|
| 79f9884d |
}
.current_feed {
|
| 15c32158 |
height: 100%;
width: 25vw;
float: right;
|
| 79f9884d |
}
.feeds {
|
| 15c32158 |
height: 100%;
width: 24vw;
float: left;
padding: 1em;
border-right: 3px var(--zenburn-blue) double;
|
| 79f9884d |
}
|
| 15c32158 |
.feeds .title,
.feeds .url {
white-space: nowrap;
|
| 79f9884d |
}
.feeds .title {
|
| 15c32158 |
font-size: 120%;
|
| 79f9884d |
}
.feeds .url {
|
| 15c32158 |
font-size: 75%;
padding-left: 2.5em;
margin-bottom: 0.5em;
|
| 79f9884d |
}
|
| 2f3de0b8 |
.collapsed {
|
| 15c32158 |
width: 0vw !important;
overflow: hidden;
|
| 2f3de0b8 |
}
.collapsed > * {
|
| 15c32158 |
width: 0vw !important;
overflow: hidden;
|
| 2f3de0b8 |
}
|
| 15c32158 |
.collapsed + .right,
.collapsed + .top {
width: 100vw !important;
|
| 2f3de0b8 |
}
.collapse-toggle {
|
| 6b5fe892 |
position: absolute;
right: 1em;
|
| f57014f5 |
top: 30%;
|
| 6b5fe892 |
transform: translateY(-50%);
|
| f57014f5 |
padding: 0.3em;
border-radius: 0.3em;
|
| 2f3de0b8 |
}
|
| 15c32158 |
.code,
code,
pre {
white-space: pre;
|
| f57014f5 |
background: var(--zenburn-bg-2);
border: 1px solid var(--zenburn-fg);
|
| 15c32158 |
font-family: "Source Code Pro", monospace;
font-size: 10px;
|
| 2f3de0b8 |
}
|
| d434ca1d |
code {
|
| 15c32158 |
padding: 0 0.5em;
|
| d434ca1d |
}
pre {
|
| 15c32158 |
padding: 1em;
|
| d434ca1d |
}
|
| 15c32158 |
.code pre,
code .code,
pre code,
.code .code,
code code,
pre pre,
.code code,
code pre,
pre .code {
background: transparent;
padding: 0;
border: none;
|
| 2f3de0b8 |
}
|
| 6b5fe892 |
.current_feed ul {
|
| 15c32158 |
padding: 0;
list-style: none;
|
| 6b5fe892 |
}
.current_feed ul > li {
|
| 15c32158 |
padding: 0.25em 0.25em;
|
| 6b5fe892 |
}
.current_feed ul a {
|
| 15c32158 |
padding: 0.1em 0.25em;
|
| 6b5fe892 |
}
|