andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added mini css to the web builder

Browse Source
This commit is contained in:
Angelos Chalaris
2017-12-20 13:51:15 +02:00
parent 0720073a31
commit aa2c540710
14 changed files with 1747 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.1/mini-default.min.css">
<link rel="stylesheet" href="./mini.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
<title>30 seconds of code</title>
<meta charset="utf-8">
@ -1253,7 +1253,7 @@ Use <code>Number()</code> to check if the coercion holds.</p>
</code></pre>
</div></div><br/>
<footer>
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a></p>
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framwork</a>.</p>
<a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
</footer>
</main>

1
docs/mini.css Normal file
View File

File diff suppressed because one or more lines are too long

351
docs/mini/_contextual.scss Normal file
View File

@ -0,0 +1,351 @@
/*
Definitions for contextual background elements, toasts and tooltips.
*/
$mark-back-color: #0277bd !default; // Background color for <mark>
$mark-fore-color: #fafafa !default; // Text color for <mark>
$mark-font-size: 0.95em !default; // Font size for <mark>
$mark-line-height: 1em !default; // Line height for <mark>
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
$toast-name: 'toast' !default; // Class name for toast component
$toast-back-color: #424242 !default; // Background color for toast component
$toast-fore-color: #fafafa !default; // Text color for toast component
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
$tooltip-back-color: #212121 !default; // Background color for tooltip component
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
$modal-name: 'modal' !default; // Class name for modal dialog component
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
$collapse-name: 'collapse' !default; // Class name for collapse component
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
$collapse-border-color: #ddd !default; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
// CSS variable name definitions [exercise caution if modifying these]
$mark-back-color-var: '--mark-back-color' !default;
$mark-fore-color-var: '--mark-fore-color' !default;
$toast-back-color-var: '--toast-back-color' !default;
$toast-fore-color-var: '--toast-fore-color' !default;
$tooltip-back-color-var: '--tooltip-back-color' !default;
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
$modal-overlay-color-var: '--modal-overlay-color' !default;
$modal-close-color-var: '--modal-close-color' !default;
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
$collapse-border-color-var: '--collapse-border-color' !default;
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-line-height: 1.5 !default; // Line height for most elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_contextual_mixins.scss` file to find this module's mixins.
@import '_contextual_mixins';
/* Contextual module CSS variable definitions */
:root {
#{$mark-back-color-var}: $mark-back-color;
#{$mark-fore-color-var}: $mark-fore-color;
}
// Default styling for mark. Use mixins for alternate styles.
mark {
background: var(#{$mark-back-color-var});
color: var(#{$mark-fore-color-var});
font-size: $mark-font-size;
line-height: $mark-line-height;
border-radius: var(#{$universal-border-radius-var});
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&.#{$mark-inline-block-name} {
display: inline-block;
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
font-size: 1em;
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
line-height: $base-line-height;
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
}
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast {
:root {
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
}
.#{$toast-name} {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3);
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(#{$toast-fore-color-var});
background: var(#{$toast-back-color-var});
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
}
// Styling for tooltips.
@if $_include-tooltip {
:root {
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
}
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies.
z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: var(#{$universal-margin-var}) solid transparent;
// Newer browsers will center the tail properly
left: calc(50% - var(#{$universal-margin-var}));
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
color: var(#{$tooltip-fore-color-var});
background: var(#{$tooltip-back-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
white-space: nowrap;
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: calc(2 * var(#{$universal-margin-var}));
}
}
}
// Styling for modal dialogs.
@if $_include-modal {
:root {
#{$modal-overlay-color-var}: $modal-overlay-color;
#{$modal-close-color-var}: $modal-close-color;
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
}
[type="checkbox"].#{$modal-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
& + div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: var(#{$modal-overlay-color-var});
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: 0;
right: 0;
width: $modal-close-size;
height: $modal-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0;
cursor: pointer;
transition: background 0.3s;
&:before {
display: block;
content: '\00D7';
color: var(#{$modal-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $modal-close-size;
line-height: 1;
text-align: center;
}
&:hover, &:focus {
background: var(#{$modal-close-hover-back-color-var});
}
}
}
}
&:checked + div {
display: flex;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
}
}
// Styling for collapse.
@if $_include-collapse {
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
.#{$collapse-name} {
width: calc(100% - 2 * var(#{$universal-margin-var}));
opacity: 1;
display: flex;
flex-direction: column;
margin: var(#{$universal-margin-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > [type="radio"], & > [type="checkbox"] {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
& > label {
flex-grow: 1;
display: inline-block;
height: $collapse-label-height;
cursor: pointer;
transition: background 0.3s;
color: var(#{$collapse-label-fore-color-var});
background: var(#{$collapse-label-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ div {
flex-basis: auto;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: max-height 0.3s;
max-height: 1px; // for transition
}
}
> :checked + label {
background: var(#{$collapse-selected-label-back-color-var});
// border: 0.0625rem solid #bdbdbd; // var it
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
& + div {
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 0;
background: var(#{$collapse-content-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: var(#{$universal-padding-var});
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
max-height: $collapse-content-max-height;
}
}
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
border-top: 0;
}
& > label:first-of-type {
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; // universalize
}
& > label:last-of-type {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
}
& > :checked:last-of-type + label {
border-radius: 0;
+ div {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
}
}
}
}

27
docs/mini/_contextual_mixins.scss Normal file
View File

@ -0,0 +1,27 @@
// Contextual module's mixin definitions are here. For the module itself
// check `_contextual.scss`.
// Mark color variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-back-color: Background color for <mark> variant.
// $mark-alt-fore-color: Text color for <mark> variant.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
$mark-alt-fore-color : $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
#{$mark-back-color-var}: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color{
#{$mark-fore-color-var}: $mark-alt-fore-color;
}
}
}
// Mark size variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-padding: The padding of the <mark> variant.
// $mark-alt-border-radius: The border radius of the <mark> variant.
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
mark.#{$mark-alt-name} {
padding: $mark-alt-padding;
border-radius: $mark-alt-border-radius;
}
}

304
docs/mini/_core.scss Normal file
View File

@ -0,0 +1,304 @@
/*
Browsers resets and base typography.
*/
// TODO: Add fluid type and test thoroughly
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
$base-line-height: 1.5 !default; // Line height for most elements
$base-font-size: 1rem !default; // Font sizing for all elements
$_body-margin: 0 !default; // [Hidden] Margin for body
$fore-color: #111 !default; // Text & foreground color
$secondary-fore-color: #444 !default; // Secondary text & foreground color
$back-color: #f8f8f8 !default; // Background color
$secondary-back-color: #f0f0f0 !default; // Secondary background color
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
$pre-color: #1565c0 !default; // <pre> sidebar color
$border-color: #aaa !default; // Border color
$secondary-border-color: #ddd !default; // Secondary border color
$heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
$universal-margin: 0.5rem !default; // Universal margin for the most elements
$universal-padding: 0.5rem !default; // Universal padding for the most elements
$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
$universal-box-shadow: none !default; // Universal box-shadow for most elements
$small-font-size: 0.75em !default; // Font sizing for <small> elements
$heading-font-weight: 500 !default; // Font weight for headings
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
$sup-top: -0.5em !default; // <sup> top
$sub-bottom: -0.25em !default; // <sub> bottom
$a-link-color: #0277bd !default; // Color for <a>:link
$a-visited-color: #01579b !default; // Color for <a>:visited
// CSS variable name definitions [exercise caution if modifying these]
$fore-color-var: '--fore-color' !default;
$secondary-fore-color-var: '--secondary-fore-color' !default;
$back-color-var: '--back-color' !default;
$secondary-back-color-var: '--secondary-back-color' !default;
$blockquote-color-var: '--blockquote-color' !default;
$pre-color-var: '--pre-color' !default;
$border-color-var: '--border-color' !default;
$secondary-border-color-var: '--secondary-border-color' !default;
$heading-ratio-var: '--heading-ratio' !default;
$universal-margin-var: '--universal-margin' !default;
$universal-padding-var: '--universal-padding' !default;
$universal-border-radius-var: '--universal-border-radius' !default;
$universal-box-shadow-var: '--universal-box-shadow' !default;
$a-link-color-var: '--a-link-color' !default;
$a-visited-color-var: '--a-visited-color' !default;
/* Core module CSS variable definitions */
:root {
#{$fore-color-var}: $fore-color;
#{$secondary-fore-color-var}: $secondary-fore-color;
#{$back-color-var}: $back-color;
#{$secondary-back-color-var}: $secondary-back-color;
#{$blockquote-color-var}: $blockquote-color;
#{$pre-color-var}: $pre-color;
#{$border-color-var}: $border-color;
#{$secondary-border-color-var}: $secondary-border-color;
#{$heading-ratio-var}: $heading-ratio;
#{$universal-margin-var}: $universal-margin;
#{$universal-padding-var}: $universal-padding;
#{$universal-border-radius-var}: $universal-border-radius;
#{$a-link-color-var} : $a-link-color;
#{$a-visited-color-var} : $a-visited-color;
@if $universal-box-shadow != none {
#{$universal-box-shadow-var}: $universal-box-shadow;
}
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
a, b, del, em, i, ins, q, span, strong, u {
font-size: 1em; // Fix for elements inside headings not displaying properly.
}
@if $_apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $_body-margin;
color: var(#{$fore-color-var});
background: var(#{$back-color-var});
}
// Correct display for Edge & Firefox.
details {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
// Abbreviations
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
}
// Show overflow in Edge.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
font-weight: $heading-font-weight;
small {
color: var(#{$secondary-fore-color-var});
display: block;
@if $subheading-top-margin != 0 {
margin-top: $subheading-top-margin;
}
@if $subheading-font-size != $small-font-size {
font-size: $subheading-font-size;
}
}
}
h1 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h2 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h3 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h4 {
font-size: calc(1rem * var(#{$heading-ratio-var}));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(#{$heading-ratio-var}));
}
p {
margin: var(#{$universal-margin-var});
}
ol, ul {
margin: var(#{$universal-margin-var});
padding-left: calc(2 * var(#{$universal-margin-var}));
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: var(#{$universal-margin-var});
height: $__1px;
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
}
blockquote { // Doesn't have a back color by default, can be added manually.
display: block;
position: relative;
font-style: italic;
color: var(#{$secondary-fore-color-var});
margin: var(#{$universal-margin-var});
padding: calc(3 * var(#{$universal-padding-var}));
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 6*$__1px solid var(#{$blockquote-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&:before {
position: absolute;
top: calc(0rem - var(#{$universal-padding-var}));
left: 0;
font-family: sans-serif;
font-size: $blockquote-quotation-size;
font-weight: 700;
content: "\201c";
color: var(#{$blockquote-color-var});
}
&[cite]:after{
font-style: normal;
font-size: $blockquote-cite-size;
font-weight: 700;
content: "\a— " attr(cite);
white-space: pre;
}
}
code, kbd, pre, samp {
font-family: #{$code-font-family}; // Display fix should be applied manually!
font-size: $code-font-size;
}
code { // No border color by default and fore color is the default for text, can be altered manually.
background: var(#{$secondary-back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
kbd { // No border color by default, can be altered manually.
background: var(#{$fore-color-var});
color: var(#{$back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
pre { // Fore color is the default, can be altered manually.
overflow: auto; // Responsiveness
background: var(#{$secondary-back-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 4*$__1px solid var(#{$pre-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Prevent elements from affecting the line height in all browsers.
sup, sub, code, kbd {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup, sub, figcaption {
font-size: $small-element-font-size;
}
sup {
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
figure {
margin: var(#{$universal-margin-var});
}
figcaption {
color: var(#{$secondary-fore-color-var});
}
a {
text-decoration: none;
&:link{
color: var(#{$a-link-color-var});
}
&:visited {
color: var(#{$a-visited-color-var});
}
&:hover, &:focus {
text-decoration: underline;
}
}

317
docs/mini/_input_control.scss Normal file
View File

@ -0,0 +1,317 @@
/*
Definitions for forms and input elements.
*/
// Different elements are styled based on the same set of rules.
$input-group-name: 'input-group' !default; // Class name for input groups.
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
$button-group-name: 'button-group' !default; // Class name for button groups.
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
$form-back-color: #f0f0f0 !default; // Background color for forms.
$form-fore-color: #111 !default; // Text color for forms.
$form-border-color: #ddd !default; // Border color for forms.
$input-back-color: #f8f8f8 !default; // Background color for input elements.
$input-fore-color: #111 !default; // Text color for input elements.
$input-border-color: #ddd !default; // Border color for input elements.
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
$button-back-color: #e2e2e2 !default; // Background color for buttons.
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
$button-fore-color: #212121 !default; // Text color for buttons.
$button-border-color: transparent !default; // Border color for buttons.
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
// CSS variable name definitions [exercise caution if modifying these]
$form-back-color-var: '--form-back-color' !default;
$form-fore-color-var: '--form-fore-color' !default;
$form-border-color-var: '--form-border-color' !default;
$input-back-color-var: '--input-back-color' !default;
$input-fore-color-var: '--input-fore-color' !default;
$input-border-color-var: '--input-border-color' !default;
$input-focus-color-var: '--input-focus-color' !default;
$input-invalid-color-var: '--input-invalid-color' !default;
$button-back-color-var: '--button-back-color' !default;
$button-hover-back-color-var: '--button-hover-back-color' !default;
$button-fore-color-var: '--button-fore-color' !default;
$button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default;
$button-group-border-color-var: '--button-group-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-font-size: 1rem !default; // Font sizing for all elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
/* Input_control module CSS variable definitions */
:root {
#{$form-back-color-var}: $form-back-color;
#{$form-fore-color-var}: $form-fore-color;
#{$form-border-color-var}: $form-border-color;
#{$input-back-color-var}: $input-back-color;
#{$input-fore-color-var}: $input-fore-color;
#{$input-border-color-var}: $input-border-color;
#{$input-focus-color-var}: $input-focus-color;
#{$input-invalid-color-var}: $input-invalid-color;
#{$button-back-color-var}: $button-back-color;
#{$button-hover-back-color-var}: $button-hover-back-color;
#{$button-fore-color-var}: $button-fore-color;
#{$button-border-color-var}: $button-border-color;
#{$button-hover-border-color-var}: $button-hover-border-color;
#{$button-group-border-color-var}: $button-group-border-color;
}
// Base form styling
form { // Text color is the default, this can be changed manually.
background: var(#{$form-back-color-var});
color: var(#{$form-fore-color-var});
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Fieldset styling
fieldset {
// Apply always to overwrite defaults for all of the below.
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 4);
padding: var(#{$universal-padding-var});
}
// Legend styling.
legend {
// Edge fixes.
box-sizing: border-box;
display: table;
max-width: 100%;
white-space: normal;
// Actual styling.
font-weight: $bold-font-weight;
padding: calc(var(#{$universal-padding-var}) / 2);
}
// Label syling. - Basically just padding, but there might be more in the future.
label {
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
// Input group styling.
.#{$input-group-name} {
display: inline-block;
// Fluid input groups
@if $_include-fluid-input-group {
&.#{$input-group-fluid-name} {
display: flex;
align-items: center;
justify-content: center;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
// On mobile
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
align-items: stretch;
flex-direction: column;
}
}
// Vertical input groups
&.#{$input-group-vertical-name} {
display: flex;
align-items: stretch;
flex-direction: column;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
}
}
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Common textual input styling. - Avoid using box-shadow with these.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply.
background: var(#{$input-back-color-var});
color: var(#{$input-fore-color-var});
border: $__1px solid var(#{$input-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 2);
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
&:hover, &:focus {
border-color: var(#{$input-focus-color-var});
box-shadow: none;
}
&:invalid, &:focus:invalid{
border-color: var(#{$input-invalid-color-var});
box-shadow: none;
}
&[readonly]{
background: var(#{$secondary-back-color-var});
}
}
// Fix for select and option elements overflowing their parent container.
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
// Styling for checkboxes and radio buttons.
[type="checkbox"], [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
vertical-align: text-bottom;
padding: 0; // Remove padding added from previous styles.
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
&:checked:before {
position: absolute;
}
}
[type="checkbox"] {
&:checked:before {
content: '\2713';
font-family: sans-serif;
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
top: calc(0rem - var(#{$universal-padding-var}));
left: calc(var(#{$universal-padding-var}) / 4);
}
}
[type="radio"] {
border-radius: 100%;
&:checked:before {
border-radius: 100%;
content: '';
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
background: var(#{$input-fore-color-var});
width: 0.5rem;
height: 0.5rem;
}
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown {
color: var(#{$input-fore-color-var});
}
::-ms-placeholder {
color: var(#{$input-fore-color-var});
opacity: 0.54;
}
// Definitions for the button and button-like elements.
// Different elements are styled based on the same set of rules.
// Reset for Firefox focusing on button elements.
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Fixes for Android 4, iOS and Safari.
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
// Other fixes.
button {
overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
}
// Default styling
button, [type="button"], [type="submit"], [type="reset"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] {
display: inline-block;
background: var(#{$button-back-color-var});
color: var(#{$button-fore-color-var});
border: $__1px solid var(#{$button-border-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
text-decoration: none;
cursor: pointer;
transition: background 0.3s;
&:hover, &:focus {
background: var(#{$button-hover-back-color-var});
border-color: var(#{$button-hover-border-color-var});
}
}
// Disabled styling for input and button elements.
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $input-disabled-opacity;
}
}
// Button group styling.
.#{$button-group-name} {
display: flex;
border: $__1px solid var(#{$button-group-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
& > .#{$button-class-name}, & > [role="button"] {
margin: 0;
max-width: 100%;
flex: 1 1 auto;
text-align: center;
border: 0;
border-radius: 0;
box-shadow: none;
}
& > :not(:first-child) {
border-left: $__1px solid var(#{$button-group-border-color-var});
}
// Responsiveness for button groups
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
flex-direction: column;
& > :not(:first-child) {
border: 0; // Reapply to remove the left border from elements.
border-top: $__1px solid var(#{$button-group-border-color-var});
}
}
}

46
docs/mini/_input_control_mixins.scss Normal file
View File

@ -0,0 +1,46 @@
// Input_control module's mixin definitions are here. For the module itself
// check `_input_control.scss`.
// Button color variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-back-color: Background color for button variant.
// $button-alt-hover-back-color: Background color for button variant (hover).
// $button-alt-fore-color: Text color for button variant.
// $button-alt-border-color: Border color for button variant.
// $button-alt-hover-border-color: Border color for button variant (hover).
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
@if $button-alt-back-color != $button-back-color {
#{$button-back-color-var}: $button-alt-back-color;
}
@if $button-alt-fore-color != $button-fore-color{
#{$button-fore-color-var}: $button-alt-fore-color;
}
@if $button-alt-border-color != $button-border-color{
#{$button-border-color-var}: $button-alt-border-color;
}
&:hover, &:focus {
@if $button-alt-hover-back-color != $button-hover-back-color{
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
}
@if $button-alt-hover-border-color != $button-hover-border-color{
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
}
}
}
}
}
// Button size variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-padding: The padding of the button variant.
// $button-alt-margin The margin of the button variant.
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
padding: $button-alt-padding;
margin: $button-alt-margin;
}
}
}

199
docs/mini/_layout.scss Normal file
View File

@ -0,0 +1,199 @@
/*
Definitions for the grid system, cards and containers.
*/
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
$grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$card-name: 'card' !default; // Class name for the cards.
$card-section-name: 'section' !default; // Class name for the cards' sections.
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
$card-normal-width: 320px !default; // Width for normal cards.
$card-section-media-height: 200px !default; // Height for cards' media sections.
$card-fore-color: #111 !default; // Text color for the cards.
$card-back-color: #f8f8f8 !default; // Background color for the cards.
$card-border-color: #ddd !default; // Border color for the cards.
// CSS variable name definitions [exercise caution if modifying these]
$card-fore-color-var: '--card-fore-color' !default;
$card-back-color-var: '--card-back-color' !default;
$card-border-color-var: '--card-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_layout_mixins.scss` file to find this module's mixins.
@import 'layout_mixins';
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
}
// Grid row definition.
.#{$grid-row-name} {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
}
// Inline mixin, used to generate class definitions for each grid step.
@mixin generate-grid-size ($size-prefix){
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
@else {
// Grid column generic definitions.
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix} {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
// Offest definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
@if ($i - 1) == 0 {
margin-left: 0;
}
@else {
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
}
}
}
// Reordering definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
order: initial;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
order: -999;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
order: 999;
}
}
// Definitions for smaller screens.
@include generate-grid-size($grid-small-prefix);
// Definitions for medium screens.
@media screen and (min-width: #{$grid-medium-breakpoint}){
@include generate-grid-size($grid-medium-prefix);
}
// Definitions for large screens.
@media screen and (min-width: #{$grid-large-breakpoint}){
@include generate-grid-size($grid-large-prefix);
}
/* Card component CSS variable definitions */
:root {
#{$card-back-color-var}: $card-back-color;
#{$card-fore-color-var}: $card-fore-color;
#{$card-border-color-var}: $card-border-color;
}
// Card styling
.#{$card-name} {
// New syntax
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
border: $__1px solid var(#{$card-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
overflow: hidden; // Hide overflow from section borders
// Responsiveness (if the screen is larger than card, set max-width)
@media screen and (min-width: #{$card-normal-width}) {
max-width: $card-normal-width;
}
// Card sections
& > .#{$card-section-name} {
// Reapply background and foreground colors, so that mixins can be applied properly.
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
box-sizing: border-box;
margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 0; // Clean borders and radiuses for any element-based sections
border-bottom: $__1px solid var(#{$card-border-color-var});
padding: var(#{$universal-padding-var});
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}

62
docs/mini/_layout_mixins.scss Normal file
View File

@ -0,0 +1,62 @@
// Layout (card) module's mixin definitions are here. For the module itself
// check `_layout.scss`.
// Mixin for alternate card sizes:
// $card-alt-size-name: The name of the class used for the alternate size card.
// $card-alt-size-width: The width of the alternate size card.
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {
@media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
}
// Mixin for alternate cards (card color variants):
// $card-alt-name: The name of the class used for the alternate card.
// $card-alt-back-color: The background color of the alternate card.
// $card-alt-fore-color: The text color of the alternate card.
// $card-alt-border-color: The border style of the alternate card.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-alt-fore-color;
}
@if $card-alt-border-color != $card-border-color {
#{$card-border-color-var}: $card-alt-border-color;
}
}
}
// Mixin for alternate card sections (card section color variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-back-color: The background color of the alternate card section.
// $card-section-alt-fore-color: The text color of the alternate card section.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
$card-section-alt-fore-color : $card-fore-color) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-section-alt-fore-color;
}
}
}
// Mixin for alternate card sections (card section padding variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-padding: The padding of the alternate card section.
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}

315
docs/mini/_navigation.scss Normal file
View File

@ -0,0 +1,315 @@
/*
Definitions for navigation elements.
*/
// Different elements are styled based on the same set of rules.
$header-height: 3.1875rem !default; // Height of the header element.
$header-back-color: #f8f8f8 !default; // Background color for the header element.
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
$header-fore-color: #444 !default; // Text color for the header element.
$header-border-color: #ddd !default; // Border color for the header element.
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
$nav-fore-color: #444 !default; // Text color for the nav element.
$nav-border-color: #ddd !default; // Border color for the nav element.
$nav-link-color: #0277bd !default; // Color for link in the nav element.
$footer-fore-color: #444 !default; // Text color for the footer element.
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
$footer-border-color: #ddd !default; // Border color for the footer element.
$footer-link-color: #0277bd !default; // Color for link in the footer element.
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
$drawer-border-color: #ddd !default; // Border color for the drawer component.
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
$header-logo-name: 'logo' !default; // Class name for the header logo element.
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
// CSS variable name definitions [exercise caution if modifying these]
$header-fore-color-var: '--header-fore-color' !default;
$header-back-color-var: '--header-back-color' !default;
$header-hover-back-color-var: '--header-hover-back-color' !default;
$header-border-color-var: '--header-border-color' !default;
$nav-fore-color-var: '--nav-fore-color' !default;
$nav-back-color-var: '--nav-back-color' !default;
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
$nav-border-color-var: '--nav-border-color' !default;
$nav-link-color-var: '--nav-link-color' !default;
$footer-fore-color-var: '--footer-fore-color' !default;
$footer-back-color-var: '--footer-back-color' !default;
$footer-border-color-var: '--footer-border-color' !default;
$footer-link-color-var: '--footer-link-color' !default;
$drawer-back-color-var: '--drawer-back-color' !default;
$drawer-border-color-var: '--drawer-border-color' !default;
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
$drawer-close-color-var: '--drawer-close-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Navigation module CSS variable definitions */
:root {
#{$header-back-color-var}: $header-back-color;
#{$header-hover-back-color-var}: $header-hover-back-color;
#{$header-fore-color-var}: $header-fore-color;
#{$header-border-color-var}: $header-border-color;
#{$nav-back-color-var}: $nav-back-color;
#{$nav-hover-back-color-var}: $nav-hover-back-color;
#{$nav-fore-color-var}: $nav-fore-color;
#{$nav-border-color-var}: $nav-border-color;
#{$nav-link-color-var}: $nav-link-color;
#{$footer-fore-color-var}: $footer-fore-color;
#{$footer-back-color-var}: $footer-back-color;
#{$footer-border-color-var}: $footer-border-color;
#{$footer-link-color-var}: $footer-link-color;
#{$drawer-back-color-var}: $drawer-back-color;
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
#{$drawer-border-color-var}: $drawer-border-color;
#{$drawer-close-color-var}: $drawer-close-color;
}
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
header {
height: $header-height;
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$header-fore-color-var});
@if $_header-only-bottom-border {
border-bottom: $__1px solid var(#{$header-border-color-var});
}
@else {
border: $__1px solid var(#{$header-border-color-var});
}
padding: calc(var(#{$universal-padding-var}) / 4) 0;
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
// Header logo styling.
.#{$header-logo-name} {
color: var(#{$header-fore-color-var});
font-size: $header-logo-font-size;
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
text-decoration: none;
}
// Link styling.
button, [type="button"], .#{$button-class-name}, [role="button"] {
box-sizing: border-box;
position: relative;
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
text-align: center;
color: var(#{$header-fore-color-var});
border: 0;
border-radius: 0;
margin: 0;
@if $_header-links-uppercase {
text-transform: uppercase;
}
&:hover, &:focus {
background: var(#{$header-hover-back-color-var});
}
}
}
// Navigation sidebar styling.
nav {
background: var(#{$nav-back-color-var});
color: var(#{$nav-fore-color-var});
border: $__1px solid var(#{$nav-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
* {
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
a, a:visited {
display: block;
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
border-radius: var(#{$universal-border-radius-var});
transition: background 0.3s;
&:hover, &:focus {
text-decoration: none;
background: var(#{$nav-hover-back-color-var});
}
}
// Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
position: relative;
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
&:before {
position: absolute;
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
top: -#{$__1px};
content: '';
height: 100%;
border: $__1px solid var(#{$nav-border-color-var});
border-left: 0;
}
}
}
}
// Footer styling.
footer {
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$footer-fore-color-var});
@if $_footer-only-top-border {
border-top: $__1px solid var(#{$footer-border-color-var});
}
@else {
border: $__1px solid var(#{$footer-border-color-var});
}
// margin: $footer-margin;
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
font-size: $footer-font-size;
a, a:visited {
color: var(#{$footer-link-color-var});
}
}
// Definitions for sticky headers and footers.
header.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
top: 0;
}
footer.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
bottom: 0;
}
// Responsive drawer component.
.#{$drawer-toggle-name} {
&:before { // No color specified, should use the color of its surroundings!
display: inline-block;
position: relative;
vertical-align: bottom;
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
font-family: sans-serif;
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) {
display: none;
}
}
}
[type="checkbox"].#{$drawer-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
+ * {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: var(#{$drawer-back-color-var});
border: $__1px solid var(#{$drawer-border-color-var});
border-radius: 0; // Set to 0 to override the value from `nav`.
margin: 0; // Set to 0 to override the value from `nav`.
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
z-index: 1110;
@if $_drawer-right {
right: -$drawer-width;
transition: right 0.3s;
}
@else {
left: -$drawer-width;
transition: left 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: var(#{$universal-margin-var});
right: var(#{$universal-margin-var});
z-index: 1111;
width: $drawer-close-size;
height: $drawer-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0; // Fixes the offset from label
cursor: pointer;
transition: background 0.3s;
&:before { // Transparent background unless hovered over. Does not block text behind it.
display: block;
content: '\00D7';
color: var(#{$drawer-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $drawer-close-size;
line-height: 1; // Setting to 1 seems to center the 'X' properly.
text-align: center;
}
&:hover, &:focus {
background: var(#{$drawer-hover-back-color-var});
}
}
@media screen and (max-width: #{$drawer-width}) {
width: 100%;
}
}
&:checked + * {
@if $_drawer-right {
right: 0;
}
@else {
left: 0;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) + * {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
}
}

105
docs/mini/flavor.scss Normal file
View File

@ -0,0 +1,105 @@
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file.
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2
*/
@import 'core';
@import 'layout';
/*
Custom elements for card elements.
*/
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
@import 'input_control';
/*
Custom elements for forms and input elements.
*/
$button-primary-name: 'primary'; // Class name for primary button color variant.
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
@import 'navigation';
@import 'contextual';
/*
Custom elements for contextual background elements, toasts and tooltips.
*/
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
$mark-tag-border-radius: 1em;
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);

16
scripts/web-script.js
View File

@ -5,6 +5,22 @@
// Load modules
const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'),
md = require('markdown-it')();
const sass = require('node-sass');
sass.render({
file: path.join('docs','mini','flavor.scss'),
outFile: path.join('docs','mini.css'),
outputStyle: 'compressed'
}, function(err, result) {
if(!err){
fs.writeFile(path.join('docs','mini.css'), result.css, function(err2){
if(!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
});
}
else {
console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
}
});
// Set variables for paths
const snippetsPath = './snippets', staticPartsPath = './static-parts', docsPath = './docs';
// Set variables for script

2
static-parts/index-end.html
View File

@ -1,5 +1,5 @@
<footer>
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a></p>
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framwork</a>.</p>
<a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
</footer>
</main>

2
static-parts/index-start.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.1/mini-default.min.css">
<link rel="stylesheet" href="./mini.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
<title>30 seconds of code</title>
<meta charset="utf-8">