Skip to content

Commit

Permalink
theme-techbook: follow create-vivliostyle-theme v0.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
yamasy1549 committed Apr 8, 2021
1 parent 1fecdf3 commit 1a18c9a
Show file tree
Hide file tree
Showing 14 changed files with 223 additions and 128 deletions.
108 changes: 108 additions & 0 deletions packages/@vivliostyle/theme-techbook/example/techbook.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Brief History of JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../theme.css" />
</head>
<body>
<section id="brief-history-of-javascript">
<h1>Brief History of JavaScript</h1>
<p>
from Wikipedia
<a href="https://en.wikipedia.org/wiki/JavaScript"
>https://en.wikipedia.org/wiki/JavaScript</a
>
</p>
<nav id="toc" role="doc-toc"></nav>
<section id="javascript">
<h2>JavaScript</h2>
<p>
<strong>JavaScript</strong> (<code>/ˈdʒɑːvəˌskrɪpt/</code>),often
abbreviated as JS, is a programming language that conforms to the
ECMAScript specification.
</p>
<p>
JavaScript is <em>high-level</em>, often just-in-time compiled, and
multi-paradigm. It has curly-bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions.
</p>
<section id="weakly-typed">
<h3>Weakly typed</h3>
<p>
JavaScript is weakly typed, which means certain types are implicitly
cast depending on the operation used.
</p>
<ul>
<li>
The binary <code>+</code> operator casts both operands to a string
unless both operands are numbers. This is because the addition
operator doubles as a concatenation operator
</li>
<li>
The binary <code>-</code> operator always casts both operands to a
number
</li>
<li>
Both unary operators (+, -) always cast the operand to a number
</li>
</ul>
<section
id="javascript-includes-a-number-of-quirks-that-have-been-subject-to-criticism"
>
<h4>
JavaScript includes a number of quirks that have been subject to
criticism
</h4>
<table>
<thead>
<tr>
<th>left operand</th>
<th>operator</th>
<th>right operand</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>[](empty array)</td>
<td>+</td>
<td>[](empty array)</td>
<td>""(empty string)</td>
</tr>
<tr>
<td>[] (empty array)</td>
<td>+</td>
<td>{} (empty object)</td>
<td>"[object Object]" (string)</td>
</tr>
<tr>
<td>false (boolean)</td>
<td>+</td>
<td>[] (empty array)</td>
<td>"false" (string)</td>
</tr>
<tr>
<td>"123"(string)</td>
<td>+</td>
<td>1 (number)</td>
<td>"1231" (string)</td>
</tr>
<tr>
<td>"123" (string)</td>
<td>-</td>
<td>1 (number)</td>
<td>122 (number)</td>
</tr>
</tbody>
</table>
<pre
class="language-javascript"
><code class="language-javascript"><span class="token punctuation">(</span><span class="token string">'b'</span> <span class="token operator">+</span> <span class="token string">'a'</span> <span class="token operator">+</span> <span class="token operator">+</span><span class="token string">'a'</span> <span class="token operator">+</span> <span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "banana"</span></code></pre>
</section>
</section>
</section>
</section>
</body>
</html>
13 changes: 8 additions & 5 deletions packages/@vivliostyle/theme-techbook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,24 @@
"author": "Vivliostyle <mail@vivliostyle.org>",
"scripts": {
"build": "run-p build:scss",
"build:scss": "node-sass scss/app.scss theme.css -r --source-map true --output-style expanded",
"build:scss": "sass scss:.",
"dev": "run-p preview watch:scss",
"preview": "vivliostyle-theme-scripts preview theme.css --layout example/techbook.md",
"watch:scss": "node-sass scss/app.scss theme.css -w -r -q --source-map true --output-style expanded"
"preview": "vivliostyle preview",
"validate": "vivliostyle-theme-scripts validate",
"watch:scss": "sass --watch scss:."
},
"devDependencies": {
"node-sass": "^4.14.1",
"@vivliostyle/cli": "^3.3.0",
"sass": "^1.32.8",
"npm-run-all": "^4.1.5",
"vivliostyle-theme-scripts": "^0.3.1"
},
"files": [
"*.css",
"*.css.map",
"scss",
"example"
"example",
"vivliostyle.config.js"
],
"publishConfig": {
"access": "public"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import './variables.scss';

:root {
font-family: $font-family;
font-weight: 400;
Expand Down Expand Up @@ -51,11 +49,11 @@ pre {
box-decoration-break: clone;
}

ul, ol {
ul,
ol {
padding-inline-start: 1.5em;
}


figure {
margin: 1.5rem auto;
text-align: center;
Expand All @@ -64,7 +62,7 @@ figure {
margin: 0.5rem auto;
}
figcaption {
margin: .5rem auto;
margin: 0.5rem auto;
width: 90%;
font-size: 90%;
break-inside: avoid;
Expand All @@ -84,8 +82,9 @@ table {
margin: 1.5rem auto;
border-color: currentColor;
border-collapse: collapse;
th, td {
padding: .25rem 1rem .25rem 0;
th,
td {
padding: 0.25rem 1rem 0.25rem 0;
&:first-child {
padding-left: 1rem;
}
Expand All @@ -98,16 +97,16 @@ table {
}
tr {
// border-bottom: .5px solid
$narrow-border-width: .4px;
box-shadow: 0 $narrow-border-width+.3px 0 -.3px currentColor;
$narrow-border-width: 0.4px;
box-shadow: 0 $narrow-border-width + 0.3px 0 -0.3px currentColor;
}
tr:last-child {
border-bottom: 1px solid;
}
}

blockquote {
margin: 1.5rem .5rem;
margin: 1.5rem 0.5rem;
background-color: $color_silver;
padding: 0.5em 1em;
border-radius: 0.2rem;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,48 @@ body {
counter-reset: section subsection fig tbl footnote cite;
}

a[data-ref="sec"],
a[data-ref="subsec"],
a[data-ref="fig"],
a[data-ref="tbl"],
a[data-ref="cite"] {
a[data-ref='sec'],
a[data-ref='subsec'],
a[data-ref='fig'],
a[data-ref='tbl'],
a[data-ref='cite'] {
text-decoration: none;
color: inherit;
margin: 0 .15em;
margin: 0 0.15em;
}

a[data-ref="sec"]::before {
a[data-ref='sec']::before {
content: '§' target-counter(attr(href), section);
}

a[data-ref="subsec"]::before {
content: '§' target-counter(attr(href), section) '.' target-counter(attr(href url), subsection);
a[data-ref='subsec']::before {
content: '§' target-counter(attr(href), section) '.'
target-counter(attr(href url), subsection);
}

a[data-ref="fig"]::before {
a[data-ref='fig']::before {
content: 'Fig. ' target-counter(attr(href), fig);
:root:lang(ja) & {
content: '' target-counter(attr(href), fig);
}
}

a[data-ref="tbl"]::before {
a[data-ref='tbl']::before {
content: 'Table ' target-counter(attr(href), tbl);
:root:lang(ja) & {
content: '' target-counter(attr(href), fig);
}
}

a[data-ref="cite"]::before {
a[data-ref='cite']::before {
content: '[' target-counter(attr(href), cite) ']';
}

section {
counter-increment: section;
counter-reset: subsection;
article {
counter-increment: subsection
counter-increment: subsection;
}
}

Expand Down Expand Up @@ -75,11 +76,11 @@ figure.tbl {

&::footnote-call {
font-size: 80%;
margin: 0 .3rem;
margin: 0 0.3rem;
}

&::footnote-marker {
margin-right: .2rem;
margin-right: 0.2rem;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import './variables.scss';

// prism-okadia
code[class*='language-'],
pre[class*='language-'] {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import './variables.scss';

@mixin page-top-style() {
content: '';
margin-bottom: 4mm;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import './variables.scss';

nav#toc,
nav[role='doc-toc'] {
break-before: page;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ $color_green2_dark: #16a085;
$color_page_back: #fbfcfa;
$color_page_text: #34495e;

$font-family: 'Neue Frutiger World', 'Verdana', 'Yakumono', 'body', 'Hiragino Sans', sans-serif;
$font-family: 'Neue Frutiger World', 'Verdana', 'Yakumono', 'body',
'Hiragino Sans', sans-serif;

$master-font-size-for-print: 75%;

Expand Down
6 changes: 0 additions & 6 deletions packages/@vivliostyle/theme-techbook/scss/app.scss

This file was deleted.

7 changes: 7 additions & 0 deletions packages/@vivliostyle/theme-techbook/scss/theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@import '_variables';
@import '_lib-prism-okaidia';
@import '_lib-override';
@import '_base';
@import '_counter';
@import '_media';
@import '_toc';
Loading

0 comments on commit 1a18c9a

Please sign in to comment.