Improve default theme
This commit is contained in:
Stéphane Goetz
bovenliggende
2a3d513a40
commit
e3a156f770
@ -8,7 +8,6 @@ module.exports = {
|
||||
stylelint_pattern: [
|
||||
"themes/daux/scss/**/*.scss",
|
||||
"themes/daux_singlepage/scss/**/*.scss",
|
||||
"themes/common/scss/**/*.scss",
|
||||
"!*.min.css",
|
||||
"!**/vendor/**/*.scss"
|
||||
],
|
||||
@ -21,27 +20,27 @@ module.exports = {
|
||||
"theme_blue": {
|
||||
source: "themes/daux/scss/theme-blue.scss",
|
||||
destination: "daux/css/theme-blue.min.css",
|
||||
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
|
||||
watch: ["themes/daux/scss/**"]
|
||||
},
|
||||
"theme_green": {
|
||||
source: "themes/daux/scss/theme-green.scss",
|
||||
destination: "daux/css/theme-green.min.css",
|
||||
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
|
||||
watch: ["themes/daux/scss/**"]
|
||||
},
|
||||
"theme_navy": {
|
||||
source: "themes/daux/scss/theme-navy.scss",
|
||||
destination: "daux/css/theme-navy.min.css",
|
||||
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
|
||||
watch: ["themes/daux/scss/**"]
|
||||
},
|
||||
"theme_red": {
|
||||
source: "themes/daux/scss/theme-red.scss",
|
||||
destination: "daux/css/theme-red.min.css",
|
||||
watch: ["themes/daux/scss/**", "themes/common/scss/**"]
|
||||
watch: ["themes/daux/scss/**"]
|
||||
},
|
||||
"daux_singlepage": {
|
||||
source: "themes/daux_singlepage/scss/main.scss",
|
||||
destination: "daux_singlepage/css/main.min.css",
|
||||
watch: ["themes/daux_singlepage/scss/**", "themes/common/scss/**"]
|
||||
watch: ["themes/daux_singlepage/scss/**"]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -32,8 +32,9 @@
|
||||
<br />
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<?php if ($params['html']['toggle_code']) { ?>
|
||||
<?php if ($params['html']['toggle_code']) { ?>
|
||||
<div class="CodeToggler">
|
||||
<hr/>
|
||||
<?php if ($params['html']['float']) { ?>
|
||||
@ -53,8 +54,8 @@
|
||||
<?php } ?>
|
||||
|
||||
<?php if (!empty($params['html']['twitter'])) { ?>
|
||||
<hr/>
|
||||
<div class="Twitter">
|
||||
<hr/>
|
||||
<?php foreach ($params['html']['twitter'] as $handle) { ?>
|
||||
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?= $handle; ?>&show_count=false"></iframe>
|
||||
<br />
|
||||
@ -62,7 +63,6 @@
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : 'Columns__right--full'; ?>">
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-before: auto;
|
||||
}
|
||||
|
||||
pre, blockquote {
|
||||
border: 1px solid #999;
|
||||
font-style: italic;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
border: 0; /* Some browsers like to show a border around images. Switch it off */
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited { text-decoration: underline; }
|
||||
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
|
||||
&:before { content: ""; }
|
||||
|
||||
&:after { content: " (" attr(cite) ")"; }
|
||||
}
|
||||
|
||||
.PageBreak {
|
||||
display: block;
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.NoPrint { display: none; }
|
||||
|
||||
/* Hide the navigation */
|
||||
aside { display: none; }
|
||||
|
||||
@ -1,190 +0,0 @@
|
||||
body {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
line-height: 1.4em;
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
|
||||
tt, code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { // 40px
|
||||
font-size: 2.6666666667em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 { // 30px
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 { // 26px
|
||||
font-size: 1.7333333333em;
|
||||
}
|
||||
|
||||
h4 { // 22px
|
||||
font-size: 1.4666666667em;
|
||||
}
|
||||
|
||||
h5 { // 18px
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h6 { // 16px
|
||||
font-size: 1.0666666667em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p { // 15px
|
||||
line-height: 1.8em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
|
||||
&:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1.2em;
|
||||
border-left: 4px solid #ddd;
|
||||
padding: 7px 15px;
|
||||
color: #666;
|
||||
|
||||
p {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #eee;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #eee;
|
||||
background: #eee;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #eee;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
blockquote,
|
||||
dl dt,
|
||||
dl dd,
|
||||
table th,
|
||||
table td {
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
code, tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
line-height: 1.5em;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
margin: 0 -20px 20px -20px;
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
2
themes/daux/css/theme-blue.min.css
vendored
2
themes/daux/css/theme-blue.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
2
themes/daux/css/theme-green.min.css
vendored
2
themes/daux/css/theme-green.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
2
themes/daux/css/theme-navy.min.css
vendored
2
themes/daux/css/theme-navy.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
2
themes/daux/css/theme-red.min.css
vendored
2
themes/daux/css/theme-red.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
@ -13,7 +13,7 @@ $(function () {
|
||||
|
||||
// If there is no code block we hide the link
|
||||
if (!codeBlocks.size()) {
|
||||
toggleCodeSection.addClass('hidden');
|
||||
toggleCodeSection.addClass('Hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -27,14 +27,14 @@ $(function () {
|
||||
toggleCodeBlockBtnFloat.addClass("Button--active");
|
||||
codeBlockView.addClass('Columns__right--float');
|
||||
codeBlockView.removeClass('Columns__right--full');
|
||||
codeBlocks.removeClass('hidden');
|
||||
codeBlocks.removeClass('Hidden');
|
||||
break;
|
||||
case 1: // Show code blocks below
|
||||
toggleCodeBlockBtnBelow.addClass("Button--active");
|
||||
toggleCodeBlockBtn.prop('checked', true);
|
||||
codeBlockView.removeClass('Columns__right--float');
|
||||
codeBlockView.addClass('Columns__right--full');
|
||||
codeBlocks.removeClass('hidden');
|
||||
codeBlocks.removeClass('Hidden');
|
||||
break;
|
||||
case 0: // Hidden code blocks
|
||||
default:
|
||||
@ -42,13 +42,13 @@ $(function () {
|
||||
toggleCodeBlockBtn.prop('checked', false);
|
||||
codeBlockView.removeClass('Columns__right--float');
|
||||
codeBlockView.addClass('Columns__right--full');
|
||||
codeBlocks.addClass('hidden');
|
||||
codeBlocks.addClass('Hidden');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
toggleCodeBlockBtn.click(function() {
|
||||
setCodeBlockStyle(codeBlocks.hasClass('hidden') ? 1 : 0);
|
||||
setCodeBlockStyle(codeBlocks.hasClass('Hidden') ? 1 : 0);
|
||||
});
|
||||
|
||||
toggleCodeBlockBtnHide.click(function() { setCodeBlockStyle(0); });
|
||||
|
||||
@ -26,10 +26,6 @@ hr {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--content-code-tag-color);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Components
|
||||
============================================================================ */
|
||||
@ -114,8 +110,8 @@ Components
|
||||
.Brand {
|
||||
display: block;
|
||||
background-color: var(--brand-background);
|
||||
padding: 15px 20px;
|
||||
font-size: 18px;
|
||||
padding: 0.75em 0.6em;
|
||||
font-size: var(--type-size-4);
|
||||
text-shadow: none;
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 700;
|
||||
@ -125,7 +121,7 @@ Components
|
||||
.Navbar {
|
||||
height: 50px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
background-color: var(--homepage-navbar-color);
|
||||
background-color: var(--homepage-navbar-background);
|
||||
margin-bottom: 0;
|
||||
|
||||
.Brand {
|
||||
@ -136,6 +132,8 @@ Components
|
||||
}
|
||||
|
||||
.CodeToggler {
|
||||
padding: 0 20px;
|
||||
|
||||
&__text {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
@ -182,7 +180,6 @@ Components
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 400;
|
||||
color: var(--sidebar-link-color);
|
||||
font-size: 15px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@ -281,6 +278,10 @@ Components
|
||||
}
|
||||
}
|
||||
|
||||
.Twitter {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.Search {
|
||||
position: relative;
|
||||
|
||||
@ -356,6 +357,7 @@ ul.TableOfContents {
|
||||
float: right;
|
||||
min-width: 300px;
|
||||
max-width: 25%;
|
||||
padding-left: 1em;
|
||||
|
||||
.TableOfContentsContainer__content > .TableOfContents {
|
||||
border-right: 2px solid #efefef;
|
||||
@ -369,6 +371,7 @@ ul.TableOfContents {
|
||||
a {
|
||||
display: block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
@ -439,10 +442,11 @@ ul.TableOfContents {
|
||||
|
||||
.Checkbox__indicator {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
background: var(--checkbox-background);
|
||||
|
||||
/* Check mark */
|
||||
@ -496,3 +500,11 @@ ul.TableOfContents {
|
||||
border-color: var(--checkbox-disabled-tick-color);
|
||||
}
|
||||
}
|
||||
|
||||
.Collapsible__content {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.Hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
|
||||
:root {
|
||||
--font-family-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
--font-family-text: -apple-system,
|
||||
".SFNSText-Regular",
|
||||
"San Francisco",
|
||||
"Roboto",
|
||||
"Segoe UI",
|
||||
"Helvetica Neue",
|
||||
"Lucida Grande",
|
||||
Arial,
|
||||
sans-serif;
|
||||
--font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console", "Courier New", monospace;
|
||||
--font-family-heading: "Roboto Slab", var(--font-family-text);
|
||||
}
|
||||
|
||||
@ -1,4 +1,49 @@
|
||||
@import "../../common/scss/_print.scss";
|
||||
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-before: auto;
|
||||
}
|
||||
|
||||
pre, blockquote {
|
||||
border: 1px solid #999;
|
||||
font-style: italic;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
border: 0; /* Some browsers like to show a border around images. Switch it off */
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited { text-decoration: underline; }
|
||||
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
|
||||
&:before { content: ""; }
|
||||
|
||||
&:after { content: " (" attr(cite) ")"; }
|
||||
}
|
||||
|
||||
.PageBreak {
|
||||
display: block;
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.NoPrint { display: none; }
|
||||
|
||||
/* Hide the navigation */
|
||||
aside { display: none; }
|
||||
|
||||
.Pager { display: none; }
|
||||
|
||||
|
||||
@ -12,6 +12,14 @@ body {
|
||||
Docs Body & Page Structure
|
||||
============================================================================ */
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
|
||||
@media (--viewport-large) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
@ -3,12 +3,13 @@ Base CSS
|
||||
============================================================================ */
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
|
||||
font-family: var(--font-family-text);
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-kerning: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@ -17,14 +18,220 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.s-content {
|
||||
@import "../../common/scss/_typography.scss";
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
cursor: text;
|
||||
line-height: 1.4em;
|
||||
margin: 2em 0 0.5em;
|
||||
|
||||
tt, code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: var(--type-size-3);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--type-size-4);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--type-size-5);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--type-size-6);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--type-size-6);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--type-size-6);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--type-size-6);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dt:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0.75em 2em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
border-left: 0.25em solid var(--blockquote-border-color);
|
||||
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
cite:before {
|
||||
content: "\2014";
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 1em;
|
||||
border-collapse: collapse;
|
||||
|
||||
font-size: var(--type-size-6);
|
||||
|
||||
+ table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #eee;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: var(--lightest-gray);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid var(--light-gray);
|
||||
background: var(--lighter-gray);
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid var(--lighter-gray);
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
blockquote,
|
||||
dl dt,
|
||||
dl dd,
|
||||
table th,
|
||||
table td {
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.1rem;
|
||||
background: var(--code-tag-background-color);
|
||||
border: 1px solid var(--light-gray);
|
||||
border-radius: var(--code-tag-border-radius);
|
||||
box-shadow: var(--code-tag-box-shadow);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0"; /* non-breaking space*/
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
line-height: 1.5em;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 10px 30px;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 0.75em 2em;
|
||||
margin: 0 -20px 20px -20px;
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--text);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
del a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,23 @@
|
||||
:root {
|
||||
// Gray Scale
|
||||
--gray: #7a8288;
|
||||
--dark-gray: color(var(--gray) blend(#000 40%));
|
||||
//--darker-gray: color(var(--gray) blend(#000 60%));
|
||||
--light-gray: color(var(--gray) blend(#fff 50%));
|
||||
--lighter-gray: color(var(--gray) blend(#fff 70%));
|
||||
--lightest-gray: color(var(--gray) blend(#fff 90%));
|
||||
|
||||
// Type Scale
|
||||
--type-size-1: 2.441rem; // ~39.056px
|
||||
--type-size-2: 1.953rem; // ~31.248px
|
||||
--type-size-3: 1.563rem; // ~25.008px
|
||||
--type-size-4: 1.25rem; // ~20px
|
||||
--type-size-5: 1rem; // ~16px
|
||||
--type-size-6: 0.75rem; // ~12px
|
||||
|
||||
--dark: #3f4657;
|
||||
--light: #82becd;
|
||||
--text: #2d2d2d;
|
||||
--text: #222;
|
||||
|
||||
--link-color: var(--light);
|
||||
--brand-color: var(--light);
|
||||
@ -39,7 +55,7 @@
|
||||
--sidebar-collapsible--hamburger-hover-background: var(--light);
|
||||
|
||||
// Homepage
|
||||
--homepage-navbar-color: var(--dark);
|
||||
--homepage-navbar-background: var(--dark);
|
||||
|
||||
--homepage-hero-background: var(--light);
|
||||
--homepage-hero-color: var(--dark);
|
||||
@ -57,5 +73,17 @@
|
||||
--hero-button-secondary-background: var(--sidebar-link-active-background);
|
||||
|
||||
--content-floating-blocks-background: var(--light);
|
||||
--content-code-tag-color: var(--dark);
|
||||
--code-tag-color: var(--dark);
|
||||
|
||||
--code-tag-background-color: #fafafa;
|
||||
--code-tag-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
|
||||
--code-tag-border-radius: 4px;
|
||||
|
||||
--blockquote-border-color: var(--dark);
|
||||
}
|
||||
|
||||
/*
|
||||
* Breakpoints
|
||||
* ===================================================================== */
|
||||
@custom-media --viewport-small (width < 850px);
|
||||
@custom-media --viewport-large (width >= 850px);
|
||||
|
||||
@ -6,5 +6,4 @@
|
||||
--sidebar-link-active-background: #c5c5cb;
|
||||
--dark: #3f4657;
|
||||
--light: #82becd;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
||||
@ -6,5 +6,4 @@
|
||||
--sidebar-link-active-background: #a0d55d;
|
||||
--dark: #000;
|
||||
--light: #8acc37;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
||||
@ -6,5 +6,4 @@
|
||||
--sidebar-link-active-background: #c5c5cb;
|
||||
--dark: #13132a;
|
||||
--light: #7795b4;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
||||
@ -6,5 +6,4 @@
|
||||
--sidebar-link-active-background: #eee;
|
||||
--dark: #c64641;
|
||||
--light: #ecb5a1;
|
||||
--text: #2d2d2d;
|
||||
}
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
*/
|
||||
|
||||
// Daux Style
|
||||
@import "../../common/scss/vendor/normalize.scss";
|
||||
@import "../../common/scss/_fonts.scss";
|
||||
@import "vendor/normalize.scss";
|
||||
@import "_fonts.scss";
|
||||
@import "_variables.scss";
|
||||
@import "_mixins.scss";
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
@import "_typography.scss";
|
||||
@import "_components.scss";
|
||||
@import "_homepage.scss";
|
||||
@import "../../common/scss/vendor/highlight.scss";
|
||||
@import "vendor/highlight.scss";
|
||||
|
||||
@media print {
|
||||
@import "_print.scss";
|
||||
|
||||
3
themes/daux_singlepage/css/main.min.css
vendored
3
themes/daux_singlepage/css/main.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
58
themes/daux_singlepage/scss/_fonts.scss
Normal file
58
themes/daux_singlepage/scss/_fonts.scss
Normal file
@ -0,0 +1,58 @@
|
||||
|
||||
:root {
|
||||
--font-family-text: -apple-system,
|
||||
".SFNSText-Regular",
|
||||
"San Francisco",
|
||||
"Roboto",
|
||||
"Segoe UI",
|
||||
"Helvetica Neue",
|
||||
"Lucida Grande",
|
||||
Arial,
|
||||
sans-serif;
|
||||
--font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console", "Courier New", monospace;
|
||||
--font-family-heading: "Roboto Slab", var(--font-family-text);
|
||||
}
|
||||
|
||||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) */
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Slab";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
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");
|
||||
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("../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");
|
||||
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("../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");
|
||||
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;
|
||||
}
|
||||
@ -1,5 +1,48 @@
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@import "../../common/scss/_print.scss";
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-before: auto;
|
||||
}
|
||||
|
||||
pre, blockquote {
|
||||
border: 1px solid #999;
|
||||
font-style: italic;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
border: 0; /* Some browsers like to show a border around images. Switch it off */
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited { text-decoration: underline; }
|
||||
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
|
||||
&:before { content: ""; }
|
||||
|
||||
&:after { content: " (" attr(cite) ")"; }
|
||||
}
|
||||
|
||||
.PageBreak {
|
||||
display: block;
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.NoPrint { display: none; }
|
||||
|
||||
/* Hide the navigation */
|
||||
aside { display: none; }
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 300;
|
||||
@ -8,5 +7,194 @@ h1, h2, h3, h4, h5, h6 {
|
||||
padding: 15px 25px 25px;
|
||||
background-color: white;
|
||||
|
||||
@import "../../common/scss/_typography.scss";
|
||||
body {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
line-height: 1.4em;
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
|
||||
tt, code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { // 40px
|
||||
font-size: 2.6666666667em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 { // 30px
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 { // 26px
|
||||
font-size: 1.7333333333em;
|
||||
}
|
||||
|
||||
h4 { // 22px
|
||||
font-size: 1.4666666667em;
|
||||
}
|
||||
|
||||
h5 { // 18px
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h6 { // 16px
|
||||
font-size: 1.0666666667em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p { // 15px
|
||||
line-height: 1.8em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dt:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1.2em;
|
||||
border-left: 4px solid #ddd;
|
||||
padding: 7px 15px;
|
||||
color: #666;
|
||||
|
||||
p {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #eee;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #eee;
|
||||
background: #eee;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #eee;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
blockquote,
|
||||
dl dt,
|
||||
dl dd,
|
||||
table th,
|
||||
table td {
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
code, tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #fdf6e3;
|
||||
color: #657b83;
|
||||
line-height: 1.5em;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
margin: 0 -20px 20px -20px;
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Core variables and mixins
|
||||
@import "../../common/scss/_fonts.scss";
|
||||
@import "vendor/highlight.scss";
|
||||
@import "_fonts.scss";
|
||||
@import "_typography.scss";
|
||||
|
||||
* {
|
||||
|
||||
Laden…
Verwijs in nieuw issue
Block a user