added more themes, update readme.md
This commit is contained in:
Worble
parent
b203448fe6
commit
332cec838a
20 changed files with 1248 additions and 88 deletions
131
sass/_blog.scss
131
sass/_blog.scss
|
|
@ -1,138 +1,137 @@
|
|||
html,
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar-brand .brand-text {
|
||||
font-size: 1.11rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.11rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
font-size: 3rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.article,
|
||||
.tag-list {
|
||||
.content p {
|
||||
line-height: 1.9;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.content p {
|
||||
line-height: 1.9;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-center {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.media-content {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.article {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 2rem;
|
||||
font-weight: lighter;
|
||||
line-height: 2;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: lighter;
|
||||
line-height: 2;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.article-footer,
|
||||
.article-body {
|
||||
margin: 2rem 0;
|
||||
margin: 2rem 0;
|
||||
|
||||
@include desktop {
|
||||
margin: 2rem 6rem;
|
||||
}
|
||||
@include desktop {
|
||||
margin: 2rem 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article-body {
|
||||
line-height: 1.4;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.article-footer {
|
||||
font-style: italic;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
|
||||
.button,
|
||||
.tag {
|
||||
font-style: normal;
|
||||
}
|
||||
.button,
|
||||
.tag {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.list.box {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>a {
|
||||
margin: 0.2rem;
|
||||
}
|
||||
> a {
|
||||
margin: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.paginator-container {
|
||||
padding: 2rem 0;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: none;
|
||||
max-height: 35rem;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
max-height: 35rem;
|
||||
overflow: auto;
|
||||
|
||||
@include desktop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: 3rem;
|
||||
width: 50rem;
|
||||
right: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
@include desktop {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 50rem;
|
||||
right: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results__items>li {
|
||||
list-style: none;
|
||||
margin-top: 1rem;
|
||||
.search-results__items > li {
|
||||
list-style: none;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-end {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input#search::placeholder {
|
||||
color: $grey-darker;
|
||||
color: $grey-darker;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 4rem;
|
||||
padding: 2rem;
|
||||
margin-top: 4rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
flex-grow: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.theme-select-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
131
sass/_vendor/lux/_overrides.scss
Normal file
131
sass/_vendor/lux/_overrides.scss
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
// Overrides
|
||||
@if $bulmaswatch-import-font {
|
||||
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans);
|
||||
}
|
||||
|
||||
body {
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 200ms ease;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25);
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button,
|
||||
.input,
|
||||
.pagination-ellipsis,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.select,
|
||||
.select select,
|
||||
.textarea,
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all 200ms ease;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.progress,
|
||||
.tag {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 0 0 1px $grey-lighter;
|
||||
|
||||
.card-header {
|
||||
box-shadow: 0 1px 0 0 $grey-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.navbar-link,
|
||||
.navbar-item {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.has-dropdown .navbar-item {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
background-color: $primary;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hero {
|
||||
.navbar {
|
||||
background-color: $navbar-background-color;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
a:not(.button) {
|
||||
color: $color-invert;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
40
sass/_vendor/lux/_variables.scss
Normal file
40
sass/_vendor/lux/_variables.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
////////////////////////////////////////////////
|
||||
// LUX
|
||||
////////////////////////////////////////////////
|
||||
$grey: #7f888f;
|
||||
$grey-light: lighten($grey, 10%);
|
||||
$grey-lighter: lighten($grey, 20%);
|
||||
|
||||
$green: #4bbf73;
|
||||
$blue: #1f9bcf;
|
||||
$red: #d9534f;
|
||||
|
||||
$primary: #222 !default;
|
||||
$link: $grey;
|
||||
|
||||
$family-sans-serif: "Nunito Sans", -apple-system, system-ui, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
$body-size: 14px;
|
||||
|
||||
$radius: 0;
|
||||
$radius-small: $radius;
|
||||
|
||||
$navbar-height: 5rem;
|
||||
$navbar-background-color: $primary;
|
||||
$navbar-item-color: $grey;
|
||||
$navbar-item-hover-color: #fff;
|
||||
$navbar-item-active-color: #fff;
|
||||
$navbar-item-hover-background-color: transparent;
|
||||
$navbar-item-active-background-color: transparent;
|
||||
$navbar-dropdown-arrow: #fff;
|
||||
$navbar-dropdown-background-color: $primary;
|
||||
$navbar-dropdown-border-top: 1px solid lighten($primary, 10);
|
||||
$navbar-divider-background-color: lighten($primary, 10);
|
||||
$navbar-dropdown-item-active-color: #fff;
|
||||
$navbar-dropdown-item-hover-color: $grey-lighter;
|
||||
$navbar-dropdown-item-hover-background-color: transparent;
|
||||
$navbar-dropdown-item-active-background-color: transparent;
|
||||
|
||||
$bulmaswatch-import-font: true !default;
|
||||
|
||||
$box-shadow: 0 0 0 1px $grey-lighter;
|
||||
179
sass/_vendor/slate/_overrides.scss
Normal file
179
sass/_vendor/slate/_overrides.scss
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
// Overrides
|
||||
@mixin btn-shadow($color) {
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
lighten($color, 6%) 0%,
|
||||
$color 60%,
|
||||
darken($color, 4%) 100%
|
||||
);
|
||||
filter: none;
|
||||
}
|
||||
@mixin btn-shadow-inverse($color) {
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
darken($color, 8%) 0%,
|
||||
darken($color, 4%) 40%,
|
||||
darken($color, 0%) 100%
|
||||
);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
|
||||
.button,
|
||||
.input,
|
||||
.pagination-ellipsis,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.select,
|
||||
.select select,
|
||||
.textarea,
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 200ms ease;
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&:not(.is-outlined):not(.is-inverted) {
|
||||
@include btn-shadow($color);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
@include btn-shadow-inverse($color);
|
||||
text-shadow: 1px 1px 1px rgba($black, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
a:not(.button) {
|
||||
color: $color-invert;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
.card-footer,
|
||||
.card-footer-item {
|
||||
border-width: 1px;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border: 1px solid $dark;
|
||||
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
color: rgba($white, 0.75);
|
||||
border-left: 1px solid rgba($white, 0.1);
|
||||
border-right: 1px solid rgba($black, 0.2);
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba($dark, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
border-left: 1px solid rgba($black, 0.2);
|
||||
background-color: rgba($black, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
color: rgba($color-invert, 0.75);
|
||||
|
||||
&.is-active {
|
||||
color: rgba($color-invert, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
.navbar {
|
||||
background-color: $background;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
a {
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
border-bottom-color: $link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.is-active {
|
||||
a {
|
||||
color: $primary-invert;
|
||||
border-bottom-color: $primary-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-card-body {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
}
|
||||
98
sass/_vendor/slate/_variables.scss
Normal file
98
sass/_vendor/slate/_variables.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
////////////////////////////////////////////////
|
||||
// SLATE
|
||||
////////////////////////////////////////////////
|
||||
$grey-lighter: #98a4ad;
|
||||
$grey-light: #7a8288;
|
||||
$grey: #52575c;
|
||||
$grey-dark: #3a3f44;
|
||||
$grey-darker: #272b30;
|
||||
|
||||
$orange: #f89406;
|
||||
$green: #62c462;
|
||||
$blue: #5bc0de;
|
||||
$red: #ee5f5b;
|
||||
|
||||
$primary: $grey !default;
|
||||
$warning: $orange;
|
||||
$warning-invert: #fff;
|
||||
|
||||
$black-bis: rgb(18, 18, 18);
|
||||
|
||||
$dark: darken($grey-darker, 3);
|
||||
|
||||
$border: $grey;
|
||||
|
||||
$size-7: 0.85rem;
|
||||
|
||||
$body-background-color: $grey-darker;
|
||||
$background: $grey-dark;
|
||||
$footer-background-color: $background;
|
||||
$button-background-color: $background;
|
||||
$button-border-color: lighten($button-background-color, 15);
|
||||
|
||||
$title-color: #aaa;
|
||||
$subtitle-color: $grey-light;
|
||||
$subtitle-strong-color: $grey-light;
|
||||
|
||||
$text: #aaa;
|
||||
$text-light: lighten($text, 10);
|
||||
$text-strong: darken($text, 5);
|
||||
|
||||
$box-shadow: none;
|
||||
$box-background-color: $grey-dark;
|
||||
|
||||
$card-shadow: none;
|
||||
$card-background-color: $grey-darker;
|
||||
$card-header-shadow: none;
|
||||
$card-header-background-color: rgba($black-bis, 0.2);
|
||||
$card-footer-background-color: rgba($black-bis, 0.2);
|
||||
|
||||
$link: #fafafa;
|
||||
$link-invert: $grey;
|
||||
$link-hover: lighten($link, 5);
|
||||
$link-focus: darken($link, 5);
|
||||
$link-active: darken($link, 15);
|
||||
$link-focus-border: darken($link, 5);
|
||||
$link-active-border: $link-focus-border;
|
||||
|
||||
$button-color: #fafafa;
|
||||
|
||||
$input-hover-color: $grey-light;
|
||||
$input-disabled-background-color: $grey-lighter;
|
||||
$input-disabled-border: $grey-lighter;
|
||||
$input-arrow: $primary;
|
||||
$label-color: $text;
|
||||
|
||||
$table-color: $text;
|
||||
$table-head: $grey-lighter;
|
||||
$table-background-color: $grey-dark;
|
||||
$table-cell-border: 1px solid $grey;
|
||||
|
||||
$table-row-hover-background-color: $grey-darker;
|
||||
$table-striped-row-even-background-color: $grey-darker;
|
||||
$table-striped-row-even-hover-background-color: lighten($grey-darker, 4);
|
||||
|
||||
$pagination-border-color: $border;
|
||||
|
||||
$navbar-height: 4rem;
|
||||
$navbar-background-color: $background;
|
||||
$navbar-item-color: rgba($link, 0.5);
|
||||
$navbar-item-hover-color: $link;
|
||||
$navbar-item-active-color: $link;
|
||||
$navbar-item-hover-background-color: darken($grey-dark, 5);
|
||||
$navbar-item-active-background-color: darken($grey-dark, 5);
|
||||
$navbar-dropdown-background-color: $background;
|
||||
$navbar-dropdown-item-hover-color: $link;
|
||||
$navbar-dropdown-item-active-color: $link;
|
||||
$navbar-dropdown-item-hover-background-color: darken($grey-dark, 5);
|
||||
$navbar-dropdown-item-active-background-color: darken($grey-dark, 5);
|
||||
|
||||
$dropdown-content-background-color: $background;
|
||||
$dropdown-item-color: $text;
|
||||
|
||||
$button-disabled-background-color: $grey-lighter;
|
||||
|
||||
$tabs-toggle-link-active-background-color: $background;
|
||||
$tabs-toggle-link-active-border-color: $border;
|
||||
$tabs-toggle-link-active-color: #fff;
|
||||
$tabs-boxed-link-active-background-color: $body-background-color;
|
||||
294
sass/_vendor/solar/_overrides.scss
Normal file
294
sass/_vendor/solar/_overrides.scss
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
// Overrides
|
||||
@if $bulmaswatch-import-font {
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400, 700, 400italic");
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: $grey-darker;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: $border-width;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
border-color: $grey;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 200ms ease;
|
||||
border-width: $border-width;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
|
||||
}
|
||||
|
||||
&.is-loading:after {
|
||||
border-color: transparent transparent $button-border-color
|
||||
$button-border-color;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
background-color: lighten($color, 7.5%);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $grey-lighter;
|
||||
}
|
||||
|
||||
.button,
|
||||
.input,
|
||||
.pagination-ellipsis,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.select,
|
||||
.select select,
|
||||
.textarea,
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all 200ms ease;
|
||||
box-shadow: none;
|
||||
border-width: $border-width;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.select {
|
||||
&:after,
|
||||
select {
|
||||
border-width: $border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
&.has-addons {
|
||||
.button,
|
||||
.input,
|
||||
.select {
|
||||
margin-right: -$border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
&::-webkit-progress-value {
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: $grey;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
$card-border-color: lighten($grey-darker, 5);
|
||||
border: $border-width solid $card-border-color;
|
||||
border-radius: $radius;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
.card-footer,
|
||||
.card-footer-item {
|
||||
border-width: $border-width;
|
||||
border-color: $card-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
a:not(.button) {
|
||||
color: $color-invert;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
a {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
background-color: $grey-darker;
|
||||
}
|
||||
|
||||
.modal-card-foot,
|
||||
.modal-card-head {
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
border-width: $border-width;
|
||||
border-color: $grey;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: $radius;
|
||||
|
||||
&.is-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
@include touch {
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
color: rgba($color-invert, 0.75);
|
||||
|
||||
&.is-active {
|
||||
color: $color-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
border-width: $border-width;
|
||||
}
|
||||
|
||||
.panel-block,
|
||||
.panel-heading,
|
||||
.panel-tabs {
|
||||
border-width: $border-width;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: $border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
a {
|
||||
border-width: $border-width;
|
||||
margin-bottom: -$border-width;
|
||||
|
||||
&.is-active {
|
||||
border-bottom-color: $link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-block {
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
|
||||
.panel-icon {
|
||||
color: $link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.panel-icon {
|
||||
color: $link-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
a {
|
||||
border-bottom-width: $border-width;
|
||||
margin-bottom: -$border-width;
|
||||
}
|
||||
|
||||
ul {
|
||||
border-bottom-width: $border-width;
|
||||
}
|
||||
|
||||
&.is-boxed {
|
||||
a {
|
||||
border-width: $border-width;
|
||||
}
|
||||
|
||||
li.is-active a {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-toggle {
|
||||
li a {
|
||||
border-width: $border-width;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-left: -$border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
117
sass/_vendor/solar/_variables.scss
Normal file
117
sass/_vendor/solar/_variables.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
////////////////////////////////////////////////
|
||||
// DARKLY
|
||||
////////////////////////////////////////////////
|
||||
$grey-lighter: #fdf6e3;
|
||||
$grey-light: #eee8d5;
|
||||
$grey: #839496;
|
||||
$grey-alt: #586e75;
|
||||
$grey-dark: #073642;
|
||||
$grey-darker: #002b36;
|
||||
|
||||
$orange: #cb4b16;
|
||||
$yellow: #b58900;
|
||||
$green: #859900;
|
||||
$cyan: #2aa198;
|
||||
$blue: #268bd2;
|
||||
$purple: #6c71c4;
|
||||
$red: #d33682;
|
||||
|
||||
$black-bis: rgb(18, 18, 18);
|
||||
|
||||
$primary: $cyan !default;
|
||||
$warning: $orange;
|
||||
$info: $blue;
|
||||
$yellow-invert: #fff;
|
||||
|
||||
$light: $grey-lighter;
|
||||
$dark: darken($grey-darker, 3);
|
||||
|
||||
$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
|
||||
|
||||
$radius-small: 3px;
|
||||
$radius: 0.4em;
|
||||
$radius-large: 8px;
|
||||
|
||||
$body-size: 15px;
|
||||
$size-7: 0.85em;
|
||||
|
||||
$title-weight: 500;
|
||||
$subtitle-weight: 400;
|
||||
$subtitle-color: $grey-dark;
|
||||
|
||||
$border-width: 2px;
|
||||
$border: $grey-dark;
|
||||
|
||||
$body-background-color: $grey-darker;
|
||||
$background: $grey-dark;
|
||||
$footer-background-color: $background;
|
||||
|
||||
$title-color: $grey;
|
||||
$subtitle-color: $grey-alt;
|
||||
$subtitle-strong-color: $grey-light;
|
||||
|
||||
$text: $grey;
|
||||
$text-light: lighten($text, 10);
|
||||
$text-strong: darken($text, 5);
|
||||
|
||||
$box-shadow: none;
|
||||
$box-background-color: $grey-dark;
|
||||
|
||||
$card-shadow: none;
|
||||
$card-background-color: $grey-darker;
|
||||
$card-header-box-shadow: none;
|
||||
$card-header-background-color: rgba($black-bis, 0.2);
|
||||
$card-footer-background-color: rgba($black-bis, 0.2);
|
||||
|
||||
$link: $yellow;
|
||||
$link-hover: $grey-light;
|
||||
$link-hover-border: $grey-light;
|
||||
$link-focus: darken($grey-light, 10);
|
||||
$link-focus-border: $grey-light;
|
||||
$link-active: darken($grey-light, 10);
|
||||
|
||||
$button-color: $grey;
|
||||
$button-background-color: $background;
|
||||
$button-border-color: $grey;
|
||||
|
||||
$input-color: $grey;
|
||||
$input-icon-color: darken($grey-light, 10);
|
||||
$input-background-color: $grey-lighter;
|
||||
$input-border-color: darken($grey-light, 10);
|
||||
$input-hover-color: $grey-light;
|
||||
$input-disabled-background-color: $grey-dark;
|
||||
$input-disabled-border-color: $grey-dark;
|
||||
|
||||
$table-color: $text;
|
||||
$table-head-color: $grey-lighter;
|
||||
$table-background-color: $grey-dark;
|
||||
$table-cell-border: 1px solid $grey;
|
||||
|
||||
$table-row-hover-background-color: $grey-darker;
|
||||
$table-striped-row-even-background-color: $grey-darker;
|
||||
$table-striped-row-even-hover-background-color: lighten($grey-darker, 4);
|
||||
|
||||
$pagination-border-color: $border;
|
||||
|
||||
$navbar-background-color: $grey-dark;
|
||||
$navbar-item-color: $grey;
|
||||
$navbar-item-hover-color: $grey-lighter;
|
||||
$navbar-item-active-color: $grey-lighter;
|
||||
$navbar-item-active-background-color: transparent;
|
||||
$navbar-item-hover-background-color: transparent;
|
||||
$navbar-dropdown-border-top: 1px solid $grey-darker;
|
||||
$navbar-divider-background-color: $grey-darker;
|
||||
$navbar-dropdown-arrow: #fff;
|
||||
$navbar-dropdown-background-color: $grey-dark;
|
||||
$navbar-dropdown-item-hover-color: $grey-lighter;
|
||||
$navbar-dropdown-item-hover-background-color: lighten($grey-darker, 4);
|
||||
$navbar-dropdown-item-active-background-color: lighten($grey-darker, 4);
|
||||
$navbar-dropdown-item-active-color: $grey-lighter;
|
||||
|
||||
$dropdown-content-background-color: $background;
|
||||
$dropdown-item-color: $text;
|
||||
$dropdown-item-hover-color: $link-hover;
|
||||
|
||||
$bulmaswatch-import-font: true !default;
|
||||
123
sass/_vendor/superhero/_overrides.scss
Normal file
123
sass/_vendor/superhero/_overrides.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
// Overrides
|
||||
@if $bulmaswatch-import-font {
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:300, 400, 700");
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
background-color: darken($button-background-color, 3%);
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
background-color: darken($color, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading:after {
|
||||
border-color: transparent transparent $grey-light $grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $grey-lighter;
|
||||
}
|
||||
|
||||
.notification {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
a:not(.button) {
|
||||
color: $color-invert;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
.card-footer,
|
||||
.card-footer-item {
|
||||
border-width: 1px;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
&.is-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
@include touch {
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
color: $color-invert;
|
||||
|
||||
&.is-active {
|
||||
color: rgba($color-invert, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-burger {
|
||||
span {
|
||||
background-color: $color-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
.navbar {
|
||||
.navbar-dropdown {
|
||||
.navbar-item {
|
||||
color: $grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
94
sass/_vendor/superhero/_variables.scss
Normal file
94
sass/_vendor/superhero/_variables.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
////////////////////////////////////////////////
|
||||
// SUPERHERO
|
||||
////////////////////////////////////////////////
|
||||
$grey-darker: #1f2d3b;
|
||||
$grey-dark: #2b3e50;
|
||||
$grey: #4e5d6c;
|
||||
$grey-light: #8694a4;
|
||||
$grey-lighter: #dee5ed;
|
||||
|
||||
$orange: #df691a;
|
||||
$yellow: #f0ad4e;
|
||||
$green: #5cb85c;
|
||||
$blue: #5bc0de;
|
||||
$red: #d9534f;
|
||||
|
||||
$primary: $orange !default;
|
||||
|
||||
$dark: darken($grey-darker, 3);
|
||||
|
||||
$title-color: $grey-lighter;
|
||||
$title-weight: 400;
|
||||
$subtitle-strong-color: $grey-lighter;
|
||||
$subtitle-color: darken($grey-lighter, 10);
|
||||
$subtitle-strong-color: darken($grey-lighter, 10);
|
||||
|
||||
$background: $grey-dark;
|
||||
$body-background-color: $grey-darker;
|
||||
$footer-background-color: $background;
|
||||
|
||||
$border: $grey;
|
||||
|
||||
$family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
$text: $grey-lighter;
|
||||
$text-strong: darken($grey-lighter, 10);
|
||||
$text-light: $grey-light;
|
||||
|
||||
$box-background-color: $background;
|
||||
|
||||
$card-shadow: none;
|
||||
$card-background-color: darken($body-background-color, 1);
|
||||
$card-header-box-shadow: none;
|
||||
$card-header-background-color: darken($body-background-color, 3);
|
||||
$card-footer-background-color: darken($body-background-color, 3);
|
||||
|
||||
$link: $grey-light;
|
||||
$link-hover: $grey-lighter;
|
||||
$link-focus: $grey-lighter;
|
||||
$link-active: $grey-lighter;
|
||||
|
||||
$button-color: $grey-lighter;
|
||||
$button-background-color: $grey;
|
||||
$button-border-color: $grey;
|
||||
|
||||
$button-hover-border: transparent;
|
||||
$button-active-border-color: transparent;
|
||||
|
||||
$radius: 0;
|
||||
$radius-small: 0;
|
||||
|
||||
$input-hover-color: $link-hover;
|
||||
|
||||
$table-color: $text;
|
||||
$table-head-color: $grey-lighter;
|
||||
$table-background-color: $grey-dark;
|
||||
$table-cell-border: 1px solid $grey;
|
||||
$table-row-hover-background-color: $grey-darker;
|
||||
$table-striped-row-even-background-color: $grey-darker;
|
||||
$table-striped-row-even-hover-background-color: lighten($grey-darker, 4);
|
||||
|
||||
$navbar-background-color: $background;
|
||||
$navbar-item-color: $text;
|
||||
$navbar-item-hover-color: $grey-light;
|
||||
$navbar-item-active-color: $primary;
|
||||
$navbar-item-hover-background-color: rgba($grey-darker, 0.1);
|
||||
$navbar-item-active-background-color: rgba($grey-darker, 0.1);
|
||||
$navbar-dropdown-item-hover-color: $grey-light;
|
||||
$navbar-dropdown-item-active-color: $primary;
|
||||
$navbar-dropdown-background-color: $background;
|
||||
$navbar-dropdown-arrow: currentColor;
|
||||
|
||||
$dropdown-content-background-color: $background;
|
||||
$dropdown-item-color: $text;
|
||||
$dropdown-item-hover-color: $text-light;
|
||||
|
||||
$tabs-toggle-link-active-background-color: $background;
|
||||
$tabs-toggle-link-active-border-color: $border;
|
||||
$tabs-toggle-link-active-color: #fff;
|
||||
$tabs-boxed-link-active-background-color: $body-background-color;
|
||||
|
||||
$pagination-color: $link;
|
||||
$pagination-border-color: $border;
|
||||
|
||||
$bulmaswatch-import-font: true !default;
|
||||
5
sass/lux.scss
Normal file
5
sass/lux.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "./_vendor/lux/variables";
|
||||
@import "./_vendor/bulma-0.7.4/_bulma.sass";
|
||||
@import "./_vendor/lux/overrides";
|
||||
|
||||
@import "./blog";
|
||||
5
sass/slate.scss
Normal file
5
sass/slate.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "./_vendor/slate/variables";
|
||||
@import "./_vendor/bulma-0.7.4/_bulma.sass";
|
||||
@import "./_vendor/slate/overrides";
|
||||
|
||||
@import "./blog";
|
||||
5
sass/solar.scss
Normal file
5
sass/solar.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "./_vendor/solar/variables";
|
||||
@import "./_vendor/bulma-0.7.4/_bulma.sass";
|
||||
@import "./_vendor/solar/overrides";
|
||||
|
||||
@import "./blog";
|
||||
5
sass/superhero.scss
Normal file
5
sass/superhero.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "./_vendor/superhero/variables";
|
||||
@import "./_vendor/bulma-0.7.4/_bulma.sass";
|
||||
@import "./_vendor/superhero/overrides";
|
||||
|
||||
@import "./blog";
|
||||
Loading…
Add table
Add a link
Reference in a new issue