From 00c9709fd9763542e848f6278db8ba26af5c9886 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 15 Oct 2018 23:46:42 +0200 Subject: Initial commit. --- sass/assets/bootstrap4.scss | 42 +++++ sass/assets/font-awesome.scss | 19 +++ sass/assets/underscores.scss | 1 + sass/custom-editor-style.scss | 2 + sass/fonts/charter.scss | 19 +++ sass/material-icons.scss | 36 +++++ sass/theme.scss | 26 ++++ sass/theme/_contact-form7.scss | 73 +++++++++ sass/theme/_custom_wpcf7.scss | 0 sass/theme/_theme.scss | 329 +++++++++++++++++++++++++++++++++++++++ sass/theme/_theme_variables.scss | 28 ++++ sass/understrap/understrap.scss | 123 +++++++++++++++ sass/understrap/woocommerce.scss | 4 + 13 files changed, 702 insertions(+) create mode 100644 sass/assets/bootstrap4.scss create mode 100644 sass/assets/font-awesome.scss create mode 100644 sass/assets/underscores.scss create mode 100644 sass/custom-editor-style.scss create mode 100644 sass/fonts/charter.scss create mode 100644 sass/material-icons.scss create mode 100644 sass/theme.scss create mode 100644 sass/theme/_contact-form7.scss create mode 100644 sass/theme/_custom_wpcf7.scss create mode 100644 sass/theme/_theme.scss create mode 100644 sass/theme/_theme_variables.scss create mode 100644 sass/understrap/understrap.scss create mode 100644 sass/understrap/woocommerce.scss (limited to 'sass') diff --git a/sass/assets/bootstrap4.scss b/sass/assets/bootstrap4.scss new file mode 100644 index 0000000..99976b2 --- /dev/null +++ b/sass/assets/bootstrap4.scss @@ -0,0 +1,42 @@ +/*! + * Bootstrap v4.1.0 (https://getbootstrap.com/) + * Copyright 2011-2018 The Bootstrap Authors + * Copyright 2011-2018 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +@import "../../src/sass/bootstrap4/functions"; +@import "../../src/sass/bootstrap4/variables"; +@import "../../src/sass/bootstrap4/mixins"; +@import "../../src/sass/bootstrap4/root"; +@import "../../src/sass/bootstrap4/reboot"; +@import "../../src/sass/bootstrap4/type"; +@import "../../src/sass/bootstrap4/images"; +@import "../../src/sass/bootstrap4/code"; +@import "../../src/sass/bootstrap4/grid"; +@import "../../src/sass/bootstrap4/tables"; +@import "../../src/sass/bootstrap4/forms"; +@import "../../src/sass/bootstrap4/buttons"; +@import "../../src/sass/bootstrap4/transitions"; +@import "../../src/sass/bootstrap4/dropdown"; +@import "../../src/sass/bootstrap4/button-group"; +@import "../../src/sass/bootstrap4/input-group"; +@import "../../src/sass/bootstrap4/custom-forms"; +@import "../../src/sass/bootstrap4/nav"; +@import "../../src/sass/bootstrap4/navbar"; +@import "../../src/sass/bootstrap4/card"; +@import "../../src/sass/bootstrap4/breadcrumb"; +@import "../../src/sass/bootstrap4/pagination"; +@import "../../src/sass/bootstrap4/badge"; +@import "../../src/sass/bootstrap4/jumbotron"; +@import "../../src/sass/bootstrap4/alert"; +@import "../../src/sass/bootstrap4/progress"; +@import "../../src/sass/bootstrap4/media"; +@import "../../src/sass/bootstrap4/list-group"; +@import "../../src/sass/bootstrap4/close"; +@import "../../src/sass/bootstrap4/modal"; +@import "../../src/sass/bootstrap4/tooltip"; +@import "../../src/sass/bootstrap4/popover"; +@import "../../src/sass/bootstrap4/carousel"; +@import "../../src/sass/bootstrap4/utilities"; +@import "../../src/sass/bootstrap4/print"; \ No newline at end of file diff --git a/sass/assets/font-awesome.scss b/sass/assets/font-awesome.scss new file mode 100644 index 0000000..a9769c9 --- /dev/null +++ b/sass/assets/font-awesome.scss @@ -0,0 +1,19 @@ +/*! + * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ + +@import "../../src/sass/fontawesome/variables"; +@import "../../src/sass/fontawesome/mixins"; +@import "../../src/sass/fontawesome/path"; +@import "../../src/sass/fontawesome/core"; +@import "../../src/sass/fontawesome/larger"; +@import "../../src/sass/fontawesome/fixed-width"; +@import "../../src/sass/fontawesome/list"; +@import "../../src/sass/fontawesome/bordered-pulled"; +@import "../../src/sass/fontawesome/animated"; +@import "../../src/sass/fontawesome/rotated-flipped"; +@import "../../src/sass/fontawesome/stacked"; +@import "../../src/sass/fontawesome/icons"; +@import "../../src/sass/fontawesome/screen-reader"; + diff --git a/sass/assets/underscores.scss b/sass/assets/underscores.scss new file mode 100644 index 0000000..47b2953 --- /dev/null +++ b/sass/assets/underscores.scss @@ -0,0 +1 @@ +@import "../../src/sass/underscores/galleries"; diff --git a/sass/custom-editor-style.scss b/sass/custom-editor-style.scss new file mode 100644 index 0000000..f3e0358 --- /dev/null +++ b/sass/custom-editor-style.scss @@ -0,0 +1,2 @@ +//Add your own editor styles here or comment out the next line if you want to pull in the whole Bootstrap stuff +//@import "theme"; \ No newline at end of file diff --git a/sass/fonts/charter.scss b/sass/fonts/charter.scss new file mode 100644 index 0000000..db07169 --- /dev/null +++ b/sass/fonts/charter.scss @@ -0,0 +1,19 @@ +@font-face { + font-family: 'charterregular'; + src: url('fonts/charter_regular-webfont.eot'); + src: url('fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/charter_regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} +@font-face { + font-family: 'charterbold'; + src: url('fonts/charter_bold-webfont.eot'); + src: url('fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/charter_bold-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} + diff --git a/sass/material-icons.scss b/sass/material-icons.scss new file mode 100644 index 0000000..2270c09 --- /dev/null +++ b/sass/material-icons.scss @@ -0,0 +1,36 @@ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url(MaterialIcons-Regular.woff2) format('woff2'), + url(MaterialIcons-Regular.woff) format('woff'), + url(MaterialIcons-Regular.ttf) format('truetype'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} diff --git a/sass/theme.scss b/sass/theme.scss new file mode 100644 index 0000000..5cbd95f --- /dev/null +++ b/sass/theme.scss @@ -0,0 +1,26 @@ +//@import "assets/bootstrap4";// <--------- Loads Bootstrap3 or Bootstrap4. Change from /bootstrap3 to /bootstrap4 Watch out! just for testing in the moment! +//@import "../node_modules/daemonite-material/assets/scss/material.scss";// <--------- Loads Bootstrap3 or Bootstrap4. Change from /bootstrap3 to /bootstrap4 Watch out! just for testing in the moment! + +//$primary: #f08506; +//$secondary: #f08506; +@import "theme/theme_variables"; // <--------- Add your variables into this file. Also add variables to overwrite Bootstrap or UnderStrap variables here +//@import "../src/sass/bootstrap4/_functions.scss"; +@import "fonts/charter"; + +@import "material-icons"; +//@import "../node_modules/material-design-icons/iconfont/material-icons.css"; +@import "../node_modules/daemonite-material/assets/scss/material"; +@import "../src/sass/bootstrap4/_variables.scss"; +//@import "../src/sass/bootstrap4/_utilities.scss"; + +@import "../src/sass/bootstrap4/mixins/_hover.scss"; +@import "understrap/understrap";// <-------- Loads the UnderStrap defaults. Just a few classes to incorporate BS in WP +//@import "understrap/woocommerce";// <-------- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce + +//Optional files - If you dont use the corresponding scripts/fonts comment em out +@import "assets/font-awesome"; // <------- Font Awesome Icon font +@import "assets/underscores"; // <------- Underscores media styles + +// Any additional imported files // +@import "theme/contact-form7"; // Contact Form 7 - Bootstrap 4 support +@import "theme/theme"; // <--------- That's where you can add your own design. Thats your part! diff --git a/sass/theme/_contact-form7.scss b/sass/theme/_contact-form7.scss new file mode 100644 index 0000000..b663071 --- /dev/null +++ b/sass/theme/_contact-form7.scss @@ -0,0 +1,73 @@ +/* +* Use existing Bootstrap 4 classes and +* variables to extend - override CF7 style +* +* Useful CF7 classes: +* .wpcf7 the wrapper element +* .wpcf7-form +* .wpcf7-form-control +* .wpcf7-text +* .wpcf7-email +* .wpcf7-textarea +* .wpcf7-submit +*/ + +// keep a max width in case it is just the form and nothing else +// we do not want a form spanning whole page +.wpcf7 { + max-width: 600px; + margin: 0 auto !important; + + // all inputs except radios and checkboxes inherit from form-control + input[type=text], + input[type=search], + input[type=url], + input[type=tel], + input[type=number], + input[type=range], + input[type=date], + input[type=month], + input[type=week], + input[type=time], + input[type=datetime], + input[type=datetime-local], + input[type=color], + input[type=email], + input[type=file], + input[type=submit], + select, + textarea { + @extend .form-control; + } + + // submit button, inherit .btn and .btn-outline-primary classes. + input[type=submit] { + @extend .btn; + @extend .btn-outline-primary; + } + + .wpcf7-form { + + // set paragraphs to behave like divs with class .form-group + p { + @extend .form-group; + } + + // let labels be 100% + label { + width: 100%; + } + } + + // not valid tip for each control + .wpcf7-not-valid-tip { + color: theme-color("danger"); + } + + // validation errors ourput bottom of form + .wpcf7-validation-errors { + @extend .form-control; + color: theme-color("danger"); + border: 1px solid $gray-200; + } +} diff --git a/sass/theme/_custom_wpcf7.scss b/sass/theme/_custom_wpcf7.scss new file mode 100644 index 0000000..e69de29 diff --git a/sass/theme/_theme.scss b/sass/theme/_theme.scss new file mode 100644 index 0000000..c357a28 --- /dev/null +++ b/sass/theme/_theme.scss @@ -0,0 +1,329 @@ +h1 { + font-size: 2.5rem; +} +.brand-url, .navbar-brand, .slogan{ + font-family: 'charterbold', 'charterregular'; +} +*{ + font-family: 'charterregular', 'charterbold'; +} +h1,h2,h3,h4,h5,h6 { + font-family: 'charterbold', 'charterregular' !important; +} +h1 > a,h2 > a,h3 > a,h4 > a,h5 > a,h6 > a { + font-family: 'charterbold', 'charterregular' !important; +} +.charter-bold { + font-family: 'charterbold', 'charterregular' !important; +} +.nav-link, .dropdown-item { +/* + font-family: 'roboto'; +*/ + font-size: 18px !important; +} +.brand-url { + color: #f5f5f5 !important; +} +.entry-content, .entry-meta { + font-size: 19px; +} + +.slogan { + font-size: 25px; + color: #424242; + color: #f5f5f5; +} +/* +#searchform > .input-group { + background-color: rgba($material-color-grey-100, .3); +} +*/ +#searchform > .input-group > input { + background-color: rgba($material-color-grey-100, .2); + padding-left: 5px; + border-radius: 1px; + width: 13rem; +} +/* Fix for Chrome. */ +@media (max-width: 768px) AND (min-width: 576px) { + #searchform > .input-group > input { + width: 10rem; + } +} +#searchform > .input-group > .input-group-append { + margin-left: 0; +} +.btn-border-dark { + border: 1px solid #646464; +} + +.nnavbar { + background-image: url("/daemonite/images/paw.png"); + background-repeat: no-repeat; +} +.navbar img { + overflow: hidden; +} +.main-header { + background-color: #efefef; + color: #f5f5f5; + margin-top: 0px; + padding-top: 30px; + padding-bottom: 30px; + background-repeat: no-repeat; + background-size: cover; + /* + margin-bottom: 20px; + */ +} + +.main-header .form-control::placeholder, .main-header .form-control { + color: #f5f5f5; + border-color: #f5f5f5; +} +.main-header .form-control:focus{ + border-color: #424242 !important; +} + +@media( max-width: 768px ) { + .flex-column-sm { + -ms-flex-direction: column !important; + flex-direction: column !important; + margin-top: 10px; + } +} +@media( min-width: 576px ) { + .text-right-xs { + text-align: right !important; + } +} + +//li.active > .dropdown-toggle { +#main-menu > li.active { + text-decoration: underline !important; +} + +img.size-medium, img.attachment-medium{ + max-width: 45%; + width: auto; + float: left; + margin: 0 15px 0 0; + padding: 4px; + height: auto; + border: 1px solid #ededed; +} +img.size-large, img.attachment-large{ +} + +.entry-title > a { + color: rgba(0, 0, 0, 0.87); +} +.entry-meta{ + /* + margin-bottom: 10px; + */ + font-size: 17px; +} +.entry-footer { + font-size: 17px; + margin-top: 10px; +} +.entry-meta-single { + margin-top: 10px; +} +.nav-previous, .nav-next { + font-size: 17px; + padding: 0; +} +.footer-menu a { + //@extend .text-muted; +} +.footer-menu a:hover { + text-decoration: underline !important; +} +.footer-menu .nav-link { + @extend .pl-0; +} + +/* + * Der Hintergrund vom Artikel hebt sich hervor. + * +.site-main { + padding: 15px; + padding-top: 0; + background-color: #fff; +} +#single-wrapper { + background-color: $material-color-grey-100; +} +.article-shadow-sm { + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.10); +} +*/ + +.article-mb { + margin-bottom: 30px; +} +.page-mt { + margin-top: 30px; +} +.entry-header { + margin-bottom: 10px; +} + +.tag-category-icon { + font-size: 25px; + opacity: 0.5; +} +/* Sorgt dafür, dass auf dem Smartphon die Tags direkt unter der Kategorie gelistet wird. */ +.tags-links > .tag-category-icon { + margin-right: 4px; +} + +#comments { + margin-top: 30px; +} +ol.comment-list, .comment-content { + font-size: 17px !important; +} +.comment-metadata > a, .cat-links a, .tags-links a { + color: rgba(0, 0, 0, 0.38) !important; +} + +/** + * Scroll to top button + */ +.back-to-top { + cursor: pointer; + position: fixed; + bottom: 20px; + right: 20px; + display:none; +} + +/** + * Taxonomy + */ +.taxonomy-title { + background-color: $material-color-grey-200; +} +.taxonomy-description p { + font-size: 19px; +} +.taxonomy-card { + margin-bottom: 30px; +} +.taxonomy-card h1 { + font-size: 2.125rem; +} +.taxonomy-card .card-text { + font-size: 17px; +} + +/** + * # Main Theme Überschreiben + */ +.entry-footer span.tags-links, .entry-footer span { + padding-right: 20px !important; +} +.tooltip { + font-size: 17px; +} + + +/** + * # Plugins + * + * ## Sidebar + */ +.widget { + background-color: $material-color-grey-100; + margin-bottom: 16px; + padding-left: 10px; + padding-right: 10px; +} +.widget-title { + background-color: $material-color-grey-200; + //padding-left: 5px; +} +#right-sidebar .widget { + @extend .shadow-sm +} +.rpwwt-widget ul li { + margin: 0 0 0 !important; + padding-left: 5px; + padding-right: 5px; +} +span.rpwwt-post-title { + font-size: 19px !important; + color: rgba(0, 0, 0, 0.87) !important; +} +span.rpwwt-post-title:hover{ + text-decoration-color: rgba(0, 0, 0, 0.87) !important; +} +.icons-medium, .tagcloud { + padding: 5px; +} + +/** + * ## YARRP + */ +.yarpp-thumbnail-title { + color: rgba(0, 0, 0, 0.87) !important; +} +.yarpp-thumbnails-horizontal .yarpp-thumbnail { + height: 100% !important; +} + +.tag-cloud-link { + color: rgba(0, 0, 0, 0.87) !important; +} +.tag-cloud-link:hover { + text-decoration-color: theme-color(primary); +} +.tag-cloud-link:hover { + text-decoration-color: rgba(0, 0, 0, 0.87); +} +/* +*/ + +/** + * ## Contact Form 7 + */ +.wpcf7 { + + // submit button, inherit .btn and .btn-primary classes. + input[type=submit] { + @extend .btn; + @extend .btn-primary; + background-color: theme-color(primary) !important; + } + input[type=submit]:hover { + color: inherit; + } + + .wpcf7-validation-errors { + @extend .alert; + } + + /* + input[type=submit]:hover { + color: #f5f5f5; + } + .wpcf7-form-control-wrap { + @extend .textfield-box; + } + */ +} + +/** + * ## Cookie Bar + */ +#cookie-law-info-bar span, #cookie-law-info-bar span a { + font-size: 17px; +} +#cookie_action_close_header { + margin-left: 5px; + margin-right: 5px; +} diff --git a/sass/theme/_theme_variables.scss b/sass/theme/_theme_variables.scss new file mode 100644 index 0000000..7d14e5d --- /dev/null +++ b/sass/theme/_theme_variables.scss @@ -0,0 +1,28 @@ +// Use this file to overwrite the basic Bootstrap variables and add your own variables +// To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder. +// Just copy a variable from src/sass/bootstrap4/_variables.scss, paste it here and edit the value. + + +//$primary: #0061ff; // Thats a sample how you could change a BootStrap variable. +$primary: ( + color: #f08506, + dark: darken(#f08506, 10%), + light: lighten(#f08506, 10%) +); +$secondary: ( + color: #f08506, + dark: darken(#f08506, 10%), + light: lighten(#f08506, 10%) +); + +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; diff --git a/sass/understrap/understrap.scss b/sass/understrap/understrap.scss new file mode 100644 index 0000000..abd3dfa --- /dev/null +++ b/sass/understrap/understrap.scss @@ -0,0 +1,123 @@ +// Some basic padding for all wrappers +.wrapper { + padding: $grid-gutter-width 0; } + +// Reset hero wrapper padding to 0 +#wrapper-hero { padding: 0px !important; } + +// Adding basic WordPress classes to pass the WordPress.org tests +.sticky, +.gallery-caption, +.bypostauthor { + font-size: inherit; +} + +// Separate sticky wrapper from main content +.wrapper#wrapper-sticky { border-bottom: 1px solid $gray-300; } + +// Adding some contrast background color to footer full widget +#wrapper-footer-full, +#wrapper-static-hero { background-color: $gray-200; } + +// Necessary WP classes +.wp-caption { font-size: inherit; } + +.wp-caption-text { font-size: inherit; } + +.screen-reader-text { @extend .sr-only; } + +.alignleft { + display: inline; + float: left; + margin-right: 1.5em; +} + +.alignright { + display: inline; + float: right; + margin-left: 1.5em; +} + +.aligncenter { margin: 0px auto; } + +// Post design +.entry-footer span { padding-right: 10px; } + +//Woocommerce product gallery slider width fix +figure.woocommerce-product-gallery__wrapper { + max-width: inherit !important; +} + +// Limit featured image size to 100% +img.wp-post-image, +article img, +figure, +img, +#secondary img { + max-width: 100%; + height: auto; +} + +// Skip to content link +a.skip-link { + position: fixed; + z-index: 1000; + top: 0px; + right: 0px; +} + +// Reset Jumbotron default margin +.jumbotron { margin-bottom: 0px; } + +// Dropdown translation +.navbar-dark .navbar-nav .dropdown-menu .nav-link{ + display: block; + width: 100%; // For `