From fe42cf10bbf9ebf41b4ec897588a17bc3d8f7317 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Sat, 14 Oct 2017 16:03:24 -0600 Subject: [PATCH] add CSS and sample content for article - add sample content for testing article styles - add CSS to style article --- preview-site-src/index.html | 290 +++++++++++++++++++++++++++- src/css/article.css | 11 -- src/css/doc.css | 448 ++++++++++++++++++++++++++++++++++++++++++++ src/css/site.css | 2 +- 4 files changed, 738 insertions(+), 13 deletions(-) delete mode 100644 src/css/article.css create mode 100644 src/css/doc.css diff --git a/preview-site-src/index.html b/preview-site-src/index.html index be17d40..e149f2f 100644 --- a/preview-site-src/index.html +++ b/preview-site-src/index.html @@ -1 +1,289 @@ -

Write me.

+
+
+
+

Platonem complectitur mediocritatem ea eos. +Ei nonumy deseruisse ius. +Mel id omnes verear. +Vis no velit audiam, sonet praesent eum ne. +Prompta eripuit nec ad.

+
+
+
+
+

Cu solet

+
+
+

Nominavi luptatum eos, an vim hinc philosophia intellegebat. +Lorem expetenda pertinacia et nec, wisi illud sonet qui ea. +Eum an doctus maiestatis efficiantur. +Eu mea inani iriure.

+
+
+
+
{
+  "name": "module-name",
+  "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"
+  },
+  "main": "index.js",
+  "devDependencies": {
+    "eslint": "^4.7.2",
+    "mocha": "^3.5.3"
+  },
+  "license": "ISC"
+}
+
+
+
+

How about some code?

+
+
+
+
const gulp = require('gulp')
+const browserify = require('browserify')
+const buffer = require('vinyl-buffer')
+const uglify = require('gulp-uglify')
+const tap = require('gulp-tap')
+
+gulp.task('js', () =>
+  gulp
+    .src('js/vendor/*.js', { cwd: 'src', base: 'src', read: false })
+    .pipe(
+      tap((file) => {
+        file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
+      })
+    )
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(gulp.dest('build'))
+)
+
+
+
+

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.

+
+
+
+
pom.xml
+src/
+  main/
+    java/
+      HelloWorld.java
+  test/
+    java/
+      HelloWorldTest.java
+
+
+
+

Per ea solet civibus inimicus. +Ferri tacimates constituam sed ex, eu mea munere vituperata constituam. +No vel quem admodum, etiam possim voluptatum sed ei. +Voluptua singulis pro ei, melius constituto consequuntur eos in, ei ius blandit albucius.

+
+
+
+
+

Liber recusabo

+
+
+

No sea, at invenire voluptaria mnesarchum has. +Ex nam suas nemore dignissim, vel apeirian democritum et. +Natum facilisis theophrastus an duo. +At ornatus splendide sed, phaedrum omittantur usu an, vix an noster voluptatibus.

+
+
+
    +
  1. +

    potenti donec cubilia tincidunt

    +
  2. +
  3. +

    etiam pulvinar inceptos velit quisque aptent himenaeos

    +
  4. +
  5. +

    lacus volutpat semper porttitor aliquet ornare primis nulla enim

    +
  6. +
  7. +

    ultricies sociosqu tristique integer

    +
  8. +
  9. +

    posuere curae pharetra rutrum adipiscing lectus est praesent

    +
  10. +
+
+
+

Eu sed antiopam gloriatur. +Ea mea agam graeci philosophia. +Vis veri graeci legimus ad.

+
+ ++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LibraryVersion

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

jscs-preset-gulp

^1.0.0

mississippi

^1.2.0

mocha

^2.4.5

+
+

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.

+
+
+ + + + + +
+ + +
+

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.

+
+
+ + + + + +
+ + +
+

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.

+
+
+ + + + + +
+ + +
+

Watch out!

+
+
+
+
+ + + + + +
+ + +
+

I wouldn’t try that if I were you.

+
+
+
+
+ + + + + +
+ + +I wouldn’t try that either. +
+
+
+ + + + + +
+ + +
+

Don’t forget this step!

+
+
+
+
+

Nominavi luptatum eos, an vim hinc philosophia intellegebat. +Lorem expetenda pertinacia et nec, wisi illud sonet qui ea. +Eum an doctus maiestatis efficiantur. +Eu mea inani iriure.

+
+

Voluptua singulis

+
+

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.

+
+
+
\ No newline at end of file diff --git a/src/css/article.css b/src/css/article.css deleted file mode 100644 index 166b9c2..0000000 --- a/src/css/article.css +++ /dev/null @@ -1,11 +0,0 @@ -.doc { - margin: 0 auto; - max-width: 40rem; -} - -@media (min-width: 1024px) { - .doc { - margin: 0 2rem; - max-width: 54rem; - } -} diff --git a/src/css/doc.css b/src/css/doc.css new file mode 100644 index 0000000..cc955bc --- /dev/null +++ b/src/css/doc.css @@ -0,0 +1,448 @@ +.doc { + margin: 0 auto; + max-width: 40rem; + padding: 0 1rem 2rem; + color: #333; +} + +@media (min-width: 1024px) { + .doc { + margin: 0 2rem; + max-width: 54rem; + } +} + +.doc h1, +.doc h2, +.doc h3, +.doc h4, +.doc h5, +.doc h6 { + color: #191919; + font-weight: normal; + line-height: 1.3; + margin: 1rem 0 0; +} + +.doc h1 > a.anchor, +.doc h2 > a.anchor, +.doc h3 > a.anchor, +.doc h4 > a.anchor, +.doc h5 > a.anchor, +.doc h6 > a.anchor { + position: absolute; + text-decoration: none; + width: 1.75ex; + margin-left: -1.5ex; + visibility: hidden; + font-size: 0.8em; + padding-top: 0.025em; +} + +.doc h1 > a.anchor::before, +.doc h2 > a.anchor::before, +.doc h3 > a.anchor::before, +.doc h4 > a.anchor::before, +.doc h5 > a.anchor::before, +.doc h6 > a.anchor::before { + content: "\00a7"; +} + +.doc h1:hover > a.anchor, +.doc h2:hover > a.anchor, +.doc h3:hover > a.anchor, +.doc h4:hover > a.anchor, +.doc h5:hover > a.anchor, +.doc h6:hover > a.anchor { + visibility: visible; +} + +.doc a, +.doc a:visited { + color: #1565c0; +} + +.doc a { + text-decoration: none; +} + +.doc a:hover { + color: #104d92; + text-decoration: underline; +} + +.doc b, +.doc dt, +.doc strong, +.doc th { + font-weight: 500; +} + +/* what about td/th code? */ +.doc p code { + font-size: 0.85em; + background-color: #fafafa; + padding: 0.075rem 0.25rem 0.125rem; + border-radius: 0.2rem; + /* font-weight: 300; */ +} + +.doc pre { + font-size: 0.85rem; + /* color: #000; */ + line-height: 1.5; +} + +.doc pre:not(.highlight), +.doc pre.highlight code { + display: block; + background-color: #fafafa; + padding: 0.75rem; + overflow-x: auto; + box-shadow: inset 0 0 2px #ddd; +} + +.doc .paragraph, +.doc .colist, +.doc .dlist, +.doc .olist, +.doc .ulist, +.doc .exampleblock, +.doc .imageblock, +.doc .listingblock, +.doc .literalblock, +.doc .sidebarblock { + margin: 1rem 0 0; +} + +.doc table.tableblock { + border-collapse: collapse; + font-size: 0.8em; + margin: 2rem 0; + /* enable table-layout: fixed if you want the table width to be enforced strictly */ + /* alternative is to wrap table in div and set overflow-x: auto on the wrapper */ + /* table-layout: fixed; */ +} + +.doc table.spread { + width: 100%; +} + +.doc table.tableblock th, +.doc table.tableblock td { + padding: 0.5rem; +} + +.doc table.tableblock th { + border-bottom: 2.5px solid #ddd; +} + +.doc table.tableblock td { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.doc .halign-left { + text-align: left; +} + +.doc .valign-top { + vertical-align: top; +} + +.doc .tableblock p { + font-size: inherit; +} + +.doc .admonitionblock { + margin: 1.4rem 0 0; + position: relative; +} + +.doc .admonitionblock p, +.doc .admonitionblock td.content { + font-size: 0.8rem; +} + +.doc .admonitionblock table { + border-collapse: collapse; + table-layout: fixed; + width: 100%; +} + +.doc .admonitionblock td.content { + padding: 1rem 1rem 0.75rem; + background-color: #fafafa; + width: 100%; +} + +.doc .admonitionblock .icon { + position: absolute; + top: 0; + left: 0; + font-size: 0.75rem; + padding: 0 0.5rem; + height: 1.25rem; + line-height: 1; + font-weight: 500; + text-transform: uppercase; + border-radius: 0.45rem; + color: #fff; + transform: translate(-0.5rem, -50%); +} + +.doc .admonitionblock.caution .icon { + background-color: #a0439c; +} + +.doc .admonitionblock.important .icon { + background-color: #d32f2f; +} + +.doc .admonitionblock.note .icon { + background-color: #217ee7; +} + +.doc .admonitionblock.tip .icon { + background-color: #41af46; +} + +.doc .admonitionblock.warning .icon { + background-color: #e18114; +} + +.doc .admonitionblock .icon i { + font-style: normal; + display: inline-flex; + align-items: center; + height: 100%; +} + +.doc .admonitionblock .icon i::after { + content: attr(title); + hyphens: none; +} + +.doc .imageblock { + display: flex; + flex-direction: column; + align-items: center; +} + +.doc .imageblock img { + display: block; +} + +.doc .imageblock .title { + color: #4a4a4a; + font-style: italic; + margin-top: 0.5rem; +} + +.doc .imageblock .content { + max-width: 100%; +} + +.doc .imageblock img, +.doc .paragraph .image img { + height: auto; + width: auto; + max-width: 100%; +} + +.doc > h1 { + font-size: 2rem; + margin: 2rem 0 1.5rem; +} + +#preamble + .sect1, +.doc .sect1 + .sect1 { + margin-top: 2.5rem; +} + +.doc h2:not(.discrete) { + border-bottom: 1px solid #ddd; + margin-left: -1rem; + margin-right: -1rem; + padding: 0.4rem 1rem 0.1rem; +} + +.doc p { + font-size: 0.95rem; + margin: 0; +} + +.doc p, +.doc .tableblock, +.doc .content { + hyphens: auto; +} + +.doc .ulist .paragraph, +.doc .olist .paragraph { + margin: 0; + padding: 0; +} + +#preamble .abstract blockquote { + background-color: #f0f0f0; + border-left: 5px solid #ddd; + color: #4a4a4a; + font-size: 0.9em; + margin: 0; + padding: 0.75em 1em; +} + +.doc .admonitionblock td.content > div[class] { + margin: 0; +} + +.doc table.tableblock .paragraph { + margin: 0; + padding: 0; +} + +.doc table.tableblock .admonitionblock, +.doc .ulist .admonitionblock, +.doc .olist .admonitionblock { + padding: 0; +} + +.doc ul { + margin: 0; + padding: 0 0 0 1.5rem; +} + +.doc ol { + margin: 0; + padding: 0 0 0 2rem; + list-style: none; + counter-reset: ordered-list; +} + +.doc ol > li { + counter-increment: ordered-list; +} + +.doc ol > li::before { + /* use counter(ordered-list, lower-alpha) to make letters */ + content: "." counter(ordered-list); + font-weight: 500; + display: inline-block; + width: 1em; + direction: rtl; + margin: 0 0.5em 0 -1.5em; + text-align: right; + position: absolute; +} + +.doc .olist .olist, +.doc .olist .ulist, +.doc .olist .dlist, +.doc .ulist .olist, +.doc .ulist .ulist, +.doc .ulist .dlist, +.doc .dlist .ulist, +.doc .dlist .olist, +.doc .dlist .dlist { + padding: 0; +} + +.doc .olist li, +.doc .ulist li { + margin-bottom: 0.5rem; +} + +.doc .ulist .listingblock, +.doc .olist .listingblock, +.doc .admonitionblock .listingblock { + padding: 0; +} + +.doc .exampleblock .title, +.doc .literalblock .title, +.doc .listingblock .title { + color: #4a4a4a; + padding-bottom: 0.15rem; + font-size: 0.85rem; +} + +/* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */ +.doc .tableblock pre, +.doc .listingblock.wrap pre { + white-space: pre-wrap; +} + +.doc .listingblock code[data-lang] { + position: relative; +} + +.doc .listingblock code[data-lang]::before { + content: attr(data-lang); + display: none; + color: #8e8e8e; + font-size: 0.75em; + font-weight: 500; + letter-spacing: 0.1em; + line-height: 1; + text-transform: uppercase; + position: absolute; + top: 0.5rem; + right: 0.5rem; +} + +.doc .listingblock:hover code[data-lang]::before { + display: block; +} + +.doc .dlist dt { + color: #4a4a4a; + font-style: italic; +} + +.doc .dlist dt::after { + content: ":"; +} + +.doc .dlist dd { + margin: 0 0 0.3rem 1.5rem; +} + +.doc .conum[data-value] { + /* border: 1px solid #989898; */ + border: 1px solid #404040; + border-radius: 100%; + display: inline-block; + font-family: "Roboto", sans-serif; + font-size: 0.75rem; + font-style: normal; + height: 1.25em; + line-height: 1.2; + text-align: center; + width: 1.25em; + letter-spacing: -0.25ex; + text-indent: -0.25ex; +} + +.doc .conum[data-value]::after { + content: attr(data-value); +} + +.doc .conum[data-value] + b { + display: none; +} + +.doc .colist { + font-size: 0.95rem; +} + +.doc .colist > table tr > td:first-of-type { + padding: 0 0.75em; + line-height: 1; +} + +.menuseq i.caret::before { + content: ">"; + font-style: normal; + font-weight: 500; +} diff --git a/src/css/site.css b/src/css/site.css index ab3a32e..b6cbd2e 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -8,6 +8,6 @@ @import "toolbar.css"; @import "breadcrumbs.css"; @import "page-versions.css"; -@import "article.css"; +@import "doc.css"; @import "header.css"; @import "footer.css"; -- 2.11.0