Skip to content

Instantly share code, notes, and snippets.

@bumpux

bumpux/c4w.markdown

Created September 22, 2016 16:34
Show Gist options
  • Save bumpux/199fd4149297449554637a741876bd57 to your computer and use it in GitHub Desktop.
Save bumpux/199fd4149297449554637a741876bd57 to your computer and use it in GitHub Desktop.
Download ZIP
c4w
Raw
index.html
<header>
<div><a href="#" id="back_to_KDP"><i class="icon-arrow-left"></i>Back to KDP Bookshelf</a></div>
<div id="toolholder">
<i id="i-fix" class="icon-eye-open icon-large"> </i>
<i id="i-edit" class="icon-pencil icon-large"></i>
<i id="i-preview" class="icon-wrench icon-large selected"></i>
<span class="badge badge-warning fr">8</span>
</div>
</header>
<content>
<aside id="outline">
<h4>Outline</h4>
<ul>
<li><i class="icon-li icon-caret-right"></i><a href="#" data-toggle="tooltip" title="I have a tooltip" id="foo">Cover</a></li>
<li><i class="icon-li icon-caret-right"></i>Copyright</li>
<li><i class="icon-li icon-caret-right"></i>Preface</li>
<li><i class="icon-li icon-caret-right"></i>Foreword</li>
<li><i class="icon-li icon-caret-right"></i>Dedication</li>
<li><i class="icon-li icon-caret-right"></i>Ch. 1: The Very First Chapter</li>
<li><i class="icon-li icon-caret-right"></i>Ch. 2: The Plot Thickens </li>
<li><i class="icon-li icon-caret-right"></i>Etc</li>
</ol>
</aside>
<aside id="rightpane">
<h4>Fix List<!--<i class="icon-wrench right-side"></i><i class="icon-reorder fr" id="toggler" data-toggle="tooltip" title="Hide the Fix List"></i><span class="badge badge-warning fr">4</span>--></h4>
<img src="http://placehold.it/240 x20&text=widget">
<h5 class="first">Critical Fixes</h5>
<div class="fixlistitem">
<h6>No Cover Found</h6>
<p class="muted">We did not find a cover image in your book. We've created a default cover for you, which you can see by going to <a>Cover</a> in the Outline.</p> <p class="muted">To upload a cover or create a new one, please use <a id="kc3" data-toggle="tooltip" title="I have a tooltip">Kindle Cover Creator</a>. </p>
<button class="btn btn-mini" type="button">OK As Is</button>
<!--<hr>-->
</div>
<h5 class="first">Important Fixes</h5>
<div class="fixlistitem">
<h6>No Cover Found</h6>
<p class="muted">We did not find a cover image in your book. We've created a default cover for you, which you can see by going to <a>Cover</a> in the Outline.</p> <p class="muted">To upload a cover or create a new one, please use <a id="kc3" data-toggle="tooltip" title="I have a tooltip">Kindle Cover Creator</a>. </p>
<button class="btn btn-mini" type="button">OK As Is</button>
<!--<hr>-->
</div>
</aside>
<!--<aside id="properties">
<h4>Properties</h4>
</aside>-->
<article>
<section class="chapter">
<div class="ch_number">1</div>
<h1 class="ch_title">Laboriosam</h1>
<blockquote class="ch_epigraph">Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore.<div>—Chaucer</div></blockquote>
<p class="ch_firstparagraph">
Exercitationem cumque ipsum consequatur ab a consequuntur neque necessitatibus alias quas eaque molestias mollitia laboriosam delectus provident natus doloremque repudiandae quis vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae reprehenderit corporis dolorum accusamus aspernatur accusantium earum ipsam sequi optio perferendis odio id vitae voluptates repellendus consequatur molestias distinctio quidem pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo officiis enim vero molestiae est repellendus illum assumenda nisi velit dolorum excepturi eveniet sapiente! Doloremque assumenda sunt neque sit autem?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p class="ch_paragraph">
Eveniet reprehenderit iure accusantium nemo qui nam soluta saepe magnam iusto quas sed totam velit harum delectus fuga cumque esse temporibus tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sunt numquam aperiam asperiores provident esse itaque similique voluptas praesentium nemo dicta aut adipisci aliquam quia eveniet excepturi perspiciatis nihil nobis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae reprehenderit corporis dolorum accusamus aspernatur accusantium earum ipsam sequi optio perferendis odio id vitae voluptates repellendus consequatur molestias distinctio quidem pariatur.
</p>
<p class="ch_paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo officiis enim vero molestiae est repellendus illum assumenda nisi velit dolorum excepturi eveniet sapiente! Doloremque assumenda sunt neque sit autem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet reprehenderit iure accusantium nemo qui nam soluta saepe magnam iusto quas sed totam velit harum delectus fuga cumque esse temporibus tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sunt numquam aperiam asperiores provident esse itaque similique voluptas praesentium nemo dicta aut adipisci aliquam quia eveniet excepturi perspiciatis nihil nobis.
</p>
</section>
<section>
Exercitationem cumque ipsum consequatur ab a consequuntur neque necessitatibus alias quas eaque molestias mollitia laboriosam delectus provident natus doloremque repudiandae quis vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae reprehenderit corporis dolorum accusamus aspernatur accusantium earum ipsam sequi optio perferendis odio id vitae voluptates repellendus consequatur molestias distinctio quidem pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo officiis enim vero molestiae est repellendus illum assumenda nisi velit dolorum excepturi eveniet sapiente! Doloremque assumenda sunt neque sit autem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet reprehenderit iure accusantium nemo qui nam soluta saepe magnam iusto quas sed totam velit harum delectus fuga cumque esse temporibus tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sunt numquam aperiam asperiores provident esse itaque similique voluptas praesentium nemo dicta aut adipisci aliquam quia eveniet excepturi perspiciatis nihil nobis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae reprehenderit corporis dolorum accusamus aspernatur accusantium earum ipsam sequi optio perferendis odio id vitae voluptates repellendus consequatur molestias distinctio quidem pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo officiis enim vero molestiae est repellendus illum assumenda nisi velit dolorum excepturi eveniet sapiente! Doloremque assumenda sunt neque sit autem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet reprehenderit iure accusantium nemo qui nam soluta saepe magnam iusto quas sed totam velit harum delectus fuga cumque esse temporibus tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sunt numquam aperiam asperiores provident esse itaque similique voluptas praesentium nemo dicta aut adipisci aliquam quia eveniet excepturi perspiciatis nihil nobis.
</section>
<section>
Exercitationem cumque ipsum consequatur ab a consequuntur neque necessitatibus alias quas eaque molestias mollitia laboriosam delectus provident natus doloremque repudiandae quis vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae reprehenderit corporis dolorum accusamus aspernatur accusantium earum ipsam sequi optio perferendis odio id vitae voluptates repellendus consequatur molestias distinctio quidem pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo officiis enim vero molestiae est repellendus illum assumenda nisi velit dolorum excepturi eveniet sapiente! Doloremque assumenda sunt neque sit autem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet reprehenderit iure accusantium nemo qui nam soluta saepe magnam iusto quas sed totam velit harum delectus fuga cumque esse temporibus tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sunt numquam aperiam asperiores provident esse itaque similique voluptas praesentium nemo dicta aut adipisci aliquam quia eveniet excepturi perspiciatis nihil nobis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae reprehenderit corporis dolorum accusamus aspernatur accusantium earum ipsam sequi optio perferendis odio id vitae voluptates repellendus consequatur molestias distinctio quidem pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quis atque consectetur cum dicta ipsa aspernatur ea minima sed iure harum impedit vel in alias commodi id distinctio expedita dolore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo officiis enim vero molestiae est repellendus illum assumenda nisi velit dolorum excepturi eveniet sapiente! Doloremque assumenda sunt neque sit autem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet reprehenderit iure accusantium nemo qui nam soluta saepe magnam iusto quas sed totam velit harum delectus fuga cumque esse temporibus tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sunt numquam aperiam asperiores provident esse itaque similique voluptas praesentium nemo dicta aut adipisci aliquam quia eveniet excepturi perspiciatis nihil nobis.
</section>
</article>
</content>
<footer>
<div>Search Your Book<i class="icon-search right-side"></i> </div>
<div style="text-align:right;">Last saved: Today at 11:43:21 PM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</footer>
Raw
script.js
// refresh viewport units to correct browser bug
causeRepaintsOn = $("h1, h2, h3, p, article, section");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
//tooltip
$('#toggler').tooltip({placement: "bottom", delay: { show: 600, hide: 300 }});
$('#kc3').click(function () {
$('#properties').slideToggle();
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Raw
style.less
html.cyborg { // everything in this namespace.
// this will prevent conflicts with imported libraries - however, generic styles (e.g. element styles) in those libraries will be in effect unless you specifically override them
// variables
@header-footer-height: 32px;
@header-footer-color: #555;
@aside-width: 260px;
font-family:Lato, arial,sans-serif;
font-size: 14px;
header, footer, content {
position:absolute;
right:0;
left:0;
}
header, footer {
display: table; //http://css-tricks.com/vertically-center-multi-lined-text/
height: @header-footer-height;
width:100%;
background: @header-footer-color;
padding: 0 12px 0 12px;
z-index:1000;
&>* {
font-size: .82em;
}
* {
color: #ddd;
}
input {
// height: 12px;
}
a {
//font-size: .85em;
text-decoration: none;
&:hover {
//text-decoration: none;
color: #fff;
}
}
div {
position:relative;
display: table-cell;
vertical-align: middle;
// padding: 0px 12px;
//text-align: center;
}
}
header {
top:0;
border-bottom: 1px solid #333;
#toolholder {
position:relative;
width: 260px;
text-align:center;
i {
//width: 20px;
height: 100%;
padding: 10px;
height: 12px;
width: 26px;
color: #aaa;
&.selected {
background:#ddd;
border: 1px solid #ddd;
color: #444;
}
}
span {
display:block;
position: absolute;
right:46px;
top: 8px;
z-index: 1001;
}
}
}
footer {
bottom:0;
opacity: 0.88;
border-top: 1px solid #333;
}
////////
content {
top:@header-footer-height;
bottom: 0;
margin-bottom: 0;
overflow:hidden;
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
aside {
position:absolute;
top:0;
bottom:@header-footer-height;
width: @aside-width;
&>* {
margin: 12px;
}
h4 {
font-weight: normal;
font-size: 1.1em;
border-bottom: 1px solid #ccc;
background: #ddd;
margin: 0;
padding: 8px 8px 6px 8px;
}
&#outline {
// top: 0px;
left:0;
background:#fff;
box-shadow:inset 0px 0px 85px rgba(0,0,0,.2);
opacity: 1;
border-right: 1px solid #ccc;
ul {
padding: 0;
list-style-type: none;
font-size: 0.96em;
// font-variant: small-caps;
margin: 0 0 0 18px;
li {
line-height: 1.9em;
}
}
//box-shadow: inset 0 0 10px #888;
//border-radius: 0px 10px 0px 00px; /* top left, top right, bottom right, bottom left */
}
&#rightpane {
right:0;
//height: 30px;
background:#fff;
box-shadow:inset 0px 0px 85px rgba(0,0,0,.2);
border-left: 1px solid #ccc;
//color: #eee;
//#toggler {
//cursor: pointer;
//}
h5 {
background: #999;
color: #fff;
font-size: 0.96em;
padding: 4px 8px;
text-transform: uppercase;
font-weight: 300;
margin:0;
margin-left: -5px;
}
div.fixlistitem {
margin: 0;
background:#fff;
padding-bottom: 12px;
h6 {
color: #666;
margin: 8px;
}
p {position:relative;
font-size: 0.86em;
width: 80%;
left: 10px;
}
button {
position: relative;
left: 10px;
}
hr { width: 80%; }
}
}
} // asides
article { // MAIN CONTAINER
position:absolute;
//max-width: 40vw;
top:0;
bottom:0px;
left:@aside-width;
right:@aside-width;
margin: auto 1em;
overflow:auto;
// i.e. "chapters"
section {
position:relative;
max-width: 40vw;
border: 2px solid #999;
margin: 4vh auto;
padding: 34px;
background: #fff;
box-shadow: 0px 0px 10px 3px #ccc;
border-radius: 3px 3px 0px 0px; /* top left, top right, bottom right, bottom left */
z-index: 500;
font-family: Gentium, Georgia, serif;
font-size: 1.1em;
line-height: 1.7em;
text-align: justify; text-justify: newspaper;
.ch_number, .ch_title {
//text-transform: uppercase;
text-align: center;
}
.ch_number {
font-size: 6em;
margin: 100px 0 1em 0;
}
.ch_title {
font-size: 1.8em;
margin: 0 0 2.2em 0;
}
.ch_epigraph {
font-size: 82%;
//text-align: right;
font-style: italic;
line-height: 1.2em;
border: none;
margin: 0 10% 0 24%;
div {
text-align:right;
margin-top:1.4em;
}
}
.ch_firstparagraph {
margin-top: 2em;
&::first-line {
font-variant:small-caps;
}
&::first-letter {
float: left;
color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px;}
}
}
}
}
i {
margin-right: 0.4em;
&.right-side {
margin-left: 0.4em;
}
}
.fr {float:right}
.fl {float:left}
.badge {margin: auto 6px;}
//////////////////////////////
} // end html.cyborg namespace
Raw
styles
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment