chore: cleanup
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
22e591a653
commit
25299b3556
GPG Key ID:
F40E70337AB24C9B
57
gulpfile.js
57
gulpfile.js
|
|
@ -1,57 +0,0 @@
|
|||
const gulp = require('gulp');
|
||||
const sass = require('gulp-sass');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const tar = require('gulp-tar-path');
|
||||
const gzip = require('gulp-gzip');
|
||||
const clean = require('gulp-clean');
|
||||
const cleanCSS = require('gulp-clean-css');
|
||||
const hash = require('gulp-hash-filename');
|
||||
const replace = require('gulp-replace');
|
||||
|
||||
const sources = [
|
||||
'archetypes',
|
||||
'i18n',
|
||||
'layouts',
|
||||
'static',
|
||||
'DCO',
|
||||
'LICENSE',
|
||||
'README.md',
|
||||
'theme.toml'
|
||||
];
|
||||
|
||||
gulp.task('default', ['sass']);
|
||||
gulp.task('prod', ['sass-prod'])
|
||||
|
||||
gulp.task('release', () => {
|
||||
return gulp.src(sources)
|
||||
.pipe(tar('main.tar'))
|
||||
.pipe(gzip())
|
||||
.pipe(gulp.dest('dist'))
|
||||
});
|
||||
|
||||
gulp.task('sass', () => {
|
||||
return gulp.src('./src/main.scss')
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('./static/styles'));
|
||||
});
|
||||
|
||||
gulp.task('sass-prod', () => {
|
||||
return gulp.src('./src/main.scss')
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(replace('../static', '..'))
|
||||
.pipe(hash())
|
||||
.pipe(gulp.dest('./static/styles'));
|
||||
})
|
||||
|
||||
gulp.task('clean', () => {
|
||||
return gulp.src(['dist', 'static/styles'])
|
||||
.pipe(clean());
|
||||
});
|
||||
|
||||
gulp.task('watch', () => {
|
||||
return gulp.watch('./src/*.scss', ['sass']);
|
||||
});
|
||||
271
src/_theme.scss
271
src/_theme.scss
|
|
@ -1,271 +0,0 @@
|
|||
@import url('../static/fonts/fonts.css');
|
||||
@import 'variables';
|
||||
@import '../node_modules/bulma/bulma';
|
||||
|
||||
*, *:hover, *:active, *:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all $transition;
|
||||
border: 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
height: 2.648em;
|
||||
box-shadow: 0 0 .7em lighten($dark, 10);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: 0 0 1em lighten($dark, 15);
|
||||
}
|
||||
|
||||
&.is-light {
|
||||
box-shadow: 0 0 .7em lighten($dark, 75);
|
||||
}
|
||||
|
||||
&.fullheight{
|
||||
padding-right: 7px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: 0 0 0.3em darken($dark, 20) !important;
|
||||
}
|
||||
|
||||
&.icon-only{
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: .1em .1em .5em darken($color, 15);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: 0 0 .3em darken($color, 30) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.noshadow{
|
||||
&,
|
||||
&.is-hovered,
|
||||
&:hover,
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.coffee {
|
||||
padding: 1em 1.5em;
|
||||
height: auto;
|
||||
|
||||
// Shadow from the original button
|
||||
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5);
|
||||
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all $transition;
|
||||
box-shadow: none;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
border-color: darken($color, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select:after {
|
||||
margin-top: -0.575em;
|
||||
}
|
||||
|
||||
.select select {
|
||||
border-width: $thickness;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: calc(2.25em + #{$thickness});
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.field.has-addons {
|
||||
.control .select select {
|
||||
height: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
border: $thickness solid $border;
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.is-#{$name} {
|
||||
border-color: darken($color, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
border-radius: $radius-large;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba($grey-lighter, 0.075);
|
||||
border-radius: $radius;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box,.card{
|
||||
border: $thickness solid $border;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
}
|
||||
|
||||
.message {
|
||||
.message-body {
|
||||
border: $thickness solid;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
.navbar {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 2;
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
border-color: darken($color, 5);
|
||||
}
|
||||
}
|
||||
.navbar-dropdown {
|
||||
box-shadow: $navbar-dropdown-boxed-shadow;
|
||||
top: 101%;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
border-width: $thickness;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-family: $vikunja-font;
|
||||
}
|
||||
|
||||
.bigbuttons{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.buttonright {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar.main-theme {
|
||||
background: $light-background;
|
||||
z-index: 5 !important;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.navbar-brand {
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: .5em;
|
||||
|
||||
*:not(:last-child) {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
|
||||
$black: hsl(0, 0%, 4%) !default
|
||||
|
||||
$orange: #ff851b;
|
||||
$green: #00CE6E;
|
||||
$red: #ff4136;
|
||||
$blue: #1973ff;
|
||||
$primary: $blue;
|
||||
$dark: lighten($black, 8);
|
||||
|
||||
$info-invert: #fff;
|
||||
$family-sans-serif: 'Source Sans Pro', Helvetica, Arial, sans-serif;
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: darken($primary, 5);
|
||||
$navbar-item-active-color: $primary;
|
||||
$dropdown-content-shadow: none;
|
||||
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$light-background: #F1F5F8;
|
||||
$transition-duration: 100ms;
|
||||
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
$vikunja-light-text: darken(#fff, 10%);
|
||||
$vikunja-blue: #7F23FF;// #7F23FF; // #5974d9
|
||||
$vikunja-green: #4DB788;
|
||||
|
||||
$navbar-padding: 2em;
|
||||
$vikunja-nav-background: $light-background;
|
||||
$vikunja-nav-color: lighten($black, 25);
|
||||
$vikunja-nav-selected-width: 0.4em;
|
||||
|
||||
$transition: 150ms ease;
|
||||
|
||||
$scrollbar-height: 8px;
|
||||
$scrollbar-track-color: lighten($dark, 65);
|
||||
$scrollbar-thumb-color: lighten($dark, 40);
|
||||
$scrollbar-hover-color: lighten($dark, 30);
|
||||
322
src/main.scss
322
src/main.scss
|
|
@ -1,322 +0,0 @@
|
|||
*, *: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;
|
||||
}
|
||||
Loading…
Reference in New Issue