mirror of
https://gitlab.com/redline-racing-division/redline-racing-website.git
synced 2025-07-30 10:01:28 +00:00
fancy shirt site
This commit is contained in:
18
shirt/assets/sass/layout/_footer.scss
Normal file
18
shirt/assets/sass/layout/_footer.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
///
|
||||
/// Multiverse by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
.copyright {
|
||||
color: _palette(fg-light);
|
||||
font-size: 0.9em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
127
shirt/assets/sass/layout/_header.scss
Normal file
127
shirt/assets/sass/layout/_header.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
///
|
||||
/// Multiverse by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Header */
|
||||
|
||||
body {
|
||||
padding: 0 0 _size(header) 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
@include vendor('transition', 'transform #{_duration(header)} ease');
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
background: _palette(bg-alt);
|
||||
bottom: -1em;
|
||||
height: _size(header) + 1em;
|
||||
left: 0;
|
||||
line-height: _size(header);
|
||||
padding: 0 1.5em;
|
||||
position: fixed;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
z-index: _misc(z-index-base) + 2;
|
||||
|
||||
body.is-preload & {
|
||||
@include vendor('transform', 'translateY(#{_size(header)})');
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: _palette(fg);
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
> ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
@include vendor('transition', 'background-color #{_duration(panel)} ease');
|
||||
border: 0;
|
||||
color: _palette(fg-bold);
|
||||
display: inline-block;
|
||||
letter-spacing: _font(kerning-alt);
|
||||
padding: 0 1.65em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.icon {
|
||||
&:before {
|
||||
color: _palette(fg-light);
|
||||
float: right;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: _palette(fg-bold) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: _palette(bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
body {
|
||||
padding: _size(header) 0 0 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
bottom: auto;
|
||||
height: _size(header);
|
||||
padding: 0 1em;
|
||||
top: 0;
|
||||
|
||||
body.is-preload & {
|
||||
@include vendor('transform', 'translateY(#{_size(header) * -0.85})');
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
nav {
|
||||
> ul {
|
||||
> li {
|
||||
a {
|
||||
font-size: 0.9em;
|
||||
padding: 0 1.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
177
shirt/assets/sass/layout/_main.scss
Normal file
177
shirt/assets/sass/layout/_main.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
///
|
||||
/// Multiverse by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
@include vendor('transition', (
|
||||
'-moz-filter #{_duration(panel)} ease',
|
||||
'-webkit-filter #{_duration(panel)} ease',
|
||||
'-ms-filter #{_duration(panel)} ease',
|
||||
'filter #{_duration(panel)} ease'
|
||||
));
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
-webkit-tap-highlight-color: rgba(255,255,255,0);
|
||||
|
||||
.thumb {
|
||||
@include vendor('transition', (
|
||||
'opacity 1.25s ease-in-out'
|
||||
));
|
||||
@include vendor('pointer-events', 'auto');
|
||||
-webkit-tap-highlight-color: rgba(255,255,255,0);
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
@include vendor('background-image', 'linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%)');
|
||||
@include vendor('pointer-events', 'none');
|
||||
background-size: cover;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .image {
|
||||
-webkit-tap-highlight-color: rgba(255,255,255,0);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
@include vendor('pointer-events', 'none');
|
||||
bottom: (1.5em / 0.8);
|
||||
font-size: 0.8em;
|
||||
left: (1.75em / 0.8);
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(panel)} ease',
|
||||
'visibility #{_duration(panel)}',
|
||||
));
|
||||
background: _palette(bg-overlay);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
body.ie & {
|
||||
background: _palette(bg-ie-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
body.content-active & {
|
||||
@include vendor('filter', 'blur(6px)');
|
||||
|
||||
&:after {
|
||||
@include vendor('pointer-events', 'auto');
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
.thumb {
|
||||
@include vendor('pointer-events', 'none');
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin thumb($rows, $columns, $pad, $minHeight) {
|
||||
$baseDelay: _duration(header) - 0.5;
|
||||
$defaultDelay: $baseDelay + (((($rows * $columns) + 1) * 1.5) * _duration(thumb));
|
||||
|
||||
.thumb {
|
||||
@include vendor('transition-delay', '#{$defaultDelay}');
|
||||
height: calc(#{100vh / ($rows + $pad)} - #{_size(header) / $rows});
|
||||
min-height: $minHeight;
|
||||
width: (100% / $columns);
|
||||
|
||||
@for $i from 1 through (($rows * $columns) * 1.5) {
|
||||
&:nth-child(#{$i}) {
|
||||
@include vendor('transition-delay', '#{$baseDelay + ($i * _duration(thumb))}');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default.
|
||||
@include thumb(
|
||||
_misc(main-layout, default, rows),
|
||||
_misc(main-layout, default, columns),
|
||||
_misc(main-layout, default, pad),
|
||||
_misc(main-layout, default, minHeight)
|
||||
);
|
||||
|
||||
// XLarge.
|
||||
@include breakpoint('<=xlarge') {
|
||||
@include thumb(
|
||||
_misc(main-layout, xlarge, rows),
|
||||
_misc(main-layout, xlarge, columns),
|
||||
_misc(main-layout, xlarge, pad),
|
||||
_misc(main-layout, xlarge, minHeight)
|
||||
);
|
||||
}
|
||||
|
||||
// Large.
|
||||
@include breakpoint('<=large') {
|
||||
@include thumb(
|
||||
_misc(main-layout, large, rows),
|
||||
_misc(main-layout, large, columns),
|
||||
_misc(main-layout, large, pad),
|
||||
_misc(main-layout, large, minHeight)
|
||||
);
|
||||
}
|
||||
|
||||
// Medium.
|
||||
@include breakpoint('<=medium') {
|
||||
@include thumb(
|
||||
_misc(main-layout, medium, rows),
|
||||
_misc(main-layout, medium, columns),
|
||||
_misc(main-layout, medium, pad),
|
||||
_misc(main-layout, medium, minHeight)
|
||||
);
|
||||
}
|
||||
|
||||
// XSmall.
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include thumb(
|
||||
_misc(main-layout, xsmall, rows),
|
||||
_misc(main-layout, xsmall, columns),
|
||||
_misc(main-layout, xsmall, pad),
|
||||
_misc(main-layout, xsmall, minHeight)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
88
shirt/assets/sass/layout/_wrapper.scss
Normal file
88
shirt/assets/sass/layout/_wrapper.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
///
|
||||
/// Multiverse by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
#wrapper {
|
||||
@include vendor('transition', (
|
||||
'-moz-filter #{_duration(panel)} ease',
|
||||
'-webkit-filter #{_duration(panel)} ease',
|
||||
'-ms-filter #{_duration(panel)} ease',
|
||||
'filter #{_duration(panel)} ease'
|
||||
));
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(modal)} ease',
|
||||
'visibility #{_duration(modal)}',
|
||||
));
|
||||
background: _palette(bg-overlay-alt);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
body.ie & {
|
||||
background: _palette(bg-ie-overlay-alt);
|
||||
}
|
||||
}
|
||||
|
||||
body.modal-active & {
|
||||
@include vendor('filter', 'blur(8px)');
|
||||
|
||||
&:after {
|
||||
@include vendor('pointer-events', 'auto');
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: _misc(z-index-base) + 3;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('animation', 'spinner 1s infinite linear !important');
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', (
|
||||
'top 0.75s ease-in-out',
|
||||
'opacity 0.35s ease-out',
|
||||
'visibility 0.35s'
|
||||
));
|
||||
background-image: url('images/spinner.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
height: 2em;
|
||||
left: 50%;
|
||||
line-height: 2em;
|
||||
margin: -1em 0 0 -1em;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 75%;
|
||||
visibility: hidden;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
&:before {
|
||||
@include vendor('transition', 'opacity 1s ease-out !important');
|
||||
@include vendor('transition-delay', '0.5s !important');
|
||||
opacity: 0.25;
|
||||
top: 50%;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user