This repository has been archived on 2023-02-03. You can view files and clone it, but cannot push or open issues or pull requests.
autonomic.zone/src/assets/styles/components/_basic.scss

224 lines
3.3 KiB
SCSS
Raw Normal View History

/* Basic */
@-ms-viewport {
width: device-width;
}
body {
background: _palette(bg);
&.is-loading {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
}
body, input, select, textarea {
color: _palette(fg);
font-family: _font(family);
font-size: 18px;
font-weight: _font(weight);
letter-spacing: _size(letter-spacing);
line-height: 1.6;
}
a {
@include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
border-bottom: dotted 1px;
color: inherit;
text-decoration: none;
&:hover {
border-bottom-color: transparent;
}
}
strong, b {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
2017-09-22 15:11:09 +00:00
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
color: _palette(fg-bold);
font-weight: _font(weight-extrabold);
letter-spacing: _size(letter-spacing-alt);
line-height: 1em;
margin: 0 0 (_size(element-margin) * 0.5) 0;
text-transform: uppercase;
a {
color: inherit;
text-decoration: none;
}
}
2017-09-22 15:11:09 +00:00
h2,
.h2 {
font-size: 1.35em;
line-height: 1.4;
@include breakpoint(small) {
font-size: 1.1em;
}
}
2017-09-22 15:11:09 +00:00
.h3,
h3 {
font-size: 1.15em;
line-height: 1.4;
@include breakpoint(small) {
font-size: 1em;
}
}
2017-09-22 15:11:09 +00:00
.h4,
h4 {
font-size: 1em;
line-height: 1.5em;
}
2017-09-22 15:11:09 +00:00
.h5,
h5 {
font-size: 0.8em;
line-height: 1.5em;
font-style: italic;
}
2017-09-22 15:11:09 +00:00
.h6,
h6 {
font-size: 0.7em;
line-height: 1.5em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border: 0;
border-bottom: solid 2px _palette(border);
margin: (_size(element-margin) * 1.5) 0;
&.major {
margin: (_size(element-margin) * 2.25) 0;
}
}
blockquote {
border-left: solid 4px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: 0.5em 0 0.5em 2em;
}
code {
background: _palette(border-bg);
border-radius: 3px;
font-family: _font(family-fixed);
font-size: 0.9em;
letter-spacing: 0;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
header {
p {
color: _palette(fg-light);
position: relative;
top: -0.25em;
}
h2 + p {
}
h3 + p {
font-size: 1.1em;
}
h4 + p,
h5 + p,
h6 + p {
font-size: 0.9em;
}
&.major {
margin: 0 0 (_size(element-margin) * 1.75) 0;
h2, h3, h4, h5, h6 {
border-bottom: solid 2px _palette(border);
display: inline-block;
padding-bottom: 1em;
position: relative;
&:after {
content: '';
display: block;
height: 1px;
}
}
p {
color: _palette(fg);
top: 0;
}
@include breakpoint(small) {
margin: 0 0 _size(element-margin) 0;
}
}
@include breakpoint(medium) {
br {
display: none;
}
}
}