D3Public/daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Create a variables file to customize theme easily, lint CSS

Browse Source
This commit is contained in:
Stéphane Goetz 2018-02-25 23:02:09 +01:00
parent 3346dec1d6
commit 2a3d513a40
37 changed files with 446 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
crafty.config.js
View File

@ -5,26 +5,43 @@ module.exports = {
"@swissquote/crafty-runner-gulp"
],
destination_css: "themes",
stylelint_pattern: [
"themes/daux/scss/**/*.scss",
"themes/daux_singlepage/scss/**/*.scss",
"themes/common/scss/**/*.scss",
"!*.min.css",
"!**/vendor/**/*.scss"
],
stylelint: {
rules: {
"swissquote/no-type-outside-scope": null
}
},
css: {
"theme_blue": {
source: "themes/daux/scss/theme-blue.scss",
destination: "daux/css/theme-blue.min.css"
destination: "daux/css/theme-blue.min.css",
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
},
"theme_green": {
source: "themes/daux/scss/theme-green.scss",
destination: "daux/css/theme-green.min.css"
destination: "daux/css/theme-green.min.css",
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
},
"theme_navy": {
source: "themes/daux/scss/theme-navy.scss",
destination: "daux/css/theme-navy.min.css"
destination: "daux/css/theme-navy.min.css",
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
},
"theme_red": {
source: "themes/daux/scss/theme-red.scss",
destination: "daux/css/theme-red.min.css"
destination: "daux/css/theme-red.min.css",
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
},
"daux_singlepage": {
source: "themes/daux_singlepage/scss/main.scss",
destination: "daux_singlepage/css/main.min.css"
destination: "daux_singlepage/css/main.min.css",
watch: ["themes/daux_singlepage/scss/**", "themes/common/scss/**"]
}
}
};

10
docs/_index.md
View File

@ -1,4 +1,4 @@
<p class="lead">
<p class="HeroText">
<strong>Daux.io</strong> is a documentation generator that uses a simple folder structure and Markdown files to create custom documentation on the fly. It helps you create great looking documentation in a developer friendly way.
</p>
@ -8,8 +8,8 @@
---
<div class="row">
<div class="col-third">
<div class="Row">
<div class="Row__third">
#### For Authors
@ -24,7 +24,7 @@
* [Table of Contents](01_Features/Table_of_contents.md)
</div>
<div class="col-third">
<div class="Row__third">
#### For Developers
@ -34,7 +34,7 @@
* Work with pages metadata
</div>
<div class="col-third">
<div class="Row__third">
#### For Marketing

4
libs/ContentTypes/Markdown/LinkRenderer.php
View File

@ -99,7 +99,7 @@ class LinkRenderer extends \League\CommonMark\Inline\Renderer\LinkRenderer
// Absolute urls, shouldn't either
if ($this->isExternalUrl($url)) {
$element->setAttribute('class', 'external');
$element->setAttribute('class', 'Link--external');
return $element;
}
@ -117,7 +117,7 @@ class LinkRenderer extends \League\CommonMark\Inline\Renderer\LinkRenderer
throw $e;
}
$element->setAttribute('class', 'broken');
$element->setAttribute('class', 'Link--broken');
}
if (isset($urlAndHash[1])) {

8
libs/Format/HTMLFile/Book.php
View File

@ -90,7 +90,7 @@ class Book
{
return '<h1>Table of Contents</h1>' .
$this->renderNavigation($this->buildNavigation($this->tree)) .
'</div><div class="page-break">&nbsp;</div>';
'</div><div class="PageBreak">&nbsp;</div>';
}
protected function generateCover()
@ -98,7 +98,7 @@ class Book
return "<div>" .
"<h1 style='font-size:40pt; margin-bottom:0;'>{$this->cover['title']}</h1>" .
"<p><strong>{$this->cover['subject']}</strong> by {$this->cover['author']}</p>" .
'</div><div class="page-break">&nbsp;</div>';
'</div><div class="PageBreak">&nbsp;</div>';
}
protected function generatePages()
@ -107,8 +107,8 @@ class Book
foreach ($this->pages as $section => $page) {
$content .= '<a id="section_' . $section . '"></a>';
$content .= '<h1>' . $page['page']->getTitle() . '</h1>';
$content .= '<section class="content">' . $page['content'] . '</section>';
$content .= '<div class="page-break">&nbsp;</div>';
$content .= '<section class="s-content">' . $page['content'] . '</section>';
$content .= '<div class="PageBreak">&nbsp;</div>';
}
return $content;

20
templates/home.php
View File

@ -2,23 +2,23 @@
<?php $this->start('classes') ?>homepage<?php $this->stop() ?>
<div class="Navbar hidden-print">
<div class="container">
<div class="Navbar NoPrint">
<div class="Container">
<?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
</div>
</div>
<div class="Homepage">
<div class="HomepageTitle container">
<div class="HomepageTitle Container">
<?= ($params['tagline'])? '<h2>' . $params['tagline'] . '</h2>' : '' ?>
</div>
<div class="HomepageImage container">
<div class="HomepageImage Container">
<?= ($params['image'])? '<img class="homepage-image img-responsive" src="' . $params['image'] . '" alt="' . $params['title'] . '">' : '' ?>
</div>
<div class="HomepageButtons">
<div class="container">
<div class="Container">
<?php
if ($params['html']['repo']) {
echo '<a href="https://github.com/' . $params['html']['repo'] . '" class="Button Button--secondary Button--hero">' . $this->translate("View_on_github") . '</a>';
@ -33,14 +33,13 @@
}
}
?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="HomepageContent">
<div class="container">
<div class="container--inner">
<div class="Container">
<div class="Container--inner">
<div class="doc_content s-content">
<?= $page['content']; ?>
</div>
@ -49,8 +48,8 @@
</div>
<div class="HomepageFooter">
<div class="container">
<div class="container--inner">
<div class="Container">
<div class="Container--inner">
<?php if (!empty($params['html']['links'])) { ?>
<ul class="HomepageFooter__links">
<?php foreach ($params['html']['links'] as $name => $url) {
@ -70,5 +69,4 @@
<?php } ?>
</div>
</div>
<div class="clearfix"></div>
</div>

6
templates/layout/05_page.php
View File

@ -2,9 +2,9 @@
<div class="Columns content">
<aside class="Columns__left Collapsible">
<button type="button" class="Button Collapsible__trigger">
<span class="Collapsible__trigger--bar"></span>
<span class="Collapsible__trigger--bar"></span>
<span class="Collapsible__trigger--bar"></span>
<span class="Collapsible__trigger__bar"></span>
<span class="Collapsible__trigger__bar"></span>
<span class="Collapsible__trigger__bar"></span>
</button>
<?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>

4
tests/ContentTypes/Markdown/LinkRendererTest.php
View File

@ -39,7 +39,7 @@ class LinkRendererTest extends TestCase
{
return [
// /Widgets/Page
['<a href="http://google.ch" class="external">Link</a>', '[Link](http://google.ch)', 'Widgets/Page.html'],
['<a href="http://google.ch" class="Link--external">Link</a>', '[Link](http://google.ch)', 'Widgets/Page.html'],
['<a href="#features">Link</a>', '[Link](#features)', 'Widgets/Page.html'],
['<a href="Button.html">Link</a>', '[Link](Button.md)', 'Widgets/Page.html'],
['<a href="Button.html">Link</a>', '[Link](./Button.md)', 'Widgets/Page.html'],
@ -55,7 +55,7 @@ class LinkRendererTest extends TestCase
['<a href="../Widgets/Button.html">Link</a>', '[Link](!Widgets/Button)', 'Content/Page.html'],
// Mailto links
['<a href="mailto:me@mydomain.com" class="external">me@mydomain.com</a>', '[me@mydomain.com](mailto:me@mydomain.com)', 'Content/Page.html'],
['<a href="mailto:me@mydomain.com" class="Link--external">me@mydomain.com</a>', '[me@mydomain.com](mailto:me@mydomain.com)', 'Content/Page.html'],
];
}

50
themes/common/scss/_fonts.scss
View File

@ -1,52 +1,50 @@
:root {
--font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
--font-family-heading: "Roboto Slab", var(--font-family-text);
--font-family-heading: "Roboto Slab", var(--font-family-text);
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2017 */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
@font-face {
font-family: 'Roboto Slab';
font-family: "Roboto Slab";
font-style: normal;
font-weight: 300;
src: url('../fonts/robotoslab-light.eot');
src: url("../fonts/robotoslab-light.eot");
src:
url('../fonts/robotoslab-light.eot?#iefix') format('embedded-opentype'),
url('../fonts/robotoslab-light.woff2') format('woff2'),
url('../fonts/robotoslab-light.woff') format('woff'),
url('../fonts/robotoslab-light.ttf') format('truetype'),
url('../fonts/robotoslab-light.svg#roboto_slablight') format('svg');
url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
url("../fonts/robotoslab-light.woff2") format("woff2"),
url("../fonts/robotoslab-light.woff") format("woff"),
url("../fonts/robotoslab-light.ttf") format("truetype"),
url("../fonts/robotoslab-light.svg#roboto_slablight") format("svg");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Roboto Slab';
font-family: "Roboto Slab";
font-style: normal;
font-weight: 400;
src: url('../fonts/robotoslab-regular.eot');
src: url("../fonts/robotoslab-regular.eot");
src:
url('../fonts/robotoslab-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/robotoslab-regular.woff2') format('woff2'),
url('../fonts/robotoslab-regular.woff') format('woff'),
url('../fonts/robotoslab-regular.ttf') format('truetype'),
url('../fonts/robotoslab-regular.svg#roboto_slabregular') format('svg');
url("../fonts/robotoslab-regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/robotoslab-regular.woff2") format("woff2"),
url("../fonts/robotoslab-regular.woff") format("woff"),
url("../fonts/robotoslab-regular.ttf") format("truetype"),
url("../fonts/robotoslab-regular.svg#roboto_slabregular") format("svg");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Roboto Slab';
font-family: "Roboto Slab";
font-style: normal;
font-weight: 700;
src: url('../fonts/robotoslab-bold.eot');
src: url("../fonts/robotoslab-bold.eot");
src:
url('../fonts/robotoslab-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/robotoslab-bold.woff2') format('woff2'),
url('../fonts/robotoslab-bold.woff') format('woff'),
url('../fonts/robotoslab-bold.ttf') format('truetype'),
url('../fonts/robotoslab-bold.svg#roboto_slabbold') format('svg');
url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
url("../fonts/robotoslab-bold.woff2") format("woff2"),
url("../fonts/robotoslab-bold.woff") format("woff"),
url("../fonts/robotoslab-bold.ttf") format("truetype"),
url("../fonts/robotoslab-bold.svg#roboto_slabbold") format("svg");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

14
themes/common/scss/_print.scss
View File

@ -25,20 +25,22 @@ img {
a,
a:visited { text-decoration: underline; }
abbr[title]::after { content: " (" attr(title) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
q { quotes: none; }
q {
quotes: none;
q::before { content: ""; }
&:before { content: ""; }
q::after { content: " (" attr(cite) ")"; }
&:after { content: " (" attr(cite) ")"; }
}
.page-break {
.PageBreak {
display: block;
page-break-before: always;
}
.hidden-print { display: none; }
.NoPrint { display: none; }
/* Hide the navigation */
aside { display: none; }

4
themes/daux/css/theme-blue.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
themes/daux/css/theme-blue.min.css.map
View File

File diff suppressed because one or more lines are too long

4
themes/daux/css/theme-green.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
themes/daux/css/theme-green.min.css.map
View File

File diff suppressed because one or more lines are too long

4
themes/daux/css/theme-navy.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
themes/daux/css/theme-navy.min.css.map
View File

File diff suppressed because one or more lines are too long

4
themes/daux/css/theme-red.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
themes/daux/css/theme-red.min.css.map
View File

File diff suppressed because one or more lines are too long

160
themes/daux/scss/_components.scss
View File

@ -1,16 +1,16 @@
/* ===========================================================================================
/* ============================================================================
Base tags
============================================================================================== */
============================================================================ */
a {
text-decoration: none;
color: var(--light);
color: var(--link-color);
&.external::after {
&.Link--external:after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}
&.broken {
&.Link--broken {
color: red;
}
}
@ -27,12 +27,12 @@ hr {
}
code {
color: var(--dark);
color: var(--content-code-tag-color);
}
/* ===========================================================================================
/* ============================================================================
Components
============================================================================================== */
============================================================================ */
.Button {
display: inline-block;
@ -92,37 +92,40 @@ Components
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
// Set corners individually because sometimes
// a single button can be in a .ButtonGroup
// and we need :first-child and :last-child to both match
&:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:last-child:not(:first-child) {
@include border-left-radius(0);
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
}
.Brand {
display: block;
background-color: var(--dark);
background-color: var(--brand-background);
padding: 15px 20px;
font-size: 18px;
text-shadow: none;
font-family: var(--font-family-heading);
font-weight: 700;
color: var(--light);
color: var(--brand-color);
}
.Navbar {
height: 50px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
background-color: var(--dark);
background-color: var(--homepage-navbar-color);
margin-bottom: 0;
.Brand {
@ -153,7 +156,7 @@ Components
width: 16px;
margin-left: -16px;
&::before {
&:before {
position: absolute;
display: block;
content: "";
@ -162,8 +165,8 @@ Components
top: 50%;
width: 0.5em;
height: 0.5em;
border-right: 0.15em solid var(--dark);
border-top: 0.15em solid var(--dark);
border-right: 0.15em solid var(--sidebar-link-arrow-color);
border-top: 0.15em solid var(--sidebar-link-arrow-color);
transform: rotate(45deg);
transition-duration: 0.3s;
}
@ -178,60 +181,57 @@ Components
padding: 6px 15px 6px 20px;
font-family: var(--font-family-heading);
font-weight: 400;
color: var(--dark);
color: var(--sidebar-link-color);
font-size: 15px;
text-shadow: none;
border-color: var(--lines);
}
&:hover {
color: var(--dark);
text-shadow: none;
background-color: var(--sidebar-hover);
}
a:hover {
color: var(--sidebar-link-color);
text-shadow: none;
background-color: var(--sidebar-link-hover-background);
}
}
}
.Nav .Nav {
display: none;
margin-left: 15px;
.Nav__item a {
margin: 0;
margin-left: -15px;
padding: 3px 30px;
font-family: var(--font-family-text);
color: var(--sidebar-link-secondary-color);
opacity: 0.7;
&:hover {
opacity: 1;
}
}
.Nav {
display: none;
margin-left: 15px;
.Nav__item--active a {
color: var(--sidebar-link-color);
}
}
.Nav__item {
a {
margin: 0;
margin-left: -15px;
padding: 3px 30px;
font-family: var(--font-family-text);
color: var(--text);
opacity: 0.7;
&:hover {
opacity: 1;
}
}
&--active a {
color: var(--dark);
}
.Nav__item {
&--open,
&--active {
> a {
background-color: var(--sidebar-link-active-background);
}
}
&__item {
&--open,
&--active {
> a {
background-color: var(--sidebar-hover);
}
&--open {
> .Nav {
display: block;
}
&--open {
> .Nav {
display: block;
}
> a > .Nav__arrow::before {
margin-left: -0.25em;
transform: rotate(135deg);
}
> a > .Nav__arrow:before {
margin-left: -0.25em;
transform: rotate(135deg);
}
}
}
@ -276,7 +276,7 @@ Components
a {
font-family: var(--font-family-heading);
font-weight: 400;
color:var(--light);
color: var(--sidebar-link-color);
line-height: 2em;
}
}
@ -289,14 +289,14 @@ Components
width: 100%;
height: 34px;
padding: 6px 30px 6px 20px;
color: #555;
color: var(--search-field-color);
border-width: 0 0 1px;
border-bottom: 1px solid #ccc;
background: #fff;
border-bottom: 1px solid var(--search-field-border-color);
background: var(--search-field-background);
transition: border-color ease-in-out 0.15s;
&:focus {
border-color: var(--light);
border-color: var(--search-field-hover-border-color);
outline: 0;
}
}
@ -443,56 +443,56 @@ ul.TableOfContents {
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
background: var(--checkbox-background);
/* Check mark */
&::after {
&:after {
position: absolute;
display: none;
content: '';
content: "";
}
/* Hover and focus states */
.Checkbox:hover input ~ &,
.Checkbox input:focus ~ & {
background: #ccc;
background: var(--checkbox-hover-background);
}
/* Checked state */
.Checkbox input:checked ~ & {
background: var(--dark);
background: var(--checkbox-checked-background);
/* Show check mark */
&::after {
&:after {
display: block;
}
}
/* Hover state whilst checked */
.Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
background: var(--light);
background: var(--checkbox-checked-hover-background);
}
/* Disabled state */
.Checkbox input:disabled ~ & {
pointer-events: none;
opacity: 0.6;
background: #e6e6e6;
background: var(--checkbox-disabled-background);
}
/* Checkbox tick */
.Checkbox &::after {
.Checkbox &:after {
top: 4px;
left: 8px;
width: 5px;
height: 10px;
transform: rotate(45deg);
border: solid #fff;
border: solid var(--checkbox-tick-color);
border-width: 0 2px 2px 0;
}
/* Disabled tick colour */
.Checkbox input:disabled ~ &::after {
border-color: #7b7b7b;
.Checkbox input:disabled ~ &:after {
border-color: var(--checkbox-disabled-tick-color);
}
}

140
themes/daux/scss/_homepage.scss
View File

@ -1,47 +1,47 @@
/* ===========================================================================================
/* ============================================================================
Homepage
============================================================================================== */
============================================================================ */
.container {
.Container {
margin-right: auto;
margin-left: auto;
&--inner {
width: 80%;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
.container {
.Container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
.Container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
@media (min-width: 769px) {
.Container {
width: 750px;
}
}
@media (min-width: 1200px) {
.container {
.Container {
width: 1170px;
}
}
.container--inner {
width: 80%;
margin: 0 auto;
}
.Homepage {
padding-top: 60px !important;
background-color: var(--light);
background-color: var(--homepage-hero-background);
border-radius: 0;
border: none;
color: var(--dark);
color: var(--homepage-hero-color);
overflow: hidden;
padding-bottom: 0;
margin-bottom: 0;
@ -69,9 +69,11 @@ Homepage
.HomepageButtons {
padding: 20px 0;
background-color: var(--sidebar-hover);
background-color: var(--hero-button-block-background);
text-align: center;
@include clearfix;
.Button--hero {
padding: 20px 30px;
border-radius: 0;
@ -79,7 +81,7 @@ Homepage
opacity: 0.8;
margin: 0 10px;
text-transform: uppercase;
border: 5px solid var(--dark);
border: 5px solid var(--hero-button-border-color);
font-family: var(--font-family-heading);
font-weight: 700;
@ -96,13 +98,13 @@ Homepage
}
&.Button--secondary {
background-color: var(--sidebar-hover);
color: var(--dark);
background-color: var(--hero-button-secondary-background);
color: var(--hero-button-secondary-color);
}
&.Button--primary {
background-color: var(--dark);
color: var(--sidebar-background);
background-color: var(--hero-buttom-primary-background);
color: var(--hero-button-primary-color);
}
}
}
@ -111,40 +113,29 @@ Homepage
background-color: white;
padding: 40px 0;
@media (min-width: 769px) {
.row {
margin: 0 -15px;
}
.col-third {
width: 33.333333%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
}
ul, ol {
li {
list-style: none;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
position: relative;
}
&::before {
content: '';
width: 0;
height: 0;
border: 3px solid transparent;
border-left: 3px solid var(--light);
float: left;
display: block;
margin: 6px 6px 6px -12px;
}
li:before {
position: absolute;
top: 50%;
left: -1.5em;
content: "";
width: 0;
height: 0;
border: 0.5em solid transparent;
border-left: 0.5em solid var(--homepage-bullet-color);
float: left;
display: block;
margin-top: -0.5em;
}
}
.lead {
.HeroText {
font-family: var(--font-family-heading);
font-weight: 300;
font-size: 16px;
@ -152,22 +143,46 @@ Homepage
line-height: 1.4;
}
@media (min-width: 768px) {
@media (min-width: 769px) {
padding: 40px 20px;
.lead {
.HeroText {
font-size: 21px;
}
.Row {
margin: 0 -15px;
}
.Row__third, .Row__half, .Row__quarter {
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.Row__third {
width: 33.333333%;
}
.Row__half {
width: 50%;
}
.Row__quarter {
width: 25%;
}
}
}
.HomepageFooter {
background-color: var(--dark);
border-radius: 0;
color: var(--light);
background-color: var(--homepage-footer-background);
color: var(--homepage-footer-color);
border: none;
@include kill-box-shadow;
@include clearfix;
@media (max-width: 768px) {
padding: 0 20px;
@ -192,18 +207,15 @@ Homepage
&__links {
margin: 40px 0;
li {
a {
line-height: 32px;
font-size: 16px;
font-family: var(--font-family-heading);
font-weight: 700;
li a {
line-height: 32px;
font-size: 16px;
font-family: var(--font-family-heading);
font-weight: 700;
}
&:hover {
color: var(--light);
text-decoration: underline;
}
}
li a:hover {
text-decoration: underline;
}
}

39
themes/daux/scss/_mixins.scss
View File

@ -1,6 +1,6 @@
/* ===========================================================================================
/* ============================================================================
Mixins
============================================================================================== */
============================================================================ */
@mixin kill-background-image {
background-image: none;
@ -11,35 +11,6 @@ Mixins
box-shadow: none;
}
@mixin sans-serif($weight: normal, $size: 14px, $lineheight: 20px) {
font-weight: $weight;
font-size: $size;
font-family: $font-family-text;
line-height: $lineheight;
}
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Clearfix
//
// For modern browsers
@ -53,13 +24,13 @@ Mixins
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix {
&::before,
&::after {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&::after {
&:after {
clear: both;
}
}

6
themes/daux/scss/_print.scss
View File

@ -6,15 +6,15 @@
width: 100% !important;
}
.s-content a::after {
.s-content a:after {
content: " (" attr(href) ")";
font-size: 80%;
word-wrap: break-word; /* break long urls that donìt fit the page width */
}
/* Anchors don't need that */
.s-content a[href^="#"]::after { content: ""; }
.s-content a[href^="#"]:after { content: ""; }
h1 a[href]::after {
h1 a[href]:after {
font-size: 50%;
}

73
themes/daux/scss/_structure.scss
View File

@ -1,5 +1,5 @@
*, *::after, *::before {
*, *:after, *:before {
box-sizing: border-box;
}
@ -8,9 +8,9 @@ body {
padding: 0;
}
/* ===========================================================================================
/* ============================================================================
Docs Body & Page Structure
============================================================================================== */
============================================================================ */
html, body {
height: 100%;
@ -31,48 +31,45 @@ html, body {
}
}
.Collapsible {
//mobile friendly sub-nav
&__content {
display: none;
// mobile friendly sub-nav
.Collapsible__content {
display: none;
}
.Collapsible__trigger {
margin: 12px;
padding: 7px 10px;
background-color: transparent;
border: none;
float: right;
@include kill-background-image;
@include kill-box-shadow;
&__bar {
display: block;
width: 18px;
height: 2px;
margin-top: 2px;
margin-bottom: 3px;
background-color: var(--sidebar-collapsible--hamburger-color);
}
&__trigger {
margin: 12px;
padding: 7px 10px;
background-color: transparent;
border: none;
float: right;
&:hover {
background-color: var(--sidebar-collapsible--hamburger-hover-background);
@include kill-background-image;
@include kill-box-shadow;
&--bar {
display: block;
width: 18px;
height: 2px;
margin-top: 2px;
margin-bottom: 3px;
background-color: var(--light);
@include kill-box-shadow;
}
&:hover {
background-color: var(--sidebar-hover);
@include kill-box-shadow;
.Collapsible__trigger--bar {
background-color: var(--dark);
@include kill-box-shadow;
}
.Collapsible__trigger__bar {
background-color: var(--sidebar-collapsible--hamburger-hover-color);
}
}
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 769px) {
body {
//Needed only for floating code blocks
background-color: var(--light);
background-color: var(--content-floating-blocks-background);
}
.Navbar {
@ -94,13 +91,13 @@ html, body {
.Columns {
height: 100%;
&::after,
&::before {
&:after,
&:before {
content: " ";
display: table;
}
&::after {
&:after {
clear: both;
}
@ -114,7 +111,7 @@ html, body {
&__left {
width: 25%;
border-right: 1px solid var(--lines);
border-right: 1px solid var(--sidebar-border);
overflow-x: hidden;
}

136
themes/daux/scss/_typography.scss
View File

@ -1,6 +1,6 @@
/* ===========================================================================================
/* ============================================================================
Base CSS
============================================================================================== */
============================================================================ */
body {
font-family: var(--font-family-text);
@ -29,36 +29,36 @@ h1, h2, h3, h4, h5, h6 {
}
//Content pages float view
.Columns__right--float {
@media (min-width: 1150px) {
.Columns__right__content {
height: 100%;
@media (min-width: 1150px) {
.Columns__right--float .Columns__right__content {
height: 100%;
overflow: auto;
padding: 0 !important;
background-color: transparent !important;
position: relative;
article {
width: 100%;
min-height: 100%;
overflow: auto;
padding: 0 !important;
background-color: transparent !important;
position: relative;
article {
width: 100%;
min-height: 100%;
overflow: auto;
position: relative;
z-index: 1;
&::before {
content: "";
width: 50%;
min-height: 100%;
overflow: auto;
background-color: white;
display: block;
margin: 0;
position: absolute;
z-index: -1;
}
}
z-index: 1;
}
article:before {
content: "";
width: 50%;
min-height: 100%;
overflow: auto;
background-color: white;
display: block;
margin: 0;
position: absolute;
z-index: -1;
}
}
.Columns__right--float {
.Pager,
.Page__header,
.s-content blockquote,
@ -79,56 +79,56 @@ h1, h2, h3, h4, h5, h6 {
margin-left: 1.5%;
margin-right: 1.5%;
}
}
.s-content {
table {
background-color: white;
.Columns__right--float .s-content {
table {
background-color: white;
white-space: normal;
pre, code {
white-space: normal;
}
}
pre, code {
white-space: normal;
}
blockquote, p, ul, ol, dl, h2, h3, h4, h5, h6, hr {
&:before {
width: 100%;
height: 10px;
display: block;
clear: both;
}
blockquote, p, ul, ol, dl, h2, h3, h4, h5, h6, hr {
&::before {
width: 100%;
height: 10px;
display: block;
clear: both;
}
p, ul, ol, dl, h2, h3, h4, h5, h6, pre, hr {
width: auto;
float: none;
display: block;
}
p, ul, ol, dl, h2, h3, h4, h5, h6, pre, hr {
width: auto;
float: none;
display: block;
}
}
hr {
border-color: #ddd;
hr {
border-color: #ddd;
}
// Paragraphs and code inside lists and
// blockquotes should have 100% width
li, blockquote {
p, pre {
width: 100%;
}
}
// Paragraphs and code inside lists and
// blockquotes should have 100% width
li, blockquote {
p, pre {
width: 100%;
}
}
pre {
float: left;
clear: right;
width: 50%;
border: none;
border-left: 10px solid white;
margin: 0 0 10px;
padding: 0;
pre {
float: left;
clear: right;
width: 50%;
border: none;
border-left: 10px solid white;
margin: 0 0 10px;
padding: 0;
code {
padding: 0 0.5em;
}
code {
padding: 0 0.5em;
}
}
}

22
themes/daux/scss/_utilities.scss
View File

@ -1,22 +0,0 @@
//
// Utility classes
// --------------------------------------------------
// Floats
// -------------------------
.clearfix {
@include clearfix();
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.hidden {
display: none !important;
}

61
themes/daux/scss/_variables.scss Normal file
View File

@ -0,0 +1,61 @@
:root {
--dark: #3f4657;
--light: #82becd;
--text: #2d2d2d;
--link-color: var(--light);
--brand-color: var(--light);
--brand-background: var(--dark);
// Sidebar
--sidebar-border: #e7e7e9;
--sidebar-background: #f7f7f7;
// Sidebar links
--sidebar-link-color: var(--dark);
--sidebar-link-active-background: #c5c5cb;
--sidebar-link-hover-background: var(--sidebar-link-active-background);
--sidebar-link-arrow-color: var(--dark);
--sidebar-link-secondary-color: var(--text);
// Sidebar Checkbox
--checkbox-background: #e6e6e6;
--checkbox-hover-background: #ccc;
--checkbox-checked-background: var(--dark);
--checkbox-checked-hover-background: var(--light);
--checkbox-tick-color: #fff;
--checkbox-disabled-background: #e6e6e6;
--checkbox-disabled-tick-color: #7b7b7b;
// Sidebar search field
--search-field-color: #555;
--search-field-border-color: #ccc;
--search-field-background: #fff;
--search-field-hover-border-color: var(--light);
// Sidebar hamburger
--sidebar-collapsible--hamburger-color: var(--light);
--sidebar-collapsible--hamburger-hover-color: var(--dark);
--sidebar-collapsible--hamburger-hover-background: var(--light);
// Homepage
--homepage-navbar-color: var(--dark);
--homepage-hero-background: var(--light);
--homepage-hero-color: var(--dark);
--homepage-bullet-color: var(--light);
--homepage-footer-color: var(--light);
--homepage-footer-background: var(--dark);
// Homepage Hero Buttons
--hero-button-block-background: var(--sidebar-link-active-background);
--hero-button-border-color: var(--dark);
--hero-button-primary-color: var(--sidebar-background);
--hero-buttom-primary-background: var(--dark);
--hero-button-secondary-color: var(--dark);
--hero-button-secondary-background: var(--sidebar-link-active-background);
--content-floating-blocks-background: var(--light);
--content-code-tag-color: var(--dark);
}

3
themes/daux/scss/theme-blue.scss
View File

@ -3,8 +3,7 @@
//Daux.io Blue
:root {
--sidebar-background: #f7f7f7;
--sidebar-hover: #c5c5cb;
--lines: #e7e7e9;
--sidebar-link-active-background: #c5c5cb;
--dark: #3f4657;
--light: #82becd;
--text: #2d2d2d;

3
themes/daux/scss/theme-green.scss
View File

@ -3,8 +3,7 @@
//Daux.io Green
:root {
--sidebar-background: #f5f5f6;
--sidebar-hover: #a0d55d;
--lines: #e7e7e9;
--sidebar-link-active-background: #a0d55d;
--dark: #000;
--light: #8acc37;
--text: #2d2d2d;

3
themes/daux/scss/theme-navy.scss
View File

@ -2,9 +2,8 @@
//Daux.io Navy
:root {
--sidebar-hover: #c5c5cb;
--lines: #e7e7e9;
--sidebar-background: #f5f5f6;
--sidebar-link-active-background: #c5c5cb;
--dark: #13132a;
--light: #7795b4;
--text: #2d2d2d;

5
themes/daux/scss/theme-red.scss
View File

@ -2,10 +2,9 @@
// Daux.io Red
:root {
--sidebar-hover: #eee;
--lines: #eee;
--sidebar-background: #f7f7f7;
--dark: #c64641; //#df4f49;
--sidebar-link-active-background: #eee;
--dark: #c64641;
--light: #ecb5a1;
--text: #2d2d2d;
}

2
themes/daux/scss/theme.scss
View File

@ -7,8 +7,8 @@
// Daux Style
@import "../../common/scss/vendor/normalize.scss";
@import "../../common/scss/_fonts.scss";
@import "_variables.scss";
@import "_mixins.scss";
@import "_utilities.scss";
// Layout
@import "_structure.scss";

4
themes/daux_singlepage/css/main.min.css vendored
View File

@ -1,3 +1,3 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2017 */
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;src:url(../../common/fonts/robotoslab-light.eot);src:url(../../common/fonts/robotoslab-light.eot?#iefix) format('embedded-opentype'),url(../../common/fonts/robotoslab-light.woff2) format('woff2'),url(../../common/fonts/robotoslab-light.woff) format('woff'),url(../../common/fonts/robotoslab-light.ttf) format('truetype'),url(../../common/fonts/robotoslab-light.svg#roboto_slablight) format('svg');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;src:url(../../common/fonts/robotoslab-regular.eot);src:url(../../common/fonts/robotoslab-regular.eot?#iefix) format('embedded-opentype'),url(../../common/fonts/robotoslab-regular.woff2) format('woff2'),url(../../common/fonts/robotoslab-regular.woff) format('woff'),url(../../common/fonts/robotoslab-regular.ttf) format('truetype'),url(../../common/fonts/robotoslab-regular.svg#roboto_slabregular) format('svg');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;src:url(../../common/fonts/robotoslab-bold.eot);src:url(../../common/fonts/robotoslab-bold.eot?#iefix) format('embedded-opentype'),url(../../common/fonts/robotoslab-bold.woff2) format('woff2'),url(../../common/fonts/robotoslab-bold.woff) format('woff'),url(../../common/fonts/robotoslab-bold.ttf) format('truetype'),url(../../common/fonts/robotoslab-bold.svg#roboto_slabbold) format('svg');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}.hljs-comment{color:#3a5c78}.css .hljs-class,.css .hljs-id,.css .hljs-pseudo,.hljs-attribute,.hljs-regexp,.hljs-tag,.hljs-variable,.html .hljs-doctype,.ruby .hljs-constant,.xml .hljs-doctype,.xml .hljs-pi,.xml .hljs-tag .hljs-title{color:#c82829}.hljs-built_in,.hljs-constant,.hljs-function .hljs-title,.hljs-literal,.hljs-number,.hljs-pragma,.hljs-preprocessor{color:#fd3}.css .hljs-rules .hljs-attribute,.ruby .hljs-class .hljs-title{color:#eab700}.hljs-header,.hljs-inheritance,.hljs-string,.hljs-value,.ruby .hljs-symbol,.xml .hljs-cdata{color:#f66}.css .hljs-hexcolor{color:#3e999f}.coffeescript .hljs-title,.hljs-function .keyword,.javascript .hljs-title,.perl .hljs-sub,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword{color:#52a0e0}.hljs-keyword,.javascript .hljs-function{color:#6abafb}.hljs{display:block;background:#fff;color:#4d4d4c;padding:.5em;font-family:"Anonymous Pro","Inconsolata","Monaco",monospace}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .css,.xml .hljs-cdata,.xml .javascript,.xml .vbscript{opacity:.5}h1,h2,h3,h4,h5,h6{font-family:"Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}section.content{padding:15px 25px 25px;background-color:#fff}*{-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body,html{height:100%}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}p{margin:0 0 1em}hr{clear:both;margin:1em 0;border:0;border-top:1px solid #ddd}img{max-width:100%!important}.page-break{display:none}@media screen{body{margin:1em}}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:300;src:url(../../common/fonts/robotoslab-light.eot);src:url(../../common/fonts/robotoslab-light.eot?#iefix) format("embedded-opentype"),url(../../common/fonts/robotoslab-light.woff2) format("woff2"),url(../../common/fonts/robotoslab-light.woff) format("woff"),url(../../common/fonts/robotoslab-light.ttf) format("truetype"),url(../../common/fonts/robotoslab-light.svg#roboto_slablight) format("svg");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:400;src:url(../../common/fonts/robotoslab-regular.eot);src:url(../../common/fonts/robotoslab-regular.eot?#iefix) format("embedded-opentype"),url(../../common/fonts/robotoslab-regular.woff2) format("woff2"),url(../../common/fonts/robotoslab-regular.woff) format("woff"),url(../../common/fonts/robotoslab-regular.ttf) format("truetype"),url(../../common/fonts/robotoslab-regular.svg#roboto_slabregular) format("svg");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:700;src:url(../../common/fonts/robotoslab-bold.eot);src:url(../../common/fonts/robotoslab-bold.eot?#iefix) format("embedded-opentype"),url(../../common/fonts/robotoslab-bold.woff2) format("woff2"),url(../../common/fonts/robotoslab-bold.woff) format("woff"),url(../../common/fonts/robotoslab-bold.ttf) format("truetype"),url(../../common/fonts/robotoslab-bold.svg#roboto_slabbold) format("svg");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}.hljs-comment{color:#3a5c78}.css .hljs-class,.css .hljs-id,.css .hljs-pseudo,.hljs-attribute,.hljs-regexp,.hljs-tag,.hljs-variable,.html .hljs-doctype,.ruby .hljs-constant,.xml .hljs-doctype,.xml .hljs-pi,.xml .hljs-tag .hljs-title{color:#c82829}.hljs-built_in,.hljs-constant,.hljs-function .hljs-title,.hljs-literal,.hljs-number,.hljs-pragma,.hljs-preprocessor{color:#fd3}.css .hljs-rules .hljs-attribute,.ruby .hljs-class .hljs-title{color:#eab700}.hljs-header,.hljs-inheritance,.hljs-string,.hljs-value,.ruby .hljs-symbol,.xml .hljs-cdata{color:#f66}.css .hljs-hexcolor{color:#3e999f}.coffeescript .hljs-title,.hljs-function .keyword,.javascript .hljs-title,.perl .hljs-sub,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword{color:#52a0e0}.hljs-keyword,.javascript .hljs-function{color:#6abafb}.hljs{display:block;background:#fff;color:#4d4d4c;padding:.5em;font-family:"Anonymous Pro","Inconsolata","Monaco",monospace}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .css,.xml .hljs-cdata,.xml .javascript,.xml .vbscript{opacity:.5}h1,h2,h3,h4,h5,h6{font-family:"Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}.s-content{padding:15px 25px 25px;background-color:#fff}*{-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body,html{height:100%}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}p{margin:0 0 1em}hr{clear:both;margin:1em 0;border:0;border-top:1px solid #ddd}img{max-width:100%!important}.PageBreak{display:none}@media screen{body{margin:1em}}
/*# sourceMappingURL=main.min.css.map */

2
themes/daux_singlepage/css/main.min.css.map
View File

File diff suppressed because one or more lines are too long

2
themes/daux_singlepage/scss/_print.scss
View File

@ -1,6 +1,6 @@
@import "../../common/scss/_print.scss";
a[href]::after {
a[href]:after {
content: " (" attr(href) ")";
}

2
themes/daux_singlepage/scss/_typography.scss
View File

@ -4,7 +4,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
section.content {
.s-content {
padding: 15px 25px 25px;
background-color: white;

2
themes/daux_singlepage/scss/main.scss
View File

@ -45,7 +45,7 @@ img {
max-width: 100% !important;
}
.page-break { display: none; }
.PageBreak { display: none; }
@media screen {
body {

30
themes/daux_singlepage/scss/vendor/highlight.scss vendored
View File

@ -2,7 +2,7 @@
/* Tomorrow Comment */
.hljs-comment {
color: hsl(207, 35%, 35%);
color: hsl(207, 35%, 35%);
}
/* Tomorrow Red */
@ -18,7 +18,7 @@
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: #c82829;
color: #c82829;
}
/* Tomorrow Orange */
@ -29,13 +29,13 @@
.hljs-literal,
.hljs-constant,
.hljs-function .hljs-title {
color: hsl(50, 100%, 60%);
color: hsl(50, 100%, 60%);
}
/* Tomorrow Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
color: #eab700;
color: #eab700;
}
/* Tomorrow Green */
@ -45,12 +45,12 @@
.hljs-header,
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: hsl(0, 100%, 70%);
color: hsl(0, 100%, 70%);
}
/* Tomorrow Aqua */
.css .hljs-hexcolor {
color: #3e999f;
color: #3e999f;
}
/* Tomorrow Blue */
@ -62,21 +62,21 @@
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: hsl(207, 70%, 60%);
color: hsl(207, 70%, 60%);
}
/* Tomorrow Purple */
.hljs-keyword,
.javascript .hljs-function {
color: hsl(207, 95%, 70%);
color: hsl(207, 95%, 70%);
}
.hljs {
display: block;
background: white;
color: #4d4d4c;
padding: 0.5em;
font-family: "Anonymous Pro", "Inconsolata", "Monaco", monospace;
display: block;
background: white;
color: #4d4d4c;
padding: 0.5em;
font-family: "Anonymous Pro", "Inconsolata", "Monaco", monospace;
}
.coffeescript .javascript,
@ -86,5 +86,5 @@
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}
opacity: 0.5;
}

5
tipuesearch/tipuesearch.css
View File

@ -175,8 +175,3 @@ body.with-search {
margin-left: -325px;
}
}