86 lines
1.8 KiB
SCSS
86 lines
1.8 KiB
SCSS
@import "colors";
|
||
@import "constants";
|
||
@import "mixins";
|
||
@import "placeholders";
|
||
@import "typography";
|
||
|
||
body,
|
||
input,
|
||
textarea,
|
||
select {
|
||
@extend %new-type;
|
||
font-size: 16px;
|
||
line-height: 1.42857143;
|
||
}
|
||
|
||
dt {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
.page-wrapper {
|
||
position: relative;
|
||
min-height: 100%;
|
||
}
|
||
|
||
// Mobile Safari doesn't bubble mouse events by default, unless:
|
||
//
|
||
// - the target element of the event is a link or a form field.
|
||
// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
|
||
// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
|
||
//
|
||
// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
|
||
//
|
||
// This is a problem for us, because we bind a lot of click events as
|
||
// `document.on('click', '.my-element', …)` – which requires proper bubbling.
|
||
.ios .page-wrapper {
|
||
cursor: pointer;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
a {
|
||
color: $blue;
|
||
}
|
||
|
||
a[target="_blank"]::after {
|
||
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
|
||
margin: 0 3px 0 5px;
|
||
}
|
||
|
||
em {
|
||
font-style: italic;
|
||
}
|
||
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
sup {
|
||
vertical-align: super;
|
||
font-size: 0.83em;
|
||
}
|
||
|
||
small {
|
||
font-size: small;
|
||
}
|
||
|
||
.container {
|
||
@include horizontal-padding($default-padding);
|
||
max-width: $page-width + 2 * $default-padding;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.small-container {
|
||
@include horizontal-padding($default-padding);
|
||
max-width: $small-page-width + 2 * $default-padding;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|