Adds footer, simplifies default-theme.scss
Torey Heinz
committed Apr 11, 2020
commit ea665caeb57a6df810809aeaa53f9aeb93e58a18
Showing 3
changed files with
25 additions
and 161 deletions
src/layouts/Default.vue
+3
-1
| @@ | @@ -29,7 +29,9 @@ |
| div.main.container.section | |
| slot | |
| - | footer.has-text-centered |
| + | footer.footer.has-text-centered |
| + | p Anchor Rock Foundation Inc. |
| + | |
| </template> | |
| <static-query> | |
src/scss/_theme-default.scss
+15
-160
| @@ | @@ -1,181 +1,36 @@ |
| /* We'll need some initial vars to use here */ | |
| @import "~bulma/sass/utilities/initial-variables"; | |
| + | |
| /* Base: Size */ | |
| $size-base: 1rem; | |
| $default-padding: $size-base * 1.5; | |
| $widescreen-enabled: false; | |
| $fullhd-enabled: false; | |
| - | /* Default font */ |
| - | $family-sans-serif: 'Nunito', sans-serif; |
| - | |
| - | /* Base color */ |
| - | $base-color: #C01B28; |
| - | //$base-color-light: rgba(24,28,33,0.06); |
| - | $base-color-light: #f1f2f2; |
| - | |
| - | /* General overrides */ |
| - | $primary: $turquoise; |
| - | $body-background-color: $white; |
| - | $link: #771820; |
| - | $link-visited: $purple; |
| - | $light-border: 1px solid $base-color-light; |
| - | $hr-height: 1px; |
| - | $border: $base-color-light; |
| - | $default-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) !default; |
| - | |
| // Layout Overrides | |
| $section-padding: 1rem 0.5rem; | |
| $section-padding-medium: 1.5rem 0.5rem; | |
| $section-padding-large: 3rem 0.5rem; | |
| + | $widescreen-enabled: false; |
| + | $fullhd-enabled: false; |
| - | /* NavBar: Bulma override */ |
| - | $navbar-item-color: $link; |
| - | $navbar-item-hover-background-color: transparent; |
| - | $navbar-item-active-color: $black-ter; |
| - | $navbar-item-active-background-color: transparent; |
| - | |
| - | /* NavBar: specifics */ |
| - | $navbar-input-color: $grey-darker; |
| - | $navbar-input-placeholder-color: $grey-lighter; |
| - | $navbar-box-shadow: 0 1px $base-color-light; |
| - | $navbar-item-h-padding: $default-padding * .75; |
| - | $navbar-divider-border: 1px solid $base-color-light; |
| - | $navbar-update-mark-color: $red; |
| - | $navbar-avatar-size: 1.75rem; |
| - | |
| - | /* Aside: Bulma override */ |
| - | $menu-item-radius: 0; |
| - | $menu-list-link-padding: $size-base * .5 0; |
| - | $menu-label-color: lighten($base-color, 25%); |
| - | $menu-item-color: $link; |
| - | $menu-item-hover-color: $black; |
| - | $menu-item-hover-background-color: transparent; |
| - | $menu-item-active-color: $black-ter; |
| - | $menu-item-active-background-color: transparent; |
| - | |
| - | /* Aside: specifics */ |
| - | $aside-width: $size-base * 15; |
| - | $aside-collapsed-width: $size-base * 4.5; |
| - | $aside-mobile-width: $size-base * 15; |
| - | $aside-right-width: $size-base * 15; |
| - | $aside-icon-width: $size-base * 3; |
| - | $aside-submenu-font-size: $size-base * .95; |
| - | $aside-box-shadow: 1px 0 $base-color-light; |
| - | $aside-background-color: $white; |
| - | $aside-tools-background-color: transparent; |
| - | $aside-tools-color: $black-ter; |
| - | $aside-dropdown-background-color: transparent; |
| - | |
| - | /* Aside Secondary Submenu: specifics */ |
| - | $aside-secondary-background-color: lighten($aside-background-color, 5%); |
| - | $aside-secondary-item-active-background-color: lighten($aside-secondary-background-color, 2.5%); |
| - | $aside-secondary-item-hover-background-color: lighten($aside-secondary-background-color, 5%); |
| - | $aside-secondary-tools-background-color: darken($aside-secondary-background-color, 5%); |
| - | $aside-secondary-box-shadow-mobile: -2px 0 5vw $black; |
| - | $aside-secondary-dropdown-background-color: darken($aside-secondary-background-color, 1.5%); |
| - | |
| - | /* Title Bar: specifics */ |
| - | $title-bar-color: $grey; |
| - | $title-bar-active-color: $black-ter; |
| - | |
| - | /* Hero Bar: specifics */ |
| - | $hero-bar-background: transparent; |
| - | $hero-avatar-size: $size-base * 10; |
| - | |
| - | /* Card: Bulma override */ |
| - | $card-shadow: none; |
| - | $card-header-shadow: none; |
| - | $card-background-color: transparent; |
| - | |
| - | /* Card: specifics */ |
| - | $card-border: 1px solid $base-color-light; |
| - | $card-header-border-bottom-color: $base-color-light; |
| - | $card-height-medium: 65vh; |
| - | |
| - | /* Table: Bulma override */ |
| - | $table-cell-border: 1px solid $white-bis; |
| - | |
| - | /* Table: specifics */ |
| - | $table-avatar-size: $size-base * 1.5; |
| - | $table-avatar-size-mobile: 25vw; |
| - | |
| - | /* Form */ |
| - | $checkbox-border: 1px solid $base-color; |
| - | |
| - | /* Overlay: specifics */ |
| - | $overlay-background-color: rgba($white, .85); |
| - | |
| - | /* Modal card: Bulma override */ |
| - | $modal-z: 60; |
| - | $modal-background-background-color: $overlay-background-color; |
| - | $modal-card-head-background-color: $white; |
| - | $modal-card-title-size: $size-base; |
| - | $modal-card-body-padding: $default-padding 20px; |
| - | $modal-card-head-border-bottom: 1px solid $white-ter; |
| - | |
| - | /* Modal card: specifics */ |
| - | $modal-card-width: 40vw; |
| - | $modal-card-width-mobile: 90vw; |
| - | $modal-card-foot-background-color: $white; |
| - | |
| - | /* Notification: Bulma override */ |
| - | $notification-background-color: $white; |
| - | $notification-padding: $default-padding * .75 $default-padding; |
| - | |
| - | /* Footer: Bulma override */ |
| - | $footer-background-color: transparent; |
| - | $footer-padding: $default-padding * .33 $default-padding; |
| - | |
| - | /* Footer: specifics */ |
| - | $footer-logo-height: $size-base * 2; |
| - | |
| - | /* Progress: Bulma override */ |
| - | $progress-bar-background-color: transparent; |
| - | |
| - | |
| - | |
| - | /* Error Page */ |
| - | $error-page-icon-background-color: $grey-lighter; |
| - | $error-page-caption-color: $grey-light; |
| - | $error-page-icon-size: $size-base * 10; |
| + | /* General overrides */ |
| + | $primary: #C01B28; |
| + | $default-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) !default; |
| - | /* Icon: specifics */ |
| - | $icon-update-mark-size: $size-base * .5; |
| - | $icon-update-mark-color: $yellow; |
| /* Status/State colors (based on Bulma's) */ | |
| $state-colors: | |
| - | ('primary', $turquoise, $white), |
| - | ('info', $cyan, $white), |
| - | ('success', $green, $white), |
| - | ('warning', $yellow, $grey-darker), |
| - | ('danger', $red, $white), |
| - | ('dark', $grey-darker, $white), |
| - | ('white', $white, $black-ter); |
| + | ('primary', $primary, $white), |
| + | ('info', $cyan, $white), |
| + | ('success', $green, $white), |
| + | ('warning', $yellow, $grey-darker), |
| + | ('danger', $red, $white), |
| + | ('dark', $grey-darker, $white), |
| + | ('white', $white, $black-ter); |
| - | /* Perfect Scrollbar */ |
| - | $ps-rail-background-color: transparent; |
| - | $ps-thumb-background-color: $grey-lighter; |
| - | $ps-thumb-active-background-color: $grey-lighter; |
| - | /* Spinkit */ |
| - | $spinkit-spinner-color: $grey-lighter; |
| - | $spinkit-size: 80px; |
| + | // $footer-padding: ; |
| - | /* Dark Mode */ |
| - | $dark-mode-background-color: $black-ter; |
| - | $dark-mode-color: $white-ter; |
| - | $dark-mode-border-color: $white-ter; |
| - | $dark-mode-border: 1px solid $dark-mode-border-color; |
| - | $dark-mode-light-border-color: $grey-darker; |
| - | $dark-mode-light-border: 1px solid $dark-mode-light-border-color; |
| - | $dark-mode-link-color: $cyan; |
| - | $dark-mode-link-active-color: $white-ter; |
| - | $dark-mode-link-hover-color: $white-bis; |
| - | $dark-mode-overlay-background-color: rgba($black, .85); |
| - | $dark-mode-button-color: $white-ter; |
| - | $dark-mode-button-hover-color: $black-ter; |
| - | $dark-mode-card-header-button-color: $grey; |
| - | $dark-mode-card-header-button-hover-color: $black-ter; |
| + | // Content Overrides |
src/scss/main.scss
+7
-0
| @@ | @@ -5,6 +5,13 @@ |
| /* Buefy has Bulma included. So we import just that */ | |
| @import "~buefy/src/scss/buefy-build"; | |
| + | .content { |
| + | blockquote { |
| + | border-left: 5px solid #C01B28; |
| + | box-shadow: $default-shadow; |
| + | } |
| + | } |
| + | |
| .navbar-item img { | |
| width: auto; | |
| } | |