From 00c9709fd9763542e848f6278db8ba26af5c9886 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 15 Oct 2018 23:46:42 +0200 Subject: Initial commit. --- sass/theme/_contact-form7.scss | 73 +++++++++ sass/theme/_custom_wpcf7.scss | 0 sass/theme/_theme.scss | 329 +++++++++++++++++++++++++++++++++++++++ sass/theme/_theme_variables.scss | 28 ++++ 4 files changed, 430 insertions(+) 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 (limited to 'sass/theme') 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; -- cgit v1.2.3