mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-24 15:28:54 +00:00
Fix toc
This commit is contained in:
Ryan Watters
@@ -26,7 +26,7 @@ Before you begin writing your content in markdown, Blackfriday has a known issue
|
||||
|
||||
You can configure multiple aspects of Blackfriday. For more information, see [how to configure your Hugo projects][config]:
|
||||
|
||||
{{< bfconfig >}}
|
||||
{{< readfile file="content/readfiles/bfconfig.md" markdown="true" >}}
|
||||
|
||||
## Extending Markdown
|
||||
|
||||
|
||||
@@ -26,13 +26,13 @@ toc: true
|
||||
|
||||
## Solution
|
||||
|
||||
Mac OS X user? If so, you are likely a victim of HFS Plus file system's insistence to store the "é" (U+00E9) character in Normal Form Decomposed (NFD) mode, i.e. as "e" + " ́" (U+0065 U+0301).
|
||||
Are you a Mac OS X user? If so, you are likely a victim of HFS Plus file system's insistence to store the "é" (U+00E9) character in Normal Form Decomposed (NFD) mode, i.e. as "e" + " ́" (U+0065 U+0301).
|
||||
|
||||
`le-carr%C3%A9` is actually correct, `%C3%A9` being the UTF-8 version of U+00E9 as expected by the web server. The problem is that OS X turns [U+00E9] into [U+0065 U+0301], and thus `le-carr%C3%A9` no longer works. Instead, only `le-carre%CC%81` ending with `e%CC%81` would match that [U+0065 U+0301] at the end.
|
||||
|
||||
This is unique to OS X. The rest of the world does not do this, and most certainly not your web server which is most likely running Linux. This is not a Hugo-specific problem either. Other people have been bitten by this when they have accented characters in their HTML files.
|
||||
This is unique to OS X. The rest of the world does not do this, and most certainly not your web server which is most likely running Linux. This is not a Hugo-specific problem either. Other people have been bitten by this when they have accented characters in their HTML files.
|
||||
|
||||
Note that this problem is not specific to Latin scripts. Japanese Mac users often run into the same issue; e.g., with `だ` decomposing into `た` and <code>゙</code> (read the [Japanese Perl users article][]).
|
||||
Note that this problem is not specific to Latin scripts. Japanese Mac users often run into the same issue; e.g., with `だ` decomposing into `た` and `゙`. (Read the [Japanese Perl users article][]).
|
||||
|
||||
Rsync 3.x to the rescue! From [an answer posted on Server Fault][]:
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
{{- partial "content-header-links.html" . -}}
|
||||
{{- partial "tags.html" . -}}
|
||||
<!-- temporary WIP badge; should be removed before site launch -->
|
||||
{{- if .Params.wip -}}
|
||||
<!-- {{- if .Params.wip -}}
|
||||
<div id="beingreviewed">WIP</div>
|
||||
{{- end -}}
|
||||
{{- end -}} -->
|
||||
{{ $title := .Title }}
|
||||
</header>
|
||||
<div class="body-copy" data-section={{.Section | urlize}}>
|
||||
|
||||
@@ -36,6 +36,6 @@
|
||||
</div>
|
||||
<div class="home-row references">
|
||||
<h2>References</h2>
|
||||
{{ partial "homepage-references.html" . }}
|
||||
{{ partial "homepage/homepage-references.html" . }}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,197 +0,0 @@
|
||||
<table class="bf-configuration">
|
||||
<!-- NOTE THAT THIS SHORTCODE IS USED ON GETTING-STARTED/CONFIGURATION, /CONTENT/FORMATS/ AND THEREFORE REFERENCES THE MULTILINGUAL MODE AT THE BOTTOM OF THE TABLE -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Flag</th>
|
||||
<th>Default</th>
|
||||
<th>Blackfriday flag</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><strong>taskLists</strong></code></td>
|
||||
<td class="bf-default"><code>true</code></td>
|
||||
<td class="bf-flag"><code></code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>false</code> turns off GitHub-style automatic task/TODO
|
||||
list generation.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>smartypants</strong></code></td>
|
||||
<td class="bf-default"><code>true</code></td>
|
||||
<td class="bf-flag"><code>HTML_USE_SMARTYPANTS</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>false</code> disables smart punctuation substitutions
|
||||
including smart quotes, smart dashes, smart fractions, etc.
|
||||
If <code>true</code>, it may be fine-tuned with the
|
||||
<code>angledQuotes</code>,
|
||||
<code>fractions</code>,
|
||||
<code>smartDashes</code>, and
|
||||
<code>latexDashes</code> flags (see below).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>angledQuotes</strong></code></td>
|
||||
<td class="bf-default"><code>false</code></td>
|
||||
<td class="bf-flag"><code>HTML_SMARTYPANTS_ANGLED_QUOTES</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>true</code> enables smart, angled double quotes.<br>
|
||||
<small>
|
||||
<strong>Example:</strong>
|
||||
<code>"Hugo"</code> renders to
|
||||
«Hugo» instead of “Hugo”.
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>fractions</strong></code></td>
|
||||
<td class="bf-default"><code>true</code></td>
|
||||
<td class="bf-flag"><code>HTML_SMARTYPANTS_FRACTIONS</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>false</code> disables smart fractions.<br>
|
||||
<small>
|
||||
<strong>Example:</strong>
|
||||
<code>5/12</code> renders to
|
||||
<sup>5</sup>⁄<sub>12</sub>
|
||||
(<code><sup>5</sup>&frasl;<sub>12</sub></code>).<br>
|
||||
<strong>Caveat:</strong>
|
||||
Even with <code>fractions = false</code>,
|
||||
Blackfriday still converts
|
||||
1/2, 1/4 and 3/4 respectively to
|
||||
½ (<code>&frac12;</code>),
|
||||
¼ (<code>&frac14;</code>) and
|
||||
¾ (<code>&frac34;</code>),
|
||||
but only these three.</small>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>smartDashes</strong></code></td>
|
||||
<td class="bf-default"><code>true</code></td>
|
||||
<td class="bf-flag"><code>HTML_SMARTYPANTS_DASHES</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>false</code> disables smart dashes; i.e., the conversion
|
||||
of multiple hyphens into en dash or em dash.
|
||||
If <code>true</code>, its behavior can be modified with the
|
||||
<code>latexDashes</code> flag below.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>latexDashes</strong></code></td>
|
||||
<td class="bf-default"><code>true</code></td>
|
||||
<td class="bf-flag"><code>HTML_SMARTYPANTS_LATEX_DASHES</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>false</code> disables LaTeX-style smart dashes and
|
||||
selects conventional smart dashes. Assuming
|
||||
<code>smartDashes</code> (above):
|
||||
<ul>
|
||||
<li>
|
||||
If <strong><code>true</code>,</strong>
|
||||
<code>--</code> is translated into “–”
|
||||
(<code>&ndash;</code>), whereas
|
||||
<code>---</code> is translated into “—”
|
||||
(<code>&mdash;</code>).
|
||||
</li>
|
||||
<li>
|
||||
If <strong><code>false</code>,</strong>
|
||||
<code>--</code> is translated into “—”
|
||||
(<code>&mdash;</code>), whereas a
|
||||
<em>spaced</em> single hyphen between two words
|
||||
is translated into an en dash—e.g.,
|
||||
<code>12 June - 3 July</code> becomes
|
||||
<code>12 June &ndash; 3 July</code>.
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>hrefTargetBlank</strong></code></td>
|
||||
<td class="bf-default"><code>false</code></td>
|
||||
<td class="bf-flag"><code>HTML_HREF_TARGET_BLANK</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>true</code> opens external links in a new window or tab.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>plainIDAnchors</strong></code></td>
|
||||
<td class="bf-default"><code>true</code></td>
|
||||
<td class="bf-flag">
|
||||
<code>FootnoteAnchorPrefix</code> and
|
||||
<code>HeaderIDSuffix</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
<code>true</code> renders any header and footnote IDs
|
||||
without the document ID.<br>
|
||||
<small>
|
||||
<strong>Example:</strong>
|
||||
renders <code>#my-header</code> instead of
|
||||
<code>#my-header:bec3ed8ba720b9073ab75abcf3ba5d97</code>.
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>extensions</strong></code></td>
|
||||
<td class="bf-default"><code>[]</code></td>
|
||||
<td class="bf-flag"><code>EXTENSION_*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
Enable one or more of Blackfriday's Markdown extensions
|
||||
(if they aren't Hugo defaults).<br>
|
||||
<small>
|
||||
<strong>Example:</strong>
|
||||
Include <code>"hardLineBreak"</code>
|
||||
in the list to enable Blackfriday's
|
||||
<code>EXTENSION_HARD_LINE_BREAK</code>.
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><strong>extensionsmask</strong></code></td>
|
||||
<td class="bf-default"><code>[]</code></td>
|
||||
<td class="bf-flag"><code>EXTENSION_*</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="purpose-description" colspan="3">
|
||||
<span class="purpose-title">Purpose:</span>
|
||||
Disable one or more of Blackfriday's Markdown extensions
|
||||
(if they are Hugo defaults).<br>
|
||||
<small>
|
||||
<strong>Example:</strong>
|
||||
Include <code>"autoHeaderIds"</code>
|
||||
in the list to disable Blackfriday's
|
||||
<code>EXTENSION_AUTO_HEADER_IDS</code>.
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>For additional Blackfriday configuration for multilingual sites, see <a href="/content-management/multilingual/#taxonomies-and-blackfriday">Taxonomies and Blackfriday in Multingual Mode.</a></p>
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ $('.top-menu-item-link.true').on('click', function(evt) {
|
||||
slideDir = isOpen ? 'slideUp' : 'slideDown',
|
||||
dur = isOpen ? 200 : 400;
|
||||
$ul.velocity(slideDir, {
|
||||
easing: 'easeOutQuart',
|
||||
easing: 'easeOut',
|
||||
duration: dur
|
||||
});
|
||||
});
|
||||
|
||||
@@ -92,7 +92,7 @@ $toc-bg-color:$body-bg-color;
|
||||
|
||||
//Footers
|
||||
$site-footer-bg-color:$hugo-black;
|
||||
$site-footer-height: 100px;
|
||||
$site-footer-height-l-plus: 140px;
|
||||
|
||||
//Tags
|
||||
$tag-bg-color:$hugo-gray-ultra-light;
|
||||
|
||||
@@ -101,6 +101,9 @@ a.tooltip {
|
||||
transition: opacity .3s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
.icon-link:hover {
|
||||
color:$hugo-pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,471 @@
|
||||
//General code styling for inline code (ie, within body copy and not in a separate code block)
|
||||
code,
|
||||
pre {
|
||||
font-family: $code-font-family;
|
||||
margin: 0px;
|
||||
font-weight: $code-font-base-weight;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.body-copy > pre {
|
||||
@include card(3);
|
||||
text-shadow: none;
|
||||
padding: 0px;
|
||||
margin: .5em 0px 32px 0px;
|
||||
overflow: auto;
|
||||
& > code {
|
||||
color: $hugo-white;
|
||||
}
|
||||
}
|
||||
|
||||
.body-copy {
|
||||
p {
|
||||
code {
|
||||
display: inline-block;
|
||||
padding-top: .15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-copy {
|
||||
p,
|
||||
td,
|
||||
li {
|
||||
code {
|
||||
font-size: .85em;
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-family: "robotomono", courier, monospace;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
text-transform: none;
|
||||
line-height: 1.2;
|
||||
margin-bottom: .15em;
|
||||
margin-top: 0px;
|
||||
padding-top: 3px;
|
||||
vertical-align: middle;
|
||||
background-color: #ededed;
|
||||
border: none;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
padding-bottom: 3px;
|
||||
border: none;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
background-color: darken($inline-code-background-color, 5%);
|
||||
@include MQ(retina) {
|
||||
//lighten code background color for retina displays
|
||||
background-color: $inline-code-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
//for definitions lists
|
||||
dd,
|
||||
dt {
|
||||
code {
|
||||
//darken code background color for non-retina displays
|
||||
background-color: darken($inline-code-background-color, 5%);
|
||||
color: $inline-code-text-color;
|
||||
font-family: $code-font-family;
|
||||
@include MQ(retina) {
|
||||
//lighten code background color for retina displays
|
||||
background-color: $inline-code-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
p > a code,
|
||||
li > a code,
|
||||
td > a code {
|
||||
color: $hugo-pink;
|
||||
}
|
||||
> pre {
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
background-color: $code-block-background-color;
|
||||
font-family: $code-font-family;
|
||||
color: $code-block-base-font-color;
|
||||
}
|
||||
li > code,
|
||||
li > span > code {
|
||||
white-space: pre-wrap;
|
||||
/* css-3 */
|
||||
white-space: -moz-pre-wrap;
|
||||
/* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap;
|
||||
/* Opera 4-6 */
|
||||
white-space: -o-pre-wrap;
|
||||
/* Opera 7 */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
//for clipboard.js tooltip and button
|
||||
div.code-copy {
|
||||
position: relative;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 32px;
|
||||
background-color: $code-block-background-color;
|
||||
&.input {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.code-copy-content {
|
||||
padding-top: .5em;
|
||||
&.output-content {
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p + .code-copy {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
button.copy-button,
|
||||
button.download-button {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
transition: all .2s ease-in-out;
|
||||
background-color: $code-copy-button-color;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
z-index: 4;
|
||||
// min-width: 90px;
|
||||
// width: auto;
|
||||
@include size(30px);
|
||||
padding: {
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
height: 1.5em;
|
||||
border-width: 0px;
|
||||
border-radius: 0px;
|
||||
font-weight: $code-font-bold-weight;
|
||||
color: $code-copy-button-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
text-transform:uppercase;
|
||||
&:hover {
|
||||
background-color: $hugo-blue;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
// .button.copy-button {
|
||||
// opacity: 0;
|
||||
// }
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
code {
|
||||
font-weight: $code-font-bold-weight;
|
||||
font-size: .95em;
|
||||
}
|
||||
}
|
||||
|
||||
//hide copy button on iPad and iPhone
|
||||
button.copy-button {
|
||||
@include MQ(retinaPortrait) {
|
||||
display: none;
|
||||
}
|
||||
@include MQ(retinaLandscape) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
button.download-button {
|
||||
display: none;
|
||||
@include MQ(M) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a[role="button"].see-code-source {
|
||||
position: absolute;
|
||||
top: 1.75em;
|
||||
right: 0px;
|
||||
border-radius: 0px;
|
||||
background: transparent;
|
||||
text-transform: uppercase;
|
||||
color: darken($hugo-white, 5%);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a[href*="bitbucket"].see-code-source:after {
|
||||
content: '\f171';
|
||||
font-family: 'FontAwesome';
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
color: inherit;
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
a[href*="github"].see-code-source:after {
|
||||
content: '\f09b';
|
||||
font-family: 'FontAwesome';
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
color: inherit;
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
a[href*="gitlab"].see-code-source:after {
|
||||
content: '\f296';
|
||||
font-family: 'FontAwesome';
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
color: inherit;
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
button.copy-button {
|
||||
display: none;
|
||||
@include MQ(M) {
|
||||
display: block;
|
||||
right: 0px;
|
||||
}
|
||||
i.icon-clipboard {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
div.code-copy {
|
||||
position: relative;
|
||||
@include card(3);
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
div.code-copy-header {
|
||||
position: relative;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
background-color: $code-editor-header-base-bg-color;
|
||||
border-radius: 0px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.output {
|
||||
background-color: $output-example-color;
|
||||
}
|
||||
&.examplesite {
|
||||
background-color: $examplesite-codeblock-shortcode-header-bg-color;
|
||||
}
|
||||
span.filename {
|
||||
text-align: center;
|
||||
color: $code-filename-color;
|
||||
font-weight: 100;
|
||||
font-size: 12px;
|
||||
font-family: $systemfonts;
|
||||
i.icon-website {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
[class^="icon-"] {
|
||||
color: $code-filename-color;
|
||||
}
|
||||
//corrects odd placement of terminal icon
|
||||
i.icon-sh.input,
|
||||
i.icon-bash.input {
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltipped {
|
||||
position: relative;
|
||||
background-color: $code-tooltip-bg-color;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.tooltipped:after {
|
||||
position: absolute;
|
||||
z-index: 1000000;
|
||||
display: none;
|
||||
padding: 2px 4px;
|
||||
font-size: .8em;
|
||||
font-weight: $base-font-bold-weight;
|
||||
font-family: $heading-font-family;
|
||||
color: $hugo-white;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
content: attr(aria-label);
|
||||
background-color: $code-tooltip-bg-color;
|
||||
border-color: $code-tooltip-bg-color;
|
||||
border-radius: 0px;
|
||||
-webkit-font-smoothing: subpixel-antialiased
|
||||
}
|
||||
|
||||
.tooltipped:before {
|
||||
position: absolute;
|
||||
z-index: 1000001;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: $code-tooltip-bg-color;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
.tooltipped:hover:before,
|
||||
.tooltipped:hover:after,
|
||||
.tooltipped:active:before,
|
||||
.tooltipped:active:after,
|
||||
.tooltipped:focus:before,
|
||||
.tooltipped:focus:after {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tooltipped-multiline:hover:after,
|
||||
.tooltipped-multiline:active:after,
|
||||
.tooltipped-multiline:focus:after {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.tooltipped-s:after,
|
||||
.tooltipped-se:after,
|
||||
.tooltipped-sw:after {
|
||||
top: 100%;
|
||||
right: 50%;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-s:before,
|
||||
.tooltipped-se:before,
|
||||
.tooltipped-sw:before {
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: -5px;
|
||||
margin-right: -5px;
|
||||
border-bottom-color: $code-tooltip-bg-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-se:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-sw:after {
|
||||
margin-right: -15px
|
||||
}
|
||||
|
||||
.tooltipped-n:after,
|
||||
.tooltipped-ne:after,
|
||||
.tooltipped-nw:after {
|
||||
right: 50%;
|
||||
bottom: 100%;
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
.tooltipped-n:before,
|
||||
.tooltipped-ne:before,
|
||||
.tooltipped-nw:before {
|
||||
top: -5px;
|
||||
right: 50%;
|
||||
bottom: auto;
|
||||
margin-right: -5px;
|
||||
border-top-color: $code-tooltip-bg-color;
|
||||
}
|
||||
|
||||
.tooltipped-ne:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px
|
||||
}
|
||||
|
||||
.tooltipped-nw:after {
|
||||
margin-right: -15px
|
||||
}
|
||||
|
||||
.tooltipped-s:after,
|
||||
.tooltipped-n:after {
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%)
|
||||
}
|
||||
|
||||
.tooltipped-w:after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
margin-right: 5px;
|
||||
-webkit-transform: translateY(50%);
|
||||
-ms-transform: translateY(50%);
|
||||
transform: translateY(50%)
|
||||
}
|
||||
|
||||
.tooltipped-w:before {
|
||||
top: 50%;
|
||||
bottom: 50%;
|
||||
left: -5px;
|
||||
margin-top: -5px;
|
||||
border-left-color: $code-tooltip-bg-color;
|
||||
}
|
||||
|
||||
.tooltipped-e:after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
margin-left: 5px;
|
||||
-webkit-transform: translateY(50%);
|
||||
-ms-transform: translateY(50%);
|
||||
transform: translateY(50%)
|
||||
}
|
||||
|
||||
.tooltipped-e:before {
|
||||
top: 50%;
|
||||
right: -5px;
|
||||
bottom: 50%;
|
||||
margin-top: -5px;
|
||||
border-right-color: $code-tooltip-bg-color;
|
||||
}
|
||||
|
||||
.tooltipped-multiline:after {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
max-width: 250px;
|
||||
word-break: break-word;
|
||||
word-wrap: normal;
|
||||
white-space: pre-line;
|
||||
border-collapse: separate
|
||||
}
|
||||
|
||||
.tooltipped-multiline.tooltipped-s:after,
|
||||
.tooltipped-multiline.tooltipped-n:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
.tooltipped-multiline.tooltipped-w:after,
|
||||
.tooltipped-multiline.tooltipped-e:after {
|
||||
right: 100%
|
||||
}
|
||||
+154
-262
@@ -1,296 +1,190 @@
|
||||
//General code styling for inline code (ie, within body copy and not in a separate code block)
|
||||
code,
|
||||
pre {
|
||||
font-family: $code-font-family;
|
||||
margin: 0px;
|
||||
font-weight: $code-font-base-weight;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.body-copy > pre {
|
||||
@include card(3);
|
||||
text-shadow: none;
|
||||
padding: 0px;
|
||||
margin: .5em 0px 32px 0px;
|
||||
overflow: auto;
|
||||
& > code {
|
||||
color: $hugo-white;
|
||||
}
|
||||
}
|
||||
|
||||
.body-copy {
|
||||
p {
|
||||
code {
|
||||
display: inline-block;
|
||||
padding-top: .15em;
|
||||
}
|
||||
code,
|
||||
pre {
|
||||
font-family: $code-font-family;
|
||||
font-size: .9em;
|
||||
weight: inherit;
|
||||
font-weight: $code-font-base-weight;
|
||||
position: relative;
|
||||
overflow-y: visible;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.body-copy {
|
||||
p,
|
||||
td,
|
||||
li {
|
||||
code {
|
||||
font-size: .85em;
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-family: "robotomono", courier, monospace;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
text-transform: none;
|
||||
line-height: 1.2;
|
||||
margin-bottom: .15em;
|
||||
margin-top: 0px;
|
||||
padding-top: 3px;
|
||||
vertical-align: middle;
|
||||
background-color: #ededed;
|
||||
border: none;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
padding-bottom: 3px;
|
||||
border: none;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
background-color: darken($inline-code-background-color, 5%);
|
||||
@include MQ(retina) {
|
||||
//lighten code background color for retina displays
|
||||
background-color: $inline-code-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
//for definitions lists
|
||||
dd,
|
||||
dt {
|
||||
code {
|
||||
//darken code background color for non-retina displays
|
||||
background-color: darken($inline-code-background-color, 5%);
|
||||
color: $inline-code-text-color;
|
||||
font-family: $code-font-family;
|
||||
@include MQ(retina) {
|
||||
//lighten code background color for retina displays
|
||||
background-color: $inline-code-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
p > a code,
|
||||
li > a code,
|
||||
td > a code {
|
||||
color: $hugo-pink;
|
||||
pre > code,
|
||||
.code {
|
||||
background-color: $code-block-background-color;
|
||||
}
|
||||
> pre {
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
background-color: $code-block-background-color;
|
||||
font-family: $code-font-family;
|
||||
color: $code-block-base-font-color;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
li > code,
|
||||
li > span > code {
|
||||
white-space: pre-wrap;
|
||||
/* css-3 */
|
||||
white-space: -moz-pre-wrap;
|
||||
/* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap;
|
||||
/* Opera 4-6 */
|
||||
white-space: -o-pre-wrap;
|
||||
/* Opera 7 */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
//for clipboard.js tooltip and button
|
||||
div.code-copy {
|
||||
position: relative;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 32px;
|
||||
background-color: $code-block-background-color;
|
||||
&.input {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.code-copy-content {
|
||||
padding-top: .5em;
|
||||
&.output-content {
|
||||
padding-bottom: .5em;
|
||||
ol,
|
||||
ul,
|
||||
div,
|
||||
strong,
|
||||
em,
|
||||
span,
|
||||
p,
|
||||
dd,
|
||||
dt,
|
||||
{
|
||||
code {
|
||||
background-color: $inline-code-background-color;
|
||||
@include MQ(retina) {
|
||||
background-color: $inline-code-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p + .code-copy {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
button.copy-button,
|
||||
button.download-button {
|
||||
.code {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
transition: all .2s ease-in-out;
|
||||
background-color: $code-copy-button-color;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
z-index: 4;
|
||||
// min-width: 90px;
|
||||
// width: auto;
|
||||
@include size(30px);
|
||||
padding: {
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
height: 1.5em;
|
||||
border-width: 0px;
|
||||
border-radius: 0px;
|
||||
font-weight: $code-font-bold-weight;
|
||||
color: $code-copy-button-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
text-transform:uppercase;
|
||||
&:hover {
|
||||
background-color: $hugo-blue;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: .5em;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
code[class^="language-"] {
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
color: lighten($base-font-color, 25%);
|
||||
font-family: 'fontello';
|
||||
content: '\f121';
|
||||
}
|
||||
}
|
||||
|
||||
// .button.copy-button {
|
||||
// opacity: 0;
|
||||
// .copy-button + .code-copy-content {
|
||||
// code[class^="language-"] {
|
||||
// &:after {
|
||||
// // display: none;
|
||||
// position: absolute;
|
||||
// top: -4px;
|
||||
// right: 4px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
code {
|
||||
font-weight: $code-font-bold-weight;
|
||||
font-size: .95em;
|
||||
}
|
||||
}
|
||||
|
||||
//hide copy button on iPad and iPhone
|
||||
button.copy-button {
|
||||
@include MQ(retinaPortrait) {
|
||||
display: none;
|
||||
}
|
||||
@include MQ(retinaLandscape) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
button.download-button {
|
||||
display: none;
|
||||
@include MQ(M) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a[role="button"].see-code-source {
|
||||
position: absolute;
|
||||
top: 1.75em;
|
||||
right: 0px;
|
||||
border-radius: 0px;
|
||||
background: transparent;
|
||||
text-transform: uppercase;
|
||||
color: darken($hugo-white, 5%);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a[href*="bitbucket"].see-code-source:after {
|
||||
content: '\f171';
|
||||
code.language-html:after {
|
||||
font-family: 'FontAwesome';
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
color: inherit;
|
||||
margin-left: .2em;
|
||||
content: '\f13b';
|
||||
}
|
||||
|
||||
a[href*="github"].see-code-source:after {
|
||||
content: '\f09b';
|
||||
font-family: 'FontAwesome';
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
color: inherit;
|
||||
margin-left: .2em;
|
||||
code.language-js:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e802';
|
||||
font-size: 16px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
a[href*="gitlab"].see-code-source:after {
|
||||
content: '\f296';
|
||||
font-family: 'FontAwesome';
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
color: inherit;
|
||||
margin-left: .2em;
|
||||
code.language-hugo:after,
|
||||
code.language-go:after,
|
||||
code.language-golang:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e81f';
|
||||
}
|
||||
|
||||
button.copy-button {
|
||||
display: none;
|
||||
@include MQ(M) {
|
||||
display: block;
|
||||
right: 0px;
|
||||
}
|
||||
i.icon-clipboard {
|
||||
display: inline;
|
||||
}
|
||||
code.language-sass:after,
|
||||
code.language-scss:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e803';
|
||||
}
|
||||
|
||||
div.code-copy {
|
||||
position: relative;
|
||||
@include card(3);
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
border-radius: 0px;
|
||||
code.language-bash:after,
|
||||
code.language-sh:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e804';
|
||||
}
|
||||
|
||||
div.code-copy-header {
|
||||
position: relative;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
background-color: $code-editor-header-base-bg-color;
|
||||
border-radius: 0px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.output {
|
||||
background-color: $output-example-color;
|
||||
}
|
||||
&.examplesite {
|
||||
background-color: $examplesite-codeblock-shortcode-header-bg-color;
|
||||
}
|
||||
span.filename {
|
||||
text-align: center;
|
||||
color: $code-filename-color;
|
||||
font-weight: 100;
|
||||
font-size: 12px;
|
||||
font-family: $systemfonts;
|
||||
i.icon-website {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
code.language-toml:after {
|
||||
content: 'TOML';
|
||||
font-size: .8em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
|
||||
code.language-yaml:after,
|
||||
code.language-yml:after {
|
||||
content: 'TOML';
|
||||
font-size: .8em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
|
||||
code.language-md:after,
|
||||
code.language-markdown:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e80e';
|
||||
}
|
||||
|
||||
.copy-button + .code-copy-content {
|
||||
code[class^="language-"] {
|
||||
&:after {
|
||||
display:none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
[class^="icon-"] {
|
||||
color: $code-filename-color;
|
||||
}
|
||||
|
||||
.filename {
|
||||
font-family: $code-font-family;
|
||||
color: lighten($base-font-color, 45%);
|
||||
padding-left: 1em;
|
||||
padding-top: .25em;
|
||||
font-size: .7em;
|
||||
background-color: $code-block-background-color;
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.code-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
transition: opacity .3s ease-in-out;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
background-color: white;
|
||||
color: $base-font-color;
|
||||
border-radius: 0px;
|
||||
@include card(1);
|
||||
height: 30px;
|
||||
width: auto;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
z-index: 999;
|
||||
&:hover {
|
||||
@include card(3);
|
||||
}
|
||||
//corrects odd placement of terminal icon
|
||||
i.icon-sh.input,
|
||||
i.icon-bash.input {
|
||||
padding-right: .5em;
|
||||
span.button-text {
|
||||
text-transform: uppercase;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.code:hover {
|
||||
.copy-button,
|
||||
.download-button {
|
||||
transition: all .3s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped {
|
||||
position: relative;
|
||||
background-color: $code-tooltip-bg-color;
|
||||
padding-right: 2em;
|
||||
position: absolute;
|
||||
// background-color: $code-tooltip-bg-color;
|
||||
// padding-right: 2em;
|
||||
}
|
||||
|
||||
.tooltipped:after {
|
||||
@@ -368,12 +262,12 @@ div.code-copy-header {
|
||||
.tooltipped-se:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
// margin-left: -15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-sw:after {
|
||||
margin-right: -15px
|
||||
// margin-right: -15px
|
||||
}
|
||||
|
||||
.tooltipped-n:after,
|
||||
@@ -446,8 +340,6 @@ div.code-copy-header {
|
||||
}
|
||||
|
||||
.tooltipped-multiline:after {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
max-width: 250px;
|
||||
word-break: break-word;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.all-contents {
|
||||
border-top: 1px solid $hugo-blue;
|
||||
// border-top: 1px solid $hugo-blue;
|
||||
padding-top:1em;
|
||||
font-size:.9em;
|
||||
}
|
||||
|
||||
.contents-list {
|
||||
@@ -26,6 +27,7 @@
|
||||
margin-top: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 2px;
|
||||
color: $hugo-pink;
|
||||
}
|
||||
p {
|
||||
margin-top: 8px;
|
||||
|
||||
@@ -1,363 +0,0 @@
|
||||
.body-copy {
|
||||
code,
|
||||
pre {
|
||||
font-family: $code-font-family;
|
||||
font-size: .9em;
|
||||
weight: inherit;
|
||||
font-weight: $code-font-base-weight;
|
||||
position: relative;
|
||||
overflow-y: visible;
|
||||
z-index: 1;
|
||||
}
|
||||
pre > code,
|
||||
.code {
|
||||
background-color: $code-block-background-color;
|
||||
}
|
||||
> pre {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
ol,
|
||||
ul,
|
||||
div,
|
||||
strong,
|
||||
em,
|
||||
span,
|
||||
p,
|
||||
dd,
|
||||
dt,
|
||||
{
|
||||
code {
|
||||
background-color: $inline-code-background-color;
|
||||
@include MQ(retina) {
|
||||
background-color: $inline-code-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: .5em;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
code[class^="language-"] {
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
color: lighten($base-font-color, 25%);
|
||||
font-family: 'fontello';
|
||||
content: '\f121';
|
||||
}
|
||||
}
|
||||
|
||||
// .copy-button + .code-copy-content {
|
||||
// code[class^="language-"] {
|
||||
// &:after {
|
||||
// // display: none;
|
||||
// position: absolute;
|
||||
// top: -4px;
|
||||
// right: 4px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
code.language-html:after {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f13b';
|
||||
}
|
||||
|
||||
code.language-js:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e802';
|
||||
font-size: 16px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
code.language-hugo:after,
|
||||
code.language-go:after,
|
||||
code.language-golang:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e81f';
|
||||
}
|
||||
|
||||
code.language-sass:after,
|
||||
code.language-scss:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e803';
|
||||
}
|
||||
|
||||
code.language-bash:after,
|
||||
code.language-sh:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e804';
|
||||
}
|
||||
|
||||
code.language-toml:after {
|
||||
content: 'TOML';
|
||||
font-size: .8em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
|
||||
code.language-yaml:after,
|
||||
code.language-yml:after {
|
||||
content: 'TOML';
|
||||
font-size: .8em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
|
||||
code.language-md:after,
|
||||
code.language-markdown:after {
|
||||
font-family: 'fontello';
|
||||
content: '\e80e';
|
||||
}
|
||||
|
||||
.copy-button + .code-copy-content {
|
||||
code[class^="language-"] {
|
||||
&:after {
|
||||
display:none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filename {
|
||||
font-family: $code-font-family;
|
||||
color: lighten($base-font-color, 45%);
|
||||
padding-left: 1em;
|
||||
padding-top: .25em;
|
||||
font-size: .7em;
|
||||
background-color: $code-block-background-color;
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.code-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
transition: opacity .3s ease-in-out;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
background-color: white;
|
||||
color: $base-font-color;
|
||||
border-radius: 0px;
|
||||
@include card(1);
|
||||
height: 30px;
|
||||
width: auto;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
z-index: 999;
|
||||
&:hover {
|
||||
@include card(3);
|
||||
}
|
||||
span.button-text {
|
||||
text-transform: uppercase;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.code:hover {
|
||||
.copy-button,
|
||||
.download-button {
|
||||
transition: all .3s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped {
|
||||
position: absolute;
|
||||
// background-color: $code-tooltip-bg-color;
|
||||
// padding-right: 2em;
|
||||
}
|
||||
|
||||
.tooltipped:after {
|
||||
position: absolute;
|
||||
z-index: 1000000;
|
||||
display: none;
|
||||
padding: 2px 4px;
|
||||
font-size: .8em;
|
||||
font-weight: $base-font-bold-weight;
|
||||
font-family: $heading-font-family;
|
||||
color: $hugo-white;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
content: attr(aria-label);
|
||||
background-color: $code-tooltip-bg-color;
|
||||
border-color: $code-tooltip-bg-color;
|
||||
border-radius: 0px;
|
||||
-webkit-font-smoothing: subpixel-antialiased
|
||||
}
|
||||
|
||||
.tooltipped:before {
|
||||
position: absolute;
|
||||
z-index: 1000001;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: $code-tooltip-bg-color;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
.tooltipped:hover:before,
|
||||
.tooltipped:hover:after,
|
||||
.tooltipped:active:before,
|
||||
.tooltipped:active:after,
|
||||
.tooltipped:focus:before,
|
||||
.tooltipped:focus:after {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tooltipped-multiline:hover:after,
|
||||
.tooltipped-multiline:active:after,
|
||||
.tooltipped-multiline:focus:after {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.tooltipped-s:after,
|
||||
.tooltipped-se:after,
|
||||
.tooltipped-sw:after {
|
||||
top: 100%;
|
||||
right: 50%;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-s:before,
|
||||
.tooltipped-se:before,
|
||||
.tooltipped-sw:before {
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: -5px;
|
||||
margin-right: -5px;
|
||||
border-bottom-color: $code-tooltip-bg-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-se:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
// margin-left: -15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltipped-sw:after {
|
||||
// margin-right: -15px
|
||||
}
|
||||
|
||||
.tooltipped-n:after,
|
||||
.tooltipped-ne:after,
|
||||
.tooltipped-nw:after {
|
||||
right: 50%;
|
||||
bottom: 100%;
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
.tooltipped-n:before,
|
||||
.tooltipped-ne:before,
|
||||
.tooltipped-nw:before {
|
||||
top: -5px;
|
||||
right: 50%;
|
||||
bottom: auto;
|
||||
margin-right: -5px;
|
||||
border-top-color: $code-tooltip-bg-color;
|
||||
}
|
||||
|
||||
.tooltipped-ne:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px
|
||||
}
|
||||
|
||||
.tooltipped-nw:after {
|
||||
margin-right: -15px
|
||||
}
|
||||
|
||||
.tooltipped-s:after,
|
||||
.tooltipped-n:after {
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%)
|
||||
}
|
||||
|
||||
.tooltipped-w:after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
margin-right: 5px;
|
||||
-webkit-transform: translateY(50%);
|
||||
-ms-transform: translateY(50%);
|
||||
transform: translateY(50%)
|
||||
}
|
||||
|
||||
.tooltipped-w:before {
|
||||
top: 50%;
|
||||
bottom: 50%;
|
||||
left: -5px;
|
||||
margin-top: -5px;
|
||||
border-left-color: $code-tooltip-bg-color;
|
||||
}
|
||||
|
||||
.tooltipped-e:after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
margin-left: 5px;
|
||||
-webkit-transform: translateY(50%);
|
||||
-ms-transform: translateY(50%);
|
||||
transform: translateY(50%)
|
||||
}
|
||||
|
||||
.tooltipped-e:before {
|
||||
top: 50%;
|
||||
right: -5px;
|
||||
bottom: 50%;
|
||||
margin-top: -5px;
|
||||
border-right-color: $code-tooltip-bg-color;
|
||||
}
|
||||
|
||||
.tooltipped-multiline:after {
|
||||
width: max-content;
|
||||
max-width: 250px;
|
||||
word-break: break-word;
|
||||
word-wrap: normal;
|
||||
white-space: pre-line;
|
||||
border-collapse: separate
|
||||
}
|
||||
|
||||
.tooltipped-multiline.tooltipped-s:after,
|
||||
.tooltipped-multiline.tooltipped-n:after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
.tooltipped-multiline.tooltipped-w:after,
|
||||
.tooltipped-multiline.tooltipped-e:after {
|
||||
right: 100%
|
||||
}
|
||||
@@ -45,11 +45,12 @@ aside#toc {
|
||||
right: 0px;
|
||||
bottom: auto;
|
||||
opacity: 1;
|
||||
min-height: calc(100vh - #{$site-header-height});
|
||||
max-height: calc(100vh - #{$site-header-height});
|
||||
min-height: calc(100vh - #{$site-header-height} - #{$site-footer-height-l-plus});
|
||||
max-height: calc(100vh - #{$site-header-height} - #{$site-footer-height-l-plus});
|
||||
transform: scale(1);
|
||||
border-left: 1px solid $hugo-gray-light;
|
||||
// border-left: 1px solid $hugo-gray-light;
|
||||
border-radius: 0px;
|
||||
margin-right:1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,7 +179,6 @@ aside#toc + a#toc-toggle {
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
&:after {
|
||||
// content:'ToC';
|
||||
content: '\2026';
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@@ -43,12 +43,12 @@ main.main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include MQ(M){
|
||||
max-width: $content-max-width;
|
||||
}
|
||||
@include MQ(L) {
|
||||
float:left;
|
||||
margin-left:5%;
|
||||
margin-right:auto;
|
||||
max-width: $content-max-width;
|
||||
}
|
||||
@include MQ(XL) {
|
||||
min-width: $content-max-width;
|
||||
|
||||
@@ -11,12 +11,13 @@
|
||||
@include MQ(L) {
|
||||
width:calc(100% - #{$site-navigation-width});
|
||||
margin-left: $site-navigation-width;
|
||||
height: $site-footer-height-l-plus;
|
||||
}
|
||||
@include MQ(XL) {
|
||||
&.withtoc {
|
||||
max-width:calc(100vw - #{$site-navigation-width * 2});
|
||||
}
|
||||
}
|
||||
// @include MQ(XL) {
|
||||
// &.withtoc {
|
||||
// max-width:calc(100vw - #{$site-navigation-width * 2});
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
|
||||
@@ -41,10 +41,9 @@
|
||||
li {
|
||||
padding-left: 0px;
|
||||
line-height: 1.2;
|
||||
margin-top: .66em;
|
||||
margin-bottom: .66em;
|
||||
padding-top: .75em;
|
||||
ul li {
|
||||
padding-left: .5em;
|
||||
padding-left: .3em;
|
||||
}
|
||||
}
|
||||
a.top-menu-item-link {
|
||||
@@ -65,8 +64,9 @@
|
||||
}
|
||||
ul.submenu {
|
||||
display: none;
|
||||
margin-left: .4em;
|
||||
margin-left: .2em;
|
||||
padding-left: .5em;
|
||||
padding-bottom: .66em;
|
||||
li {
|
||||
line-height:1.3;
|
||||
}
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
@import 'components/anchors';
|
||||
@import 'components/images';
|
||||
@import 'components/admonitions';
|
||||
// @import 'vendor/highlightjs';
|
||||
@import 'vendor/highlightjs-new';
|
||||
// @import 'components/code';
|
||||
@import 'components/new-code';
|
||||
// @import 'vendor/highlightjs-OLD';
|
||||
@import 'vendor/highlightjs';
|
||||
// @import 'components/code-OLD';
|
||||
@import 'components/code';
|
||||
@import 'components/icons';
|
||||
@import 'components/tags';
|
||||
@import 'algolia/main';
|
||||
|
||||
+10
-10
@@ -14,12 +14,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs,
|
||||
.hljs-tag,
|
||||
.hljs-subst {
|
||||
color: $hugo-black;
|
||||
color: $hugo-white;
|
||||
}
|
||||
|
||||
.hljs-strong,
|
||||
.hljs-emphasis {
|
||||
color: $hugo-gray;
|
||||
color: $hugo-gray-light;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
@@ -28,14 +28,14 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs-regexp,
|
||||
.hljs-literal,
|
||||
.hljs-link {
|
||||
color: saturate($hugo-blue,10%);
|
||||
color: $hugo-blue;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-class {
|
||||
color: $hugo-green;
|
||||
color: $hugo-green-light;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
@@ -50,17 +50,17 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs-selector-tag,
|
||||
.hljs-name,
|
||||
.hljs-attr {
|
||||
color: $hugo-pink;
|
||||
color: $hugo-pink-light;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-attribute {
|
||||
color: saturate($hugo-blue,10%);
|
||||
color: $hugo-blue-light;
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-class .hljs-title {
|
||||
color: $hugo-black;
|
||||
color: $hugo-white;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
@@ -73,15 +73,15 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: saturate($hugo-blue,10%);
|
||||
color: $hugo-yellow;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-deletion,
|
||||
.hljs-meta {
|
||||
color: $hugo-gray;
|
||||
color: $hugo-gray-light;
|
||||
}
|
||||
|
||||
.language-toml.hljs .hljs-section {
|
||||
color:$hugo-pink;
|
||||
color:$hugo-pink-light;
|
||||
}
|
||||
+10
-10
@@ -14,12 +14,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs,
|
||||
.hljs-tag,
|
||||
.hljs-subst {
|
||||
color: $hugo-white;
|
||||
color: $hugo-black;
|
||||
}
|
||||
|
||||
.hljs-strong,
|
||||
.hljs-emphasis {
|
||||
color: $hugo-gray-light;
|
||||
color: $hugo-gray;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
@@ -28,14 +28,14 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs-regexp,
|
||||
.hljs-literal,
|
||||
.hljs-link {
|
||||
color: $hugo-blue;
|
||||
color: saturate($hugo-blue,10%);
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-class {
|
||||
color: $hugo-green-light;
|
||||
color: $hugo-green;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
@@ -50,17 +50,17 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs-selector-tag,
|
||||
.hljs-name,
|
||||
.hljs-attr {
|
||||
color: $hugo-pink-light;
|
||||
color: $hugo-pink;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-attribute {
|
||||
color: $hugo-blue-light;
|
||||
color: saturate($hugo-blue,10%);
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-class .hljs-title {
|
||||
color: $hugo-white;
|
||||
color: $hugo-black;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
@@ -73,15 +73,15 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: $hugo-yellow;
|
||||
color: saturate($hugo-blue,10%);
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-deletion,
|
||||
.hljs-meta {
|
||||
color: $hugo-gray-light;
|
||||
color: $hugo-gray;
|
||||
}
|
||||
|
||||
.language-toml.hljs .hljs-section {
|
||||
color:$hugo-pink-light;
|
||||
color:$hugo-pink;
|
||||
}
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user