Upgrade to version 11.0.1 #1
10
.github/labeler.yml
vendored
10
.github/labeler.yml
vendored
@@ -1,19 +1,15 @@
|
||||
build:
|
||||
- changed-files:
|
||||
- any-glob-to-any-file:
|
||||
- .eslintrc.js
|
||||
- .prettierrc
|
||||
- .stylelintrc
|
||||
- bud.config.js
|
||||
- tsconfig.json
|
||||
- vite.config.js
|
||||
dependencies:
|
||||
- changed-files:
|
||||
- any-glob-to-any-file:
|
||||
- yarn.lock
|
||||
- package-lock.json
|
||||
javascript:
|
||||
- changed-files:
|
||||
- any-glob-to-any-file:
|
||||
- resources/scripts/**/*.js
|
||||
- resources/js/**/*.js
|
||||
php:
|
||||
- changed-files:
|
||||
- any-glob-to-any-file:
|
||||
|
||||
24
.github/renovate.json
vendored
24
.github/renovate.json
vendored
@@ -1,17 +1,23 @@
|
||||
{
|
||||
"baseBranches": ["main"],
|
||||
"baseBranches": [
|
||||
"main"
|
||||
],
|
||||
"commitMessageAction": "⬆️ Bump",
|
||||
"commitMessageTopic": "{{depName}}",
|
||||
"extends": ["config:base", "schedule:weekly"],
|
||||
"extends": [
|
||||
"config:recommended",
|
||||
"schedule:weekly"
|
||||
],
|
||||
"rangeStrategy": "bump",
|
||||
"packageRules": [
|
||||
{
|
||||
"matchUpdateTypes": ["minor", "patch", "pin"]
|
||||
},
|
||||
{
|
||||
"groupName": "Bud",
|
||||
"matchPackagePrefixes": ["@roots/"],
|
||||
"schedule": ["at any time"]
|
||||
"matchUpdateTypes": [
|
||||
"minor",
|
||||
"patch",
|
||||
"pin"
|
||||
],
|
||||
"enabled": true
|
||||
}
|
||||
],
|
||||
"timezone": "America/Chicago"
|
||||
"timezone": "America/Detroit"
|
||||
}
|
||||
|
||||
30
.github/workflows/main.yml
vendored
30
.github/workflows/main.yml
vendored
@@ -25,18 +25,34 @@ jobs:
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
cache: 'yarn'
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Install dependencies using Yarn
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Install dependencies using npm
|
||||
run: npm install
|
||||
|
||||
- name: Build and compile assets
|
||||
run: |
|
||||
yarn build
|
||||
cat public/entrypoints.json
|
||||
cat public/manifest.json
|
||||
npm run build
|
||||
cat public/build/manifest.json
|
||||
|
||||
- name: Validate theme.json
|
||||
run: |
|
||||
THEME_JSON="public/build/assets/theme.json"
|
||||
|
||||
if [ ! -f "$THEME_JSON" ]; then
|
||||
echo "❌ theme.json not found"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
jq -e '
|
||||
(.settings.color.palette | length > 0) and
|
||||
(.settings.typography.fontFamilies | length > 0) and
|
||||
(.settings.typography.fontSizes | length > 0)
|
||||
' "$THEME_JSON" 2>&1 || {
|
||||
echo "❌ Invalid theme.json structure or missing required values"
|
||||
exit 1
|
||||
}
|
||||
|
||||
php:
|
||||
name: PHP ${{ matrix.php }}
|
||||
@@ -44,7 +60,7 @@ jobs:
|
||||
if: "!contains(github.event.head_commit.message, '[ci skip]')"
|
||||
strategy:
|
||||
matrix:
|
||||
php: ['8.1', '8.2']
|
||||
php: ['8.2']
|
||||
|
||||
steps:
|
||||
- name: Checkout the project
|
||||
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -1,7 +1,6 @@
|
||||
/node_modules
|
||||
/vendor
|
||||
/public
|
||||
/public/*
|
||||
!/public/.gitkeep
|
||||
.env
|
||||
.budfiles
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Copyright (c) Roots Software Foundation LLC
|
||||
Copyright (c) Roots Software LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
|
||||
59
README.md
59
README.md
@@ -1,54 +1,31 @@
|
||||
<p align="center">
|
||||
<a href="https://roots.io/sage/">
|
||||
<img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100">
|
||||
</a>
|
||||
<a href="https://roots.io/sage/"><img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://packagist.org/packages/roots/sage">
|
||||
<img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square">
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/roots/sage/actions/workflows/main.yml">
|
||||
<img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square">
|
||||
</a>
|
||||
|
||||
<a href="https://twitter.com/rootswp">
|
||||
<img alt="Follow Roots" src="https://img.shields.io/badge/follow%20@rootswp-1da1f2?logo=twitter&logoColor=ffffff&message=&style=flat-square">
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/roots/sage"><img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square"></a>
|
||||
<a href="https://github.com/roots/sage/actions/workflows/main.yml"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square"></a>
|
||||
<a href="https://bsky.app/profile/roots.dev"><img alt="Follow roots.dev on Bluesky" src="https://img.shields.io/badge/follow-@roots.dev-0085ff?logo=bluesky&style=flat-square"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">Advanced WordPress starter theme with Tailwind CSS and Laravel Blade</p>
|
||||
# Sage
|
||||
|
||||
<p align="center">
|
||||
<a href="https://roots.io/sage/">Website</a> <a href="https://roots.io/sage/docs/installation/">Documentation</a> <a href="https://github.com/roots/sage/releases">Releases</a> <a href="https://discourse.roots.io/">Community</a>
|
||||
</p>
|
||||
**Advanced hybrid WordPress starter theme with Laravel Blade and Tailwind CSS**
|
||||
|
||||
- 🔧 Clean, efficient theme templating with Laravel Blade
|
||||
- ⚡️ Modern front-end development workflow powered by Vite
|
||||
- 🎨 Out of the box support for Tailwind CSS
|
||||
- 🚀 Harness the power of Laravel with [Acorn integration](https://github.com/roots/acorn)
|
||||
- 📦 Block editor support built-in
|
||||
|
||||
Sage brings proper PHP templating and modern JavaScript tooling to WordPress themes. Write organized, component-based code using Laravel Blade, enjoy instant builds and CSS hot-reloading with Vite, and leverage Laravel's robust feature set through Acorn.
|
||||
|
||||
[Read the docs to get started](https://roots.io/sage/docs/installation/)
|
||||
|
||||
## Sponsors
|
||||
|
||||
Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, please consider [sponsoring Roots](https://github.com/sponsors/roots).
|
||||
Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, [please consider sponsoring us](https://github.com/sponsors/roots).
|
||||
|
||||
<div align="center">
|
||||
<a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="120" height="90"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a>
|
||||
<a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a> <a href="https://bonsai.so/"><img src="https://cdn.roots.io/app/uploads/bonsai.svg" alt="Bonsai" width="120" height="90"></a>
|
||||
</div>
|
||||
|
||||
## Overview
|
||||
|
||||
Sage is a WordPress starter theme with block editor support.
|
||||
|
||||
- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn)
|
||||
- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/master/blade)
|
||||
- Modern frontend development workflow powered by [Bud](https://bud.js.org/)
|
||||
- Out of the box support for [Tailwind CSS](https://tailwindcss.com/)
|
||||
|
||||
## Getting Started
|
||||
|
||||
See the [Sage installation documentation](https://roots.io/sage/docs/installation/).
|
||||
|
||||
## Stay Connected
|
||||
|
||||
- Join us on Discord by [sponsoring us on GitHub](https://github.com/sponsors/roots)
|
||||
- Participate on [Roots Discourse](https://discourse.roots.io/)
|
||||
- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
|
||||
- Read the [Roots Blog](https://roots.io/blog/)
|
||||
- Subscribe to the [Roots Newsletter](https://roots.io/newsletter/)
|
||||
|
||||
@@ -17,10 +17,13 @@ class App extends Composer
|
||||
];
|
||||
|
||||
/**
|
||||
* Data to be passed to view before rendering.
|
||||
*
|
||||
* @return array
|
||||
* Retrieve the site name.
|
||||
*/
|
||||
public function siteName(): string
|
||||
{
|
||||
return get_bloginfo('name', 'display');
|
||||
}
|
||||
|
||||
public function with()
|
||||
{
|
||||
return [
|
||||
@@ -28,20 +31,9 @@ class App extends Composer
|
||||
'VideoSrcset' => new Utilities\VideoSrcset,
|
||||
'ImageSrcset' => new Utilities\ImageSrcset,
|
||||
'siteName' => $this->siteName(),
|
||||
'siteLogo' => @file_get_contents(get_template_directory() . '/resources/images/logo-rhythm-road-entertainment.svg'),
|
||||
'company_legal' => get_field('badegg_company_legal', 'option'),
|
||||
'company_tel' => get_field('badegg_company_tel', 'option'),
|
||||
'company_email' => get_field('badegg_company_email', 'option'),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the site name.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function siteName()
|
||||
{
|
||||
return get_bloginfo('name', 'display');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,29 +15,10 @@ class Comments extends Composer
|
||||
'partials.comments',
|
||||
];
|
||||
|
||||
/**
|
||||
* Data to be passed to view before rendering.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function with()
|
||||
{
|
||||
return [
|
||||
'title' => $this->title(),
|
||||
'responses' => $this->responses(),
|
||||
'previous' => $this->previous(),
|
||||
'next' => $this->next(),
|
||||
'paginated' => $this->paginated(),
|
||||
'closed' => $this->closed(),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* The comment title.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function title()
|
||||
public function title(): string
|
||||
{
|
||||
return sprintf(
|
||||
/* translators: %1$s is replaced with the number of comments and %2$s with the post title */
|
||||
@@ -49,13 +30,11 @@ class Comments extends Composer
|
||||
|
||||
/**
|
||||
* Retrieve the comments.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function responses()
|
||||
public function responses(): ?string
|
||||
{
|
||||
if (! have_comments()) {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
|
||||
return wp_list_comments([
|
||||
@@ -67,13 +46,11 @@ class Comments extends Composer
|
||||
|
||||
/**
|
||||
* The previous comments link.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function previous()
|
||||
public function previous(): ?string
|
||||
{
|
||||
if (! get_previous_comments_link()) {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
|
||||
return get_previous_comments_link(
|
||||
@@ -83,13 +60,11 @@ class Comments extends Composer
|
||||
|
||||
/**
|
||||
* The next comments link.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function next()
|
||||
public function next(): ?string
|
||||
{
|
||||
if (! get_next_comments_link()) {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
|
||||
return get_next_comments_link(
|
||||
@@ -99,20 +74,16 @@ class Comments extends Composer
|
||||
|
||||
/**
|
||||
* Determine if the comments are paginated.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function paginated()
|
||||
public function paginated(): bool
|
||||
{
|
||||
return get_comment_pages_count() > 1 && get_option('page_comments');
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if the comments are closed.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function closed()
|
||||
public function closed(): bool
|
||||
{
|
||||
return ! comments_open() && get_comments_number() != '0' && post_type_supports(get_post_type(), 'comments');
|
||||
}
|
||||
|
||||
@@ -17,25 +17,10 @@ class Post extends Composer
|
||||
'partials.content-*',
|
||||
];
|
||||
|
||||
/**
|
||||
* Data to be passed to view before rendering, but after merging.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function override()
|
||||
{
|
||||
return [
|
||||
'title' => $this->title(),
|
||||
'pagination' => $this->pagination(),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the post title.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function title()
|
||||
public function title(): string
|
||||
{
|
||||
if ($this->view->name() !== 'partials.page-header') {
|
||||
return get_the_title();
|
||||
@@ -70,10 +55,8 @@ class Post extends Composer
|
||||
|
||||
/**
|
||||
* Retrieve the pagination links.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function pagination()
|
||||
public function pagination(): string
|
||||
{
|
||||
return wp_link_pages([
|
||||
'echo' => 0,
|
||||
|
||||
@@ -6,25 +6,56 @@
|
||||
|
||||
namespace App;
|
||||
|
||||
use function Roots\bundle;
|
||||
use Illuminate\Support\Facades\Vite;
|
||||
|
||||
/**
|
||||
* Register the theme assets.
|
||||
* Inject styles into the block editor.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
add_filter('block_editor_settings_all', function ($settings) {
|
||||
$style = Vite::asset('resources/css/editor.scss');
|
||||
|
||||
$settings['styles'][] = [
|
||||
'css' => "@import url('{$style}')",
|
||||
];
|
||||
|
||||
return $settings;
|
||||
});
|
||||
|
||||
/**
|
||||
* Inject scripts into the block editor.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
add_action('wp_enqueue_scripts', function () {
|
||||
bundle('app')->enqueue();
|
||||
}, 100);
|
||||
add_filter('admin_head', function () {
|
||||
if (! get_current_screen()?->is_block_editor()) {
|
||||
return;
|
||||
}
|
||||
|
||||
$dependencies = json_decode(Vite::content('editor.deps.json'));
|
||||
|
||||
foreach ($dependencies as $dependency) {
|
||||
if (! wp_script_is($dependency)) {
|
||||
wp_enqueue_script($dependency);
|
||||
}
|
||||
}
|
||||
|
||||
echo Vite::withEntryPoints([
|
||||
'resources/js/editor.js',
|
||||
])->toHtml();
|
||||
});
|
||||
|
||||
/**
|
||||
* Register the theme assets with the block editor.
|
||||
* Use the generated theme.json file.
|
||||
*
|
||||
* @return void
|
||||
* @return string
|
||||
*/
|
||||
add_action('enqueue_block_editor_assets', function () {
|
||||
bundle('editor')->enqueue();
|
||||
}, 100);
|
||||
add_filter('theme_file_path', function ($path, $file) {
|
||||
return $file === 'theme.json'
|
||||
? public_path('build/assets/theme.json')
|
||||
: $path;
|
||||
}, 10, 2);
|
||||
|
||||
/**
|
||||
* Register the initial theme setup.
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
/**
|
||||
* Compiler configuration
|
||||
*
|
||||
* @see {@link https://roots.io/sage/docs sage documentation}
|
||||
* @see {@link https://bud.js.org/learn/config bud.js configuration guide}
|
||||
*
|
||||
* @type {import('@roots/bud').Config}
|
||||
*/
|
||||
export default async (app) => {
|
||||
/**
|
||||
* Application assets & entrypoints
|
||||
*
|
||||
* @see {@link https://bud.js.org/reference/bud.entry}
|
||||
* @see {@link https://bud.js.org/reference/bud.assets}
|
||||
*/
|
||||
app
|
||||
.entry('app', ['@scripts/app', '@styles/app'])
|
||||
.entry('editor', ['@scripts/editor', '@styles/editor'])
|
||||
.assets(['images']);
|
||||
|
||||
/**
|
||||
* Set public path
|
||||
*
|
||||
* @see {@link https://bud.js.org/reference/bud.setPublicPath}
|
||||
*/
|
||||
app.setPublicPath('/app/themes/sage/public/');
|
||||
|
||||
/**
|
||||
* Development server settings
|
||||
*
|
||||
* @see {@link https://bud.js.org/reference/bud.setUrl}
|
||||
* @see {@link https://bud.js.org/reference/bud.setProxyUrl}
|
||||
* @see {@link https://bud.js.org/reference/bud.watch}
|
||||
*/
|
||||
app
|
||||
.setUrl('https://localhost:3000')
|
||||
.setProxyUrl('https://badegg-bedrock.localhost.1fp.ltd')
|
||||
.watch(['resources/views', 'app']);
|
||||
|
||||
/**
|
||||
* Generate WordPress `theme.json`
|
||||
*
|
||||
* @note This overwrites `theme.json` on every build.
|
||||
*
|
||||
* @see {@link https://bud.js.org/extensions/sage/theme.json}
|
||||
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
|
||||
*/
|
||||
app.wpjson
|
||||
.setSettings({
|
||||
background: {
|
||||
backgroundImage: true,
|
||||
},
|
||||
color: {
|
||||
custom: false,
|
||||
customDuotone: false,
|
||||
customGradient: false,
|
||||
defaultDuotone: false,
|
||||
defaultGradients: false,
|
||||
defaultPalette: false,
|
||||
duotone: [],
|
||||
},
|
||||
custom: {
|
||||
spacing: {},
|
||||
typography: {
|
||||
'font-size': {},
|
||||
'line-height': {},
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
padding: true,
|
||||
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
|
||||
},
|
||||
typography: {
|
||||
customFontSize: false,
|
||||
},
|
||||
})
|
||||
.enable();
|
||||
};
|
||||
@@ -39,11 +39,12 @@
|
||||
}
|
||||
},
|
||||
"require": {
|
||||
"php": ">=8.1",
|
||||
"php": ">=8.2",
|
||||
"roots/acorn": "^5.0",
|
||||
"ourcodeworld/name-that-color": "dev-master"
|
||||
},
|
||||
"require-dev": {
|
||||
"laravel/pint": "^1.13"
|
||||
"laravel/pint": "^1.20"
|
||||
},
|
||||
"suggest": {
|
||||
"log1x/sage-directives": "A collection of useful Blade directives for WordPress and Sage (^1.0)."
|
||||
@@ -55,11 +56,9 @@
|
||||
},
|
||||
"minimum-stability": "dev",
|
||||
"prefer-stable": true,
|
||||
"extra": {
|
||||
"acorn": {
|
||||
"providers": [
|
||||
"App\\Providers\\ThemeServiceProvider"
|
||||
]
|
||||
}
|
||||
"scripts": {
|
||||
"post-autoload-dump": [
|
||||
"Roots\\Acorn\\ComposerScripts::postAutoloadDump"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
6402
composer.lock
generated
6402
composer.lock
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,7 @@
|
||||
<?php
|
||||
|
||||
use Roots\Acorn\Application;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Register The Auto Loader
|
||||
@@ -29,18 +31,11 @@ require $composer;
|
||||
|
|
||||
*/
|
||||
|
||||
if (! function_exists('\Roots\bootloader')) {
|
||||
wp_die(
|
||||
__('You need to install Acorn to use this theme.', 'sage'),
|
||||
'',
|
||||
[
|
||||
'link_url' => 'https://roots.io/acorn/docs/installation/',
|
||||
'link_text' => __('Acorn Docs: Installation', 'sage'),
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
\Roots\bootloader()->boot();
|
||||
Application::configure()
|
||||
->withProviders([
|
||||
App\Providers\ThemeServiceProvider::class,
|
||||
])
|
||||
->boot();
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"@roots/bud/config/jsconfig.json",
|
||||
"@roots/sage/config/jsconfig.json"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": "resources",
|
||||
/**
|
||||
* Resolve aliases
|
||||
*/
|
||||
"paths": {
|
||||
"@fonts/*": ["fonts/*"],
|
||||
"@images/*": ["images/*"],
|
||||
"@scripts/*": ["scripts/*"],
|
||||
"@styles/*": ["styles/*"]
|
||||
},
|
||||
/**
|
||||
* Type definitions
|
||||
*/
|
||||
"types": [
|
||||
"@roots/bud",
|
||||
"@roots/bud-react",
|
||||
"@roots/bud-postcss",
|
||||
"@roots/bud-preset-recommend",
|
||||
"@roots/bud-preset-wordpress",
|
||||
"@roots/bud-wordpress-theme-json",
|
||||
"@roots/sage"
|
||||
]
|
||||
},
|
||||
"files": ["bud.config.js"],
|
||||
"include": ["resources"],
|
||||
"exclude": ["node_modules", "public"]
|
||||
}
|
||||
2668
package-lock.json
generated
Normal file
2668
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@@ -1,16 +1,13 @@
|
||||
{
|
||||
"name": "sage",
|
||||
"private": true,
|
||||
"browserslist": [
|
||||
"extends @roots/browserslist-config"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "bud dev",
|
||||
"build": "bud build",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"translate": "npm run translate:pot && npm run translate:update",
|
||||
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
|
||||
"translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
|
||||
@@ -19,9 +16,9 @@
|
||||
"translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@roots/bud": "6.23.3",
|
||||
"@roots/bud-sass": "^6.23.3",
|
||||
"@roots/sage": "6.23.3"
|
||||
},
|
||||
"dependencies": {}
|
||||
"@roots/vite-plugin": "^1.0.2",
|
||||
"laravel-vite-plugin": "^1.2.0",
|
||||
"sass": "^1.93.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
26
resources/css/app.scss
Normal file
26
resources/css/app.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
// Global Variables, Mixins, and Framework
|
||||
@use "global/variables";
|
||||
@use "global/mixins";
|
||||
@use "global/fonts";
|
||||
@use "global/typography";
|
||||
@use "global/framework";
|
||||
|
||||
// Third Party Plugins
|
||||
@use "plugins/contact-form-7";
|
||||
@use "plugins/mce";
|
||||
|
||||
// Sections
|
||||
@use "sections/header";
|
||||
@use "sections/footer";
|
||||
|
||||
// Components
|
||||
@use "components/forms";
|
||||
@use "components/button";
|
||||
@use "components/card";
|
||||
|
||||
// Blocks
|
||||
@use "blocks/BadExample";
|
||||
|
||||
// Page Styles
|
||||
@use "views/page";
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../global/fonts";
|
||||
@use "../global/variables/colours";
|
||||
|
||||
button {
|
||||
&%block,
|
||||
&.block {
|
||||
@@ -19,11 +22,11 @@ input[type="submit"] {
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em 1.25em;
|
||||
border: 0.125em solid $black;
|
||||
border: 0.125em solid colours.$black;
|
||||
border-radius: 0.25em;
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-family: $font;
|
||||
background-color: colours.$black;
|
||||
color: colours.$white;
|
||||
font-family: fonts.$font;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
white-space: normal;
|
||||
@@ -31,45 +34,45 @@ input[type="submit"] {
|
||||
transition: 300ms ease all;
|
||||
|
||||
.knockout & {
|
||||
background-color: $white;
|
||||
border-color: $white;
|
||||
background-color: colours.$white;
|
||||
border-color: colours.$white;
|
||||
color: currentcolor;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
color: colours.$white;
|
||||
text-decoration: none;
|
||||
background-color: rgba($black, 0.5);
|
||||
border-color: rgba($black, 0.5);
|
||||
background-color: rgba(colours.$black, 0.5);
|
||||
border-color: rgba(colours.$black, 0.5);
|
||||
|
||||
.knockout & {
|
||||
background-color: rgba($white, 0.5);
|
||||
border-color: rgba($white, 0.5);
|
||||
background-color: rgba(colours.$white, 0.5);
|
||||
border-color: rgba(colours.$white, 0.5);
|
||||
color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
&.outline {
|
||||
border-color: $black;
|
||||
border-color: colours.$black;
|
||||
background-color: transparent;
|
||||
color: $black;
|
||||
color: colours.$black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
background-color: colours.$black;
|
||||
color: colours.$white;
|
||||
}
|
||||
|
||||
.knockout & {
|
||||
@media screen {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
border-color: colours.$white;
|
||||
color: colours.$white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
background-color: colours.$white;
|
||||
color: colours.$black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,28 +1,32 @@
|
||||
@use "../global/fonts";
|
||||
@use "../global/variables/breakpoints";
|
||||
@use "../global/variables/colours";
|
||||
|
||||
textarea {
|
||||
min-height: 10.375em;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: $grey;
|
||||
color: colours.$grey;
|
||||
background: white;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
font-family: $font;
|
||||
font-family: fonts.$font;
|
||||
width: 100%;
|
||||
padding: 0.875em 1em;
|
||||
margin: 0 0 1em;
|
||||
// border-radius: 0.125em;
|
||||
border: 0.0625em solid rgba($black, 0.1);
|
||||
border: 0.0625em solid rgba(colours.$black, 0.1);
|
||||
outline: none;
|
||||
transition: all 300ms ease;
|
||||
|
||||
&::placeholder {
|
||||
color: $grey-light;
|
||||
color: colours.$grey-light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0.25em 0.5em rgba($black, 0.1);
|
||||
box-shadow: 0 0.25em 0.5em rgba(colours.$black, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,11 +75,11 @@ select {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: $font;
|
||||
font-family: fonts.$font;
|
||||
}
|
||||
/* stylelint-enable selector-class-pattern */
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
@media (min-width: breakpoints.$screen-sm) {
|
||||
&.half {
|
||||
flex: 0 0 calc(50% - 1em);
|
||||
max-width: calc(50% - 1em);
|
||||
@@ -107,7 +111,7 @@ select {
|
||||
margin: 2em 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
@media (min-width: breakpoints.$screen-sm) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -164,8 +168,8 @@ select {
|
||||
}
|
||||
|
||||
&-not-valid-tip {
|
||||
background: $error;
|
||||
color: $white;
|
||||
background: colours.$error;
|
||||
color: colours.$white;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 0 0 0.5em 0.5em;
|
||||
font-weight: 700;
|
||||
@@ -177,11 +181,11 @@ select {
|
||||
width: calc(100% - 1em);
|
||||
flex: 0 0 calc(100% - 1em);
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-family: $font;
|
||||
color: colours.$white;
|
||||
font-family: fonts.$font;
|
||||
font-weight: 700;
|
||||
background: $black;
|
||||
border: 0.125em solid $white;
|
||||
background: colours.$black;
|
||||
border: 0.125em solid colours.$white;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
@@ -207,7 +211,7 @@ select {
|
||||
display: block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border: 0.125em solid $black;
|
||||
border: 0.125em solid colours.$black;
|
||||
background: transparent;
|
||||
color: currentcolor;
|
||||
|
||||
@@ -250,15 +254,15 @@ select {
|
||||
|
||||
&.sent {
|
||||
.wpcf7-response-output {
|
||||
background: $success;
|
||||
border-color: $white;
|
||||
background: colours.$success;
|
||||
border-color: colours.$white;
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
.wpcf7-response-output {
|
||||
background: $error;
|
||||
border-color: $white;
|
||||
background: colours.$error;
|
||||
border-color: colours.$white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -277,7 +281,7 @@ select {
|
||||
.wpcf7 {
|
||||
&-checkbox {
|
||||
input[type="checkbox"] {
|
||||
border-color: $white;
|
||||
border-color: colours.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,8 +21,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('~fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('~fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* ubuntu-italic - latin */
|
||||
@@ -31,8 +31,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
|
||||
font-family: 'Ubuntu';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('~fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('~fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: url('../fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* ubuntu-700 - latin */
|
||||
@@ -41,8 +41,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('~fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('~fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* ubuntu-700italic - latin */
|
||||
@@ -51,6 +51,6 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
|
||||
font-family: 'Ubuntu';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url('~fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('~fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: url('../fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
|
||||
url('../fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
4
resources/css/global/_framework.scss
Normal file
4
resources/css/global/_framework.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@use "framework/breakpoints";
|
||||
@use "framework/normalise";
|
||||
@use "framework/colours";
|
||||
@use "framework/spacing";
|
||||
4
resources/css/global/_mixins.scss
Normal file
4
resources/css/global/_mixins.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@use "mixins/linear-gradient";
|
||||
@use "mixins/text-contrast";
|
||||
@use "mixins/generate-colour-classes";
|
||||
@use "mixins/generate-button-classes";
|
||||
@@ -1,3 +1,8 @@
|
||||
@use "fonts";
|
||||
@use "variables/breakpoints";
|
||||
@use "variables/colours";
|
||||
@use "variables/spacing";
|
||||
|
||||
.wysiwyg {
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
@@ -14,9 +19,9 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $primary;
|
||||
color: colours.$primary;
|
||||
font-weight: 700;
|
||||
font-family: $font;
|
||||
font-family: fonts.$font;
|
||||
line-height: 1.1em;
|
||||
margin: 1.5em 0 0.25em;
|
||||
padding: 0;
|
||||
@@ -27,7 +32,7 @@ h6 {
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
color: $white;
|
||||
color: colours.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,7 +48,7 @@ h3 { font-size: 1.25em; }
|
||||
h4,
|
||||
h5 { font-size: 1.15em; }
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
@media (min-width: breakpoints.$screen-sm) {
|
||||
h1 { font-size: 2.5em; }
|
||||
h2 { font-size: 2em; }
|
||||
h3 { font-size: 1.5em; }
|
||||
@@ -58,8 +63,8 @@ p,
|
||||
li,
|
||||
td,
|
||||
label {
|
||||
color: $grey;
|
||||
font-family: $font;
|
||||
color: colours.$grey;
|
||||
font-family: fonts.$font;
|
||||
font-weight: 400;
|
||||
line-height: 1.5em;
|
||||
margin: 0 0 0.8em;
|
||||
@@ -67,30 +72,30 @@ label {
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
color: $white;
|
||||
color: colours.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
color: colours.$primary;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
transition: all 300ms ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-dark;
|
||||
color: colours.$primary-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
color: $white;
|
||||
color: colours.$white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-light;
|
||||
color: colours.$primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -126,12 +131,12 @@ ol {
|
||||
hr {
|
||||
margin: 1.5em auto 2em;
|
||||
height: 0;
|
||||
border: 0 solid $grey-light;
|
||||
border-width: $borderThin 0 0;
|
||||
border: 0 solid colours.$grey-light;
|
||||
border-width: spacing.$borderThin 0 0;
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
border-color: $white;
|
||||
border-color: colours.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
resources/css/global/_variables.scss
Normal file
3
resources/css/global/_variables.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@use "variables/colours";
|
||||
@use "variables/breakpoints";
|
||||
@use "variables/spacing";
|
||||
@@ -1,4 +1,6 @@
|
||||
@each $label, $value in $breakpoints {
|
||||
@use "../variables/breakpoints";
|
||||
|
||||
@each $label, $value in breakpoints.$breakpoints {
|
||||
.min-#{$label} {
|
||||
@media (min-width: $value) {
|
||||
display: none;
|
||||
13
resources/css/global/framework/_colours.scss
Normal file
13
resources/css/global/framework/_colours.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@use "../mixins/generate-button-classes";
|
||||
@use "../mixins/generate-colour-classes";
|
||||
@use "../variables/colours";
|
||||
|
||||
::selection {
|
||||
color: colours.$white;
|
||||
background: colours.$primary;
|
||||
}
|
||||
|
||||
@each $color, $hex in colours.$colors {
|
||||
@include generate-colour-classes.generate_colour_classes($color, $hex);
|
||||
@include generate-button-classes.generate_button_colors($color, $hex);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../variables/colours";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
backface-visibility: hidden; // removes jagged edges on rotated elements
|
||||
@@ -11,7 +13,7 @@ body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $white;
|
||||
background: colours.$white;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
@@ -1,23 +1,26 @@
|
||||
@use "../variables/colours";
|
||||
@use "../variables/spacing";
|
||||
|
||||
.brand {
|
||||
display: block;
|
||||
width: $brandWidth;
|
||||
height: $brandHeight;
|
||||
width: spacing.$brandWidth;
|
||||
height: spacing.$brandHeight;
|
||||
|
||||
svg,
|
||||
img {
|
||||
display: block;
|
||||
width: $brandWidth;
|
||||
height: $brandHeight;
|
||||
width: spacing.$brandWidth;
|
||||
height: spacing.$brandHeight;
|
||||
}
|
||||
|
||||
.knockout & {
|
||||
@media screen {
|
||||
.fill-primary {
|
||||
fill: $white;
|
||||
fill: colours.$white;
|
||||
}
|
||||
|
||||
.fill-grey {
|
||||
fill: rgba($white, 0.8);
|
||||
fill: rgba(colours.$white, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,28 +30,28 @@
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
&-large { max-width: $containerLarge; }
|
||||
&-medium { max-width: $containerMedium; }
|
||||
&-small { max-width: $containerSmall; }
|
||||
&-narrow { max-width: $containerNarrow; }
|
||||
&-large { max-width: spacing.$containerLarge; }
|
||||
&-medium { max-width: spacing.$containerMedium; }
|
||||
&-small { max-width: spacing.$containerSmall; }
|
||||
&-narrow { max-width: spacing.$containerNarrow; }
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: $sectionMedium 0;
|
||||
padding: spacing.$sectionMedium 0;
|
||||
|
||||
&-small { padding: $sectionSmall 0; }
|
||||
&-medium { padding: $sectionMedium 0; }
|
||||
&-large { padding: $sectionLarge 0; }
|
||||
&-small { padding: spacing.$sectionSmall 0; }
|
||||
&-medium { padding: spacing.$sectionMedium 0; }
|
||||
&-large { padding: spacing.$sectionLarge 0; }
|
||||
|
||||
&-zero-top { padding-top: 0; }
|
||||
&-zero-bottom { padding-bottom: 0; }
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: $innerMedium;
|
||||
padding: spacing.$innerMedium;
|
||||
|
||||
&-small { padding: $innerSmall; }
|
||||
&-large { padding: $innerLarge; }
|
||||
&-small { padding: spacing.$innerSmall; }
|
||||
&-large { padding: spacing.$innerLarge; }
|
||||
|
||||
&-zero-x {
|
||||
padding-left: 0;
|
||||
@@ -62,7 +65,7 @@
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $borderRadius;
|
||||
border-radius: spacing.$borderRadius;
|
||||
|
||||
&-top {
|
||||
border-bottom-right-radius: 0;
|
||||
@@ -77,12 +80,12 @@
|
||||
|
||||
.border {
|
||||
border-style: solid;
|
||||
border-width: $borderWidth;
|
||||
border-width: spacing.$borderWidth;
|
||||
|
||||
&-thin { border-width: 0.0625em; }
|
||||
&-regular { border-width: $borderWidth; }
|
||||
&-thick { border-width: $borderThick; }
|
||||
&-thicker { border-width: $borderThicker; }
|
||||
&-regular { border-width: spacing.$borderWidth; }
|
||||
&-thick { border-width: spacing.$borderThick; }
|
||||
&-thicker { border-width: spacing.$borderThicker; }
|
||||
|
||||
&-top {
|
||||
border-right-width: 0;
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../variables/colours";
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
@mixin generate_button_colors($name, $hex) {
|
||||
@@ -10,13 +12,13 @@
|
||||
|
||||
@each $button in $buttons {
|
||||
#{$button}.#{$name} {
|
||||
color: $white;
|
||||
color: colours.$white;
|
||||
background: $hex;
|
||||
border-color: $hex;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
color: colours.$white;
|
||||
background: color.adjust($hex, $lightness: 10%);
|
||||
border-color: color.adjust($hex, $lightness: 10%);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "text-contrast";
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
@mixin generate_colour_classes($name, $hex) {
|
||||
@@ -18,7 +20,7 @@
|
||||
background-color: $hex;
|
||||
|
||||
::selection {
|
||||
@include text_contrast(color.invert($hex));
|
||||
@include text-contrast.text_contrast(color.invert($hex));
|
||||
background: color.invert($hex);
|
||||
}
|
||||
}
|
||||
17
resources/css/global/mixins/_text-contrast.scss
Normal file
17
resources/css/global/mixins/_text-contrast.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@use "../variables/colours";
|
||||
|
||||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
|
||||
$brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
|
||||
$light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
|
||||
|
||||
@if math.abs($brightness) < (math.div($light-color, $cutoff)) {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
@@ -8,8 +8,8 @@ $alert: #eed202;
|
||||
//== Brand Colours
|
||||
$primary: #337ab7;
|
||||
$secondary: #5bc0de;
|
||||
$tertiary: invert($primary);
|
||||
$quaternary: invert($secondary);
|
||||
$tertiary: color.invert($primary);
|
||||
$quaternary: color.invert($secondary);
|
||||
|
||||
//== Primary Tints
|
||||
$primary-darkest: color.adjust($primary, $lightness: -30%);
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
$offCanvasWidth: 17.5em;
|
||||
|
||||
$brandWidth: 9em !default;
|
||||
$brandHeight: 3em !default;
|
||||
|
||||
$tileAspectRatio: math.div(400, 640) * 100%;
|
||||
$heroAspectRatio: math.div(593, 1920) * 100vw;
|
||||
$slideAspectRatio: math.div(733, 1920) * 100vw;
|
||||
24
resources/css/plugins/_contact-form-7.scss
Normal file
24
resources/css/plugins/_contact-form-7.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@use "../global/variables/colours";
|
||||
|
||||
.wpcf7 .screen-reader-response {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wpcf7-response-output {
|
||||
@extend p !optional;
|
||||
@extend .container !optional;
|
||||
@extend .container-narrow !optional;
|
||||
|
||||
padding: 1em 0 0;
|
||||
margin-top: 2em;
|
||||
border: 1px solid colours.$grey-light;
|
||||
border-width: 1px 0 0;
|
||||
|
||||
.knockout & {
|
||||
border-color: rgba(colours.$white, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.wpcf7-display-none {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
@use "../global/variables/colours";
|
||||
|
||||
#mce-responses {
|
||||
.response {
|
||||
padding: 0 0 1em;
|
||||
margin: 0 0 1em;
|
||||
font-size: 0.875em;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-bottom: 1px solid colours.$grey-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.knockout #mce-responses .response {
|
||||
border-bottom-color: rgba($white, 0.3);
|
||||
border-bottom-color: rgba(colours.$white, 0.3);
|
||||
}
|
||||
0
resources/css/views/_page.scss
Normal file
0
resources/css/views/_page.scss
Normal file
@@ -1,4 +1,9 @@
|
||||
import domReady from '@roots/sage/client/dom-ready';
|
||||
import.meta.glob([
|
||||
'../images/**',
|
||||
'../fonts/**',
|
||||
]);
|
||||
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
import blocks from './blocks.js';
|
||||
import Header from './sections/header.js';
|
||||
import LazyLoad from './lib/Lazy.js';
|
||||
@@ -11,8 +16,3 @@ domReady(async () => {
|
||||
blocks();
|
||||
Header();
|
||||
});
|
||||
|
||||
/**
|
||||
* @see {@link https://webpack.js.org/api/hot-module-replacement/}
|
||||
*/
|
||||
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);
|
||||
5
resources/js/editor.js
Normal file
5
resources/js/editor.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
|
||||
domReady(() => {
|
||||
//
|
||||
});
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* @see {@link https://bud.js.org/extensions/bud-preset-wordpress/editor-integration/filters}
|
||||
*/
|
||||
roots.register.filters('@scripts/filters');
|
||||
|
||||
/**
|
||||
* @see {@link https://webpack.js.org/api/hot-module-replacement/}
|
||||
*/
|
||||
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);
|
||||
@@ -1,25 +0,0 @@
|
||||
/**
|
||||
* @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
|
||||
*/
|
||||
export const hook = 'blocks.registerBlockType';
|
||||
|
||||
/**
|
||||
* Filter handle
|
||||
*/
|
||||
export const name = 'sage/button';
|
||||
|
||||
/**
|
||||
* Filter callback
|
||||
*
|
||||
* @param {object} settings
|
||||
* @param {string} name
|
||||
* @returns modified settings
|
||||
*/
|
||||
export function callback(settings, name) {
|
||||
if (name !== 'core/button') return settings;
|
||||
|
||||
return {
|
||||
...settings,
|
||||
styles: [{ label: 'Outline', name: 'outline' }],
|
||||
};
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
// Global Variables, Mixins, and Framework
|
||||
@import "global/variables";
|
||||
@import "global/mixins";
|
||||
@import "global/fonts";
|
||||
@import "global/typography";
|
||||
@import "global/framework";
|
||||
|
||||
// Third Party Plugins
|
||||
@import "plugins/contact-form-7";
|
||||
@import "plugins/mce";
|
||||
|
||||
// Sections
|
||||
@import "sections/header";
|
||||
@import "sections/footer";
|
||||
|
||||
// Components
|
||||
@import "components/forms";
|
||||
@import "components/button";
|
||||
@import "components/card";
|
||||
|
||||
// Blocks
|
||||
@import "blocks/BadExample";
|
||||
|
||||
// Page Styles
|
||||
@import "views/page";
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
@import "framework/breakpoints";
|
||||
@import "framework/normalise";
|
||||
@import "framework/colours";
|
||||
@import "framework/spacing";
|
||||
@@ -1,4 +0,0 @@
|
||||
@import "mixins/linear-gradient";
|
||||
@import "mixins/text-contrast";
|
||||
@import "mixins/generate-colour-classes";
|
||||
@import "mixins/generate-button-classes";
|
||||
@@ -1,3 +0,0 @@
|
||||
@import "variables/colours";
|
||||
@import "variables/breakpoints";
|
||||
@import "variables/spacing";
|
||||
@@ -1,9 +0,0 @@
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
@each $color, $hex in $colors {
|
||||
@include generate_colour_classes($color, $hex);
|
||||
@include generate_button_colors($color, $hex);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.667) {
|
||||
$brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
|
||||
$light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
|
||||
|
||||
@if abs($brightness) < (math.div($light-color, $cutoff)) {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.wpcf7 .screen-reader-response {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wpcf7-response-output {
|
||||
@extend p;
|
||||
@extend .container;
|
||||
@extend .container-narrow;
|
||||
|
||||
padding: 1em 0 0;
|
||||
margin-top: 2em;
|
||||
border: 1px solid $grey-light;
|
||||
border-width: 1px 0 0;
|
||||
|
||||
.knockout & {
|
||||
border-color: rgba($white, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.wpcf7-display-none {
|
||||
display: none;
|
||||
}
|
||||
@@ -5,6 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@php(do_action('get_header'))
|
||||
@php(wp_head())
|
||||
|
||||
@vite(['resources/css/app.scss', 'resources/js/app.js'])
|
||||
</head>
|
||||
|
||||
<body @php(body_class())>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@if (! post_password_required())
|
||||
<section id="comments" class="comments">
|
||||
@if ($responses)
|
||||
@if ($responses())
|
||||
<h2>
|
||||
{!! $title !!}
|
||||
</h2>
|
||||
@@ -9,16 +9,16 @@
|
||||
{!! $responses !!}
|
||||
</ol>
|
||||
|
||||
@if ($paginated)
|
||||
@if ($paginated())
|
||||
<nav aria-label="Comment">
|
||||
<ul class="pager">
|
||||
@if ($previous)
|
||||
@if ($previous())
|
||||
<li class="previous">
|
||||
{!! $previous !!}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($next)
|
||||
@if ($next())
|
||||
<li class="next">
|
||||
{!! $next !!}
|
||||
</li>
|
||||
@@ -28,7 +28,7 @@
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@if ($closed)
|
||||
@if ($closed())
|
||||
<x-alert type="warning">
|
||||
{!! __('Comments are closed.', 'sage') !!}
|
||||
</x-alert>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@php(the_content())
|
||||
|
||||
@if ($pagination)
|
||||
@if ($pagination())
|
||||
<nav class="page-nav" aria-label="Page">
|
||||
{!! $pagination !!}
|
||||
</nav>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
@php(the_content())
|
||||
</div>
|
||||
|
||||
@if ($pagination)
|
||||
@if ($pagination())
|
||||
<footer>
|
||||
<nav class="page-nav" aria-label="Page">
|
||||
{!! $pagination !!}
|
||||
|
||||
10
style.css
10
style.css
@@ -1,13 +1,13 @@
|
||||
/*
|
||||
Theme Name: Bad Egg Digital
|
||||
Theme URI: https://www.badegg.uk
|
||||
Theme URI: https://www.badegg.uk/?utm_source=wp_theme
|
||||
Description: A bespoke Wordpress theme using Roots' Sage as a starting point.
|
||||
Version: 10.x-dev
|
||||
Version: 11.0.1
|
||||
Author: Steve Ross
|
||||
Author URI: https://badegg.uk/about/steve-ross
|
||||
Author URI: https://badegg.uk/about/steve-ross/?utm_source=wp_theme
|
||||
Text Domain: sage
|
||||
License: MIT License
|
||||
License URI: https://opensource.org/licenses/MIT
|
||||
Requires PHP: 8.1
|
||||
Requires at least: 5.9
|
||||
Requires PHP: 8.2
|
||||
Requires at least: 6.6
|
||||
*/
|
||||
|
||||
17
theme.json
17
theme.json
@@ -1,8 +1,11 @@
|
||||
{
|
||||
"__generated__": "⚠️ This file is generated. Do not edit.",
|
||||
"__preprocessed__": "This file is used to build the theme.json file in the `public/build/assets` directory. The built artifact includes Tailwind's colors, fonts, and font sizes.",
|
||||
"$schema": "https://schemas.wp.org/trunk/theme.json",
|
||||
"version": 2,
|
||||
"version": 3,
|
||||
"settings": {
|
||||
"layout": {
|
||||
"contentSize": "48rem"
|
||||
},
|
||||
"background": {
|
||||
"backgroundImage": true
|
||||
},
|
||||
@@ -24,16 +27,10 @@
|
||||
},
|
||||
"spacing": {
|
||||
"padding": true,
|
||||
"units": [
|
||||
"px",
|
||||
"%",
|
||||
"em",
|
||||
"rem",
|
||||
"vw",
|
||||
"vh"
|
||||
]
|
||||
"units": ["px", "%", "em", "rem", "vw", "vh"]
|
||||
},
|
||||
"typography": {
|
||||
"defaultFontSizes": false,
|
||||
"customFontSize": false
|
||||
}
|
||||
}
|
||||
|
||||
37
vite.config.js
Normal file
37
vite.config.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import laravel from 'laravel-vite-plugin'
|
||||
import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';
|
||||
|
||||
export default defineConfig({
|
||||
base: '/app/themes/sage/public/build/',
|
||||
plugins: [
|
||||
laravel({
|
||||
input: [
|
||||
'resources/css/app.scss',
|
||||
'resources/js/app.js',
|
||||
'resources/css/editor.scss',
|
||||
'resources/js/editor.js',
|
||||
],
|
||||
refresh: true,
|
||||
url: process.env.APP_URL,
|
||||
}),
|
||||
|
||||
wordpressPlugin(),
|
||||
|
||||
// Generate the theme.json file in the public/build/assets directory
|
||||
// based on the Tailwind config and the theme.json file from base theme folder
|
||||
wordpressThemeJson({
|
||||
disableTailwindColors: true,
|
||||
disableTailwindFonts: true,
|
||||
disableTailwindFontSizes: true,
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@scripts': '/resources/js',
|
||||
'@styles': '/resources/css',
|
||||
'@fonts': '/resources/fonts',
|
||||
'@images': '/resources/images',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user