Complete redesign of site styles
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
parent
bdbcbedc35
commit
3647ff37c5
GPG Key ID:
269A00ACA90A8EA3
1
_scss/base/_bootstrap.scss
Normal file
1
_scss/base/_bootstrap.scss
Normal file
@ -0,0 +1 @@
|
||||
@import 'bootstrap/assets/stylesheets/bootstrap';
|
||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,3 @@
|
||||
/*! pygments-css | github.com/richleland/pygments-css */
|
||||
|
||||
// Tango theme
|
||||
$color01: #000;
|
||||
$color02: #000080;
|
||||
$color03: #0000cf;
|
||||
|
||||
@ -1,27 +1,2 @@
|
||||
@import 'components/variables';
|
||||
|
||||
// Basic styles
|
||||
@import 'components/core/basis';
|
||||
@import 'components/core/grid';
|
||||
|
||||
// Styles of the main theme
|
||||
@import 'components/theme/background';
|
||||
@import 'components/theme/blockquote';
|
||||
@import 'components/theme/buttons';
|
||||
@import 'components/theme/code';
|
||||
@import 'components/theme/divider';
|
||||
@import 'components/theme/form';
|
||||
@import 'components/theme/image';
|
||||
@import 'components/theme/link';
|
||||
@import 'components/theme/list';
|
||||
@import 'components/theme/spacing';
|
||||
@import 'components/theme/table';
|
||||
@import 'components/theme/typography';
|
||||
|
||||
// Individual styles
|
||||
@import 'components/elements/comments';
|
||||
@import 'components/elements/content';
|
||||
@import 'components/elements/footer';
|
||||
@import 'components/elements/listposts';
|
||||
@import 'components/elements/navigation';
|
||||
@import 'components/elements/sociallinks';
|
||||
@import 'components/core';
|
||||
@import 'components/image';
|
||||
|
||||
@ -1,371 +0,0 @@
|
||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
18
_scss/components/_core.scss
Normal file
18
_scss/components/_core.scss
Normal file
@ -0,0 +1,18 @@
|
||||
@import 'utilities/boxsizing';
|
||||
@import 'utilities/textsizeadjust';
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
@include box-sizing(border-box);
|
||||
@include text-size-adjust(100%);
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
4
_scss/components/_image.scss
Normal file
4
_scss/components/_image.scss
Normal file
@ -0,0 +1,4 @@
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
// ...
|
||||
$color-initial: #fff;
|
||||
$color-primary: #9b4dca;
|
||||
$color-quaternary: #d1d1d1;
|
||||
$color-quinary: #e1e1e1;
|
||||
$color-secondary: #606c76;
|
||||
$color-tertiary: #f4f5f6;
|
||||
@ -1,27 +0,0 @@
|
||||
@import 'utilities/boxsizing';
|
||||
@import 'utilities/textsizeadjust';
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
@include box-sizing(border-box);
|
||||
@include text-size-adjust(100%);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $color-secondary;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Roboto, Cantarell, 'Droid Sans', 'Fira Sans', Helvetica, 'Helvetica Neue', 'Helvetica Neue', Oxygen, 'Segoe UI', Ubuntu, sans-serif;
|
||||
font-size: 16px;
|
||||
letter-spacing: .01em;
|
||||
line-height: 1.6;
|
||||
margin: 0 auto;
|
||||
max-width: 128rem;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
@import 'utilities/flexbox';
|
||||
|
||||
body {
|
||||
@include flexbox();
|
||||
@include flex-basis(auto);
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
main {
|
||||
@include flexbox();
|
||||
@include flex-basis(auto);
|
||||
@include flex-grow(1);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include flexbox();
|
||||
@include flex-shrink(0);
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
|
||||
.content {
|
||||
@include flexbox();
|
||||
@include flex-basis(auto);
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.footer {
|
||||
@include flexbox();
|
||||
@include flex-shrink(0);
|
||||
@include justify-content(center);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.comments {
|
||||
border-top: .1rem solid $color-tertiary;
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.content {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
.footer {
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
padding: 0 .5rem;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
.post-item {
|
||||
border-left: .3rem solid $color-primary;
|
||||
margin-bottom: 4rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
.navigation {
|
||||
padding: 0 .5rem 1rem;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
padding: 0 .5rem;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.social-links {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,10 +0,0 @@
|
||||
blockquote {
|
||||
border-left: .3rem solid $color-quaternary;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
@import 'utilities/borderradius';
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit'] {
|
||||
background-color: $color-primary;
|
||||
border: .1rem solid $color-primary;
|
||||
color: $color-initial;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
height: 3.8rem;
|
||||
letter-spacing: .1rem;
|
||||
line-height: 3.8rem;
|
||||
padding: 0 3rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
@include border-radius(.4rem);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $color-secondary;
|
||||
border-color: $color-secondary;
|
||||
color: $color-initial;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-outline {
|
||||
background-color: transparent;
|
||||
color: $color-primary;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border-color: $color-secondary;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: inherit;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-clear {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $color-primary;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
@import 'utilities/borderradius';
|
||||
|
||||
code {
|
||||
background: $color-tertiary;
|
||||
font-size: 86%;
|
||||
margin: 0 .2rem;
|
||||
padding: .2rem .5rem;
|
||||
white-space: nowrap;
|
||||
|
||||
@include border-radius(.4rem);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: $color-tertiary;
|
||||
border-left: .3rem solid $color-primary;
|
||||
overflow-x: auto;
|
||||
|
||||
& > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre;
|
||||
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: .1rem solid $color-tertiary;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
@import 'utilities/appearance';
|
||||
@import 'utilities/borderradius';
|
||||
@import 'utilities/boxshadow';
|
||||
@import 'utilities/boxsizing';
|
||||
|
||||
input:not([type]),
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
input[type='datetime'],
|
||||
input[type='datetime-local'],
|
||||
input[type='email'],
|
||||
input[type='month'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='tel'],
|
||||
input[type='text'],
|
||||
input[type='url'],
|
||||
input[type='week'],
|
||||
select,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
border: .1rem solid $color-quaternary;
|
||||
height: 3.8rem;
|
||||
padding: .6rem 1rem;
|
||||
width: 100%;
|
||||
|
||||
@include appearance(none);
|
||||
@include border-radius(.4rem);
|
||||
@include box-shadow(none);
|
||||
@include box-sizing(inherit);
|
||||
|
||||
&:focus {
|
||||
border-color: $color-primary;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 6.5rem;
|
||||
}
|
||||
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.label-inline {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
@import 'utilities/boxshadow';
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&:target {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
a {
|
||||
color: $color-primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
font-size: 90%;
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
.button,
|
||||
button,
|
||||
dd,
|
||||
dt,
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
table {
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: .1rem solid $color-quinary;
|
||||
padding: 1.2rem 1.5rem;
|
||||
text-align: left;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
letter-spacing: .01em;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.6rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// Appearance
|
||||
//
|
||||
// The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
|
||||
//
|
||||
// Values: auto | none
|
||||
// Default: auto
|
||||
//
|
||||
// http://www.w3.org/TR/css3-ui/#appearance
|
||||
@mixin appearance($value: auto) {
|
||||
-webkit-appearance: $value;
|
||||
-moz-appearance: $value;
|
||||
appearance: $value;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// Border Radius
|
||||
//
|
||||
// The border-radius CSS property lets you round the corners of an element's outer border edge. You can specify a single radius to make circular corners, or two radii to make elliptical corners.
|
||||
//
|
||||
// Values: <length-percentage> | <length-percentage>
|
||||
// Default: 0
|
||||
//
|
||||
// https://www.w3.org/TR/css-backgrounds-3/#propdef-border-radius
|
||||
@mixin border-radius($value: 0) {
|
||||
-webkit-border-radius: $value;
|
||||
-moz-border-radius: $value;
|
||||
border-radius: $value;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// Box Shadow
|
||||
//
|
||||
// The box-shadow CSS property is used to add shadow effects around an element's frame. You can specify multiple effects separated by commas if you wish to do so. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
|
||||
//
|
||||
// Values: offset-x | offset-y | blur-radius | spread-radius | color
|
||||
// Default: none
|
||||
//
|
||||
// https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow
|
||||
@mixin box-shadow($value: none) {
|
||||
-webkit-box-shadow: $value;
|
||||
-moz-box-shadow: $value;
|
||||
box-shadow: $value;
|
||||
}
|
||||
@ -1,307 +0,0 @@
|
||||
// Flexbox Containers
|
||||
//
|
||||
// The 'flex' value causes an element to generate a block-level flex
|
||||
// container box.
|
||||
//
|
||||
// Display: flex
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-containers
|
||||
@mixin flexbox() {
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Flexbox 'Flex' (shorthand)
|
||||
//
|
||||
// The 'flex' property specifies the components of a flexible length: the
|
||||
// flex grow factor and flex shrink factor, and the flex basis. When an
|
||||
// element is a flex item, 'flex' is consulted instead of the main size
|
||||
// property to determine the main size of the element. If an element is
|
||||
// not a flex item, 'flex' has no effect.
|
||||
//
|
||||
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
|
||||
// Default: See individual properties (1 1 0)
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-property
|
||||
|
||||
@mixin flex($fg: 1, $fs: null, $fb: null) {
|
||||
|
||||
$fg-boxflex: $fg;
|
||||
|
||||
@if type-of($fg) == 'list' {
|
||||
$fg-boxflex: nth($fg, 1);
|
||||
}
|
||||
|
||||
-webkit-box-flex: $fg-boxflex;
|
||||
-moz-box-flex: $fg-boxflex;
|
||||
-webkit-flex: $fg $fs $fb;
|
||||
-moz-flex: $fg $fs $fb;
|
||||
-ms-flex: $fg $fs $fb;
|
||||
flex: $fg $fs $fb;
|
||||
}
|
||||
|
||||
// Flexbox Direction
|
||||
//
|
||||
// The 'flex-direction' property specifies how flex items are placed in
|
||||
// the flex container, by setting the direction of the flex container's
|
||||
// main axis. This determines the direction that flex items are laid out in.
|
||||
//
|
||||
// Values: row | row-reverse | column | column-reverse
|
||||
// Default: row
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-direction-property
|
||||
|
||||
@mixin flex-direction($value: row) {
|
||||
@if $value == 'row-reverse' {
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: horizontal;
|
||||
} @else if $value == 'column' {
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
} @else if $value == 'column-reverse' {
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: vertical;
|
||||
} @else {
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
}
|
||||
|
||||
-webkit-flex-direction: $value;
|
||||
-moz-flex-direction: $value;
|
||||
-ms-flex-direction: $value;
|
||||
flex-direction: $value;
|
||||
}
|
||||
|
||||
// Flexbox Wrap
|
||||
//
|
||||
// The 'flex-wrap' property controls whether the flex container is single-line
|
||||
// or multi-line, and the direction of the cross-axis, which determines
|
||||
// the direction new lines are stacked in.
|
||||
//
|
||||
// Values: nowrap | wrap | wrap-reverse
|
||||
// Default: nowrap
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
|
||||
|
||||
@mixin flex-wrap($value: nowrap) {
|
||||
@if $value == 'nowrap' {
|
||||
-ms-flex-wrap: none;
|
||||
} @else {
|
||||
-ms-flex-wrap: $value;
|
||||
}
|
||||
|
||||
-webkit-flex-wrap: $value;
|
||||
-moz-flex-wrap: $value;
|
||||
flex-wrap: $value;
|
||||
}
|
||||
|
||||
// Flexbox Flow (shorthand)
|
||||
//
|
||||
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
|
||||
// and 'flex-wrap' properties, which together define the flex container's
|
||||
// main and cross axes.
|
||||
//
|
||||
// Values: <flex-direction> | <flex-wrap>
|
||||
// Default: row nowrap
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-flow-property
|
||||
|
||||
@mixin flex-flow($values: (row nowrap)) {
|
||||
-webkit-flex-flow: $values;
|
||||
-moz-flex-flow: $values;
|
||||
-ms-flex-flow: $values;
|
||||
flex-flow: $values;
|
||||
}
|
||||
|
||||
// Flexbox Order
|
||||
//
|
||||
// The 'order' property controls the order in which flex items appear within
|
||||
// their flex container, by assigning them to ordinal groups.
|
||||
//
|
||||
// Default: 0
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#order-property
|
||||
|
||||
@mixin flex-order($int: 0) {
|
||||
-webkit-box-ordinal-group: $int;
|
||||
-moz-box-ordinal-group: $int;
|
||||
-ms-flex-order: $int;
|
||||
-webkit-order: $int;
|
||||
-moz-order: $int;
|
||||
order: $int;
|
||||
}
|
||||
|
||||
// Flexbox Grow
|
||||
//
|
||||
// The 'flex-grow' property sets the flex grow factor. Negative numbers
|
||||
// are invalid.
|
||||
//
|
||||
// Default: 0
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-grow-property
|
||||
|
||||
@mixin flex-grow($int: 0) {
|
||||
-webkit-flex-grow: $int;
|
||||
-ms-flex-positive: $int;
|
||||
-webkit-box-flex: $int;
|
||||
-moz-flex-grow: $int;
|
||||
-ms-flex-grow: $int;
|
||||
flex-grow: $int;
|
||||
}
|
||||
|
||||
// Flexbox Shrink
|
||||
//
|
||||
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
|
||||
// are invalid.
|
||||
//
|
||||
// Default: 1
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
|
||||
|
||||
@mixin flex-shrink($int: 1) {
|
||||
-webkit-flex-shrink: $int;
|
||||
-ms-flex-negative: $int;
|
||||
-moz-flex-shrink: $int;
|
||||
-ms-flex-shrink: $int;
|
||||
flex-shrink: $int;
|
||||
}
|
||||
|
||||
// Flexbox Basis
|
||||
//
|
||||
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
|
||||
//
|
||||
// Values: Like 'width'
|
||||
// Default: auto
|
||||
//
|
||||
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
|
||||
|
||||
@mixin flex-basis($value: auto) {
|
||||
-ms-flex-preferred-size: $value;
|
||||
-webkit-flex-basis: $value;
|
||||
-moz-flex-basis: $value;
|
||||
-ms-flex-basis: $value;
|
||||
flex-basis: $value;
|
||||
}
|
||||
|
||||
// Flexbox Justify Content
|
||||
//
|
||||
// The 'justify-content' property aligns flex items along the main axis
|
||||
// of the current line of the flex container. This is done after any flexible
|
||||
// lengths and any auto margins have been resolved. Typically it helps distribute
|
||||
// extra free space leftover when either all the flex items on a line are
|
||||
// inflexible, or are flexible but have reached their maximum size. It also
|
||||
// exerts some control over the alignment of items when they overflow the line.
|
||||
//
|
||||
// Note: 'space-*' values not supported in older syntaxes.
|
||||
//
|
||||
// Values: flex-start | flex-end | center | space-between | space-around
|
||||
// Default: flex-start
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#justify-content-property
|
||||
|
||||
@mixin justify-content($value: flex-start) {
|
||||
@if $value == 'flex-start' {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
} @else if $value == 'flex-end' {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
} @else if $value == 'space-between' {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
} @else if $value == 'space-around' {
|
||||
-ms-flex-pack: distribute;
|
||||
} @else {
|
||||
-webkit-box-pack: $value;
|
||||
-ms-flex-pack: $value;
|
||||
}
|
||||
|
||||
-webkit-justify-content: $value;
|
||||
-moz-justify-content: $value;
|
||||
-ms-justify-content: $value;
|
||||
justify-content: $value;
|
||||
-ms-flex-pack: $value;
|
||||
}
|
||||
|
||||
// Flexbox Align Content
|
||||
//
|
||||
// The 'align-content' property aligns a flex container's lines within the
|
||||
// flex container when there is extra space in the cross-axis, similar to
|
||||
// how 'justify-content' aligns individual items within the main-axis. Note,
|
||||
// this property has no effect when the flexbox has only a single line.
|
||||
//
|
||||
// Values: flex-start | flex-end | center | space-between | space-around | stretch
|
||||
// Default: stretch
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#align-content-property
|
||||
|
||||
@mixin align-content($value: stretch) {
|
||||
@if $value == 'flex-start' {
|
||||
-ms-flex-line-pack: start;
|
||||
} @else if $value == 'flex-end' {
|
||||
-ms-flex-line-pack: end;
|
||||
} @else {
|
||||
-ms-flex-line-pack: $value;
|
||||
}
|
||||
|
||||
-webkit-align-content: $value;
|
||||
-moz-align-content: $value;
|
||||
-ms-align-content: $value;
|
||||
align-content: $value;
|
||||
}
|
||||
|
||||
// Flexbox Align Items
|
||||
//
|
||||
// Flex items can be aligned in the cross axis of the current line of the
|
||||
// flex container, similar to 'justify-content' but in the perpendicular
|
||||
// direction. 'align-items' sets the default alignment for all of the flex
|
||||
// container's items, including anonymous flex items. 'align-self' allows
|
||||
// this default alignment to be overridden for individual flex items. (For
|
||||
// anonymous flex items, 'align-self' always matches the value of 'align-items'
|
||||
// on their associated flex container.)
|
||||
//
|
||||
// Values: flex-start | flex-end | center | baseline | stretch
|
||||
// Default: stretch
|
||||
//
|
||||
// http://w3.org/tr/css3-flexbox/#align-items-property
|
||||
|
||||
@mixin align-items($value: stretch) {
|
||||
@if $value == 'flex-start' {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
} @else if $value == 'flex-end' {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
} @else {
|
||||
-webkit-box-align: $value;
|
||||
-ms-flex-align: $value;
|
||||
}
|
||||
|
||||
-webkit-align-items: $value;
|
||||
-moz-align-items: $value;
|
||||
-ms-align-items: $value;
|
||||
align-items: $value;
|
||||
}
|
||||
|
||||
// Flexbox Align Self
|
||||
//
|
||||
// Values: auto | flex-start | flex-end | center | baseline | stretch
|
||||
// Default: auto
|
||||
|
||||
@mixin align-self($value: auto) {
|
||||
@if $value == 'flex-start' {
|
||||
-ms-flex-item-align: start;
|
||||
} @else if $value == 'flex-end' {
|
||||
-ms-flex-item-align: end;
|
||||
} @else {
|
||||
-ms-flex-item-align: $value;
|
||||
}
|
||||
|
||||
-webkit-align-self: $value;
|
||||
-moz-align-self: $value;
|
||||
-ms-align-self: $value;
|
||||
align-self: $value;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
# Use the web font.
|
||||
---
|
||||
|
||||
@import 'base/fonts';
|
||||
@ -2,6 +2,6 @@
|
||||
# Loading site styles.
|
||||
---
|
||||
|
||||
@import 'base/normalize';
|
||||
@import 'base/bootstrap';
|
||||
@import 'base/highlight';
|
||||
@import 'base/main';
|
||||
Loading…
Reference in New Issue
Block a user