sharpetronics/jekyll-algolia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix some css for landing

Browse Source
This commit is contained in:
Lucas Bonomi 2018-01-26 17:04:50 +01:00 committed by Pixelastic
parent 70200abb5e
commit a06931e6f5
3 changed files with 62 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs-src/src/layouts/index.pug
View File

@ -75,7 +75,7 @@ block body
| output you want.
.col-md-2.col-sm-2.pos-rel.h700.hidden-sm.z-2
p#text-lines.w100p.m-l-n-large.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita.
p#text-lines.w100p.m-l-n-small.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita.
.col-md-2.col-sm-2.pos-rel.visible-sm
p#text-lines.w100p.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa

75
docs-src/src/stylesheets/pages/_index.scss
View File

@ -3,6 +3,7 @@
margin: auto;
}
@media (max-width: $screen-sm) {
.row {
margin: 0;
@ -78,13 +79,36 @@
width: 360px;
left: 0;
}
&:before,
&:after {
content:'';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(62,57,107, 0.4) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g fill="none" fill-rule="evenodd"><circle cx="75" cy="75" r="70" stroke="%23FFF" stroke-width="6"/><path fill="%23FFF" d="M106 75l-47 25V50z"/></g></svg>');
background-size: 150px;
background-repeat: no-repeat;
background-position: center center, center center;
z-index: 25;
border-radius: 6px;
}
&:before {
background: url(http://res.cloudinary.com/hilnmyskv/image/upload/q_10/v1516723333/minima-search_ay0ezw.png);
background-size: 100%;
z-index: 24;
}
&:hover:before,
&:hover:after {
display: none;
}
}
// @media (max-width: $screen-md) {
// * {
// background: red !important
// }
// }
.hero-bottom {
@media (max-width: $screen-sm) {
@ -199,10 +223,10 @@
top: 0;
left: 0;
background:
url(../assets/images/illu-funnel.svg) 505px 0% no-repeat,
url(../assets/images/touch-point.svg) 500px 285px no-repeat,
url(../assets/images/touch-point.svg) 500px 435px no-repeat,
url(../assets/images/servers.svg) 425px 100% no-repeat;
url(../assets/images/illu-funnel.svg) center 0% no-repeat,
url(../assets/images/touch-point.svg) calc(100% / 2 - 10px) 285px no-repeat,
url(../assets/images/touch-point.svg) calc(100% / 2 - 10px) 435px no-repeat,
url(../assets/images/servers.svg) center 100% no-repeat;
pointer-events: none;
z-index: 10;
@ -242,7 +266,7 @@
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, #f8faff 0%, transparent 30%, #f8faff 80%);
background: linear-gradient(to right, #f8faff 0%, rgba(#f8faff, 0) 30%, #f8faff 80%);
top: 0;
left: 0;
}
@ -251,7 +275,7 @@
width: 1000px;
&:after {
background: linear-gradient(to right, #f8faff, transparent 10%, #f8faff)
background: linear-gradient(to right, #f8faff, rgba( #f8faff, 0) 10%, #f8faff)
}
}
}
@ -332,32 +356,3 @@
}
// Gifs layer
.hero-animated {
&:before,
&:after {
content:'';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(62,57,107, 0.4) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g fill="none" fill-rule="evenodd"><circle cx="75" cy="75" r="70" stroke="%23FFF" stroke-width="6"/><path fill="%23FFF" d="M106 75l-47 25V50z"/></g></svg>');
background-size: 150px;
background-repeat: no-repeat;
background-position: center center, center center;
z-index: 25;
border-radius: 6px;
}
&:before {
background: url(http://res.cloudinary.com/hilnmyskv/image/upload/q_10/v1516723333/minima-search_ay0ezw.png);
z-index: 24;
}
&:hover:before,
&:hover:after {
display: none;
}
}

29
docs-src/src/stylesheets/partials/_helpers.sass
View File

@ -1,9 +1,32 @@
// Override some aerial.css classes
.text-heading
font-size: 48px
font-size: 48px
.h-auto
height: auto
height: auto
.m-l-n-large
margin-left: -26px
margin-left: -26px
$debug-color-alpha: gold
$debug-color-beta: red
[debug]
*
outline: 1px solid $debug-color-alpha
animation: none
&:before,
&:after
outline: 1px dashed $debug-color-beta !important
animation: none !important
&:hover
background: rgba($debug-color-alpha, 0.25) !important
&:hover:before,
&:hover:after
background: rgba($debug-color-beta, 0.25) !important