Commit de46acac authored by hyeryung's avatar hyeryung

Merge branch 'master' into 'master'

update doc style

See merge request swd/swlab-ui!3
parents 4195efed 557c7cbf
Pipeline #19211 passed with stages
in 2 minutes and 55 seconds
= Hardware and Software Requirements = Text Formatting
Author Name Gildong Hong <email1@bwg.com>
:idprefix: :description: The document's description. This document is about the text formatting.
:idseparator: - include::./attributes/common_attrs.adoc[]
:!example-caption: include::./attributes/dir_attrs.adoc[]
:!table-caption:
//:page-role: -toc [abstract]
:page-pagination: .문서개요
[.float-group]
-- --
image:multirepo-ssg.svg[Multirepo SSG,180,135,float=right,role=float-gap] This document has a header that specifies the {doctitle}.
Platonem complectitur mediocritatem ea eos. This document is about the text formatting.
Ei nonumy deseruisse ius.
Mel id omnes verear.
Vis no velit audiam, sonet <<dependencies,praesent>> eum ne.
*Prompta eripuit* nec ad.
Integer diam enim, dignissim eget eros et, ultricies mattis odio.
-- --
Vestibulum consectetur nec urna a luctus. == 굵게 (*)
Quisque pharetra tristique arcu fringilla dapibus.
https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus.
Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
== Cu solet
Nominavi luptatum eos, an vim hinc philosophia intellegebat.
Lorem pertinacia `expetenda` et nec, [.underline]#wisi# illud [.line-through]#sonet# qui ea.
H~2~0.
E = mc^2^.
*Alphabet* *алфавит* _алфавит_ *_алфавит_*.
Eum an doctus <<liber-recusabo,maiestatis efficiantur>>.
Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
[,json]
---- ----
{ A bold *word*, and a bold *phrase of text*.
"name": "module-name", Bold c**hara**cter**s** within a word.
"version": "10.0.1",
"description": "An example module to illustrate the usage of package.json",
"author": "Author Name <author@example.com>",
"scripts": {
"test": "mocha",
"lint": "eslint"
}
}
---- ----
====
A bold *word*, and a bold *phrase of text*.
Bold c**hara**cter**s** within a word.
====
.Example paragraph syntax == 기울임체 (_)
[,asciidoc]
---- ----
.Optional title An italic _word_, and an italic _phrase of text_.
[example] Italic c__hara__cter__s__ within a word.
This is an example paragraph.
---- ----
.Optional title
[example]
This is an example paragraph.
.Summary *Spoiler Alert!*
[%collapsible]
==== ====
Details. An italic _word_, and an italic _phrase of text_.
Italic c__hara__cter__s__ within a word.
Loads of details.
==== ====
[,asciidoc] == 고정 폭 (`)
---- ----
Voila! "`Wait!`" Indigo plucked a small vial from her desk's top drawer
and held it toward us.
The vial's label read: `E=mc^2^`; the `E` represents _energy_,
but also pure _genius!_
---- ----
.Result
[%collapsible.result]
==== ====
Voila! "`Wait!`" Indigo plucked a small vial from her desk's top drawer
and held it toward us.
The vial's label read: `E=mc^2^`; the `E` represents _energy_,
but also pure _genius!_
==== ====
=== Some Code == 강조 표시 (#)
How about some code?
[,js]
---- ----
vfs Mark my words, #automation is essential#.
.src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false }) Mark my words, auto##ma##tion is essential.
.pipe(tap((file) => { // <.>
file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
}))
.pipe(buffer()) // <.>
.pipe(uglify())
.pipe(gulp.dest('build'))
---- ----
<.> The `tap` function is used to wiretap the data in the pipe. ====
<.> Wrap each streaming file in a buffer so the files can be processed by uglify. Mark my words, #automation is essential#.
Uglify can only work with buffers, not streams. Mark my words, auto##ma##tion is essential.
====
Execute these commands to validate and build your site:
$ podman run -v $PWD:/antora:Z --rm -t antora/antora \
version
3.0.0
$ podman run -v $PWD:/antora:Z --rm -it antora/antora \
--clean \
antora-playbook.yml
Cum dicat #putant# ne. == 스타일 구문 ([.]#)
Est in <<inline,reque>> homero principes, meis deleniti mediocrem ad has. ----
Altera atomorum his ex, has cu elitr melius propriae. Do werewolves believe in [.small]#small print#?
Eos suscipit scaevola at. [.big]##O##nce upon an infinite loop.
----
====
Do werewolves believe in [.small]#small print#?
[.big]##O##nce upon an infinite loop.
====
=== Text with custom role
.... ....
pom.xml This sentence contains [.userinput]*bold inline content* that's assigned a role.
src/ => HTML:
main/
java/
HelloWorld.java
test/
java/
HelloWorldTest.java
....
Eu mea munere vituperata constituam.
[%autowidth] [source,html]
|===
|Input | Output | Example
m|"foo\nbar"
l|foo
bar
a|
[,ruby]
---- ----
puts "foo\nbar" <p>This sentence contains <strong class="userinput">bold inline content</strong> that&#8217;s assigned a role.</p>
---- ----
|=== ** See the link:Blocks_sample.adoc#blocks_sample[Blocks sample] for more details about the block usage.
** See the link:Links_sample.adoc#links_sample[Links sample] for more details about the link usage.
Here we just have some plain text. ....
====
This sentence contains [.userinput]*bold inline content* that's assigned a role.
=> HTML:
[source] [source,html]
---- ----
plain text <p>This sentence contains <strong class="userinput">bold inline content</strong> that&#8217;s assigned a role.</p>
---- ----
** See the link:Blocks_sample.adoc#blocks_sample[Blocks sample] for more details about the block usage.
[.rolename] ** See the link:Links_sample.adoc#links_sample[Links sample] for more details about the link usage.
=== Liber recusabo
Select menu:File[Open Project] to open the project in your IDE.
Per ea btn:[Cancel] inimicus.
Ferri kbd:[F11] tacimates constituam sed ex, eu mea munere vituperata kbd:[Ctrl,T] constituam.
.Sidebar Title
****
Platonem complectitur mediocritatem ea eos.
Ei nonumy deseruisse ius.
Mel id omnes verear.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
****
No sea, at invenire voluptaria mnesarchum has.
Ex nam suas nemore dignissim, vel apeirian democritum et.
At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.
---
.Ordered list with customized numeration
[upperalpha]
. potenti donec cubilia tincidunt
. etiam pulvinar inceptos velit quisque aptent himenaeos
. lacus volutpat semper porttitor aliquet ornare primis nulla enim
Natum facilisis theophrastus an duo.
No sea, at invenire voluptaria mnesarchum has.
.Unordered list with customized marker
[square]
* ultricies sociosqu tristique integer
* lacus volutpat semper porttitor aliquet ornare primis nulla enim
* etiam pulvinar inceptos velit quisque aptent himenaeos
Eu sed antiopam gloriatur.
Ea mea agam graeci philosophia.
[circle]
* circles
** circles
*** and more circles!
At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.
* [ ] todo
* [x] done!
Vis veri graeci legimus ad.
sed::
splendide sed
mea::
tad::
agam graeci
Let's look at that another way.
[horizontal]
sed::
splendide sed
mea::
agam graeci
At ornatus splendide sed.
.Library dependencies
[#dependencies%autowidth%footer,stripes=hover]
|===
|Library |Version
|eslint
|^1.7.3
|eslint-config-gulp
|^2.0.0
|expect
|^1.20.2
|istanbul
|^0.4.3
|istanbul-coveralls
|^1.0.3
|jscs
|^2.3.5
h|Total
|6
|===
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
[TIP]
This oughta do it!
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
[NOTE]
==== ====
You've been down _this_ road before.
====
Cum dicat putant ne.
Est in reque homero principes, meis deleniti mediocrem ad has.
Altera atomorum his ex, has cu elitr melius propriae.
Eos suscipit scaevola at.
[WARNING] == 아래 첨자 (~), 위 첨자 (^)
----
"`Well the H~2~O formula written on their whiteboard could be part
of a shopping list, but I don't think the local bodega sells
E=mc^2^,`" Lazarus replied.
----
==== ====
Watch out! "`Well the H~2~O formula written on their whiteboard could be part
of a shopping list, but I don't think the local bodega sells
E=mc^2^,`" Lazarus replied.
==== ====
[CAUTION] == 밑줄
----
The text pass:[<u>underline me</u>] is underlined.
----
==== ====
[#inline]#I wouldn't try that if I were you.# The text pass:[<u>underline me</u>] is underlined.
==== ====
[IMPORTANT] == 권고 레이블
==== * 레이블은 대문자여야 함.
Don't forget this step! * 단락일 경우
==== ** 레이블 바로 뒤에 콜론(:)이 온다.
** 단락의 첫 번째 줄을 레이블에서 한 칸으로 구분
* 블록일 경우
** 속성 목록([ ])에서 레이블을 설정
** 일반적으로 예제 블록(====)에 설정
* 종류
[cols="2*"]
|===
|소스 |결과
.Key Points to Remember a|
....
. {blank}
+
NOTE: 단락
note1
note2
. {blank}
+
[TIP] [TIP]
.tips
==== ====
If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command. * 블록
* tip1
$ npm i -g @antora/cli @antora/site-generator * tip2
Or you can install the metapackage to upgrade both packages at once.
$ npm i -g antora
==== ====
Nominavi luptatum eos, an vim hinc philosophia intellegebat. . {blank}
Eu mea inani iriure. +
IMPORTANT: important
[discrete] . {blank}
== Voluptua singulis +
CAUTION: caution
[discrete] . {blank}
=== Nominavi luptatum +
WARNING: warning
....
Cum dicat putant ne. a|
Est in reque homero principes, meis deleniti mediocrem ad has. . {blank}
Ex nam suas nemore dignissim, vel apeirian democritum et. +
NOTE: 단락
note1
note2
. {blank}
+
[TIP]
.tips
====
* 블록
* tip1
* tip2
====
.Antora is a multi-repo documentation site generator . {blank}
image::multirepo-ssg.svg[Multirepo SSG,3000,opts=interactive] +
IMPORTANT: important
.Let's see that again, but a little smaller . {blank}
image::multirepo-ssg.svg[Multirepo SSG,300,role=text-left] +
CAUTION: caution
. {blank}
+
WARNING: warning
|===
Make the switch today!
.Full Circle with Jake Blauvelt NOTE: 단락
video::300817511[vimeo,640,360,align=left] note1
note2
[#english+中文] . {blank}
== English + 中文 +
NOTE: 단락
note1
note2
Altera atomorum his ex, has cu elitr melius propriae. . {blank}
Eos suscipit scaevola at. +
note2
[,'Famous Person. Cum dicat putant ne.','Cum dicat putant ne. https://example.com[Famous Person Website]'] . {blank}
____ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. NOTE: 단락
Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. note1
Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! note2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
____
Lorem ipsum dolor sit amet, consectetur adipiscing elit. . {blank}
+
[TIP]
.tips
====
* 블록
* tip1
* tip2
====
[verse] . {blank}
____ +
The fog comes IMPORTANT: important
on little cat feet.
____
== Fin . {blank}
+
CAUTION: caution
That's all, folks! . {blank}
+
WARNING: warning
\ No newline at end of file
antoraVersion: '1.0.0' antoraVersion: "1.0.0"
site: site:
url: http://localhost:5252 url: http://localhost:5252
title: Brand Docs title: Brand Docs
homeUrl: &home_url /xyz/5.2/index.html homeUrl: &home_url /xyz/5.2/index.html
components: components:
- name: abc - name: abc
title: Project ABC title: Project ABC
url: '#' url: "#"
versions: versions:
- &latest_version_abc - &latest_version_abc
url: '#' url: "#"
version: '1.1' version: "1.1"
displayVersion: '1.1' displayVersion: "1.1"
- url: '#' - url: "#"
version: '1.0' version: "1.0"
displayVersion: '1.0' displayVersion: "1.0"
latestVersion: *latest_version_abc latestVersion: *latest_version_abc
- &component - &component
name: xyz name: xyz
title: &component_title Project XYZ title: &component_title Project XYZ
url: /xyz/6.0/index.html
versions:
- &latest_version_xyz
url: /xyz/6.0/index.html url: /xyz/6.0/index.html
version: '6.0' versions:
displayVersion: '6.0' - &latest_version_xyz
- &component_version url: /xyz/6.0/index.html
title: *component_title version: "6.0"
url: '#' displayVersion: "6.0"
version: '5.2' - &component_version
displayVersion: '5.2' title: *component_title
- url: '#' url: "#"
version: '5.1' version: "5.2"
displayVersion: '5.1' displayVersion: "5.2"
- url: '#' - url: "#"
version: '5.0' version: "5.1"
displayVersion: '5.0' displayVersion: "5.1"
latestVersion: *latest_version_xyz - url: "#"
- name: '123' version: "5.0"
title: Project 123 displayVersion: "5.0"
url: '#' latestVersion: *latest_version_xyz
versions: - name: "123"
- &latest_version_123 title: Project 123
url: '#' url: "#"
version: '2.2' versions:
displayVersion: '2.2' - &latest_version_123
- url: '#' url: "#"
version: '2.1' version: "2.2"
displayVersion: '2.1' displayVersion: "2.2"
- url: '#' - url: "#"
version: '2.0' version: "2.1"
displayVersion: '2.0' displayVersion: "2.1"
latestVersion: *latest_version_123 - url: "#"
version: "2.0"
displayVersion: "2.0"
latestVersion: *latest_version_123
page: page:
url: *home_url url: *home_url
home: true home: true
title: Brand&#8217;s Hardware &amp; Software Requirements title: Brand&#8217;s Hardware &amp; Software Requirements
component: *component component: *component
componentVersion: *component_version componentVersion: *component_version
version: '5.2' version: "5.2"
displayVersion: '5.2' displayVersion: "5.2"
module: ROOT module: ROOT
relativeSrcPath: index.adoc relativeSrcPath: index.adoc
editUrl: http://example.com/project-xyz/blob/main/index.adoc editUrl: http://example.com/project-xyz/blob/main/index.adoc
...@@ -67,60 +67,60 @@ page: ...@@ -67,60 +67,60 @@ page:
private: false private: false
previous: previous:
content: Quickstart content: Quickstart
url: '#' url: "#"
urlType: 'internal' urlType: "internal"
next: next:
content: Liber Recusabo content: Liber Recusabo
url: '#' url: "#"
urlType: 'internal' urlType: "internal"
breadcrumbs: breadcrumbs:
- content: Quickstart
url: '#'
urlType: fragment
- content: Brand&#8217;s Hardware &amp; Software Requirements
url: /xyz/5.2/index.html
urlType: internal
versions:
- version: '6.0'
displayVersion: '6.0'
url: '#'
- version: '5.2'
displayVersion: '5.2'
url: '#'
- version: '5.1'
displayVersion: '5.1'
url: '#'
- version: '5.0'
displayVersion: '5.0'
missing: true
url: '#'
navigation:
- root: true
items:
- content: Quickstart - content: Quickstart
url: '#' url: "#"
urlType: fragment
items:
- content: Brand&#8217;s Hardware &amp; Software Requirements
url: /xyz/5.2/index.html
urlType: internal
- content: Cu Solet
url: '/xyz/5.2/index.html#cu-solet'
urlType: internal
- content: English + 中文
url: '/xyz/5.2/index.html#english+中文'
urlType: internal
- content: Liber Recusabo
url: '#liber-recusabo'
urlType: fragment urlType: fragment
- content: Reference - content: Brand&#8217;s Hardware &amp; Software Requirements
url: /xyz/5.2/index.html
urlType: internal
versions:
- version: "6.0"
displayVersion: "6.0"
url: "#"
- version: "5.2"
displayVersion: "5.2"
url: "#"
- version: "5.1"
displayVersion: "5.1"
url: "#"
- version: "5.0"
displayVersion: "5.0"
missing: true
url: "#"
navigation:
- root: true
items: items:
- content: Keyboard Shortcuts - content: Quickstart
url: '#' url: "#"
urlType: fragment urlType: fragment
- content: Importing and Exporting items:
url: '#' - content: Brand&#8217;s Hardware &amp; Software Requirements
urlType: fragment url: /xyz/5.2/index.html
- content: Some Code urlType: internal
url: '/xyz/5.2/index.html#some-code' - content: Cu Solet
urlType: internal url: "/xyz/5.2/index.html#cu-solet"
urlType: internal
- content: English + 中文
url: "/xyz/5.2/index.html#english+中文"
urlType: internal
- content: Liber Recusabo
url: "#liber-recusabo"
urlType: fragment
- content: Reference
items:
- content: Keyboard Shortcuts
url: "#"
urlType: fragment
- content: Importing and Exporting
url: "#"
urlType: fragment
- content: Some Code
url: "/xyz/5.2/index.html#some-code"
urlType: internal
...@@ -29,31 +29,32 @@ ...@@ -29,31 +29,32 @@
} }
.doc h1 { .doc h1 {
font-weight: var(--h1-font-weight); font-size: 32px;
font-weight: 600;
} }
.doc h2 { .doc h2 {
font-weight: var(--h2-font-weight); font-size: 28px;
font-weight: 600;
} }
.doc h3 { .doc h3 {
font-weight: var(--h3-font-weight); font-weight: 600;
} }
.doc h4 { .doc h4 {
font-weight: var(--h4-font-weight); font-weight: 500;
} }
.doc h5 { .doc h5 {
font-weight: var(--h5-font-weight); font-weight: 500;
} }
.doc h6 { .doc h6 {
font-weight: var(--h6-font-weight); font-weight: 500;
} }
.doc > h1.page:first-child { .doc > h1.page:first-child {
font-size: calc(36 / var(--rem-base) * 1rem);
margin: 1.5rem 0; margin: 1.5rem 0;
} }
...@@ -71,6 +72,13 @@ ...@@ -71,6 +72,13 @@
margin-top: 1rem; margin-top: 1rem;
} }
.doc .sect1 {
background: var(--color-white);
padding: 25px;
border-radius: var(--content-border-radius);
box-shadow: 0 1px 2px 1px rgba(47, 56, 61, 0.15), 0 1px 2px rgba(47, 56, 61, 0.2);
}
#preamble + .sect1, #preamble + .sect1,
.doc .sect1 + .sect1 { .doc .sect1 + .sect1 {
margin-top: 2rem; margin-top: 2rem;
...@@ -84,10 +92,7 @@ ...@@ -84,10 +92,7 @@
} }
.doc h2:not(.discrete) { .doc h2:not(.discrete) {
border-bottom: 1px solid var(--section-divider-color); margin-top: 0;
margin-left: -1rem;
margin-right: -1rem;
padding: 0.4rem 1rem 0.1rem;
} }
.doc h3:not(.discrete), .doc h3:not(.discrete),
...@@ -106,9 +111,9 @@ ...@@ -106,9 +111,9 @@
width: 1.75ex; width: 1.75ex;
margin-left: -1.5ex; margin-left: -1.5ex;
visibility: hidden; visibility: hidden;
font-size: 0.8em; font-size: 0.6em;
font-weight: normal; font-weight: normal;
padding-top: 0.05em; padding-top: 0.3em;
} }
.doc h1 .anchor::before, .doc h1 .anchor::before,
...@@ -159,7 +164,7 @@ ...@@ -159,7 +164,7 @@
.doc thead code, .doc thead code,
.doc .colist > table code { .doc .colist > table code {
color: var(--code-font-color); color: var(--code-font-color);
background: var(--code-background); background: var(--color-smoke-40);
border-radius: 0.25em; border-radius: 0.25em;
font-size: 0.95em; font-size: 0.95em;
padding: 0.125em 0.25em; padding: 0.125em 0.25em;
...@@ -279,6 +284,13 @@ ...@@ -279,6 +284,13 @@
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.doc table.tableblock thead th {
color: #64696c;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.doc table.tableblock pre { .doc table.tableblock pre {
font-size: inherit; font-size: inherit;
} }
...@@ -298,7 +310,7 @@ ...@@ -298,7 +310,7 @@
.doc table.tableblock, .doc table.tableblock,
.doc table.tableblock > * > tr > * { .doc table.tableblock > * > tr > * {
border: 0 solid var(--table-border-color); border-bottom: 0 solid var(--table-border-color);
} }
.doc table.tableblock h2 { .doc table.tableblock h2 {
...@@ -321,11 +333,6 @@ ...@@ -321,11 +333,6 @@
border-width: 1px 0; border-width: 1px 0;
} }
.doc table.grid-all > thead th,
.doc table.grid-rows > thead th {
border-bottom-width: 2.5px;
}
.doc table.frame-all { .doc table.frame-all {
border-width: 1px; border-width: 1px;
} }
...@@ -395,6 +402,8 @@ ...@@ -395,6 +402,8 @@
.doc .admonitionblock { .doc .admonitionblock {
margin: 1.4rem 0 0; margin: 1.4rem 0 0;
border-radius: var(--content-border-radius);
border: 1px solid var(--color-smoke-90);
} }
.doc .admonitionblock p, .doc .admonitionblock p,
...@@ -419,11 +428,30 @@ ...@@ -419,11 +428,30 @@
.doc .admonitionblock td.content { .doc .admonitionblock td.content {
padding: 1rem 1rem 0.75rem; padding: 1rem 1rem 0.75rem;
background: var(--admonition-background);
width: 100%; width: 100%;
word-wrap: anywhere; word-wrap: anywhere;
} }
.doc .admonitionblock.note {
background-color: #f6fafd;
}
.doc .admonitionblock.tip {
background-color: #f7f9fa;
}
.doc .admonitionblock.important {
background-color: #faf1f0;
}
.doc .admonitionblock.caution {
background-color: #faf1f0;
}
.doc .admonitionblock.warning {
background-color: #fff4e3;
}
.doc .admonitionblock td.icon { .doc .admonitionblock td.icon {
font-size: calc(15 / var(--rem-base) * 1rem); font-size: calc(15 / var(--rem-base) * 1rem);
left: 0; left: 0;
...@@ -530,22 +558,13 @@ ...@@ -530,22 +558,13 @@
} }
#preamble .abstract blockquote { #preamble .abstract blockquote {
background: var(--abstract-background); border-left: 5px solid var(--color-blue-70);
border-left: 5px solid var(--abstract-border-color);
color: var(--abstract-font-color); color: var(--abstract-font-color);
font-size: calc(16 / var(--rem-base) * 1rem); padding-left: 1.5em;
padding: 0.75em 1em;
} }
.doc .quoteblock, .doc .quoteblock .title {
.doc .verseblock { font-weight: 500;
background: var(--quote-background);
border-left: 5px solid var(--quote-border-color);
color: var(--quote-font-color);
}
.doc .quoteblock {
padding: 0.25rem 2rem 1.25rem;
} }
.doc .quoteblock .attribution { .doc .quoteblock .attribution {
...@@ -558,10 +577,6 @@ ...@@ -558,10 +577,6 @@
margin-top: 1rem; margin-top: 1rem;
} }
.doc .quoteblock .paragraph {
font-style: italic;
}
.doc .quoteblock cite { .doc .quoteblock cite {
padding-left: 1em; padding-left: 1em;
} }
...@@ -787,10 +802,9 @@ ...@@ -787,10 +802,9 @@
.doc .exampleblock > .content, .doc .exampleblock > .content,
.doc details.result > .content { .doc details.result > .content {
background: var(--example-background); background: var(--color-blue-10);
border: 0.25rem solid var(--example-border-color); border-radius: var(--content-border-radius);
border-radius: 0.5rem; padding: var(--content-padding);
padding: 0.75rem;
} }
.doc .exampleblock > .content::after, .doc .exampleblock > .content::after,
...@@ -834,11 +848,13 @@ ...@@ -834,11 +848,13 @@
.doc pre.highlight > code, .doc pre.highlight > code,
.doc .listingblock pre:not(.highlight), .doc .listingblock pre:not(.highlight),
.doc .literalblock pre { .doc .literalblock pre {
background: var(--pre-background); color: var(--color-smoke-40);
box-shadow: inset 0 0 1.75px var(--pre-border-color); background: var(--color-jet-90);
border-radius: var(--content-border-radius);
font-size: 15px;
display: block; display: block;
overflow-x: auto; overflow-x: auto;
padding: 0.875em; padding: var(--content-padding);
} }
.doc .listingblock > .content { .doc .listingblock > .content {
...@@ -1124,3 +1140,7 @@ ...@@ -1124,3 +1140,7 @@
.doc .userinput { .doc .userinput {
color: red; color: red;
} }
.doc mark {
background-color: var(--color-blue-90);
}
:root { :root {
/* colors */ /* colors */
--color-bwg-main: #0072ce;
--color-white: #fff; --color-white: #fff;
--color-smoke-10: #fefefe; --color-smoke-10: #fefefe;
--color-smoke-30: #fafafa; --color-smoke-30: #fafafa;
--color-smoke-40: #f2f0f8;
--color-smoke-50: #f5f5f5; --color-smoke-50: #f5f5f5;
--color-smoke-70: #f0f0f0; --color-smoke-70: #f0f0f0;
--color-smoke-80: #eceded;
--color-smoke-90: #e1e1e1; --color-smoke-90: #e1e1e1;
--color-gray-10: #c1c1c1; --color-gray-10: #c1c1c1;
--color-gray-30: #9c9c9c; --color-gray-30: #9c9c9c;
...@@ -16,10 +19,14 @@ ...@@ -16,10 +19,14 @@
--color-jet-50: #333; --color-jet-50: #333;
--color-jet-70: #222; --color-jet-70: #222;
--color-jet-80: #12071f; --color-jet-80: #12071f;
--color-jet-90: #28262e;
--color-black: #000; --color-black: #000;
--color-blue-10: #f8f9fd; --color-blue-10: #f8f9fd;
--color-blue-30: #dee2e6; --color-blue-30: #dee2e6;
--color-bwg-main: #0072ce; --color-blue-50: #f4f8fc;
--color-blue-70: #d8def6;
--color-blue-80: #e3e6f3;
--color-blue-90: #c0d1fe;
/* fonts */ /* fonts */
--rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */ --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
--body-font-size: 1.0625em; /* 17px */ --body-font-size: 1.0625em; /* 17px */
...@@ -86,12 +93,6 @@ ...@@ -86,12 +93,6 @@
--doc-margin: 0 auto; --doc-margin: 0 auto;
--doc-margin--desktop: 0 2rem; --doc-margin--desktop: 0 2rem;
--heading-font-color: var(--color-jet-80); --heading-font-color: var(--color-jet-80);
--h1-font-weight: var(--h-font-weight-bold);
--h2-font-weight: var(--h-font-weight-bold);
--h3-font-weight: var(--h-font-weight-bold);
--h4-font-weight: 500;
--h5-font-weight: 500;
--h6-font-weight: 500;
--alt-heading-font-weight: var(--body-font-weight-bold); --alt-heading-font-weight: var(--body-font-weight-bold);
--section-divider-color: var(--panel-border-color); --section-divider-color: var(--panel-border-color);
--link-font-color: #1565c0; --link-font-color: #1565c0;
...@@ -123,6 +124,8 @@ ...@@ -123,6 +124,8 @@
--table-border-color: var(--panel-border-color); --table-border-color: var(--panel-border-color);
--table-stripe-background: var(--panel-background); --table-stripe-background: var(--panel-background);
--table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%); --table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
--content-border-radius: 10px;
--content-padding: 15px 20px;
/* toc */ /* toc */
--toc-font-color: var(--nav-muted-color); --toc-font-color: var(--nav-muted-color);
--toc-heading-font-color: var(--doc-font-color); --toc-heading-font-color: var(--doc-font-color);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment