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

203 lines
3.5 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';
2017-09-22 10:52:12 +00:00
@import "libs/_font-awesome/font-awesome";
2017-09-22 09:46:39 +00:00
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic');
/*
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 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)'
));
@include skel-layout((
reset: 'full',
boxModel: 'border',
grid: ( gutters: 1.5em )
));
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/cta';
2017-09-22 09:46:39 +00:00
/* Main */
2017-09-22 12:08:30 +00:00
#main {
> header {
@include padding(12em, 0);
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))'));
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
font-size: 1.75em;
margin: 0 0 (_size(element-margin) * 0.25) 0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
p {
color: inherit;
letter-spacing: _size(letter-spacing-alt);
text-transform: uppercase;
top: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
color: inherit;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(xlarge) {
@include padding(10em, 0);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(large) {
@include padding(8em, 3em);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
@include padding(10em, 3em);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
@include padding(5em, 3em);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
font-size: 1.25em;
margin: 0 0 (_size(element-margin) * 0.5) 0;
2017-09-22 09:46:39 +00:00
}
}
}
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 09:46:39 +00:00
}
}
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 {
@include padding(6em, 0);
background-color: darken(_palette(bg), 8);
text-align: center;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.icons {
font-size: 1.25em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
color: _palette(fg-light);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:hover {
color: _palette(fg);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.copyright {
color: _palette(fg-light);
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
list-style: none;
padding: 0;
text-transform: uppercase;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
border-left: solid 1px _palette(fg-light);
display: inline-block;
line-height: 1em;
margin-left: 1em;
padding-left: 1em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
color: inherit;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:hover {
color: _palette(fg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(xsmall) {
border: 0;
display: block;
line-height: 1.65em;
margin: 0;
padding: 0.5em 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
@include padding(4em, 3em);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
@include padding(3em, 2em);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Landing */
2017-09-22 12:08:30 +00:00
body.landing {
#page-wrapper {
padding-top: 0;
}
#footer {
background-color: darken(transparentize(_palette(bg), 0.1), 8);
}
}
body.is-mobile {
&.landing {
2017-09-22 09:46:39 +00:00
#page-wrapper {
2017-09-22 12:08:30 +00:00
background: none;
}
#banner,
.wrapper.style4 {
2017-09-22 12:44:13 +00:00
@include vendor('background-image', 'url("../../assets/images/banner.jpg")');
2017-09-22 09:46:39 +00:00
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#footer {
2017-09-22 12:08:30 +00:00
background-color: darken(_palette(bg), 8);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}