Permalink
Browse files

Update with responsive styles

  • Loading branch information...
1 parent bd282d5 commit 1126792ee62b32243e1a50fad1044d1a7c68562f @mixu committed Sep 25, 2015
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,42 @@
+.post h1,
+.post h2,
+.post h3,
+.post h4,
+.post h5,
+.post h6 {
+ position: relative;
+}
+
+.post h1:hover .header-link:before,
+.post h2:hover .header-link:before,
+.post h3:hover .header-link:before,
+.post h4:hover .header-link:before,
+.post h5:hover .header-link:before,
+.post h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.post .header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+.post h1:hover .header-link,
+.post h2:hover .header-link,
+.post h3:hover .header-link,
+.post h4:hover .header-link,
+.post h5:hover .header-link,
+.post h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -33,13 +33,27 @@ a, ins {
}
@font-face {
- font-family: 'PT Sans';
- src: url('fonts/pt_sans-web-regular-webfont.eot');
- src: url('fonts/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('fonts/pt_sans-web-regular-webfont.woff2') format('woff2'),
- url('fonts/pt_sans-web-regular-webfont.woff') format('woff'),
- url('fonts/pt_sans-web-regular-webfont.ttf') format('truetype'),
- url('fonts/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg');
+ font-family: 'Lora';
+ src: url('fonts/lora-regular-webfont.eot');
+ src: url('fonts/lora-regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('fonts/lora-regular-webfont.woff2') format('woff2'),
+ url('fonts/lora-regular-webfont.woff') format('woff'),
+ url('fonts/lora-regular-webfont.ttf') format('truetype'),
+ url('fonts/lora-regular-webfont.svg#pt_sansregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Droid Sans Mono';
+ src: url('fonts/droidsansmono-webfont.eot');
+ src: url('fonts/droidsansmono-webfont.eot?#iefix') format('embedded-opentype'),
+ url('fonts/droidsansmono-webfont.woff2') format('woff2'),
+ url('fonts/droidsansmono-webfont.woff') format('woff'),
+ url('fonts/droidsansmono-webfont.ttf') format('truetype'),
+ url('fonts/droidsansmono-webfont.svg#droid_sans_monoregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
font-weight: normal;
font-style: normal;
}
@@ -54,7 +68,7 @@ html {
}
body {
- font-family: 'PT Sans', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
+ font-family: 'Lora', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
@@ -75,7 +89,6 @@ hr {
margin-top: 2.029em;
margin-left: auto;
margin-right: auto;
- width: 940px;
position: relative;
height: 4em;
@@ -117,18 +130,23 @@ div.clear hr {
#wrapper {
margin-left: auto;
margin-right: auto;
- width: 960px;
+ width: 95%;
}
-#sidebar {
- float: right;
- z-index: 1;
- position: relative;
+#container {
+ margin-right: 5px;
+ margin-left: 15px;
+ overflow: visible;
}
-.post {
- max-width: 640px;
- color: #333;
+/* Content */
+#content {
+ font-size: 16px;
+ line-height: 26px;
+
+ margin-bottom: 0;
+ padding-bottom: 20px;
+ overflow: visible;
}
/* Post titles */
@@ -148,19 +166,24 @@ div.clear hr {
}
.post p {
- margin: 0 0 1em;
+ margin: 0 0 1.5em;
+}
+
+.post p,
+.post ul,
+.post ol {
+ max-width: 36em;
}
.post ul {
list-style-type: disc;
}
.post ul, .post ol {
+ margin: 0 1.5em 1.5em 0;
padding-left: 3.333em;
- margin-bottom: 1.5em;
}
-
.post ul ul, .post ol ol {
margin-bottom: 0;
}
@@ -173,22 +196,22 @@ div.clear hr {
.post pre {
font-size: 14px;
- padding: .5em 1em;
+ padding: 2em 1.6em 2em 1.2em;
vertical-align: top;
background: #F8F8F8;
border: 1px solid #E8E8E8;
border-width: 0px 0px 0px 6px;
- margin: 0 0 1em 0;
+ margin: -1em 0 1em 0;
}
.post table {
- margin: 0 0 1em 0;
+ margin: -1em 0 1em 0;
padding: .5em 1em;
border: 1px solid #eee;
}
.post pre, .post code, .post tt {
- font-family: 'droid sans mono', 'lucida console', monospace;
+ font-family: 'Droid Sans Mono', 'lucida console', monospace;
line-height: 1.5;
}
@@ -221,6 +244,7 @@ div.clear hr {
}
#sidebar h3 {
+ color: gray;
font-size: 1.5em;
line-height: 1;
border-bottom: 1px solid #CCC;
@@ -278,8 +302,32 @@ div.notice {
margin: 8px;
}
+#sidebar {
+ display: none;
+}
+
+@media (min-width: 43.75em) {
+}
+
+@media (min-width: 62em) {
+ #wrapper {
+ width: 960px;
+ }
+
+ #container {
+ width: 72%;
+ float: left;
+ }
+
+ #sidebar {
+ display: block;
+ width: 24%;
+ float: left;
+ }
+}
+
.post blockquote {
- margin-bottom: 16px;
+ margin-bottom: 2em;
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd;
@@ -498,3 +546,7 @@ iframe {
display: inline-block;
text-decoration: none;
}
+
+.spaced li {
+ color: gray;
+}
@@ -16,12 +16,6 @@ module.exports = function(code, lang) {
hasCSS = css.trim().length > 0;
result += '<div class="snippet-container">' +
- '<ul class="snippet">' +
- '<li>HTML</li>' +
- (hasCSS ? '<li>CSS</li>' : '') +
- (hasJS ? '<li>JS</li>' : '') +
- '<li>Result</li>' +
- '</ul>' +
(hasCSS ? '<div class="css">' + hl(css, 'css') + '</div>' : '') +
'<div class="html">' + hl(html, 'html') + '</div>' +
(hasJS ? '<div class="js">' + hl(js, 'js') + '</div>' : '') +
View
@@ -2,21 +2,13 @@
<html>
<head>
<title>{{title}}</title>
- <meta charset="UTF-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
- <style type="text/css">
- @font-face {
- font-family: 'Droid Sans';
- font-style: normal;
- font-weight: normal;
- src: local('Droid Sans'), local('DroidSans'), url('DroidSans.woff') format('woff');
- }
- </style>
- <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css' />
<script src="{{asset 'jquery-1.6.1.min.js'}}"></script>
<link type="text/css" rel="stylesheet" href="{{asset 'style.css'}}"/>
<link type="text/css" rel="stylesheet" href="{{asset 'assert.css'}}"/>
+ <link type="text/css" rel="stylesheet" href="{{asset 'pilcrow.css'}}"/>
<link type="text/css" rel="stylesheet" href="{{asset 'hljs-github.min.css'}}"/>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -39,6 +31,22 @@
<hr>
</div>
+ <div id="main">
+ <div id="container">
+ <div id="content" class="post">
+ {{~> content}}
+
+ <div id="bottom_navi">
+ {{#if prev}}
+ <a href="{{prev}}"> &lt; &lt; Previous Chapter</a> |
+ {{/if}}
+ {{#if next}}
+ <a href="{{next}}">Next Chapter &gt; &gt;</a>
+ {{/if}}
+ </div>
+ </div>
+ </div>
+ </div>
<div id="sidebar">
<h3><a href="index.html">Home</a></h3>
<h3><a href="single-page.html">Single page HTML</a></h3>
@@ -70,23 +78,19 @@
<div class="fb-share-button" data-href="http://book.mixu.net/css/" data-layout="button_count"></div>
</p>
{{/if}}
-
- </div>
-
- <div class="post">
- {{~> content}}
-
- <div id="bottom_navi">
- {{#if prev}}
- <a href="{{prev}}"> &lt; &lt; Previous Chapter</a> |
- {{/if}}
- {{#if next}}
- <a href="{{next}}">Next Chapter &gt; &gt;</a>
- {{/if}}
- </div>
-
+ <h3>Other books</h3>
+ <ul class="spaced">
+ <li>
+ <a href="http://book.mixu.net/distsys/">Distributed systems: for fun and profit</a> (2013)
+ </li>
+ <li>
+ <a href="http://singlepageappbook.com/">Single page apps in depth</a> (2013)
+ </li>
+ <li>
+ <a href="http://book.mixu.net/node/">Mixu's Node book</a> (2012)
+ </li>
+ </ul>
</div>
-
<div class="clear">
</div>

0 comments on commit 1126792

Please sign in to comment.