update styles

This commit is contained in:
daniel-j 2018-03-12 22:07:11 +01:00
parent 105c1efd75
commit dfd6e9897e
7 changed files with 410 additions and 344 deletions

20
src/style/icons.styl Normal file
View file

@ -0,0 +1,20 @@
// Font Awesome icons!
@font-face {
font-family: 'FontAwesome';
src: url('../Fonts/fontawesome-webfont-subset.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-fw {
width: 1.28571429em;
text-align: center;
}

62
src/style/navstyle.styl Normal file
View file

@ -0,0 +1,62 @@
.invisible {
display: none;
}
h3 {
font-weight: normal;
text-align: center;
margin: 0;
margin-bottom: 1em;
}
#toc {
.item {
margin: 0.2em 0;
text-indent: -0.5em;
margin-left: 0.5em;
text-align: left;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
clear: both;
vertical-align: middle;
// clearfix
&:after {
content: "";
display: table;
clear: both;
}
&.double {
margin-top: 1em;
}
.date {
display: inline;
font-size: 0.7em;
white-space: nowrap;
opacity: 0.6;
}
.floatbox {
display: block;
float: right;
white-space: nowrap;
vertical-align: middle;
text-align: right;
padding-left: 1em;
margin-left: 1em;
}
.wordcount {
font-size: 0.7em;
opacity: 0.6;
}
}
}
li[hidden] {
display: none;
}

View file

@ -1,6 +1,7 @@
p {
margin-top: 1em;
margin-bottom: 1em;
}
.chapter-title + p {

48
src/style/reset.styl Normal file
View file

@ -0,0 +1,48 @@
/* CSS reset with box-sizing fix */
/*
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

View file

@ -1,10 +1,23 @@
@require 'mixins'
@require 'reset'
@page {
margin-top: 0.3em;
margin-bottom: 0.2em;
}
body {
background-color: white;
color: black;
text-align: justify;
hyphens: auto;
-epub-hyphens: auto;
}
a, u {
text-decoration-skip: ink;
}
p {
@ -22,9 +35,6 @@ p {
&.indented {
text-indent: 1em;
}
&:first-child {
margin-top: 0;
}
}
div p {
text-indent: 0;
@ -32,6 +42,8 @@ div p {
h1, h2, h3, h4, h5, h6 {
text-align: left;
hyphens: none;
-epub-hyphens: none;
}
em {
@ -42,7 +54,7 @@ em em {
}
.chapter-title {
margin-top: 1.5em;
margin-top: 2em;
margin-bottom: 1.5em;
h1 {
@ -57,24 +69,19 @@ img {
width: auto;
max-width: 100%;
max-height: 100%;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
img.emoji {
height: 1em;
vertical-align: top;
}
img.emoticon {
height: 1.3em;
vertical-align: bottom;
}
hr.old {
padding: 0;
margin-top: 0.8em;
margin-bottom: 0.8em;
height: 0;
border: none;
border-bottom: 1px solid #000;
border-color: currentColor;
opacity: 0.5;
width: 100%;
}
// Fimfiction's new horizontal ruler:
hr {
box-sizing: border-box;
padding: 0;
@ -88,90 +95,186 @@ hr {
border-bottom-style: solid;
border-color: #999;
border-color: currentColor;
height: 4px;
height: 0.15em;
min-height: 4px;
background: transparent;
width: 90%;
margin: 2em auto;
clear: both;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
// This looks bad on black background/dark themes
/*hr:after {
color: #333;
display: inline-block;
position: relative;
top: -0.5em;
font-size: 1.0em;
padding: 0 0.5em;
background: white;
line-height: 1.0em
line-height: 1.0em;
color: #999;
color: currentColor;
content: "\274A \274A \274A";
margin-top: 2px;
}*/
blockquote {
margin: 10px 0px;
padding: 20px;
hr.old {
padding: 0;
margin-top: 0.5em;
margin-bottom: 1em;
height: 0;
min-height: 0;
border: none;
border-left: 5px solid rgba(0,0,0,0.2);
bgcolor(rgba(0,0,0,0.1));
border-bottom: 1px solid #999;
border-color: currentColor;
opacity: 0.5;
width: 100%;
}
blockquote {
clear: both;
margin: 1em 0;
padding: 0.1px 0;
padding-left: 4%;
border: none;
border-left: 0.4rem solid #CCC;
border-left: 0.4rem solid rgba(0,0,0,0.2);
// bgcolor(#EEE);
// bgcolor(rgba(0,0,0,0.075));
// clearfix
&:after {
content: "";
display: table;
clear: both;
}
/:root[__ibooks_internal_theme*="Night"] & {
border-color: rgba(255,255,255,0.2);
bgcolor(rgba(255,255,255,0.1));
// bgcolor(rgba(255,255,255,0.1));
}
}
&.left_insert, &.right_insert {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 15px;
background-color: #F7F7F7;
border: 1px solid #AAA;
width: 50%;
box-shadow: 5px 5px 0px #EEE;
/:root[__ibooks_internal_theme*="Gray"] & {
bgcolor(rgba(0,0,0,0.1));
box-shadow: 5px 5px 0px #666;
}
/:root[__ibooks_internal_theme*="Night"] & {
bgcolor(rgba(255,255,255,0.1));
box-shadow: none;
}
.bbcode-figure-left {
max-width: 40%;
float: left;
margin: 0;
margin-right: 1.5rem;
margin-bottom: 0.5rem;
margin-top: 0;
}
.bbcode-figure-right {
max-width: 40%;
float: right;
margin: 0;
margin-left: 1.5rem;
margin-bottom: 0.5rem;
margin-top: 0;
}
figure img {
border-radius: 5px;
}
.bbcode-indent {
&-1 { margin-left: 1em; }
&-2 { margin-left: 2em; }
&-3 { margin-left: 3em; }
&-4 { margin-left: 4em; }
}
.bbcode-pre-line p {
text-indent: 0 !important;
}
sub {
font-size: 0.675em;
line-height: 1.2;
vertical-align: sub;
vertical-align: -20%;
}
sup {
font-size: 0.675em;
line-height: 1.2;
vertical-align: super;
vertical-align: 35%;
}
code {
font-family: monospace;
background-color: #DDD;
bgcolor(rgba(200, 200, 200, 0.2));
padding: .1875rem;
border-radius: .3125rem;
}
pre {
margin: 1em 0;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.4;
}
pre code {
padding: 1em;
padding: 1rem;
display: block;
position: relative;
ord-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.spoiler {
background-color: black;
color: transparent;
/:root[__ibooks_internal_theme*="Gray"] &, /:root[__ibooks_internal_theme*="Night"] & {
background-color: white;
}
&.left_insert {
margin-right: 25px;
float: left;
}
&.right_insert {
margin-left: 25px;
float: right;
&:hover {
background-color: initial;
color: inherit;
/:root[__ibooks_internal_theme*="Gray"] &, /:root[__ibooks_internal_theme*="Night"] & {
background-color: initial;
}
}
}
figure.youtube {
margin: 1em auto;
width: 60%;
max-width: 640px;
clear: both;
margin: 0 auto;
padding: 1em 0;
width: 70%;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
border: 1px solid #999;
border-radius: 3px;
padding: 3px;
& > a {
display: block;
width: 70%;
margin: 0 auto;
}
img {
display: block;
width: 100%;
border-radius: 7px;
}
figcaption {
line-height: 1em;
text-align: left;
padding: 3px;
line-height: 1rem;
text-align: center;
margin-top: .3rem;
a {
font-style: italic;
font-size: 0.75em;
font-size: 0.75rem;
}
}
}
@ -182,12 +285,13 @@ figure.youtube {
#author_notes {
clear: both;
border: 1px solid #ddd;
border: 1px solid #DDD;
border-radius: 3px;
line-height: 1.7em;
padding: 16px;
margin-top: 1.0em;
margin-bottom: 1.0em;
padding: 1em;
margin-top: 2em;
margin-bottom: 2em;
background-color: #EEE;
color: #555;
@ -198,6 +302,11 @@ figure.youtube {
}
a.chaptercomments {
clear: both;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
text-decoration: none;
display: inline-block;
position: relative;
@ -224,40 +333,3 @@ a.chaptercomments {
background: linear-gradient(to bottom, #7bb042 0%, #6fa03c 100%);
}
#toc {
h3 {
font-weight: normal;
text-align: center;
margin: 0;
margin-bottom: 0.5em;
}
ol {
list-style-type: none;
padding: 0;
margin: 0;
li {
// overflow: auto;
a, .floatbox {
padding: 0.3em;
padding-left: 0;
padding-right: 0;
display: inline-block;
}
.floatbox {
float: right;
}
span.date, span.wordcount {
font-size: 0.8em;
color: #888;
text-align: left;
}
}
}
[hidden] {
display: none;
}
}

View file

@ -32,27 +32,120 @@
}
}
#description p {
margin: 1em 0;
text-indent: 0;
}
.content-rating {
textcolor(#fff);
display: inline-block;
padding: 0.3em 0.5em;
line-height: 1.0em;
border-radius: 4px;
font-size: .8125rem;
vertical-align: 4px;
margin-right: .3125rem;
&-everyone {
bgcolor(#78ac40);
border: 1px solid #6c9b3a;
}
&-teen {
bgcolor(#ffb400);
border: 1px solid #e6a200;
}
&-mature {
bgcolor(#c03d2f);
border: 1px solid #ad372a;
}
}
.readlink {
text-align: left;
font-size: 0.9em;
line-height: 1.1em;
}
.categories {
// Tags
.tags {
margin-bottom: 0.6em;
text-align: left;
margin: 0.5em 0;
margin-top: 1em;
font-size: 0.8em;
}
.story-tag {
display: inline-block;
padding: 0.3em 0.5em;
margin-bottom: 0.3em;
line-height: 1.0em;
bgcolor(#444);
textcolor(#fff);
text-decoration: none;
border-radius: 4px;
border: 1px solid #525252;
font-family: sans-serif;
}
.tag-series {
bgcolor(#a151bd);
border: 1px solid #8945a1;
}
.tag-genre {
bgcolor(#4f91d6);
border: 1px solid #437bb6;
}
.tag-character {
bgcolor(#23b974);
border: 1px solid #1e9d63;
}
.tag-warning {
bgcolor(#d6605a);
border: 1px solid #b6524d;
}
.bottom {
margin-top: 1em;
text-align: left;
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.characters {
margin-top: 0.5em;
text-align: left;
// Statuses
.completed-status {
margin-bottom: 0.5em;
font-family: sans-serif;
font-size: .875em;
font-weight: normal;
padding: 0.3em 0.5em;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
display: inline-block;
text-align: center;
textcolor(#fff);
vertical-align: middle;
i.fa {
margin-right: 0.1em;
}
&-complete {
bgcolor(#63bd40);
border-color: #59aa3a;
// check
}
&-incomplete {
bgcolor(#F7A616);
border-color: #de9514;
// pencil
}
&-hiatus {
bgcolor(#bd7b40);
border-color: #aa6f3a;
// pause
}
&-cancelled {
bgcolor(#bc3131);
border-color: #a92c2c;
// ban
}
}
// Last Modified and First Published
@ -81,233 +174,3 @@
color: #444;
}
}
// Character icon
span.character_icon {
vertical-align: middle;
margin: 0;
margin-right: 0.2em;
padding: 0.2em;
bgcolor(#fff);
border-radius: 3px;
display: inline-block;
vertical-align: middle;
border: 1px solid #999;
margin-bottom: 6px;
img.character_icon {
border-radius: 0;
display: block;
height: 2em;
}
}
// Ratings
.content-rating-everyone, .content-rating-teen, .content-rating-mature {
padding: 0.5em;
textcolor(#fff);
border: 1px solid rgba(0,0,0,0.2);
text-shadow: -1px -1px rgba(0,0,0,0.2);
border-radius: 4px;
margin-bottom: 4px;
display: inline-block;
line-height: 1.0em;
font-family: sans-serif;
font-weight: bold;
}
.content-rating-everyone {
bgcolor(#78ac40);
box-shadow: 0px 1px 0px #90ce4d inset;
}
.content-rating-teen {
bgcolor(#ffb400);
box-shadow: 0px 1px 0px #ffd800 inset;
}
.content-rating-mature {
bgcolor(#c03d2f);
box-shadow: 0px 1px 0px #e64938 inset;
}
// Statuses
.completed-status-complete, .completed-status-incomplete, .completed-status-hiatus, .completed-status-cancelled {
margin-bottom: 0.5em;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
padding: 0.3em 0.6em;
text-shadow: -1px -1px rgba(0,0,0,0.2);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
display: inline-block;
text-align: center;
textcolor(#fff);
vertical-align: middle;
}
.completed-status-complete {
bgcolor(#63bd40);
}
.completed-status-incomplete {
bgcolor(#F7A616);
}
.completed-status-hiatus {
bgcolor(#bd7b40);
}
.completed-status-cancelled {
bgcolor(#bc3131);
}
// Categories
.story_category {
display: inline-block;
padding: 0.5em;
line-height: 1.0em;
text-decoration: none;
bgcolor(#eee);
textcolor(#fff);
border-radius: 4px;
margin-bottom: 0.3em;
font-family: sans-serif;
}
.story_character {
display: inline-block;
padding: 0.3em 0.5em;
line-height: 1.0em;
bgcolor(#23b974);
textcolor(#fff);
text-decoration: none;
border-radius: 0.3em;
border: 1px solid #1e9d63;
font-family: sans-serif;
}
.story_category_sex {
bgcolor(#992584);
box-shadow: 0px 1px 0px #b82c9e inset;
text-shadow: -1px -1px #7a1e6a;
border: 1px solid #821f70;
}
.story_category_gore {
bgcolor(#742828);
box-shadow: 0px 1px 0px #8b3030 inset;
text-shadow: -1px -1px #5d2020;
border: 1px solid #632222;
}
.story_category_romance {
bgcolor(#974bff);
box-shadow: 0px 1px 0px #b55aff inset;
text-shadow: -1px -1px #793ccc;
border: 1px solid #8040d9;
}
.story_category_dark {
bgcolor(#b93737);
box-shadow: 0px 1px 0px #de4242 inset;
text-shadow: -1px -1px #942c2c;
border: 1px solid #9d2f2f;
}
.story_category_sad {
bgcolor(#bd42a7);
box-shadow: 0px 1px 0px #e34fc8 inset;
text-shadow: -1px -1px #973586;
border: 1px solid #a1388e;
}
.story_category_tragedy {
bgcolor(#ffb54b);
box-shadow: 0px 1px 0px #ffd95a inset;
text-shadow: -1px -1px #cc913c;
border: 1px solid #d99a40;
}
.story_category_comedy {
bgcolor(#f59c00);
box-shadow: 0px 1px 0px #fb0 inset;
text-shadow: -1px -1px #c47d00;
border: 1px solid #d08500;
}
.story_category_random {
bgcolor(#3f74ce);
box-shadow: 0px 1px 0px #4c8bf7 inset;
text-shadow: -1px -1px #325da5;
border: 1px solid #3663af;
}
.story_category_slice_of_life {
bgcolor(#4b86ff);
box-shadow: 0px 1px 0px #5aa1ff inset;
text-shadow: -1px -1px #3c6bcc;
border: 1px solid #4072d9;
}
.story_category_adventure {
bgcolor(#45c950);
box-shadow: 0px 1px 0px #53f160 inset;
text-shadow: -1px -1px #37a140;
border: 1px solid #3bab44;
}
.story_category_alternate_universe {
bgcolor(#888);
box-shadow: 0px 1px 0px #a3a3a3 inset;
text-shadow: -1px -1px #6d6d6d;
border: 1px solid #747474;
}
.story_category_crossover {
bgcolor(#47b8a0);
box-shadow: 0px 1px 0px #55ddc0 inset;
text-shadow: -1px -1px #399380;
border: 1px solid #3c9c88;
}
.story_category_human {
bgcolor(#b5835a);
box-shadow: 0px 1px 0px #d99d6c inset;
text-shadow: -1px -1px #916948;
border: 1px solid #9a6f4d;
}
.story_category_anthro {
bgcolor(#b5695a);
box-shadow: 0px 1px 0px #d97e6c inset;
text-shadow: -1px -1px #915448;
border: 1px solid #9a594d;
}
.story_category_scifi {
bgcolor(#5d63a5);
box-shadow: 0px 1px 0px #7077c6 inset;
text-shadow: -1px -1px #4a4f84;
border: 1px solid #4f548c;
}
.story_category_equestria_girls {
bgcolor(#4d3281);
box-shadow: 0px 1px 0px #5c3c9b inset;
text-shadow: -1px -1px #3e2867;
border: 1px solid #412b6e;
}
.story_category_horror {
bgcolor(#6d232f);
box-shadow: 0px 1px 0px #832a38 inset;
text-shadow: -1px -1px #571c26;
border: 1px solid #5d1e28;
}
.story_category_mystery {
bgcolor(#444);
box-shadow: 0px 1px 0px #525252 inset;
text-shadow: -1px -1px #363636;
border: 1px solid #3a3a3a;
}
.story_category_drama {
bgcolor(#ec50ca);
box-shadow: 0px 1px 0px #ff60f2 inset;
text-shadow: -1px -1px #bd40a2;
border: 1px solid #c944ac;
}
.story_category_thriller {
bgcolor(#d62b2b);
box-shadow: 0px 1px 0px #ff3434 inset;
text-shadow: -1px -1px #ab2222;
border: 1px solid #b62525;
}
.story_category_second_person {
bgcolor(#02a1db);
box-shadow: 0px 1px 0px #02c1ff inset;
text-shadow: -1px -1px #0281af;
border: 1px solid #0289ba;
}

View file

@ -1,10 +1,10 @@
let styleCss, coverstyleCss, titlestyleCss
styleCss = require('./style/style')
coverstyleCss = require('./style/coverstyle')
titlestyleCss = require('./style/titlestyle')
let paragraphsCss = {
const styleCss = require('./style/style')
const coverstyleCss = require('./style/coverstyle')
const titlestyleCss = require('./style/titlestyle')
const navstyleCss = require('./style/navstyle')
const iconsCss = require('./style/icons')
const paragraphsCss = {
spaced: require('./style/paragraphs-spaced'),
indented: require('./style/paragraphs-indented'),
indentedall: require('./style/paragraphs-indentedall')
@ -12,4 +12,4 @@ let paragraphsCss = {
paragraphsCss.both = paragraphsCss.indented + '\n' + paragraphsCss.spaced
export { styleCss, coverstyleCss, titlestyleCss, paragraphsCss }
export { styleCss, coverstyleCss, titlestyleCss, navstyleCss, iconsCss, paragraphsCss }