323 lines
6.2 KiB
SCSS
323 lines
6.2 KiB
SCSS
*, *:hover, *:active, *:focus{
|
|
outline: none;
|
|
}
|
|
|
|
@import 'theme';
|
|
|
|
$vikunja-font: Quicksand, "Source Sans Pro", sans-serif;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: $vikunja-font;
|
|
}
|
|
|
|
.navbar-menu{
|
|
font-family: $vikunja-font;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hero.homepage-hero{
|
|
height: 100vh;
|
|
min-height: 700px;
|
|
overflow: hidden;
|
|
|
|
.hero-body {
|
|
background: url('../images/bg-3.jpg') no-repeat center fixed;
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
padding-bottom: 17vh !important;
|
|
padding-top: 25vh;
|
|
|
|
@media screen and (max-width:600px){
|
|
& {
|
|
padding-top: 5vh;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
.title, .subtitle {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4 a {
|
|
text-decoration: underline;
|
|
color: lighten($dark, 10) !important;
|
|
}
|
|
|
|
.button:first-child {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero-foot img {
|
|
max-width: 100vw;
|
|
width: 1000px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.feature-shoutout {
|
|
font-size: 1.2em;
|
|
|
|
svg{
|
|
height: 36px;
|
|
vertical-align: middle;
|
|
padding-right: 5px;
|
|
fill: #fff;
|
|
}
|
|
|
|
a{
|
|
color: darken($turquoise, 20%) !important;
|
|
}
|
|
}
|
|
|
|
.page{
|
|
margin: 2em auto;
|
|
min-height: calc(100vh - 57px - 10rem);
|
|
|
|
max-width: $desktop - (2 * $gap);
|
|
width: 100%;
|
|
|
|
.card{
|
|
margin-bottom: 2em;
|
|
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
|
|
color: #4a4a4a;
|
|
max-width: 100%;
|
|
position: relative;
|
|
border: none;
|
|
border-radius: 0.2em;
|
|
|
|
.media-content a{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.content{
|
|
padding: 0 1em;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
// Mobile Styles
|
|
|
|
.navbar-background{
|
|
-webkit-transition: opacity ease 300ms;
|
|
transition: opacity ease 300ms;
|
|
|
|
opacity: 0;
|
|
}
|
|
|
|
.navbar-menu{
|
|
-webkit-transition: all ease 300ms;
|
|
transition: all ease 300ms;
|
|
}
|
|
|
|
@media screen and (max-width:1087px){
|
|
.navbar-menu{
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: -160px;
|
|
z-index: 2;
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.navbar-menu .logo{
|
|
display: none;
|
|
}
|
|
|
|
.navbar-menu.is-active{
|
|
-webkit-transition: all ease 300ms;
|
|
transition: all ease 300ms;
|
|
left: 0;
|
|
|
|
.navbar-item{
|
|
padding: 0.5em 2em 0.5em 1.5em;
|
|
}
|
|
|
|
.logo{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.navbar-burger.burger{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
color: #fff;
|
|
}
|
|
|
|
.navbar-background.is-active{
|
|
background: rgba(0,0,0,0.5);
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
/// Test if `$value` is a valid direction
|
|
/// @param {*} $value - Value to test
|
|
/// @return {Bool}
|
|
@function is-direction($value) {
|
|
$is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
|
|
$is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
|
|
|
|
@return $is-keyword or $is-angle;
|
|
}
|
|
|
|
/// Convert a direction to legacy syntax
|
|
/// @param {Keyword | Angle} $value - Value to convert
|
|
/// @require {function} is-direction
|
|
/// @require {function} convert-angle
|
|
/// @throw Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.;
|
|
@function legacy-direction($value) {
|
|
@if is-direction($value) == false {
|
|
@error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
|
|
}
|
|
|
|
$conversion-map: (
|
|
to top : bottom,
|
|
to top right : bottom left,
|
|
to right top : left bottom,
|
|
to right : left,
|
|
to bottom right : top left,
|
|
to right bottom : left top,
|
|
to bottom : top,
|
|
to bottom left : top right,
|
|
to left bottom : right top,
|
|
to left : right,
|
|
to left top : right bottom,
|
|
to top left : bottom right
|
|
);
|
|
|
|
@if map-has-key($conversion-map, $value) {
|
|
@return map-get($conversion-map, $value);
|
|
}
|
|
|
|
@return 90deg - $value;
|
|
}
|
|
|
|
/// Mixin printing a linear-gradient
|
|
/// as well as a plain color fallback
|
|
/// and the `-webkit-` prefixed declaration
|
|
/// @access public
|
|
/// @param {Keyword | Angle} $direction - Linear gradient direction
|
|
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
|
|
@mixin linear-gradient($direction, $color-stops...) {
|
|
|
|
@if is-direction($direction) == false {
|
|
$color-stops: $direction, $color-stops;
|
|
$direction: 180deg;
|
|
}
|
|
|
|
background: nth(nth($color-stops, 1), 1);
|
|
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
|
|
background: linear-gradient($direction, $color-stops);
|
|
}
|
|
|
|
// Features page
|
|
.features{
|
|
@include linear-gradient(180deg, $primary, lighten($green, 15%));
|
|
|
|
.navbar{
|
|
border: none;
|
|
}
|
|
|
|
.is-white {
|
|
h1, h2, h3, & {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
a{
|
|
color: lighten($dark, 10%);
|
|
}
|
|
|
|
.content{
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.feature-hero{
|
|
.subtitle {
|
|
font-size: 1.7rem;
|
|
}
|
|
}
|
|
|
|
.columns.feature {
|
|
justify-content: space-between;
|
|
margin-bottom: 4em;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.column{
|
|
width: 48%;
|
|
flex-grow: 0;
|
|
flex-basis: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.columns.feature .column,
|
|
.columns.feature-shoutouts .column {
|
|
@media screen and (max-width: $tablet) {
|
|
width: 80% !important;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media screen and (max-width: #{$tablet - 300px}) {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.column.theimage {
|
|
text-align: center;
|
|
|
|
img,video{
|
|
box-shadow: .4em .4em 1em rgba(lighten($dark, 15%), .2);
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: lighten(#000, 10%);
|
|
|
|
a {
|
|
color: lighten(#000, 70%);
|
|
}
|
|
|
|
.button.coffee {
|
|
color: $white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vikunja-cloud-banner {
|
|
background: url('../images/bg-3.jpg') no-repeat center;
|
|
background-size: cover;
|
|
|
|
border-radius: 4px;
|
|
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
|
|
color: rgb(31, 41, 55);
|
|
padding: 11rem 0;
|
|
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|