generated from hjess/PythonTemplateProject
Better CSS
All checks were successful
Build, Push, and Deploy to Nomad / docker-nomad (push) Successful in 34s
All checks were successful
Build, Push, and Deploy to Nomad / docker-nomad (push) Successful in 34s
This commit is contained in:
681
inspiration/html5up/assets/sass/main.scss
Normal file
681
inspiration/html5up/assets/sass/main.scss
Normal file
@@ -0,0 +1,681 @@
|
||||
@import 'libs/vars';
|
||||
@import 'libs/functions';
|
||||
@import 'libs/mixins';
|
||||
@import 'libs/vendor';
|
||||
@import 'libs/breakpoints';
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
|
||||
@import url('fontawesome-all.min.css');
|
||||
|
||||
/*
|
||||
Parallelism by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
// Breakpoints.
|
||||
|
||||
@include breakpoints((
|
||||
xlarge: ( 1281px, 1680px ),
|
||||
large: ( 981px, 1280px ),
|
||||
medium: ( 737px, 980px ),
|
||||
small: ( 481px, 736px ),
|
||||
xsmall: ( null, 480px )
|
||||
));
|
||||
|
||||
// Reset.
|
||||
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
|
||||
|
||||
html, body, div, span, applet, object,
|
||||
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||
pre, a, abbr, acronym, address, big, cite,
|
||||
code, del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var, b,
|
||||
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
|
||||
form, label, legend, table, caption, tbody,
|
||||
tfoot, thead, tr, th, td, article, aside,
|
||||
canvas, details, embed, figure, figcaption,
|
||||
footer, header, hgroup, menu, nav, output, ruby,
|
||||
section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* Basic */
|
||||
|
||||
// Set box model to border-box.
|
||||
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
@include vendor('background-image', ('url("images/overlay.png")', 'linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65))', 'url("../../images/bg.jpg")'));
|
||||
background-position: top left, bottom left, auto;
|
||||
background-size: auto, 100% 100%, cover;
|
||||
background-attachment: fixed;
|
||||
background-repeat: repeat, no-repeat, auto;
|
||||
position: relative;
|
||||
background-color: #150C07;
|
||||
line-height: 1.75em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
// Stops initial animations until page loads.
|
||||
&.is-preload {
|
||||
*, *:before, *:after {
|
||||
@include vendor('animation', 'none !important');
|
||||
@include vendor('transition', 'none !important');
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
background-attachment: scroll;
|
||||
background-size: auto, 100% 100%, 250% auto;
|
||||
background-repeat: repeat, no-repeat, no-repeat;
|
||||
background-position: top left, bottom left, 50% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
body, input, select, textarea {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
font-size: 13pt;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
@include breakpoint('<=xlarge') {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
font-size: 11pt;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-decoration: none;
|
||||
@include vendor('transition', 'color 0.25s ease-in-out');
|
||||
|
||||
&:hover {
|
||||
color: #d64760;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
color: #fff;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* List */
|
||||
|
||||
ul {
|
||||
&.icons {
|
||||
cursor: default;
|
||||
margin: 0 0 0.5em 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
margin-left: 1em;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
opacity: 0.35;
|
||||
color: #fff;
|
||||
@include vendor('transition', 'opacity 0.25s ease-in-out');
|
||||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
|
||||
.icon {
|
||||
@include icon;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
> .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.solid {
|
||||
&:before {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
&.brands {
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
#wrapper {
|
||||
min-height: 100vh;
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('justify-content', 'space-between');
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('transition', 'filter 0.5s ease-in-out');
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.is-poptrox-visible & {
|
||||
@include vendor('filter', 'blur(0.25em)');
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll Zone */
|
||||
|
||||
.scrollZone {
|
||||
position: fixed;
|
||||
width: 6rem;
|
||||
height: 100vh;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -ms-grab;
|
||||
cursor: grab;
|
||||
z-index: _misc(z-index-base) + 1;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
$border: 10px;
|
||||
|
||||
@include vendor('transition', 'opacity 1s ease-in-out');
|
||||
@include vendor('transition-delay', '0.5s');
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: -moz-min-content;
|
||||
width: -webkit-min-content;
|
||||
width: -ms-min-content;
|
||||
width: min-content;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: ($border * 0.5);
|
||||
|
||||
.items {
|
||||
@include vendor('display', 'flex');
|
||||
|
||||
> :last-child {
|
||||
border-right: solid $border #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
$width: 20em;
|
||||
|
||||
@include vendor('flex-grow', '0');
|
||||
@include vendor('flex-shrink', '0');
|
||||
margin: ($border * 0.5);
|
||||
height: 16em;
|
||||
box-shadow: 0 0 0 $border #ffffff;
|
||||
|
||||
&.span-1 {
|
||||
width: $width;
|
||||
}
|
||||
|
||||
&.span-2 {
|
||||
width: $width * 1.5;
|
||||
}
|
||||
|
||||
&.span-3 {
|
||||
width: $width * 2;
|
||||
}
|
||||
|
||||
&.intro {
|
||||
background-color: #d64760;
|
||||
background-image: url('images/overlay.png');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('justify-content', 'center');
|
||||
padding: 1em 3em;
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5em;
|
||||
margin: 0.5em 0 0 0;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
&.thumb {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
cursor: default;
|
||||
|
||||
h2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(18, 21, 29, 0.85);
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
font-weight: 400;
|
||||
line-height: 1em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include vendor('object-fit', 'cover');
|
||||
@include vendor('object-position', 'center');
|
||||
@include vendor('transition', 'opacity 0.75s ease-in-out');
|
||||
@include vendor('transition-delay', '1.25s');
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
&.delay-#{$i} {
|
||||
img {
|
||||
@include vendor('transition-delay', '#{1.25 + ($i * 0.125)}s');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
opacity: 0;
|
||||
|
||||
.item {
|
||||
&.thumb {
|
||||
img {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xlarge') {
|
||||
.item {
|
||||
$width: 17em;
|
||||
|
||||
height: 14em;
|
||||
|
||||
&.span-1 {
|
||||
width: $width;
|
||||
}
|
||||
|
||||
&.span-2 {
|
||||
width: $width * 1.5;
|
||||
}
|
||||
|
||||
&.span-3 {
|
||||
width: $width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
$border: 5px;
|
||||
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: ($border * 0.5);
|
||||
|
||||
.items {
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
@include vendor('justify-content', 'center');
|
||||
|
||||
> :last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
@include vendor('flex-grow', '1');
|
||||
@include vendor('flex-shrink', '1');
|
||||
width: calc(50vw - #{$border * 3}) !important;
|
||||
margin: ($border * 0.5);
|
||||
box-shadow: 0 0 0 $border #ffffff;
|
||||
|
||||
&.intro {
|
||||
width: calc(100vw - #{$border * 4}) !important;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
padding: 3em;
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.thumb {
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
.item {
|
||||
//width: calc(100vw - #{$border * 4}) !important;
|
||||
height: 10em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#footer {
|
||||
width: 100%;
|
||||
padding: 1.5em;
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('justify-content', 'space-between');
|
||||
position: relative;
|
||||
z-index: _misc(z-index-base) + 2;
|
||||
|
||||
> section {
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
max-width: 36em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
max-width: 36em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.25em;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
padding-left: 1em;
|
||||
border-left: solid 1px rgba(255, 255, 255, 0.25);
|
||||
line-height: 1em;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
@include vendor('flex-direction', 'column');
|
||||
|
||||
> section {
|
||||
&:first-child {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: left;
|
||||
margin: 1.5em 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
text-align: center;
|
||||
padding: 3em;
|
||||
|
||||
> section {
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
li {
|
||||
display: block;
|
||||
margin: 0.75em 0 0 0;
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
|
||||
.poptrox-popup {
|
||||
background: #1a1f2c;
|
||||
background: rgba(18, 21, 29, 0.9);
|
||||
box-shadow: 0px 0px 0px 10px #fff, 0px 10px 60px 10px rgba(8, 11, 19, 0.55);
|
||||
cursor: default;
|
||||
|
||||
.loader {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -24px 0 0 -24px;
|
||||
background: url('images/loader.gif');
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #1a1f2c;
|
||||
background: rgba(18, 21, 29, 0.85);
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
font-size: 1.25em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-next, .nav-previous {
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@include vendor('transition', 'opacity 0.25s ease-in-out');
|
||||
opacity: 0.35;
|
||||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next, .nav-previous {
|
||||
@include icon(false, solid);
|
||||
|
||||
text-transform: none !important;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
font-size: 3em;
|
||||
line-height: 75px;
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
right: 0;
|
||||
text-align: right;
|
||||
padding-right: 30px;
|
||||
&:before {
|
||||
content: '\f105';
|
||||
}
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
left: 0;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: '\f104';
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
background: #0a0f1c;
|
||||
box-shadow: 0px 0px 30px 10px rgba(8, 11, 19, 0.85);
|
||||
border: solid 2.5px #fff;
|
||||
@include vendor('box-sizing', 'content-box');
|
||||
|
||||
.caption {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user