Rockfield: Generate child theme

This commit is contained in:
Thomas Guillot 2019-08-09 14:57:26 +01:00
parent 4562a4c035
commit 6e16ecc877
14 changed files with 14024 additions and 0 deletions

185
rockfield/functions.php Executable file
View file

@ -0,0 +1,185 @@
<?php
/**
* Child Theme Functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package WordPress
* @subpackage Rockfield
* @since 1.0.0
*/
if ( ! function_exists( 'rockfield_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 rockfield_setup() {
// Add child theme editor styles, compiled from `style-child-theme-editor.scss`.
add_editor_style( 'style-editor.css' );
// 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', 'rockfield' ),
'shortName' => __( 'S', 'rockfield' ),
'size' => 19.5,
'slug' => 'small',
),
array(
'name' => __( 'Normal', 'rockfield' ),
'shortName' => __( 'M', 'rockfield' ),
'size' => 22,
'slug' => 'normal',
),
array(
'name' => __( 'Large', 'rockfield' ),
'shortName' => __( 'L', 'rockfield' ),
'size' => 36.5,
'slug' => 'large',
),
array(
'name' => __( 'Huge', 'rockfield' ),
'shortName' => __( 'XL', 'rockfield' ),
'size' => 49.5,
'slug' => 'huge',
),
)
);
// 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', 'rockfield' ),
'slug' => 'primary',
'color' => '#0000FF',
),
array(
'name' => __( 'Secondary', 'rockfield' ),
'slug' => 'secondary',
'color' => '#FF0000',
),
array(
'name' => __( 'Dark Gray', 'rockfield' ),
'slug' => 'foreground-dark',
'color' => '#111111',
),
array(
'name' => __( 'Gray', 'rockfield' ),
'slug' => 'foreground',
'color' => '#444444',
),
array(
'name' => __( 'Light Gray', 'rockfield' ),
'slug' => 'foreground-light',
'color' => '#767676',
),
array(
'name' => __( 'Lighter Gray', 'rockfield' ),
'slug' => 'background-dark',
'color' => '#DDDDDD',
),
array(
'name' => __( 'Subtle Gray', 'rockfield' ),
'slug' => 'background-light',
'color' => '#FAFAFA',
),
array(
'name' => __( 'White', 'rockfield' ),
'slug' => 'background',
'color' => '#FFFFFF',
),
)
);
}
endif;
add_action( 'after_setup_theme', 'rockfield_setup', 12 );
/**
* Filter the content_width in pixels, based on the child-theme's design and stylesheet.
*/
function rockfield_content_width() {
return 750;
}
add_filter( 'varia_content_width', 'rockfield_content_width' );
/**
* Add Google webfonts, if necessary
*
* - See: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
*/
function rockfield_fonts_url() {
$fonts_url = '';
/* Translators: If there are characters in your language that are not
* supported by Raleway, translate this to 'off'. Do not translate
* into your own language.
*/
$raleway = esc_html_x( 'on', 'Raleway font: on or off', 'rockfield' );
/* Translators: If there are characters in your language that are not
* supported by Lora, translate this to 'off'. Do not translate
* into your own language.
*/
$lora = esc_html_x( 'on', 'Lora font: on or off', 'rockfield' );
if ( 'off' !== $raleway || 'off' !== $lora ) {
$font_families = array();
if ( 'off' !== $raleway ) {
$font_families[] = 'Raleway:400,400i,700,700i';
}
if ( 'off' !== $lora ) {
$font_families[] = 'Lora:400,400i,700,700i';
}
$query_args = array(
'family' => urlencode( implode( '|', $font_families ) ),
'subset' => urlencode( 'latin,latin-ext' ),
);
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
}
return esc_url_raw( $fonts_url );
}
/**
* Enqueue scripts and styles.
*/
function rockfield_scripts() {
// enqueue Google fonts, if necessary
wp_enqueue_style( 'rockfield-fonts', rockfield_fonts_url(), array(), null );
// dequeue parent styles
wp_dequeue_style( 'varia-style' );
// enqueue child styles
wp_enqueue_style('rockfield-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ));
// enqueue child RTL styles
wp_style_add_data( 'rockfield-style', 'rtl', 'replace' );
}
add_action( 'wp_enqueue_scripts', 'rockfield_scripts', 99 );
/**
* Enqueue theme styles for the block editor.
*/
function rockfield_editor_styles() {
// Enqueue Google fonts in the editor, if necessary
wp_enqueue_style( 'rockfield-editor-fonts', rockfield_fonts_url(), array(), null );
}
add_action( 'enqueue_block_editor_assets', 'rockfield_editor_styles' );

5168
rockfield/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

44
rockfield/package.json Executable file
View file

@ -0,0 +1,44 @@
{
"name": "rockfield",
"version": "1.0.0",
"description": "Rockfield",
"bugs": {
"url": "https://github.com/Automattic/themes/issues"
},
"homepage": "https://github.com/Automattic/themes/varia#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:print": "node-sass sass/print.scss print.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r print.css",
"build": "run-p \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
}
}

13
rockfield/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 */)
]
};

162
rockfield/print.css Normal file
View file

@ -0,0 +1,162 @@
/*
Theme Name: Rockfield
Adding print support. The print styles are based on the the great work of
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Margins
# Typography
# Page breaks
# Links
# Visibility
--------------------------------------------------------------*/
@media print {
/* Margins */
@page {
margin: 2cm;
}
.entry {
margin-top: 1em;
}
.entry .entry-header, .site-footer .site-info {
margin: 0;
}
/* Fonts */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
}
h2,
h3,
h4,
.has-regular-font-size,
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title, h3 {
font-size: 14pt;
margin-top: 25px;
}
/* Page breaks */
a {
page-break-inside: avoid;
}
blockquote {
page-break-inside: avoid;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
img {
page-break-inside: avoid;
page-break-after: avoid;
}
table, pre {
page-break-inside: avoid;
}
ul, ol, dl {
page-break-before: avoid;
}
/* Links */
a:link, a:visited, a {
background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a {
page-break-inside: avoid;
}
a[href^=http]:after {
content: " < " attr(href) "> ";
}
a:after > img {
content: "";
}
article a[href^="#"]:after {
content: "";
}
a:not(:local-link):after {
content: " < " attr(href) "> ";
}
/* Visibility */
.main-navigation,
.site-title + .main-navigation,
.social-navigation,
.site-branding-container:before,
.entry .entry-title:before,
.entry-footer,
.author-description:before,
.post-navigation,
.widget-area,
.comment-form-flex,
.comment-reply,
.comment .comment-metadata .edit-link {
display: none;
}
.entry .entry-content .wp-block-button .wp-block-button__link,
.entry .entry-content .button {
color: #000;
background: none;
}
/* Site Header (With Featured Image) */
.site-header.featured-image {
min-height: 0;
}
.site-header.featured-image .main-navigation a,
.site-header.featured-image .main-navigation a + svg,
.site-header.featured-image .social-navigation a,
.site-header.featured-image .site-title a,
.site-header.featured-image .site-featured-image a,
.site-header.featured-image .site-branding .site-title,
.site-header.featured-image .site-branding .site-description,
.site-header.featured-image .main-navigation a:after,
.site-header.featured-image .main-navigation .main-menu > li.menu-item-has-children:after,
.site-header.featured-image .main-navigation li,
.site-header.featured-image .social-navigation li,
.site-header.featured-image .entry-meta,
.site-header.featured-image .entry-title,
.site-header.featured-image#masthead .site-title a {
color: #000;
text-shadow: none;
}
.site-header.featured-image .site-featured-image .entry-header,
.site-header.featured-image .site-branding-container {
margin-top: 0;
margin-bottom: 0;
}
.site-header.featured-image .site-featured-image .post-thumbnail img {
position: relative;
height: initial;
width: initial;
object-fit: none;
min-width: 0;
min-height: 0;
max-width: 100%;
margin-top: 1rem;
}
/* Remove image filters from featured image */
.image-filters-enabled *:after {
display: none !important;
}
.image-filters-enabled .site-header.featured-image .site-featured-image:before {
display: none;
}
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
filter: none;
}
}

View file

@ -0,0 +1,355 @@
/**
* Redefine Sass map values for child theme output.
* - See: style-child-theme.scss
*/
/**
* Global
*/
// Vertical Rhythm Multiplier
$baseline-unit: 8px;
$typescale-root: 18px; // 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": "Lora, Baskerville, Georgia, Times, serif",
"secondary": "Lora, Baskerville, Georgia, Times, serif",
"code": "monospace, monospace",
"ui": "Raleway, -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": #7E756E,
"hover": #5E5853,
),
"secondary": (
"default": #208751,
"hover": #5E5853,
),
"foreground": (
"default": #5E5853,
"light": #99908A, // must be accessible against background
"dark": #1E1C1B, // must be accessible against background
),
"background": (
"default": white,
"light": #F4F5F5, // must be accessible against foreground-default
"dark": #E8E9EA, // must be accessible against foreground-default
),
"border": (
"default": #E8E9EA,
"light": #F4F5F5,
"dark": #DEE1E3,
),
"text-selection": #F8F6F2,
"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": 782px,
"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.5 * $typescale-root),
"md": (0.75 * $typescale-root),
"lg": $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", "md"),
"size": map-deep-get($config-global, "font", "size", "md"),
"weight": bold,
),
// Borders
"border": (
"width": 1px,
"radius": 3px,
),
"padding": #{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", "sm"),
"weight": bold,
"line-height": 1,
),
// Borders
"border-radius": 0,
"border-width": 2px,
// Padding
"padding": (
"vertical": map-deep-get($config-global, "spacing", "unit"),
"horizontal": #{1.25 * map-deep-get($config-global, "spacing", "unit")},
),
);
/**
* Cover
*/
$config-cover: (
"height": calc( 15 * #{map-deep-get($config-global, "spacing", "vertical")} ),
);
/**
* Heading
*/
$config-heading: (
// Fonts & Typography
"font": (
// Family
"family": map-deep-get($config-global, "font", "family", "primary"),
// Size
"size": (
"h6": map-deep-get($config-global, "font", "size", "md"),
"h5": map-deep-get($config-global, "font", "size", "lg"),
"h4": map-deep-get($config-global, "font", "size", "xl"),
"h3": map-deep-get($config-global, "font", "size", "xxl"),
"h2": map-deep-get($config-global, "font", "size", "xxxl"),
"h1": map-deep-get($config-global, "font", "size", "xxxxl"),
),
// 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.25 * $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", "primary", "default"),
"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
),
// Fonts & Typography
"title": (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "ui"),
"size": map-deep-get($config-global, "font", "size", "sm"),
"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", "primary", "default"),
"link-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", "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": calc( 0.5 * calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} ) ),
),
);
/**
* Footer
*/
$config-footer: (
// 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", "secondary", "default"),
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "ui"),
"size": map-deep-get($config-global, "font", "size", "sm"),
"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
),
);

View file

@ -0,0 +1,62 @@
/**
* Extra Child Theme Styles
*/
// @import "";
a {
text-decoration: none;
}
.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;
}
.site-title {
display: inline;
}
.site-description {
display: none;
}
@include media(mobile) {
.site-description {
display: inline;
}
.site-title:not(:empty) + .site-description:not(:empty):before {
content: "\2666";
font-family: Arial, Helvetica, sans-serif;
margin: 0 .25em;
}
}

198
rockfield/sass/print.scss Executable file
View file

@ -0,0 +1,198 @@
/*
Theme Name: Rockfield
Adding print support. The print styles are based on the the great work of
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Margins
# Typography
# Page breaks
# Links
# Visibility
--------------------------------------------------------------*/
@media print {
/* Margins */
@page {
margin: 2cm;
}
.entry {
margin-top: 1em;
}
.entry .entry-header, .site-footer .site-info {
margin: 0;
}
/* Fonts */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
}
h2,
h3,
h4,
.has-regular-font-size,
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title, h3 {
font-size: 14pt;
margin-top: 25px;
}
/* Page breaks */
a {
page-break-inside: avoid
}
blockquote {
page-break-inside: avoid;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
page-break-inside: avoid
}
img {
page-break-inside: avoid;
page-break-after: avoid;
}
table, pre {
page-break-inside: avoid;
}
ul, ol, dl {
page-break-before: avoid;
}
/* Links */
a:link, a:visited, a {
background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a {
page-break-inside: avoid;
}
a[href^=http]:after {
content: " < " attr(href) "> ";
}
a:after > img {
content: "";
}
article a[href^="#"]:after {
content: "";
}
a:not(:local-link):after {
content: " < " attr(href) "> ";
}
/* Visibility */
.main-navigation,
.site-title + .main-navigation,
.social-navigation,
.site-branding-container:before,
.entry .entry-title:before,
.entry-footer,
.author-description:before,
.post-navigation,
.widget-area,
.comment-form-flex,
.comment-reply,
.comment .comment-metadata .edit-link {
display: none;
}
.entry .entry-content .wp-block-button .wp-block-button__link,
.entry .entry-content .button {
color: #000;
background: none;
}
/* Site Header (With Featured Image) */
.site-header.featured-image {
min-height: 0;
.main-navigation a,
.main-navigation a + svg,
.social-navigation a,
.site-title a,
.site-featured-image a,
.site-branding .site-title,
.site-branding .site-description,
.main-navigation a:after,
.main-navigation .main-menu > li.menu-item-has-children:after,
.main-navigation li,
.social-navigation li,
.entry-meta,
.entry-title,
&#masthead .site-title a {
color: #000;
text-shadow: none;
}
.site-featured-image .entry-header,
.site-branding-container {
margin-top: 0;
margin-bottom: 0;
}
.site-featured-image .post-thumbnail img {
position: relative;
height: initial;
width: initial;
object-fit: none;
min-width: 0;
min-height: 0;
max-width: 100%;
margin-top: 1rem;
}
}
/* Remove image filters from featured image */
.image-filters-enabled {
*:after {
display: none !important;
}
.site-header.featured-image .site-featured-image:before {
display: none;
}
.site-header.featured-image .site-featured-image .post-thumbnail img {
filter: none;
}
}
}

View file

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

View file

@ -0,0 +1,90 @@
/*
Theme Name: Rockfield
Theme URI: https://github.com/Automattic/themes/varia
Author: Automattic
Author URI: https://automattic.com/
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: varia
Text Domain: rockfield
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.
Varia is based on Underscores https://underscores.me/, (C) 2012-2019 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 "../../varia/sass/abstracts/imports";
/**
* Child Theme Deep
*/
@import "config-child-theme-deep";
/**
* Base
* - Reset the browser
*/
@import "../../varia/sass/base/imports";
/**
* Layout
* - Structral and responsive styles
*/
@import "../../varia/sass/layout/imports";
/**
* Elements
* - Styles for basic HTML elemants
*/
@import "../../varia/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 "../../varia/sass/blocks/imports";
/**
* Components
* - Similar to Blocks but exist outside of the "current" editor context
*/
@import "../../varia/sass/components/imports";
/**
* Site Pages
* - Page specific styles
*/
@import "../../varia/sass/pages/imports";
/**
* Responsive Logic
* - Loading this last to respect cascaing rules
*/
@import "../../varia/sass/abstracts/responsive-logic";
/**
* Vendors
* - Styles for 3rd party plugins and WP extensions
*/
@import "../../varia/sass/vendors/imports";
/**
* Child Theme Extra Styles
*/
@import "extra-child-theme";

BIN
rockfield/screenshot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

858
rockfield/style-editor.css Normal file
View file

@ -0,0 +1,858 @@
/**
* 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: #5E5853;
background-color: white;
font-family: Lora, Baskerville, Georgia, Times, serif;
font-size: 18px;
font-weight: normal;
line-height: 1.6;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.editor-post-title__block {
font-size: 18px;
}
p {
font-size: 1em;
line-height: 1.6;
}
a {
color: #7E756E;
}
a:hover {
color: #5E5853;
}
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.728rem;
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.44rem;
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: #99908A;
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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
font-weight: bold;
font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.83333em;
line-height: 1;
background-color: #7E756E;
border-radius: 0;
padding: 16px 20px;
}
.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: ("default": white, "light": #F4F5F5, "dark": #E8E9EA);
background-color: #5E5853;
}
.wp-block-button.is-style-outline .wp-block-button__link {
color: #7E756E;
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: #5E5853;
}
.wp-block-button.is-style-squared .wp-block-button__link {
border-radius: 0;
}
.wp-block-cover,
.wp-block-cover-image {
background-color: #5E5853;
min-height: calc( 15 * 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.48832em;
letter-spacing: normal;
line-height: 1.125;
padding: 0;
max-width: inherit;
text-align: inherit;
}
.wp-block-cover h2.has-text-align-left,
.wp-block-cover-image h2.has-text-align-left {
text-align: left;
}
.wp-block-cover h2.has-text-align-center,
.wp-block-cover-image h2.has-text-align-center {
text-align: center;
}
.wp-block-cover h2.has-text-align-right,
.wp-block-cover-image h2.has-text-align-right {
text-align: right;
}
.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: Lora, Baskerville, Georgia, Times, serif;
font-weight: bold;
clear: both;
}
.wp-block-heading h1, h1, .h1 {
font-size: 2.98598em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h2, h2, .h2 {
font-size: 2.48832em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h3, h3, .h3 {
font-size: 2.0736em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h4, h4, .h4 {
font-size: 1.728em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h5, h5, .h5 {
font-size: 1.44em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-heading h6, h6, .h6 {
font-size: 1.2em;
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[style*="background-color"]:not(.has-background-background-color) .block-editor-inner-blocks a {
color: currentColor;
}
.a8c-posts-list {
padding-left: 0;
}
p.has-background {
padding: 16px 16px;
}
p.has-background:not(.has-background-background-color) a {
color: currentColor;
}
.wp-block-pullquote {
padding: calc( 3 * 16px) 0;
margin-left: 0;
margin-right: 0;
text-align: center;
border-top-color: #E8E9EA;
border-top-width: 2px;
border-bottom-color: #E8E9EA;
border-bottom-width: 2px;
color: #5E5853;
/**
* Block Options
*/
}
.wp-block-pullquote blockquote {
padding-left: 0;
}
.wp-block-pullquote p {
font-family: Lora, Baskerville, Georgia, Times, serif;
font-size: 1.728em;
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: #99908A;
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: #7E756E;
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: #7E756E;
margin: 32px 0;
padding-left: 16px;
}
.wp-block-quote p {
font-family: Lora, Baskerville, Georgia, Times, serif;
font-size: 1.728em;
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-family: Lora, Baskerville, Georgia, Times, serif;
font-size: 2.0736em;
letter-spacing: normal;
line-height: 1.125;
}
.wp-block-separator,
hr {
border-bottom: 2px solid #E8E9EA;
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: #E8E9EA;
}
.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: #E8E9EA;
}
table th,
.wp-block-table th {
font-family: Lora, Baskerville, Georgia, Times, 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: #5E5853;
font-family: Lora, Baskerville, Georgia, Times, serif;
font-weight: bold;
font-size: 2.48832em;
letter-spacing: normal;
line-height: 1.125;
}
.has-primary-color[class] {
color: #7E756E !important;
}
.has-secondary-color[class] {
color: #208751 !important;
}
.has-foreground-color[class] {
color: #5E5853 !important;
}
.has-foreground-light-color[class] {
color: #99908A !important;
}
.has-foreground-dark-color[class] {
color: #1E1C1B !important;
}
.has-background-light-color[class] {
color: #F4F5F5 !important;
}
.has-background-dark-color[class] {
color: #E8E9EA !important;
}
.has-background-color[class] {
color: white !important;
}
.has-primary-background-color[class] {
background-color: #7E756E !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,
.has-primary-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: #208751 !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,
.has-secondary-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #5E5853 !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,
.has-foreground-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #99908A !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,
.has-foreground-light-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #1E1C1B !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,
.has-foreground-dark-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #F4F5F5 !important;
color: #5E5853;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
.has-background-light-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #E8E9EA !important;
color: #5E5853;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
.has-background-dark-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #5E5853;
}
.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,
.has-background-background-color[class] .wp-block-quote__citation {
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: Lora, Baskerville, Georgia, Times, serif;
font-size: calc(2 * 2.98598em);
font-weight: bold;
}
/**
* Spacing Overrides
*/
/*
* Margins
*/
.margin-top-none {
margin-top: 0 !important;
}
.margin-top-half {
margin-top: 16px !important;
}
.margin-top-default {
margin-top: 32px !important;
}
.margin-right-none {
margin-top: 0 !important;
}
.margin-right-half {
margin-top: 16px !important;
}
.margin-right-default {
margin-top: 32px !important;
}
.margin-bottom-none {
margin-bottom: 0 !important;
}
.margin-bottom-half {
margin-bottom: 16px !important;
}
.margin-bottom-default {
margin-bottom: 32px !important;
}
.margin-left-none {
margin-top: 0 !important;
}
.margin-left-half {
margin-top: 16px !important;
}
.margin-left-default {
margin-top: 32px !important;
}
/*
* Padding
*/
.padding-top-none {
padding-top: 0 !important;
}
.padding-top-half {
padding-top: 16px !important;
}
.padding-top-default {
padding-top: 32px !important;
}
.padding-right-none {
padding-top: 0 !important;
}
.padding-right-half {
padding-top: 16px !important;
}
.padding-right-default {
padding-top: 32px !important;
}
.padding-bottom-none {
padding-bottom: 0 !important;
}
.padding-bottom-half {
padding-bottom: 16px !important;
}
.padding-bottom-default {
padding-bottom: 32px !important;
}
.padding-left-none {
padding-top: 0 !important;
}
.padding-left-half {
padding-top: 16px !important;
}
.padding-left-default {
padding-top: 32px !important;
}
/**
* Extras
*/
.editor-post-title__input {
text-align: center;
}

3422
rockfield/style-rtl.css Normal file

File diff suppressed because it is too large Load diff

3427
rockfield/style.css Normal file

File diff suppressed because it is too large Load diff