Kobe

/*
	Theme Name: foo.de
	Theme URI: http://www.foo.de
	Author: Ingo Stoecker
	Author URI: http://www.kobe8.de
*/

Kobe

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
	RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>

Kobe

location ~* \.(txt|log|xml|css|js|gz)$ {
    add_header X-Robots-Tag noindex;
}

Kobe

<FilesMatch "\.(txt|log|xml|css|js|gz)$">
    Header set X-Robots-Tag "noindex"
</FilesMatch>

Kobe

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

Kobe

// Mixins for generating Block Element Modifier (BEM) class names.
// See https://css-tricks.com/snippets/sass/bem-mixins/
// They can be nested to produce meaningful classes.
// To create a descendant selector like `.block--modifier .block__element`
// the block needs to be repeated. For example:
// +block(some-block)
//
//   +element(some-element)
//     color: red
//

Kobe

$elementSeparator: '__';
$modifierSeparator: '--';

@function containsModifier($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $modifierSeparator) {
        @return true;
    } @else {
        @return false;
    }

Kobe

<?php
	// add theme support for
	add_theme_support('html5');
	add_theme_support('menus');
	add_theme_support('post-formats', array(
		'aside',
		'image',
		'link',
		'status'
	));

Kobe

$site-colors: (
 primary-color: #f60,
 secondary-color: #ff0000,
 tertiary-color: #008000,
);

@each $color, $value in $site-colors  {
 .styleguide .#{$color} {
   background-color: $value;
   color: white;

Kobe

var module						= module || {};
window.module.config			= window.module.config || {};
window.module.config.tracking	= window.module.config.tracking || {};

function tracker(window, module, trackingOptions, $) {// NOSONAR
    'use strict';

    var LOG_EVENT_CONSOLE = 'console';
    var LOG_EVENT_ERROR = 'error';
    var LOG_EVENT_EVENT_TRACKING = 'event-tracking';