Init
This commit is contained in:
11
tailwind/custom/base.css
Normal file
11
tailwind/custom/base.css
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Custom styles to immediately follow Tailwind’s `base` layer
|
||||
*/
|
||||
|
||||
/**
|
||||
* This uses the background and foreground colors declared in the `theme.json`
|
||||
* file and is applied both to the front end and in the block editor.
|
||||
*/
|
||||
body {
|
||||
@apply bg-background text-foreground font-sans;
|
||||
}
|
||||
56
tailwind/custom/components/components.css
Normal file
56
tailwind/custom/components/components.css
Normal file
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* Custom styles to immediately follow Tailwind’s `components` layer
|
||||
*
|
||||
* “Add more opinionated, complex classes like buttons, form controls, alerts,
|
||||
* etc; the sort of pre-built components you often see in other frameworks that
|
||||
* you might need to override with utility classes.”
|
||||
*
|
||||
* — from https://tailwindcss.com/docs/plugins#adding-components
|
||||
*/
|
||||
|
||||
/**
|
||||
* Post title styles
|
||||
*
|
||||
* These will be applied to all headings with a `page-title` or `entry-title`
|
||||
* class on the frontend and to the post title in the block editor.
|
||||
*
|
||||
* The supplied styles are meant to match the default `h1` classes from
|
||||
* Tailwind Typography.
|
||||
*/
|
||||
.page-title,
|
||||
.entry-title {
|
||||
@apply max-w-content mx-auto mb-6 text-3xl font-extrabold text-neutral-900;
|
||||
}
|
||||
|
||||
/**
|
||||
* Layout styles for centered content areas
|
||||
*
|
||||
* If you are controlling the width of your content area with styles applied
|
||||
* to its container, you can delete the following styles whose selectors begin
|
||||
* with `.page-content >` and `.entry-content >`. For more details, please see
|
||||
* the following:
|
||||
*
|
||||
* https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
|
||||
*/
|
||||
.page-content > *,
|
||||
.entry-content > * {
|
||||
/* Content width from the `theme.json` file */
|
||||
@apply max-w-content mx-auto;
|
||||
}
|
||||
|
||||
.entry-content > .alignwide {
|
||||
/* Wide width from the `theme.json` file */
|
||||
@apply max-w-wide;
|
||||
}
|
||||
|
||||
.entry-content > .alignfull {
|
||||
@apply max-w-none;
|
||||
}
|
||||
|
||||
.entry-content > .alignleft {
|
||||
@apply float-left mr-8;
|
||||
}
|
||||
|
||||
.entry-content > .alignright {
|
||||
@apply float-right ml-8;
|
||||
}
|
||||
22
tailwind/custom/file-header.css
Normal file
22
tailwind/custom/file-header.css
Normal file
@@ -0,0 +1,22 @@
|
||||
/*!
|
||||
Theme Name: studio-up
|
||||
Theme URI: https://underscoretw.com/
|
||||
Description: Client custom theme
|
||||
Version: 0.1.0
|
||||
Author: Josevi Canet
|
||||
Author URI: https://underscoretw.com/
|
||||
Text Domain: studio-up
|
||||
Requires at least: 6.8
|
||||
Requires PHP: 7.4
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
|
||||
This theme, like WordPress, is licensed under the GPL.
|
||||
Use it to make something cool, have fun, and share what you've learned.
|
||||
|
||||
studio-up is based on _tw https://underscoretw.com/, (C) 2021-2025 Greg Sullivan
|
||||
_tw is distributed under the terms of the GNU GPL v2 or later.
|
||||
|
||||
_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2025 Automattic, Inc.
|
||||
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
|
||||
*/
|
||||
5
tailwind/custom/fonts.css
Normal file
5
tailwind/custom/fonts.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/**
|
||||
* Custom `@font-face` rules
|
||||
*
|
||||
* These will be added immediately before Tailwind’s `base` layer.
|
||||
*/
|
||||
8
tailwind/custom/utilities.css
Normal file
8
tailwind/custom/utilities.css
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Custom styles to immediately follow Tailwind’s `utilities` layer
|
||||
*
|
||||
* Add your own utility classes to this theme. Complex utility classes should
|
||||
* be added using Tailwind’s plugin system:
|
||||
*
|
||||
* https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
|
||||
*/
|
||||
17
tailwind/tailwind-editor.css
Normal file
17
tailwind/tailwind-editor.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Additional styles applied only to the WordPress editor
|
||||
*
|
||||
* It is sometimes necessary to add additional styles for the WordPress block
|
||||
* editor, generally to improve the editor experience. For example, you may
|
||||
* want to tweak the appearance of the title area to better match your site’s
|
||||
* front end, or you may need to change the appearance of a block to better
|
||||
* distinguish between its fields while editing.
|
||||
*
|
||||
* Those styles should be added in this file, and they will be added only to
|
||||
* the block editor.
|
||||
*/
|
||||
|
||||
.entry-header,
|
||||
.entry-content {
|
||||
@apply px-8;
|
||||
}
|
||||
50
tailwind/tailwind-theme.css
Normal file
50
tailwind/tailwind-theme.css
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Add your design tokens as Tailwind theme variables.
|
||||
*
|
||||
* https://tailwindcss.com/docs/theme
|
||||
*/
|
||||
|
||||
/**
|
||||
* Your theme variables are merged with Tailwind’s defaults, either extending
|
||||
* the default theme with new variables or overriding the values of existing
|
||||
* variables.
|
||||
*/
|
||||
@theme {
|
||||
/**
|
||||
* These theme variables use CSS variables set by WordPress using values
|
||||
* from your `theme.json` file.
|
||||
*
|
||||
* If you are using the classic editor, you should use hardcoded color
|
||||
* values instead of the `var()` functions below.
|
||||
*/
|
||||
--color-background: var(--wp--preset--color--background);
|
||||
--color-foreground: var(--wp--preset--color--foreground);
|
||||
--color-primary: var(--wp--preset--color--primary);
|
||||
--color-secondary: var(--wp--preset--color--secondary);
|
||||
--color-tertiary: var(--wp--preset--color--tertiary);
|
||||
--container-content: var(--wp--style--global--content-size);
|
||||
--container-wide: var(--wp--style--global--wide-size);
|
||||
|
||||
/**
|
||||
* These are the default `font-family` theme variables included with
|
||||
* Tailwind. You can update them below by adding custom fonts at the
|
||||
* beginning of each value.
|
||||
*
|
||||
* Default theme variables can be found in their entirety at the links
|
||||
* below, on GitHub or in Tailwind’s documentation, respectively:
|
||||
*
|
||||
* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css
|
||||
* https://tailwindcss.com/docs/theme#default-theme-variable-reference
|
||||
*/
|
||||
--font-sans:
|
||||
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
|
||||
/**
|
||||
* Add your theme below:
|
||||
*/
|
||||
}
|
||||
180
tailwind/tailwind-typography.config.js
Normal file
180
tailwind/tailwind-typography.config.js
Normal file
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* Tailwind Typography can only be configured via JavaScript, using a legacy
|
||||
* configuration file like this one.
|
||||
*/
|
||||
|
||||
// Copied from Tailwind Typography.
|
||||
const hexToRgb = (hex) => {
|
||||
if (typeof hex !== 'string' || hex.length === 0) {
|
||||
return hex;
|
||||
}
|
||||
|
||||
hex = hex.replace('#', '');
|
||||
hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex;
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
return `${r} ${g} ${b}`;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
typography: (theme) => ({
|
||||
/**
|
||||
* Tailwind Typography’s default styles are opinionated, and
|
||||
* you may need to override them if you have mockups to
|
||||
* replicate. You can view the default modifiers here:
|
||||
*
|
||||
* https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
|
||||
*/
|
||||
|
||||
DEFAULT: {
|
||||
css: [
|
||||
{
|
||||
/**
|
||||
* By default, max-width is set to 65 characters.
|
||||
* This is a good default for readability, but
|
||||
* often in conflict with client-supplied designs.
|
||||
*/
|
||||
maxWidth: 'none',
|
||||
|
||||
/**
|
||||
* Tailwind Typography uses the font weights 400
|
||||
* through 900. If you’re not using a variable font,
|
||||
* you may need to limit the number of supported
|
||||
* weights. Below are all of the default weights,
|
||||
* ready to be overridden.
|
||||
*/
|
||||
// a: {
|
||||
// fontWeight: '500',
|
||||
// },
|
||||
// strong: {
|
||||
// fontWeight: '600',
|
||||
// },
|
||||
// 'ol > li::marker': {
|
||||
// fontWeight: '400',
|
||||
// },
|
||||
// dt: {
|
||||
// fontWeight: '600',
|
||||
// },
|
||||
// blockquote: {
|
||||
// fontWeight: '500',
|
||||
// },
|
||||
// h1: {
|
||||
// fontWeight: '800',
|
||||
// },
|
||||
// 'h1 strong': {
|
||||
// fontWeight: '900',
|
||||
// },
|
||||
// h2: {
|
||||
// fontWeight: '700',
|
||||
// },
|
||||
// 'h2 strong': {
|
||||
// fontWeight: '800',
|
||||
// },
|
||||
// h3: {
|
||||
// fontWeight: '600',
|
||||
// },
|
||||
// 'h3 strong': {
|
||||
// fontWeight: '700',
|
||||
// },
|
||||
// h4: {
|
||||
// fontWeight: '600',
|
||||
// },
|
||||
// 'h4 strong': {
|
||||
// fontWeight: '700',
|
||||
// },
|
||||
// kbd: {
|
||||
// fontWeight: '500',
|
||||
// },
|
||||
// code: {
|
||||
// fontWeight: '600',
|
||||
// },
|
||||
// pre: {
|
||||
// fontWeight: '400',
|
||||
// },
|
||||
// 'thead th': {
|
||||
// fontWeight: '600',
|
||||
// },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
/**
|
||||
* By default, _tw uses Tailwind Typography’s Neutral gray
|
||||
* scale. If you are adapting an existing design and you need
|
||||
* to set specific colors throughout, you can do so here. In
|
||||
* your `./theme/functions.php file, you will need to replace
|
||||
* `-neutral` with `-studio-up`.
|
||||
*/
|
||||
'studio-up': {
|
||||
css: {
|
||||
'--tw-prose-body': theme('colors.foreground'),
|
||||
'--tw-prose-headings': theme('colors.foreground'),
|
||||
'--tw-prose-lead': theme('colors.foreground'),
|
||||
'--tw-prose-links': theme('colors.primary'),
|
||||
'--tw-prose-bold': theme('colors.foreground'),
|
||||
'--tw-prose-counters': theme('colors.primary'),
|
||||
'--tw-prose-bullets': theme('colors.primary'),
|
||||
'--tw-prose-hr': theme('colors.foreground'),
|
||||
'--tw-prose-quotes': theme('colors.foreground'),
|
||||
'--tw-prose-quote-borders': theme('colors.primary'),
|
||||
'--tw-prose-captions': theme('colors.foreground'),
|
||||
'--tw-prose-kbd': theme('colors.foreground'),
|
||||
|
||||
/**
|
||||
* Since the theme colors use CSS variables, you'll
|
||||
* need to update the hex color below and then
|
||||
* uncomment:
|
||||
*/
|
||||
// '--tw-prose-kbd-shadows': hexToRgb(
|
||||
// '#123456'
|
||||
// ),
|
||||
|
||||
'--tw-prose-code': theme('colors.foreground'),
|
||||
'--tw-prose-pre-code': theme('colors.background'),
|
||||
'--tw-prose-pre-bg': theme('colors.foreground'),
|
||||
'--tw-prose-th-borders': theme('colors.foreground'),
|
||||
'--tw-prose-td-borders': theme('colors.foreground'),
|
||||
'--tw-prose-invert-body': theme('colors.background'),
|
||||
'--tw-prose-invert-headings':
|
||||
theme('colors.background'),
|
||||
'--tw-prose-invert-lead': theme('colors.background'),
|
||||
'--tw-prose-invert-links': theme('colors.primary'),
|
||||
'--tw-prose-invert-bold': theme('colors.background'),
|
||||
'--tw-prose-invert-counters': theme('colors.primary'),
|
||||
'--tw-prose-invert-bullets': theme('colors.primary'),
|
||||
'--tw-prose-invert-hr': theme('colors.background'),
|
||||
'--tw-prose-invert-quotes': theme('colors.background'),
|
||||
'--tw-prose-invert-quote-borders':
|
||||
theme('colors.primary'),
|
||||
'--tw-prose-invert-captions':
|
||||
theme('colors.background'),
|
||||
'--tw-prose-invert-kbd': theme('colors.background'),
|
||||
'--tw-prose-invert-kbd-shadows': hexToRgb(
|
||||
theme('colors.background')
|
||||
),
|
||||
'--tw-prose-invert-code': theme('colors.foreground'),
|
||||
'--tw-prose-invert-pre-code':
|
||||
theme('colors.background'),
|
||||
|
||||
/**
|
||||
* Since the theme colors use CSS variables, you'll
|
||||
* need to update the hex color below and then
|
||||
* uncomment:
|
||||
*/
|
||||
// '--tw-prose-invert-pre-bg': hexToRgb(
|
||||
// '#123456'
|
||||
// ),
|
||||
|
||||
'--tw-prose-invert-th-borders':
|
||||
theme('colors.background'),
|
||||
'--tw-prose-invert-td-borders':
|
||||
theme('colors.background'),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
};
|
||||
12
tailwind/tailwind-typography.css
Normal file
12
tailwind/tailwind-typography.css
Normal file
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Add Tailwind Typography.
|
||||
*
|
||||
* This file is a placeholder for the CSS-first version of Tailwind Typography
|
||||
* that will eventually supplant the plugin and configuration file included
|
||||
* below.
|
||||
*
|
||||
* https://github.com/tailwindlabs/tailwindcss-typography
|
||||
*/
|
||||
|
||||
@plugin "@_tw/typography";
|
||||
@config "./tailwind-typography.config.js";
|
||||
Reference in New Issue
Block a user