Redhill: Initial commit of the .org version of the theme

This commit is contained in:
Thomas Guillot 2019-07-17 15:04:17 +01:00
parent 2ff3a946d6
commit 9d9e5bc1d4
12 changed files with 14620 additions and 0 deletions

1
.gitignore vendored
View file

@ -1 +1,2 @@
node_modules
twentynineteen/

131
redhill/functions.php Executable file
View file

@ -0,0 +1,131 @@
<?php
/**
* Child Theme Functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package WordPress
* @subpackage PACKAGENAME
* @since 1.0.0
*/
if ( ! function_exists( 'redhill_theme_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support for post thumbnails.
*/
function redhill_theme_setup() {
// ? remove_editor_style( 'editor-color-palette' );
// Add child theme editor styles, compiled from `style-child-theme-editor.scss`.
add_editor_style( 'style-editor.css' );
// Remove parent theme font sizes
remove_theme_support( 'editor-font-sizes' );
// Add child theme editor font sizes to match Sass-map variables in `_config-child-theme-deep.scss`.
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => __( 'Small', 'redhill' ),
'shortName' => __( 'S', 'redhill' ),
'size' => 18.5,
'slug' => 'small',
),
array(
'name' => __( 'Normal', 'redhill' ),
'shortName' => __( 'M', 'redhill' ),
'size' => 22,
'slug' => 'normal',
),
array(
'name' => __( 'Large', 'redhill' ),
'shortName' => __( 'L', 'redhill' ),
'size' => 32,
'slug' => 'large',
),
array(
'name' => __( 'Huge', 'redhill' ),
'shortName' => __( 'XL', 'redhill' ),
'size' => 38,
'slug' => 'huge',
),
)
);
// Remove parent theme color palette
// remove_theme_support( 'editor-color-palette' );
// Add child theme editor color pallete to match Sass-map variables in `_config-child-theme-deep.scss`.
add_theme_support(
'editor-color-palette',
array(
array(
'name' => __( 'Primary', 'redhill' ),
'slug' => 'primary',
'color' => '#CA2017', // _dsgnsystm_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? $default_hue : get_theme_mod( 'primary_color_hue', $default_hue ), $saturation, $lightness ),
),
array(
'name' => __( 'Secondary', 'redhill' ),
'slug' => 'secondary',
'color' => '#007FDB', // _dsgnsystm_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? $default_hue : get_theme_mod( 'primary_color_hue', $default_hue ), $saturation, $lightness ),
),
array(
'name' => __( 'Dark Gray', 'redhill' ),
'slug' => 'foreground-dark',
'color' => '#111111',
),
array(
'name' => __( 'Gray', 'redhill' ),
'slug' => 'foreground',
'color' => '#444444',
),
array(
'name' => __( 'Light Gray', 'redhill' ),
'slug' => 'foreground-light',
'color' => '#666666',
),
array(
'name' => __( 'White', 'redhill' ),
'slug' => 'background',
'color' => '#FFFFFF',
),
)
);
}
endif;
add_action( 'after_setup_theme', 'redhill_theme_setup', 12 );
/**
* Set the content width in pixels, based on the child-theme's design and stylesheet.
*
* Priority 0 to make it available to lower priority callbacks.
*
* @global int $content_width Content width.
*/
function redhill_theme_content_width() {
// This variable is intended to be overruled from themes.
// Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}.
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$GLOBALS['content_width'] = apply_filters( 'redhill_theme_content_width', 740 );
}
add_action( 'after_setup_theme', 'redhill_theme_content_width', 0 );
/**
* Enqueue scripts and styles.
*/
function redhill_theme_scripts() {
// dequeue parent styles
wp_dequeue_style( '_dsgnsystm-style' );
// enqueue child styles
wp_enqueue_style( 'redhill-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ));
// enqueue child RTL styles
wp_style_add_data( 'redhill-style', 'rtl', 'replace' );
}
add_action( 'wp_enqueue_scripts', 'redhill_theme_scripts', 99 );

5144
redhill/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

46
redhill/package.json Executable file
View file

@ -0,0 +1,46 @@
{
"name": "redhill",
"version": "1.0.0",
"description": "redhill",
"bugs": {
"url": "https://github.com/Automattic/_dsgnsystm/issues"
},
"homepage": "https://github.com/Automattic/_dsgnsystm#readme",
"devDependencies": {
"@wordpress/browserslist-config": "^2.2.2",
"autoprefixer": "^9.5.1",
"chokidar-cli": "^1.2.2",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.2",
"postcss-focus-within": "^3.0.0",
"rtlcss": "^2.4.0"
},
"rtlcssConfig": {
"options": {
"autoRename": false,
"autoRenameStrict": false,
"blacklist": {},
"clean": true,
"greedy": false,
"processUrls": false,
"stringMap": []
},
"plugins": [],
"map": false
},
"browserslist": [
"extends @wordpress/browserslist-config"
],
"scripts": {
"start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
"build:style": "node-sass sass/style-child-theme.scss style.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style.css",
"build:style-editor": "node-sass sass/style-child-theme-editor.scss style-editor.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style-editor.css",
"build:rtl": "rtlcss style.css style-rtl.css",
"build": "run-p \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
},
"dependencies": {
"core-util-is": "^1.0.2"
}
}

13
redhill/postcss.config.js Executable file
View file

@ -0,0 +1,13 @@
var postcssFocusWithin = require('postcss-focus-within');
module.exports = {
plugins: {
autoprefixer: {}
}
};
module.exports = {
plugins: [
postcssFocusWithin(/* pluginOptions */)
]
};

View file

@ -0,0 +1,351 @@
/**
* Redefine Sass map values for child theme output.
* - See: style-child-theme.scss
*/
/**
* Global
*/
// Vertical Rhythm Multiplier
$baseline-unit: 8px;
$typescale-root: 22px; // Set 16px/1em default on html
$typescale-base: 1rem; // Set 1em default on body == $typescale-root;
$typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
$config-global: (
/* Fonts */
"font": (
/* Font Family */
"family": (
"primary": "Palatino\, \"Palatino Linotype\"\, \"Palatino LT STD\"\, \"Book Antiqua\"\, Times, \"Times New Roman\"\, serif",
"secondary": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
"code": "monospace, monospace",
"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
),
/* Font Size */
"size": (
"root": $typescale-root,
"ratio": $typescale-ratio,
"xs": ($typescale-base / $typescale-ratio / $typescale-ratio),
"sm": ($typescale-base / $typescale-ratio),
"base": $typescale-base,
"md": ($typescale-base * $typescale-ratio),
"lg": ($typescale-base * $typescale-ratio * $typescale-ratio),
"xl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio),
"xxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
"xxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
"xxxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
),
/* Letter Spacing */
"letter-spacing": (
"base": normal,
"xs": normal,
"sm": normal,
"md": normal,
"lg": normal,
"xl": normal,
"xxl": normal,
"xxxl": normal,
),
/* Line Height */
"line-height": (
"base": strip-unit($typescale-base),
"body": 1.6,
"heading": 1.125,
),
),
/* Colors */
"color": (
"primary": (
"default": #CA2017,
"hover": #222222,
),
"secondary": (
"default": #007FDB,
"hover": #222222,
),
"foreground": (
"default": #222222,
"light": #666666, // must be accesible!
"dark": #111111, // must be accesible!
),
"background": white,
"border": (
"default": #DDDDDD,
"light": #FAFAFA,
"dark": #AAAAAA,
),
"text-selection": #DDDDDD,
"black": black,
"white": white,
),
/* Spacing */
"spacing": (
"unit": (2 * $baseline-unit), // 16px
"measure": inherit, // Use ch units here. ie: 60ch = 60 character max-width
"horizontal": (2 * $baseline-unit), // 16px
"vertical": (4 * $baseline-unit), // 32px matches default spacing in the editor.
),
/* Breakpoints */
"breakpoint": (
"sm": 560px,
"md": 640px,
"lg": 772px,
"xl": 1024px,
"xxl": 1280px,
),
/* Elevation */
"elevation": (
"none": 0px 0px 0px 0px rgba( 0, 0, 0, 0 ),
"2dp": 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ),
"4dp": 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ),
"6dp": 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ),
"8dp": 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ),
"10dp": 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ),
),
/* Border radius */
"border-radius": (
"sm": (0.2 * $typescale-root),
"md": (0.5 * $typescale-root),
"lg": (0.75 * $typescale-root),
"pill": (10 * $typescale-root),
),
);
/**
* Elements
*/
$config-elements: (
"form": (
// Colors
"color": (
"text": map-deep-get($config-global, "color", "foreground", "default"),
"border": map-deep-get($config-global, "color", "border", "default"),
"border-focus": map-deep-get($config-global, "color", "primary", "hover"),
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"line-height": map-deep-get($config-global, "font", "line-height", "base"),
"size": map-deep-get($config-global, "font", "size", "base"),
"weight": bold,
),
// Borders
"border": (
"width": 1px,
"radius": 3px,
),
"padding": calc( 0.33 * #{map-deep-get($config-global, "spacing", "unit")} ),
),
);
/**
* Button
*/
$config-button: (
// Colors
"color": (
"text": map-deep-get($config-global, "color", "background"),
"text-hover": map-deep-get($config-global, "color", "background"),
"background": map-deep-get($config-global, "color", "primary", "default"),
"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "ui"),
"size": map-deep-get($config-global, "font", "size", "base"),
"weight": bold,
"line-height": 1,
),
// Borders
"border-radius": map-deep-get($config-global, "border-radius", "sm"),
"border-width": 2px,
// Padding
"padding": (
"vertical": map-deep-get($config-global, "spacing", "unit"),
"horizontal": #{1.5 * map-deep-get($config-global, "spacing", "unit")},
),
);
/**
* Cover
*/
$config-cover: (
"height": calc( 18 * #{map-deep-get($config-global, "spacing", "vertical")} ),
);
/**
* Heading
*/
$config-heading: (
// Fonts & Typography
"font": (
// Family
"family": map-deep-get($config-global, "font", "family", "secondary"),
// Size
"size": (
"h6": map-deep-get($config-global, "font", "size", "base"),
"h5": map-deep-get($config-global, "font", "size", "md"),
"h4": map-deep-get($config-global, "font", "size", "lg"),
"h3": map-deep-get($config-global, "font", "size", "xl"),
"h2": map-deep-get($config-global, "font", "size", "xxl"),
"h1": map-deep-get($config-global, "font", "size", "xxxl"),
),
// Letter spacing
"line-height": (
"h6": map-deep-get($config-global, "font", "line-height", "heading"),
"h5": map-deep-get($config-global, "font", "line-height", "heading"),
"h4": map-deep-get($config-global, "font", "line-height", "heading"),
"h3": map-deep-get($config-global, "font", "line-height", "heading"),
"h2": map-deep-get($config-global, "font", "line-height", "heading"),
"h1": map-deep-get($config-global, "font", "line-height", "heading"),
),
// Letter spacing
"letter-spacing": (
"h6": map-deep-get($config-global, "font", "letter-spacing", "sm"),
"h5": map-deep-get($config-global, "font", "letter-spacing", "md"),
"h4": map-deep-get($config-global, "font", "letter-spacing", "lg"),
"h3": map-deep-get($config-global, "font", "letter-spacing", "xl"),
"h2": map-deep-get($config-global, "font", "letter-spacing", "xxl"),
"h1": map-deep-get($config-global, "font", "letter-spacing", "xxxl"),
),
// Font Weight
"weight": bold,
),
);
/**
* List
*/
$config-list: (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
),
);
/**
* Pullquote
*/
$config-pullquote: (
// Font
"font": (
"family": #{map-deep-get($config-heading, "font", "family")},
),
// Border
"color": (
"border": #{map-deep-get($config-global, "color", "border", "default")},
"background": #{map-deep-get($config-global, "color", "primary", "default")},
),
// Border
"border": (
"width": #{0.5 * $baseline-unit},
),
);
/**
* Quote
*/
$config-quote: (
// Font
"font": (
"family": #{map-deep-get($config-heading, "font", "family")},
),
);
/**
* Separator
*/
$config-separator: (
"height": #{0.25 * $baseline-unit},
);
/**
* Header
*/
$config-header: (
"branding": (
// Colors
"color": (
"text": map-deep-get($config-global, "color", "foreground", "light"),
"link": map-deep-get($config-global, "color", "foreground", "dark"),
"link-hover": map-deep-get($config-global, "color", "primary", "default"),
),
// Fonts & Typography
"title": (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"size": map-deep-get($config-global, "font", "size", "xxxl"),
"weight": bold,
"line-height": 1,
),
),
// Fonts & Typography
"description": (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"size": map-deep-get($config-global, "font", "size", "sm"),
),
),
),
"main-nav": (
// Colors
"color": (
"text": map-deep-get($config-global, "color", "foreground", "default"),
"link": map-deep-get($config-global, "color", "foreground", "default"),
"link-hover": map-deep-get($config-global, "color", "primary", "default"),
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "secondary"),
"size": map-deep-get($config-global, "font", "size", "sm"),
"weight": bold,
"line-height": 1,
),
"link-padding": map-deep-get($config-global, "spacing", "unit"),
),
"social-nav": (
// Colors
"color": (
"link": map-deep-get($config-global, "color", "primary", "default"),
"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
),
"link-padding": #{0.25 * map-deep-get($config-global, "spacing", "unit")},
),
);
/**
* Footer
*/
$config-footer: (
// Colors
"color": (
"text": map-deep-get($config-global, "color", "foreground", "light"),
"link": map-deep-get($config-global, "color", "foreground", "light"),
"link-hover": map-deep-get($config-global, "color", "primary", "default"),
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "secondary"),
"size": map-deep-get($config-global, "font", "size", "xs"),
"line-height": map-deep-get($config-global, "font", "line-height", "xs"),
),
);

View file

@ -0,0 +1,465 @@
/**
* Extra Child Theme Styles
*/
// HTML reset
html {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
}
// Link style
a {
text-decoration: none;
.wp-block-cover &,
.wp-block-cover-image & {
text-decoration: underline;
&.wp-block-button__link,
&:hover {
text-decoration: none;
}
}
}
// Page
.site {
border-top: 5px solid map-deep-get($config-global, "color", "foreground", "default");
position: relative;
&:before {
border-top: 1px solid rgba(#fff, 0.5);
content: "";
left: 0;
position: absolute;
top: -5px;
width: 100%;
}
}
// Header
#masthead {
.custom-logo-link {
display: inline-block;
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
}
@include media(mobile) {
max-width: 92vw;
align-content: center;
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
.site-branding {
flex: 1 100%;
}
.main-navigation {
padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
padding-right: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
}
.social-navigation {
padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
padding-right: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
margin: 0;
}
}
}
// Footer
#colophon {
border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
@include media(mobile) {
margin-top: map-deep-get($config-global, "spacing", "vertical");
max-width: 100%;
}
.site-info {
font-weight: bold;
text-transform: uppercase;
@include media(mobile) {
max-width: 92vw;
margin-left: auto;
margin-right: auto;
}
}
}
// Navigation
.main-navigation {
#toggle-menu {
text-transform: uppercase;
}
a {
padding: #{0.75 * map-deep-get($config-header, "main-nav", "link-padding")} map-deep-get($config-header, "main-nav", "link-padding");
}
& > div > ul > li > a {
text-transform: uppercase;
}
& > div {
background: #{map-deep-get($config-global, "color", "border", "light")};
border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
padding-left: map-deep-get($config-global, "spacing", "horizontal");
padding-right: map-deep-get($config-global, "spacing", "horizontal");
@include media(mobile) {
background: none;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
}
@include media(mobile) {
& > div > ul > li {
margin: 0 #{0.25 * map-deep-get($config-global, "spacing", "horizontal")};
}
& > div > ul > li:hover,
& > div > ul > li.focus,
& > div > ul > li.current-menu-item {
& > a {
background: #{map-deep-get($config-global, "color", "primary", "default")};
border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
color: #{map-deep-get($config-global, "color", "background")};
}
& > ul {
border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
overflow: hidden;
}
& li {
& > a {
background: #{map-deep-get($config-global, "color", "foreground", "default")};
color: #{map-deep-get($config-global, "color", "background")};
font-weight: normal;
}
&:hover > a,
&.focus > a,
&.current-menu-item > a {
background: #{map-deep-get($config-global, "color", "primary", "default")};
}
}
}
& > div > ul > .menu-item-has-children > a::after {
opacity: 0.67;
}
}
}
// Set entry title vertical margins
article .entry-header .entry-title,
.page-title {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
}
// Set content font-family
.entry-content {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
}
// Center common elements
.site-branding,
.site-info,
.main-navigation,
.entry-header,
.entry-footer,
.page-title,
.author-title,
.comments-title,
.comment-reply-title {
text-align: center;
}
.main-navigation > div {
text-align: left;
}
.comment-reply-title {
display: inherit;
}
.comment .comment-reply-title {
display: flex;
}
.main-navigation > div > ul,
.social-navigation > div > ul,
.pagination .nav-links {
justify-content: center;
}
// Cover & Hero block
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-coblocks-hero .wp-block-coblocks-hero__box {
& > * {
margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
@include media(mobile) {
margin-top: map-deep-get($config-global, "spacing", "vertical");
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
// Table block
table,
.wp-block-table {
td,
th {
border-color: map-deep-get($config-global, "color", "border", "default");
}
}
// Hentry
.entry-header {
.entry-meta {
display: none;
}
}
.entry-footer {
border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
font-size: map-deep-get($config-global, "font", "size", "xs");
padding-top: map-deep-get($config-global, "spacing", "unit");
}
// Post Navigation
.post-navigation {
a {
color: map-deep-get($config-global, "color", "foreground", "default");
&:active,
&:hover,
&:focus {
color: map-deep-get($config-global, "color", "primary", "default");
}
}
.meta-nav {
color: map-deep-get($config-global, "color", "foreground", "light");
font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
font-size: #{map-deep-get($config-global, "font", "size", "xs")};
font-weight: bold;
text-transform: uppercase;
}
.post-title {
font-size: #{map-deep-get($config-global, "font", "size", "base")};
}
&:before {
background: map-deep-get($config-global, "color", "border", "default");;
height: 1px;
content: "";
display: block;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
@include media(mobile) {
margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
}
@extend %responsive-width-full;
}
}
// Comments
.comments-area {
&:before {
background: map-deep-get($config-global, "color", "border", "default");;
height: 1px;
content: "";
display: block;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
@include media(mobile) {
margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
}
@extend %responsive-width-full;
}
.comment-list {
border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
> li {
border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
}
}
.children {
> li {
border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
}
}
}
.comments-title,
.comment-reply-title {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
}
.comment-meta {
.comment-metadata {
color: map-deep-get($config-global, "color", "foreground", "light");
font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
a {
color: inherit;
}
a:active,
a:focus,
a:hover {
color: map-deep-get($config-global, "color", "primary", "default");
}
}
}
// Widgets
.widget-area {
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
.widget-title,
.widgettitle {
font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
font-size: #{map-deep-get($config-global, "font", "size", "base")};
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
text-transform: uppercase;
&:empty {
display: none;
}
}
&:after {
background: map-deep-get($config-global, "color", "border", "default");;
height: 1px;
content: "";
display: block;
margin-top: map-deep-get($config-global, "spacing", "vertical");
@include media(mobile) {
margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
}
@include media(laptop) {
margin-top: map-deep-get($config-global, "spacing", "vertical");
}
@extend %responsive-width-full;
}
@include media(mobile) {
padding-top: map-deep-get($config-global, "spacing", "vertical");
}
@include media(laptop) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
& > *:nth-child(2) {
margin-top: 0;
}
.widget {
width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
}
}
}
.widget_calendar,
.widget_calendar {
caption {
font-weight: bold;
}
td,
th {
text-align: center;
}
}
.widget_archive,
.widget_categories,
.widget_links,
.widget_meta,
.widget_nav_menu,
.widget_pages,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss,
.widget_rss_links,
.widget_top-posts,
.widget_authors,
.widget_jp_blogs_i_follow,
.widget_top-click,
.widget_upcoming_events_widget {
ul {
border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
list-style: none;
margin-left: 0;
}
li {
border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
}
}
.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
border-bottom: 0;
margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
padding-left: map-deep-get($config-global, "spacing", "horizontal");
}
.widget_recent_entries .post-date {
display: block;
}
.widget_rss {
cite,
.rssSummary,
.rss-date {
display: block;
}
}
.widget_search {
input[type="search"] {
display: block;
margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
width: 100%;
}
}

View file

@ -0,0 +1,34 @@
/**
* These styles should be loaded by the Block Editor only
*/
/**
* Abstracts
* - Mixins, variables and functions
*/
@import "../../_dsgnsystm/sass/abstracts/imports";
/**
* Child Theme Name
*/
@import "config-child-theme-deep";
//@import "config-child-theme";
/**
* Base
* - Reset the browser
*/
@import "../../_dsgnsystm/sass/base/editor";
/**
* Elements
* - Styles for basic HTML elemants
*/
@import "../../_dsgnsystm/sass/elements/editor";
/**
* Blocks
* - These styles replace key Gutenberg Block styles for fonts, colors, and
* spacing with CSS-variables overrides
*/
@import "../../_dsgnsystm/sass/blocks/editor";

View file

@ -0,0 +1,92 @@
/*
Theme Name: Redhill
Theme URI: https://github.com/Automattic/_dsgnsystm
Author: Automattic
Author URI: https://wordpress.org/
Description: A design system for WordPress sites built with Gutenberg.
Requires at least: WordPress 4.9.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Template: _dsgnsystm
Text Domain: redhill
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
_Dsgnsystm is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/**
* Abstracts
* - Mixins, variables and functions
*/
@import "../../_dsgnsystm/sass/abstracts/imports";
/**
* Child Theme Name
*/
@import "config-child-theme-deep";
//@import "config-child-theme";
@import "extra-child-theme";
/**
* Base
* - Reset the browser
*/
@import "../../_dsgnsystm/sass/base/imports";
/**
* Layout
* - Structral and responsive styles
*/
@import "../../_dsgnsystm/sass/layout/imports";
/**
* Elements
* - Styles for basic HTML elemants
*/
@import "../../_dsgnsystm/sass/elements/imports";
/**
* Blocks
* - These styles replace key Gutenberg Block styles for fonts, colors, and
* spacing with CSS-variables overrides
* - In the future the Block styles may get compiled to individual .css
* files and conditionally loaded
*/
@import "../../_dsgnsystm/sass/blocks/imports";
/**
* Components
* - Similar to Blocks but exist outside of the "current" editor context
*/
@import "../../_dsgnsystm/sass/components/imports";
/**
* Site Pages
* - Page specific styles
*/
@import "../../_dsgnsystm/sass/pages/imports";
/**
* Responsive Logic
* - Loading this last to respect cascaing rules
*/
@import "../../_dsgnsystm/sass/abstracts/responsive-logic";
/**
* Vendors
* - Styles for 3rd party plugins and WP extensions
*/
@import "../../_dsgnsystm/sass/vendors/imports";
/**
* Child Theme Extra Styles
*/
@import "extra-child-theme";

674
redhill/style-editor.css Normal file
View file

@ -0,0 +1,674 @@
/**
* These styles should be loaded by the Block Editor only
*/
/**
* Abstracts
* - Mixins, variables and functions
*/
/**
* Abstracts
* - Mixins, variables and functions
*/
/* Sass Functions go here */
/**
* Map deep get
* @author Hugo Giraudel
* @access public
* @param {Map} $map - Map
* @param {Arglist} $keys - Key chain
* @return {*} - Desired value
*
* Example:
* $m-breakpoint: map-deep-get($__prefix-default-config, "layouts", "M");
*/
/**
* Deep set function to set a value in nested maps
* @author Hugo Giraudel
* @access public
* @param {Map} $map - Map
* @param {List} $keys - Key chaine
* @param {*} $value - Value to assign
* @return {Map}
*
* Example:
* $__prefix-default-config: map-deep-set($__prefix-default-config, "layouts" "M", 650px);
*/
/**
* jQuery-style extend function
* - Child themes can use this function to `reset` the values in
* config maps without editing the `master` Sass files.
* - src: https://www.sitepoint.com/extra-map-functions-sass/
* - About `map-merge()`:
* - - only takes 2 arguments
* - - is not recursive
* @param {Map} $map - first map
* @param {ArgList} $maps - other maps
* @param {Bool} $deep - recursive mode
* @return {Map}
*
* Examples:
$grid-configuration-default: (
'columns': 12,
'layouts': (
'small': 800px,
'medium': 1000px,
'large': 1200px,
),
);
$grid-configuration-custom: (
'layouts': (
'large': 1300px,
'huge': 1500px
),
);
$grid-configuration-user: (
'direction': 'ltr',
'columns': 16,
'layouts': (
'large': 1300px,
'huge': 1500px
),
);
// $deep: false
$grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user);
// --> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr")
// $deep: true
$grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true);
// --> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr")
*/
/**
* Button
*/
/**
* Cover
*/
/**
* Heading
*/
/**
* List
*/
/**
* Pullquote
*/
/**
* Quote
*/
/**
* Separator
*/
/**
* Responsive breakpoints
* - breakpoints values are defined in _config-global.scss
*/
/**
* Align widths
* - Sets negative margin for .alignwide and .alignfull blocks
*/
/**
* Align wide widths
* - Sets negative margin for .alignwide and .alignfull blocks
*/
/**
* Align container widths
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Child Theme Name
*/
/**
* Redefine Sass map values for child theme output.
* - See: style-child-theme.scss
*/
/**
* Global
*/
/**
* Elements
*/
/**
* Button
*/
/**
* Cover
*/
/**
* Heading
*/
/**
* List
*/
/**
* Pullquote
*/
/**
* Quote
*/
/**
* Separator
*/
/**
* Header
*/
/**
* Footer
*/
/**
* Base
* - Reset the browser
*/
body {
color: #222222;
background-color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 22px;
font-weight: normal;
line-height: 1.6;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
p {
font-size: 1em;
line-height: 1.6;
}
a {
color: #CA2017;
}
a:hover {
color: #222222;
}
button,
a {
cursor: pointer;
}
/**
* Elements
* - Styles for basic HTML elemants
*/
/**
* Elements
* - Styles for basic HTML elemants
*/
blockquote {
padding-left: 16px;
}
blockquote p {
font-size: 1.44rem;
letter-spacing: normal;
line-height: 1.125;
}
blockquote cite,
blockquote footer {
font-size: 0.83333rem;
letter-spacing: normal;
}
blockquote > * {
margin-top: 16px;
margin-bottom: 16px;
}
blockquote > *:first-child {
margin-top: 0;
}
blockquote > *:last-child {
margin-bottom: 0;
}
blockquote.alignleft, blockquote.alignright {
padding-left: inherit;
}
blockquote.alignleft p, blockquote.alignright p {
font-size: 1.2rem;
max-width: inherit;
width: inherit;
}
blockquote.alignleft cite,
blockquote.alignleft footer, blockquote.alignright cite,
blockquote.alignright footer {
font-size: 0.69444rem;
letter-spacing: normal;
}
figcaption {
color: #666666;
font-size: 0.69444rem;
margin-top: calc(0.5 * 16px);
margin-bottom: 16px;
text-align: center;
}
.alignleft figcaption,
.alignright figcaption {
margin-bottom: 0;
}
/* WP Smiley */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
/**
* Blocks
* - These styles replace key Gutenberg Block styles for fonts, colors, and
* spacing with CSS-variables overrides
*/
/**
* Block Styles for the Editor
*
* - These styles replace key Gutenberg Block styles for fonts, colors, and
* spacing with CSS-variables overrides in the Block Editor
* - In the future the Block styles may get compiled to individual .css
* files and conditionally loaded
*/
.wp-block-button {
/* Default Style */
/* Outline Style */
/* Squared Style */
}
.wp-block-button .wp-block-button__link {
color: white;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 1em;
line-height: 1;
background-color: #CA2017;
border-radius: 4.4px;
padding: 16px 24px;
}
.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
color: white;
background-color: #222222;
}
.wp-block-button.is-style-outline .wp-block-button__link {
color: #CA2017;
background: transparent;
border: 2px solid currentcolor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
color: #222222;
}
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
.wp-block-cover,
.wp-block-cover-image {
background-color: #222222;
min-height: calc( 18 * 32px);
/* Treating H2 separately to account for legacy /core styles */
}
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text {
color: white;
}
.wp-block-cover .wp-block-cover__inner-container a,
.wp-block-cover .wp-block-cover-image-text a,
.wp-block-cover .wp-block-cover-text a,
.wp-block-cover-image .wp-block-cover__inner-container a,
.wp-block-cover-image .wp-block-cover-image-text a,
.wp-block-cover-image .wp-block-cover-text a {
color: currentColor;
}
.wp-block-cover h2,
.wp-block-cover-image h2 {
font-size: 2.0736em;
letter-spacing: normal;
line-height: 1.125;
padding: 0;
text-align: left;
}
.wp-block-heading h1, h1, .h1,
.wp-block-heading h2, h2, .h2,
.wp-block-heading h3, h3, .h3,
.wp-block-heading h4, h4, .h4,
.wp-block-heading h5, h5, .h5,
.wp-block-heading h6, h6, .h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: bold;
clear: both;
}
.wp-block-heading h1, h1, .h1 {
font-size: 2.48832em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h2, h2, .h2 {
font-size: 2.0736em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h3, h3, .h3 {
font-size: 1.728em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h4, h4, .h4 {
font-size: 1.44em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h5, h5, .h5 {
font-size: 1.2em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h6, h6, .h6 {
font-size: 1em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-gallery figcaption {
margin-bottom: 0;
}
.wp-block-latest-posts {
padding-left: 0;
}
.wp-block-media-text .block-editor-inner-blocks a {
color: currentColor;
}
.wp-block-pullquote {
padding: calc( 3 * 16px) 0;
margin-left: 0;
margin-right: 0;
text-align: center;
border-top-color: #DDDDDD;
border-top-width: 4px;
border-bottom-color: #DDDDDD;
border-bottom-width: 4px;
color: #222222;
/**
* Block Options
*/
}
.wp-block-pullquote p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 1.44em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-pullquote a {
color: currentColor;
}
.wp-block-pullquote .wp-block-pullquote__citation,
.wp-block-pullquote cite,
.wp-block-pullquote footer {
color: #666666;
font-size: 0.83333em;
letter-spacing: normal;
}
.wp-block-pullquote:not(.is-style-solid-color) {
background: none;
}
.wp-block-pullquote.is-style-solid-color {
background-color: #CA2017;
color: white;
}
.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
.wp-block-pullquote.is-style-solid-color.alignright blockquote {
padding-left: 16px;
padding-right: 16px;
max-width: inherit;
}
.wp-block-pullquote.is-style-solid-color blockquote {
padding-left: 0;
}
.wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
.wp-block-pullquote.is-style-solid-color cite,
.wp-block-pullquote.is-style-solid-color footer {
color: currentColor;
}
.wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote {
margin-left: auto;
margin-right: auto;
}
.wp-block-quote {
border-left-color: #CA2017;
margin: 32px 0;
padding-left: 16px;
}
.wp-block-quote p {
font-size: 1.44em;
letter-spacing: normal;
}
.wp-block-quote.is-large, .wp-block-quote.is-style-large {
border: none;
padding: 0 16px;
}
.wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
font-size: 1.728em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-separator,
hr {
border-bottom: 2px solid #DDDDDD;
clear: both;
}
.wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"],
hr[style*="text-align:right"],
hr[style*="text-align: right"] {
border-right-color: #DDDDDD;
}
.wp-block-separator.is-style-wide,
hr.is-style-wide {
border-bottom-width: 2px;
}
.wp-block-separator.is-style-dots,
hr.is-style-dots {
border-bottom: none;
}
.wp-block-separator.is-style-dots:before,
hr.is-style-dots:before {
color: #DDDDDD;
}
table th,
.wp-block-table th {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
table td,
table th,
.wp-block-table td,
.wp-block-table th {
padding: calc( 0.5 * 16px);
}
/**
* Editor Post Title
* - Needs a special styles
*/
.editor-post-title__block .editor-post-title__input {
color: #222222;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: bold;
font-size: 2.0736em;
letter-spacing: normal;
line-height: 1.125;
}
.has-primary-color[class] {
color: #CA2017 !important;
}
.has-secondary-color[class] {
color: #007FDB !important;
}
.has-foreground-color[class] {
color: #222222 !important;
}
.has-foreground-light-color[class] {
color: #666666 !important;
}
.has-foreground-dark-color[class] {
color: #111111 !important;
}
.has-background-color[class] {
color: white !important;
}
.has-primary-background-color[class] {
background-color: #CA2017 !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: #007FDB !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #222222 !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #666666 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #222222;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333em;
}
.is-regular-text,
.has-regular-font-size,
.has-normal-font-size,
.has-medium-font-size {
font-size: 1.2em;
}
.is-large-text,
.has-large-font-size {
font-size: 1.44em;
line-height: 1.125;
}
.is-larger-text,
.has-larger-font-size,
.has-huge-font-size {
font-size: 1.728em;
line-height: 1.125;
}
.has-drop-cap:not(:focus)::first-letter {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: calc(2 * 2.48832em);
font-weight: bold;
}

3832
redhill/style-rtl.css Normal file

File diff suppressed because it is too large Load diff

3837
redhill/style.css Normal file

File diff suppressed because it is too large Load diff