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/main.scss

261 lines
4.3 KiB
SCSS
Raw Normal View History

2017-09-22 10:52:12 +00:00
---
---
2017-09-22 09:46:39 +00:00
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
/*
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
2017-09-22 09:46:39 +00:00
*/
2017-09-22 12:08:30 +00:00
@import 'libs/skel';
@include skel-breakpoints((
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
2017-09-22 12:08:30 +00:00
));
@include skel-layout((
reset: 'full',
boxModel: 'border',
grid: ( gutters: 1.5em )
2017-09-22 12:08:30 +00:00
));
2017-09-22 09:46:39 +00:00
@import 'components/basic';
@import 'components/section';
@import 'components/form';
@import 'components/box';
@import 'components/image';
@import 'components/list';
@import 'components/table';
@import 'components/button';
@import 'components/features';
@import 'components/spotlight';
@import 'components/wrapper';
@import 'components/menu';
@import 'components/header';
@import 'components/banner';
@import 'components/contact';
@import 'components/highlighting';
2017-09-22 09:46:39 +00:00
/* Main */
2017-09-22 12:08:30 +00:00
#main {
2019-11-14 02:23:09 +00:00
> header:before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -1;
display: block;
background-image: inherit;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
filter: blur(3px) brightness(40%);
}
> header {
@include padding(12em, 0);
2017-09-29 11:05:12 +00:00
position: relative;
text-align: center;
2019-11-14 02:23:09 +00:00
z-index: -2;
2017-09-29 11:05:12 +00:00
> * {
position: relative;
z-index: 1;
}
h2 {
font-size: 1.75em;
margin: 0 0 (_size(element-margin) * 0.25) 0;
}
p {
color: inherit;
letter-spacing: _size(letter-spacing-alt);
text-transform: uppercase;
top: 0;
a {
color: inherit;
}
}
@include breakpoint(xlarge) {
@include padding(10em, 0);
}
@include breakpoint(large) {
@include padding(8em, 3em);
}
@include breakpoint(medium) {
@include padding(10em, 3em);
}
@include breakpoint(small) {
@include padding(5em, 3em);
h2 {
font-size: 1.25em;
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
body.is-mobile {
#main {
> header {
background-attachment: scroll;
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Footer */
2017-09-22 12:08:30 +00:00
#footer {
2018-08-21 17:10:29 +00:00
padding: 4em 0 3.5em;
background-color: darken(_palette(bg), 8);
text-align: center;
2018-08-21 17:10:29 +00:00
color: rgba(255, 255, 255, 0.7);
.icons {
font-size: 1.25em;
a {
&:hover {
color: _palette(fg);
}
}
}
2020-02-05 20:51:34 +00:00
.copyright, .cotech-text {
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
2020-02-05 20:51:34 +00:00
text-transform: uppercase;
2020-02-05 20:51:34 +00:00
}
.copyright {
list-style: none;
padding: 0.25em 0;
li {
border-left: solid 1px _palette(fg-light);
display: inline-block;
line-height: 1em;
margin-left: 1em;
padding-left: 1em;
&:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
a {
color: inherit;
&:hover {
color: _palette(fg);
}
}
@include breakpoint(xsmall) {
border: 0;
display: block;
line-height: 1.65em;
margin: 0;
padding: 0.5em 0;
}
}
}
2020-02-05 20:51:34 +00:00
.row {
display: flex;
margin: 0 10%;
2020-02-24 11:13:10 +00:00
flex-wrap: wrap;
justify-content: space-evenly;
2020-02-05 20:51:34 +00:00
}
.column {
flex: 50%;
}
.cotech-box {
2020-02-24 11:13:10 +00:00
padding-bottom: 1em;
2020-02-05 20:51:34 +00:00
}
.cotech-text {
vertical-align: middle;
}
.cotech-logo {
height: 1em;
vertical-align: text-bottom;
}
@include breakpoint(medium) {
2020-02-24 11:13:10 +00:00
@include padding(4em, 0em);
}
@include breakpoint(small) {
2020-02-24 11:13:10 +00:00
@include padding(3em, 0em);
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2020-02-05 20:51:34 +00:00
2017-09-22 09:46:39 +00:00
/* Landing */
2017-09-22 12:08:30 +00:00
body.landing {
#page-wrapper {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0;
}
#page-wrapper {
padding-top: 0;
}
#footer {
background-color: darken(transparentize(_palette(bg), 0.1), 8);
}
2017-09-22 12:08:30 +00:00
}
body.is-mobile {
&.landing {
#page-wrapper {
background: none;
}
#banner,
.wrapper.style4 {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#footer {
background-color: darken(_palette(bg), 8);
}
}
}