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

Website improvements

Browse Source 
Updated injectors to be simpler and easier to use. Updated styling to deal with rendering problems and make the loading faster.
This commit is contained in:
Angelos Chalaris
2018-01-03 19:30:55 +02:00
parent 1fe72ca878
commit 601ef296c9
6 changed files with 384 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

482
docs/index.html
View File

File diff suppressed because one or more lines are too long

2
docs/mini.css
View File

File diff suppressed because one or more lines are too long

129
docs/mini/flavor.scss
View File

@ -7,44 +7,29 @@
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2
*/
$_include-modal: false;
$_include-tooltip: false;
$_include-collapse: false;
@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);
@include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
padding: calc(3 * var(#{$universal-padding-var}));
}
@import 'input_control';
@ -57,34 +42,6 @@ $button-primary-hover-back-color:#1565c0; // Background color for primary bu
$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);
$_drawer-right: false;
@ -109,11 +66,13 @@ $mark-tag-border-radius: 1em;
// Website-specific styles
html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
html, * {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
font-family: 'Inconsolata', Menlo, Consolas, monospace !important;
}
code, kbd { font-size: 1em; }
font-family: 'Roboto Mono', Menlo, Consolas, monospace !important;
}
code, kbd { font-size: 0.8125em; }
pre code {
padding: 0; // Should make the first line's left padding the same as all other lines and avoid that annoying little step.
}
@ -177,11 +136,67 @@ main {
background: none !important;
}
: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;
}
label.#{$collapse-name} {
width: 100%;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
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}));
border-radius: var(#{$universal-border-radius-var});
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ pre {
box-sizing: border-box;
height: 1px;
max-height: 1px;
overflow: auto;
margin: 0;
border: 0;
padding: 0;
transition: max-height 0.3s;
}
&.toggled {
background: var(#{$collapse-selected-label-back-color-var});
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
+ pre {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
width: 100%;
height: auto;
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: calc(2 * var(#{$universal-padding-var}));
max-height: $collapse-content-max-height;
}
}
}
div.collapse {
> label {
border-top-left-radius: var(--universal-border-radius) !important;
border-top-right-radius: var(--universal-border-radius) !important;
}
:checked + label {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
margin: 0;
width: 100%;
> div {