mirror of https://github.com/IoTcat/ushio-net.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
3.9 KiB
209 lines
3.9 KiB
4 years ago
|
///
|
||
|
/// Fractal by HTML5 UP
|
||
|
/// html5up.net | @ajlkn
|
||
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||
|
///
|
||
|
|
||
|
/* Header */
|
||
|
|
||
|
#header {
|
||
|
@include color(accent1);
|
||
|
@include padding(4.5em, 0);
|
||
|
@include vendor('align-items', 'center');
|
||
|
@include vendor('display', 'flex');
|
||
|
@include vendor('justify-content', 'center');
|
||
|
background-image: url('images/overlay.png'), url('images/pattern-size1.svg');
|
||
|
background-position: top left, center center;
|
||
|
background-attachment: fixed, fixed;
|
||
|
background-size: auto, cover;
|
||
|
height: 100vh;
|
||
|
min-height: 35em;
|
||
|
|
||
|
h1 {
|
||
|
font-size: 3.25em;
|
||
|
font-weight: _font(weight-bold);
|
||
|
margin-bottom: _size(element-margin) * 0.25;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: 1.5em;
|
||
|
line-height: 1.35em;
|
||
|
|
||
|
br {
|
||
|
display: inline;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.content {
|
||
|
@include vendor('transition', ('opacity 0.5s ease', 'transform 1s ease'));
|
||
|
@include vendor('transform', 'translateX(0)');
|
||
|
opacity: 1;
|
||
|
text-align: right;
|
||
|
margin: (_size(element-margin) * -1.75) (_size(element-margin) * 2) 0 0;
|
||
|
|
||
|
> :last-child {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
.actions {
|
||
|
@include vendor('justify-content', 'flex-end');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.image {
|
||
|
@include vendor('transition', ('opacity 1s ease', 'transform 1s ease'));
|
||
|
@include vendor('transform', 'translateY(0)');
|
||
|
opacity: 1;
|
||
|
|
||
|
img {
|
||
|
@include vendor('transition', 'opacity 0.75s ease');
|
||
|
@include vendor('transition-delay', '0.75s');
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Large.
|
||
|
@include breakpoint('<=large') {
|
||
|
background-image: url('images/overlay.png'), url('images/pattern-size2.svg');
|
||
|
}
|
||
|
|
||
|
// Medium.
|
||
|
@include breakpoint('<=medium') {
|
||
|
height: auto;
|
||
|
min-height: 0;
|
||
|
|
||
|
.content {
|
||
|
margin: (_size(element-margin) * -1) (_size(element-margin) * 2) 0 0;
|
||
|
|
||
|
.actions {
|
||
|
@include vendor('justify-content', 'center');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Portrait.
|
||
|
@include orientation(portrait) {
|
||
|
@include padding(6em, 3em);
|
||
|
@include vendor('flex-direction', 'column-reverse');
|
||
|
|
||
|
.content {
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
margin: 0 0 _size(element-margin) 0;
|
||
|
}
|
||
|
|
||
|
.image {
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
// Small.
|
||
|
@include breakpoint('<=small') {
|
||
|
background-image: url('images/overlay.png'), url('images/pattern-size3.svg');
|
||
|
|
||
|
h1 {
|
||
|
font-size: 2em;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: 1em;
|
||
|
line-height: inherit;
|
||
|
}
|
||
|
|
||
|
// Landscape.
|
||
|
@include orientation(landscape) {
|
||
|
@include padding(2em, 2em);
|
||
|
|
||
|
.content {
|
||
|
margin: 0 _size(element-margin) _size(element-margin) 0;
|
||
|
}
|
||
|
|
||
|
.image {
|
||
|
font-size: 0.8em;
|
||
|
width: 15em;
|
||
|
max-width: 20vw;
|
||
|
|
||
|
.inner, &:before, &:after {
|
||
|
font-size: 0.8em;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Portrait.
|
||
|
@include orientation(portrait) {
|
||
|
@include padding(3em, 1.5em);
|
||
|
|
||
|
.image {
|
||
|
font-size: 0.6em;
|
||
|
max-width: 60vw;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
// XSmall.
|
||
|
@include breakpoint('<=xsmall') {
|
||
|
|
||
|
// Landscape.
|
||
|
@include orientation(landscape) {
|
||
|
@include padding(2em, 1.5em);
|
||
|
|
||
|
.image {
|
||
|
font-size: 0.7em;
|
||
|
}
|
||
|
|
||
|
.actions {
|
||
|
font-size: 0.8em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Portrait.
|
||
|
@include orientation(portrait) {
|
||
|
@include padding(2em, 1em);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
// Mobile.
|
||
|
body.is-mobile & {
|
||
|
background-attachment: scroll, scroll;
|
||
|
}
|
||
|
|
||
|
// Preload.
|
||
|
body.is-preload & {
|
||
|
.content {
|
||
|
@include vendor('transform', 'translateX(2em)');
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
.image {
|
||
|
@include vendor('transform', 'translateY(4em)');
|
||
|
opacity: 0;
|
||
|
|
||
|
img {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Medium.
|
||
|
@include breakpoint('<=medium') {
|
||
|
|
||
|
// Portrait.
|
||
|
@include orientation(portrait) {
|
||
|
.content {
|
||
|
@include vendor('transform', 'none');
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.image {
|
||
|
@include vendor('transform', 'translateY(2em)');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|