The theme Vikunja uses for the website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

322 lines
6.2 KiB

*, *: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;
}