progress including font handling
This commit is contained in:
parent
8a9a7e0b52
commit
da2e56d08e
10 changed files with 1329 additions and 5942 deletions
49
assets/css/_bs-colors.scss
Normal file
49
assets/css/_bs-colors.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
// Colors
|
||||||
|
$primary: #e48663;
|
||||||
|
$secondary: #00b0b0;
|
||||||
|
$success: #99c24d;
|
||||||
|
$info: #b489c7;
|
||||||
|
$warning: #f4d35e;
|
||||||
|
|
||||||
|
$white: #fff;
|
||||||
|
$gray-100: #e8e8e8;
|
||||||
|
$gray-200: #cfcfcf;
|
||||||
|
$gray-300: #b5b5b5;
|
||||||
|
$gray-400: #9c9c9c;
|
||||||
|
$gray-500: #828282;
|
||||||
|
$gray-600: #696969;
|
||||||
|
$gray-700: #4f4f4f;
|
||||||
|
$gray-800: #363636;
|
||||||
|
$gray-900: #242424;
|
||||||
|
$black: #000;
|
||||||
|
|
||||||
|
$light: $gray-200;
|
||||||
|
$dark: $gray-800;
|
||||||
|
|
||||||
|
// Create your own map
|
||||||
|
$custom-colors: (
|
||||||
|
"primary": $primary,
|
||||||
|
"secondary": $secondary,
|
||||||
|
"success": $success,
|
||||||
|
"info": $info,
|
||||||
|
"warning": $warning,
|
||||||
|
"danger": $danger,
|
||||||
|
"light": $light,
|
||||||
|
"dark": $dark,
|
||||||
|
"gray": $gray-600,
|
||||||
|
"gray-dark": $gray-800,
|
||||||
|
);
|
||||||
|
|
||||||
|
// $custom-colors: (
|
||||||
|
// "custom-color": #900
|
||||||
|
// );
|
||||||
|
|
||||||
|
// Merge the maps
|
||||||
|
$theme-colors: map-merge($theme-colors, $custom-colors);
|
||||||
|
|
||||||
|
// misc
|
||||||
|
$navbar-dark-color: rgba($white, 0.75);
|
||||||
|
$navbar-dark-hover-color: rgba($white, 0.9);
|
||||||
|
$navbar-dark-active-color: $white;
|
||||||
|
$navbar-dark-disabled-color: rgba($white, 0.45);
|
||||||
|
$navbar-dark-toggler-border-color: rgba($white, 0.3);
|
||||||
21
assets/css/_bs-custom.scss
Normal file
21
assets/css/_bs-custom.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
/* Bootstrap custom variable overrides */
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
$font-size-base: 1.125rem;
|
||||||
|
|
||||||
|
$font-family-serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
|
||||||
|
Baskerville, "Times New Roman", "Droid Serif", Times, serif,
|
||||||
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
||||||
|
|
||||||
|
$font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto,
|
||||||
|
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
|
||||||
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
|
||||||
|
|
||||||
|
$font-family-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
"Liberation Mono", "Courier New", monospace !important;
|
||||||
|
|
||||||
|
$font-family-base: $font-family-serif;
|
||||||
|
|
||||||
|
// Features
|
||||||
|
$enable-shadows: true;
|
||||||
|
$enable-negative-margins: true;
|
||||||
|
|
@ -2,49 +2,49 @@
|
||||||
@import "bs-custom";
|
@import "bs-custom";
|
||||||
|
|
||||||
// Required || Configuration
|
// Required || Configuration
|
||||||
@import "../node_modules/bootstrap/scss/functions";
|
@import "../../node_modules/bootstrap/scss/functions";
|
||||||
@import "../node_modules/bootstrap/scss/variables";
|
@import "../../node_modules/bootstrap/scss/variables";
|
||||||
|
|
||||||
/* Bootstrap custom variable overrides */
|
/* Bootstrap custom variable overrides */
|
||||||
@import "bs-colors";
|
@import "bs-colors";
|
||||||
|
|
||||||
// Required || Configuration -- CONTINUED
|
// Required || Configuration -- CONTINUED
|
||||||
@import "../node_modules/bootstrap/scss/mixins";
|
@import "../../node_modules/bootstrap/scss/mixins";
|
||||||
@import "../node_modules/bootstrap/scss/utilities";
|
@import "../../node_modules/bootstrap/scss/utilities";
|
||||||
|
|
||||||
// Optional || Layout & components
|
// Optional || Layout & components
|
||||||
@import "../node_modules/bootstrap/scss/root";
|
@import "../../node_modules/bootstrap/scss/root";
|
||||||
@import "../node_modules/bootstrap/scss/reboot";
|
@import "../../node_modules/bootstrap/scss/reboot";
|
||||||
@import "../node_modules/bootstrap/scss/type";
|
@import "../../node_modules/bootstrap/scss/type";
|
||||||
@import "../node_modules/bootstrap/scss/images";
|
@import "../../node_modules/bootstrap/scss/images";
|
||||||
@import "../node_modules/bootstrap/scss/containers";
|
@import "../../node_modules/bootstrap/scss/containers";
|
||||||
@import "../node_modules/bootstrap/scss/grid";
|
@import "../../node_modules/bootstrap/scss/grid";
|
||||||
// @import "../node_modules/bootstrap/scss/tables";
|
// @import "../../node_modules/bootstrap/scss/tables";
|
||||||
@import "../node_modules/bootstrap/scss/forms";
|
@import "../../node_modules/bootstrap/scss/forms";
|
||||||
@import "../node_modules/bootstrap/scss/buttons";
|
@import "../../node_modules/bootstrap/scss/buttons";
|
||||||
@import "../node_modules/bootstrap/scss/transitions";
|
@import "../../node_modules/bootstrap/scss/transitions";
|
||||||
// @import "../node_modules/bootstrap/scss/dropdown";
|
// @import "../../node_modules/bootstrap/scss/dropdown";
|
||||||
// @import "../node_modules/bootstrap/scss/button-group";
|
// @import "../../node_modules/bootstrap/scss/button-group";
|
||||||
@import "../node_modules/bootstrap/scss/nav";
|
@import "../../node_modules/bootstrap/scss/nav";
|
||||||
@import "../node_modules/bootstrap/scss/navbar";
|
@import "../../node_modules/bootstrap/scss/navbar";
|
||||||
// @import "../node_modules/bootstrap/scss/card";
|
// @import "../../node_modules/bootstrap/scss/card";
|
||||||
// @import "../node_modules/bootstrap/scss/accordion";
|
// @import "../../node_modules/bootstrap/scss/accordion";
|
||||||
// @import "../node_modules/bootstrap/scss/breadcrumb";
|
// @import "../../node_modules/bootstrap/scss/breadcrumb";
|
||||||
// @import "../node_modules/bootstrap/scss/pagination";
|
// @import "../../node_modules/bootstrap/scss/pagination";
|
||||||
// @import "../node_modules/bootstrap/scss/badge";
|
// @import "../../node_modules/bootstrap/scss/badge";
|
||||||
// @import "../node_modules/bootstrap/scss/alert";
|
// @import "../../node_modules/bootstrap/scss/alert";
|
||||||
// @import "../node_modules/bootstrap/scss/progress";
|
// @import "../../node_modules/bootstrap/scss/progress";
|
||||||
// @import "../node_modules/bootstrap/scss/list-group";
|
// @import "../../node_modules/bootstrap/scss/list-group";
|
||||||
// @import "../node_modules/bootstrap/scss/close";
|
// @import "../../node_modules/bootstrap/scss/close";
|
||||||
// @import "../node_modules/bootstrap/scss/toasts";
|
// @import "../../node_modules/bootstrap/scss/toasts";
|
||||||
// @import "../node_modules/bootstrap/scss/modal";
|
// @import "../../node_modules/bootstrap/scss/modal";
|
||||||
// @import "../node_modules/bootstrap/scss/tooltip";
|
// @import "../../node_modules/bootstrap/scss/tooltip";
|
||||||
// @import "../node_modules/bootstrap/scss/popover";
|
// @import "../../node_modules/bootstrap/scss/popover";
|
||||||
// @import "../node_modules/bootstrap/scss/carousel";
|
// @import "../../node_modules/bootstrap/scss/carousel";
|
||||||
// @import "../node_modules/bootstrap/scss/spinners";
|
// @import "../../node_modules/bootstrap/scss/spinners";
|
||||||
|
|
||||||
// Helpers
|
// Helpers
|
||||||
@import "../node_modules/bootstrap/scss/helpers";
|
@import "../../node_modules/bootstrap/scss/helpers";
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@import "../node_modules/bootstrap/scss/utilities/api";
|
@import "../../node_modules/bootstrap/scss/utilities/api";
|
||||||
|
|
|
||||||
27
assets/css/_fonts.scss
Normal file
27
assets/css/_fonts.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
/* brand : Fontsource Righteous */
|
||||||
|
@import "../../node_modules/@fontsource/righteous/400.css"; /* normal | normal */
|
||||||
|
|
||||||
|
/* monospace : Fontsource JetBrains Mono */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/100.css"; /* light | normal */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/200.css"; /* light | normal */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/300.css"; /* light | normal */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/400.css"; /* normal | normal */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/500.css"; /* heavier normal? */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/600.css"; /* heavier normal? */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/700.css"; /* bold | normal */
|
||||||
|
@import "../../node_modules/@fontsource/jetbrains-mono/800.css"; /* bolder | normal */
|
||||||
|
|
||||||
|
|
||||||
|
/* Fontsource Source Code Pro */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/200.css"; /* light | normal */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/200-italic.css"; /* light | italic */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/300.css"; /* light | normal */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/300-italic.css"; /* light | italic */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/400.css"; /* normal | normal */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/400-italic.css"; /* normal | italic */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/600.css"; /* heavier? | normal */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/600-italic.css"; /* heavier | italic */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/700.css"; /* bold | normal */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/700-italic.css"; /* bold | italic */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/900.css"; /* bolder? | normal */
|
||||||
|
@import "../../node_modules/@fontsource/source-serif-pro/900-italic.css"; /* bolder? | italic */
|
||||||
|
|
@ -1 +1,81 @@
|
||||||
@import "../../node_modules/bootstrap/scss/bootstrap.scss"
|
/* Fonts */
|
||||||
|
@import "fonts";
|
||||||
|
|
||||||
|
/* Load Bootstrap v5 and customizations */
|
||||||
|
@import "bs-load";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* main */
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
color: $gray-100;
|
||||||
|
background-color: $gray-800;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: rgba($white, 0.75);
|
||||||
|
border-bottom: $gray-600 2px solid;
|
||||||
|
text-decoration: none;
|
||||||
|
&.navbar-brand,
|
||||||
|
&.nav-link {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
&:visited {
|
||||||
|
color: $info;
|
||||||
|
.post-title & {
|
||||||
|
color: $gray-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $primary;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: $secondary 3px solid;
|
||||||
|
&.navbar-brand {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border-gray-900 {
|
||||||
|
border-color: $gray-900 !important;
|
||||||
|
}
|
||||||
|
.text-gray-200 {
|
||||||
|
color: $gray-200;
|
||||||
|
}
|
||||||
|
.text-gray-300 {
|
||||||
|
color: $gray-300;
|
||||||
|
}
|
||||||
|
.text-gray-400 {
|
||||||
|
color: $gray-400;
|
||||||
|
}
|
||||||
|
.text-gray-500 {
|
||||||
|
color: $gray-500;
|
||||||
|
}
|
||||||
|
.border-10 {
|
||||||
|
border-width: 10px !important;
|
||||||
|
}
|
||||||
|
.border-20 {
|
||||||
|
border-width: 20px !important;
|
||||||
|
}
|
||||||
|
.fw-500 {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.fw-600 {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.font-brand {
|
||||||
|
font-family: $font-family-brand;
|
||||||
|
}
|
||||||
|
.fs-larger {
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
.fs-smaller {
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.footer73k {
|
||||||
|
position: fixed !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
border-top-left-radius: 0.3rem !important;
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
|
||||||
35
header.php
35
header.php
|
|
@ -24,18 +24,45 @@ namespace WP_73k;
|
||||||
|
|
||||||
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
|
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 py-3">
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
$tag = 'p';
|
||||||
|
if ( is_front_page() || is_home() ) {
|
||||||
|
$tag = 'h1';
|
||||||
|
}
|
||||||
|
|
||||||
|
printf( '<h1 class="my-0 py-0 lh-base"><a class="navbar-brand fs-1 text-secondary" href="%1$s" rel="home"><span class="fw-light font-brand">\\\\%2$s</span></a></h1>',
|
||||||
|
esc_url( home_url( '/' ) ),
|
||||||
|
esc_html( get_bloginfo( 'name' ) )
|
||||||
|
);
|
||||||
|
|
||||||
if ( has_nav_menu( 'primary' ) ) {
|
if ( has_nav_menu( 'primary' ) ) {
|
||||||
wp_nav_menu([
|
wp_nav_menu([
|
||||||
'items_wrap' => '<button class="toggle absolute pin-t pin-r mt-4 mr-4 button button-sm">Close</button><ul id="%1$s" class="%2$s">%3$s</ul>',
|
|
||||||
'theme_location' => 'primary',
|
'theme_location' => 'primary',
|
||||||
'container' => 'nav',
|
'container' => 'nav',
|
||||||
'container_class' => 'nav-mobile',
|
'container_class' => 'nav-primary ml-auto',
|
||||||
'container_id' => 'mobile-menu',
|
'menu_class' => 'list-reset m-0 md:flex md:justify-end md:items-center'
|
||||||
'menu_class' => 'list-reset m-12'
|
|
||||||
]);
|
]);
|
||||||
} ?>
|
} ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// if ( has_nav_menu( 'primary' ) ) {
|
||||||
|
// wp_nav_menu( [
|
||||||
|
// 'items_wrap' => '<button class="toggle absolute pin-t pin-r mt-4 mr-4 button button-sm">Close</button><ul id="%1$s" class="%2$s">%3$s</ul>',
|
||||||
|
// 'theme_location' => 'primary',
|
||||||
|
// 'container' => 'nav',
|
||||||
|
// 'container_class' => 'nav-mobile',
|
||||||
|
// 'container_id' => 'mobile-menu',
|
||||||
|
// 'menu_class' => 'list-reset m-12'
|
||||||
|
// ] );
|
||||||
|
// }
|
||||||
|
?>
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<?php
|
<?php
|
||||||
|
|
|
||||||
6564
package-lock.json
generated
6564
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -38,6 +38,7 @@
|
||||||
"cross-env": "^7.0.2",
|
"cross-env": "^7.0.2",
|
||||||
"css-loader": "^5.x",
|
"css-loader": "^5.x",
|
||||||
"css-minimizer-webpack-plugin": "^3.x",
|
"css-minimizer-webpack-plugin": "^3.x",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
"imagemin-webpack-plugin": "^2.4.2",
|
"imagemin-webpack-plugin": "^2.4.2",
|
||||||
"mini-css-extract-plugin": "^1.x",
|
"mini-css-extract-plugin": "^1.x",
|
||||||
"postcss": "^8.2.6",
|
"postcss": "^8.2.6",
|
||||||
|
|
|
||||||
396
tailwind.js
396
tailwind.js
|
|
@ -1,396 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
prefix: '',
|
|
||||||
important: false,
|
|
||||||
separator: ':',
|
|
||||||
theme: {
|
|
||||||
screens: {
|
|
||||||
sm: '640px',
|
|
||||||
md: '768px',
|
|
||||||
lg: '1024px',
|
|
||||||
xl: '1280px',
|
|
||||||
retina: {
|
|
||||||
'min-resolution': '192dpi'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
colors: {
|
|
||||||
transparent: 'transparent',
|
|
||||||
|
|
||||||
black: '#000',
|
|
||||||
white: '#fff',
|
|
||||||
|
|
||||||
gray: {
|
|
||||||
100: '#f7fafc',
|
|
||||||
200: '#edf2f7',
|
|
||||||
300: '#e2e8f0',
|
|
||||||
400: '#cbd5e0',
|
|
||||||
500: '#a0aec0',
|
|
||||||
600: '#718096',
|
|
||||||
700: '#4a5568',
|
|
||||||
800: '#2d3748',
|
|
||||||
900: '#1a202c',
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
100: '#DB3A34',
|
|
||||||
200: '#CC3630'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
spacing: {
|
|
||||||
px: '1px',
|
|
||||||
'0': '0',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'5': '1.25rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'10': '2.5rem',
|
|
||||||
'12': '3rem',
|
|
||||||
'16': '4rem',
|
|
||||||
'20': '5rem',
|
|
||||||
'24': '6rem',
|
|
||||||
'32': '8rem',
|
|
||||||
'40': '10rem',
|
|
||||||
'48': '12rem',
|
|
||||||
'56': '14rem',
|
|
||||||
'64': '16rem',
|
|
||||||
},
|
|
||||||
backgroundColor: theme => theme('colors'),
|
|
||||||
backgroundPosition: {
|
|
||||||
bottom: 'bottom',
|
|
||||||
center: 'center',
|
|
||||||
left: 'left',
|
|
||||||
'left-bottom': 'left bottom',
|
|
||||||
'left-top': 'left top',
|
|
||||||
right: 'right',
|
|
||||||
'right-bottom': 'right bottom',
|
|
||||||
'right-top': 'right top',
|
|
||||||
top: 'top',
|
|
||||||
},
|
|
||||||
backgroundSize: {
|
|
||||||
auto: 'auto',
|
|
||||||
cover: 'cover',
|
|
||||||
contain: 'contain',
|
|
||||||
},
|
|
||||||
borderColor: theme => ({
|
|
||||||
...theme('colors'),
|
|
||||||
default: theme('colors.gray.300', 'currentColor'),
|
|
||||||
}),
|
|
||||||
borderRadius: {
|
|
||||||
none: '0',
|
|
||||||
sm: '0.125rem',
|
|
||||||
default: '0.25rem',
|
|
||||||
lg: '0.5rem',
|
|
||||||
full: '9999px',
|
|
||||||
},
|
|
||||||
borderWidth: {
|
|
||||||
default: '1px',
|
|
||||||
'0': '0',
|
|
||||||
'2': '2px',
|
|
||||||
'4': '4px',
|
|
||||||
'8': '8px',
|
|
||||||
},
|
|
||||||
boxShadow: {
|
|
||||||
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
||||||
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
||||||
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
||||||
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
||||||
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
||||||
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
||||||
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
|
|
||||||
none: 'none',
|
|
||||||
},
|
|
||||||
container: {},
|
|
||||||
cursor: {
|
|
||||||
auto: 'auto',
|
|
||||||
default: 'default',
|
|
||||||
pointer: 'pointer',
|
|
||||||
wait: 'wait',
|
|
||||||
text: 'text',
|
|
||||||
move: 'move',
|
|
||||||
'not-allowed': 'not-allowed',
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
current: 'currentColor',
|
|
||||||
},
|
|
||||||
flex: {
|
|
||||||
'1': '1 1 0%',
|
|
||||||
auto: '1 1 auto',
|
|
||||||
initial: '0 1 auto',
|
|
||||||
none: 'none',
|
|
||||||
},
|
|
||||||
flexGrow: {
|
|
||||||
'0': '0',
|
|
||||||
default: '1',
|
|
||||||
},
|
|
||||||
flexShrink: {
|
|
||||||
'0': '0',
|
|
||||||
default: '1',
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
sans: [
|
|
||||||
'-apple-system',
|
|
||||||
'BlinkMacSystemFont',
|
|
||||||
'"Segoe UI"',
|
|
||||||
'Roboto',
|
|
||||||
'"Helvetica Neue"',
|
|
||||||
'Arial',
|
|
||||||
'"Noto Sans"',
|
|
||||||
'sans-serif',
|
|
||||||
'"Apple Color Emoji"',
|
|
||||||
'"Segoe UI Emoji"',
|
|
||||||
'"Segoe UI Symbol"',
|
|
||||||
'"Noto Color Emoji"',
|
|
||||||
],
|
|
||||||
serif: [
|
|
||||||
'Georgia',
|
|
||||||
'Cambria',
|
|
||||||
'"Times New Roman"',
|
|
||||||
'Times',
|
|
||||||
'serif',
|
|
||||||
],
|
|
||||||
mono: [
|
|
||||||
'Menlo',
|
|
||||||
'Monaco',
|
|
||||||
'Consolas',
|
|
||||||
'"Liberation Mono"',
|
|
||||||
'"Courier New"',
|
|
||||||
'monospace',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
fontSize: {
|
|
||||||
xs: '0.75rem',
|
|
||||||
sm: '0.875rem',
|
|
||||||
base: '1rem',
|
|
||||||
lg: '1.125rem',
|
|
||||||
xl: '1.25rem',
|
|
||||||
'2xl': '1.5rem',
|
|
||||||
'3xl': '1.875rem',
|
|
||||||
'4xl': '2.25rem',
|
|
||||||
'5xl': '3rem',
|
|
||||||
'6xl': '4rem',
|
|
||||||
},
|
|
||||||
fontWeight: {
|
|
||||||
hairline: '100',
|
|
||||||
thin: '200',
|
|
||||||
light: '300',
|
|
||||||
normal: '400',
|
|
||||||
medium: '500',
|
|
||||||
semibold: '600',
|
|
||||||
bold: '700',
|
|
||||||
extrabold: '800',
|
|
||||||
black: '900',
|
|
||||||
},
|
|
||||||
height: theme => ({
|
|
||||||
auto: 'auto',
|
|
||||||
...theme('spacing'),
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vh',
|
|
||||||
}),
|
|
||||||
inset: {
|
|
||||||
'0': '0',
|
|
||||||
auto: 'auto',
|
|
||||||
},
|
|
||||||
letterSpacing: {
|
|
||||||
tighter: '-0.05em',
|
|
||||||
tight: '-0.025em',
|
|
||||||
normal: '0',
|
|
||||||
wide: '0.025em',
|
|
||||||
wider: '0.05em',
|
|
||||||
widest: '0.1em',
|
|
||||||
},
|
|
||||||
lineHeight: {
|
|
||||||
none: '1',
|
|
||||||
tight: '1.25',
|
|
||||||
snug: '1.375',
|
|
||||||
normal: '1.5',
|
|
||||||
relaxed: '1.625',
|
|
||||||
loose: '2',
|
|
||||||
},
|
|
||||||
listStyleType: {
|
|
||||||
none: 'none',
|
|
||||||
disc: 'disc',
|
|
||||||
decimal: 'decimal',
|
|
||||||
},
|
|
||||||
margin: (theme, { negative }) => ({
|
|
||||||
auto: 'auto',
|
|
||||||
...theme('spacing'),
|
|
||||||
...negative(theme('spacing')),
|
|
||||||
}),
|
|
||||||
maxHeight: {
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vh',
|
|
||||||
},
|
|
||||||
maxWidth: {
|
|
||||||
xs: '20rem',
|
|
||||||
sm: '24rem',
|
|
||||||
md: '28rem',
|
|
||||||
lg: '32rem',
|
|
||||||
xl: '36rem',
|
|
||||||
'2xl': '42rem',
|
|
||||||
'3xl': '48rem',
|
|
||||||
'4xl': '56rem',
|
|
||||||
'5xl': '64rem',
|
|
||||||
'6xl': '72rem',
|
|
||||||
full: '100%',
|
|
||||||
},
|
|
||||||
minHeight: {
|
|
||||||
'0': '0',
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vh',
|
|
||||||
},
|
|
||||||
minWidth: {
|
|
||||||
'0': '0',
|
|
||||||
full: '100%',
|
|
||||||
},
|
|
||||||
objectPosition: {
|
|
||||||
bottom: 'bottom',
|
|
||||||
center: 'center',
|
|
||||||
left: 'left',
|
|
||||||
'left-bottom': 'left bottom',
|
|
||||||
'left-top': 'left top',
|
|
||||||
right: 'right',
|
|
||||||
'right-bottom': 'right bottom',
|
|
||||||
'right-top': 'right top',
|
|
||||||
top: 'top',
|
|
||||||
},
|
|
||||||
opacity: {
|
|
||||||
'0': '0',
|
|
||||||
'25': '0.25',
|
|
||||||
'50': '0.5',
|
|
||||||
'75': '0.75',
|
|
||||||
'100': '1',
|
|
||||||
},
|
|
||||||
order: {
|
|
||||||
first: '-9999',
|
|
||||||
last: '9999',
|
|
||||||
none: '0',
|
|
||||||
'1': '1',
|
|
||||||
'2': '2',
|
|
||||||
'3': '3',
|
|
||||||
'4': '4',
|
|
||||||
'5': '5',
|
|
||||||
'6': '6',
|
|
||||||
'7': '7',
|
|
||||||
'8': '8',
|
|
||||||
'9': '9',
|
|
||||||
'10': '10',
|
|
||||||
'11': '11',
|
|
||||||
'12': '12',
|
|
||||||
},
|
|
||||||
padding: theme => theme('spacing'),
|
|
||||||
stroke: {
|
|
||||||
current: 'currentColor',
|
|
||||||
},
|
|
||||||
textColor: theme => theme('colors'),
|
|
||||||
width: theme => ({
|
|
||||||
auto: 'auto',
|
|
||||||
...theme('spacing'),
|
|
||||||
'1/2': '50%',
|
|
||||||
'1/3': '33.33333%',
|
|
||||||
'2/3': '66.66667%',
|
|
||||||
'1/4': '25%',
|
|
||||||
'2/4': '50%',
|
|
||||||
'3/4': '75%',
|
|
||||||
'1/5': '20%',
|
|
||||||
'2/5': '40%',
|
|
||||||
'3/5': '60%',
|
|
||||||
'4/5': '80%',
|
|
||||||
'1/6': '16.66667%',
|
|
||||||
'2/6': '33.33333%',
|
|
||||||
'3/6': '50%',
|
|
||||||
'4/6': '66.66667%',
|
|
||||||
'5/6': '83.33333%',
|
|
||||||
'1/12': '8.33333%',
|
|
||||||
'2/12': '16.66667%',
|
|
||||||
'3/12': '25%',
|
|
||||||
'4/12': '33.33333%',
|
|
||||||
'5/12': '41.66667%',
|
|
||||||
'6/12': '50%',
|
|
||||||
'7/12': '58.33333%',
|
|
||||||
'8/12': '66.66667%',
|
|
||||||
'9/12': '75%',
|
|
||||||
'10/12': '83.33333%',
|
|
||||||
'11/12': '91.66667%',
|
|
||||||
full: '100%',
|
|
||||||
screen: '100vw',
|
|
||||||
}),
|
|
||||||
zIndex: {
|
|
||||||
auto: 'auto',
|
|
||||||
'0': '0',
|
|
||||||
'10': '10',
|
|
||||||
'20': '20',
|
|
||||||
'30': '30',
|
|
||||||
'40': '40',
|
|
||||||
'50': '50',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
variants: {
|
|
||||||
alignContent: ['responsive'],
|
|
||||||
alignItems: ['responsive'],
|
|
||||||
alignSelf: ['responsive'],
|
|
||||||
appearance: ['responsive'],
|
|
||||||
backgroundAttachment: ['responsive'],
|
|
||||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
||||||
backgroundPosition: ['responsive'],
|
|
||||||
backgroundRepeat: ['responsive'],
|
|
||||||
backgroundSize: ['responsive'],
|
|
||||||
borderCollapse: ['responsive'],
|
|
||||||
borderColor: ['responsive', 'hover', 'focus'],
|
|
||||||
borderRadius: ['responsive'],
|
|
||||||
borderStyle: ['responsive'],
|
|
||||||
borderWidth: ['responsive'],
|
|
||||||
boxShadow: ['responsive', 'hover', 'focus'],
|
|
||||||
cursor: ['responsive'],
|
|
||||||
display: ['responsive'],
|
|
||||||
fill: ['responsive'],
|
|
||||||
flex: ['responsive'],
|
|
||||||
flexDirection: ['responsive'],
|
|
||||||
flexGrow: ['responsive'],
|
|
||||||
flexShrink: ['responsive'],
|
|
||||||
flexWrap: ['responsive'],
|
|
||||||
float: ['responsive'],
|
|
||||||
fontFamily: ['responsive'],
|
|
||||||
fontSize: ['responsive'],
|
|
||||||
fontSmoothing: ['responsive'],
|
|
||||||
fontStyle: ['responsive'],
|
|
||||||
fontWeight: ['responsive', 'hover', 'focus'],
|
|
||||||
height: ['responsive'],
|
|
||||||
inset: ['responsive'],
|
|
||||||
justifyContent: ['responsive'],
|
|
||||||
letterSpacing: ['responsive'],
|
|
||||||
lineHeight: ['responsive'],
|
|
||||||
listStylePosition: ['responsive'],
|
|
||||||
listStyleType: ['responsive'],
|
|
||||||
margin: ['responsive'],
|
|
||||||
maxHeight: ['responsive'],
|
|
||||||
maxWidth: ['responsive'],
|
|
||||||
minHeight: ['responsive'],
|
|
||||||
minWidth: ['responsive'],
|
|
||||||
objectFit: ['responsive'],
|
|
||||||
objectPosition: ['responsive'],
|
|
||||||
opacity: ['responsive'],
|
|
||||||
order: ['responsive'],
|
|
||||||
outline: ['responsive', 'focus'],
|
|
||||||
overflow: ['responsive'],
|
|
||||||
padding: ['responsive'],
|
|
||||||
pointerEvents: ['responsive'],
|
|
||||||
position: ['responsive'],
|
|
||||||
resize: ['responsive'],
|
|
||||||
stroke: ['responsive'],
|
|
||||||
tableLayout: ['responsive'],
|
|
||||||
textAlign: ['responsive'],
|
|
||||||
textColor: ['responsive', 'hover', 'focus'],
|
|
||||||
textDecoration: ['responsive', 'hover', 'focus'],
|
|
||||||
textTransform: ['responsive'],
|
|
||||||
userSelect: ['responsive'],
|
|
||||||
verticalAlign: ['responsive'],
|
|
||||||
visibility: ['responsive'],
|
|
||||||
whitespace: ['responsive'],
|
|
||||||
width: ['responsive'],
|
|
||||||
wordBreak: ['responsive'],
|
|
||||||
zIndex: ['responsive'],
|
|
||||||
},
|
|
||||||
corePlugins: {},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +1,13 @@
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
|
|
||||||
const ImageminPlugin = require('imagemin-webpack-plugin').default;
|
const ImageminPlugin = require('imagemin-webpack-plugin').default;
|
||||||
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
|
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
|
||||||
const PurgeCSS = require('@fullhuman/postcss-purgecss');
|
const PurgeCSS = require('@fullhuman/postcss-purgecss');
|
||||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
|
||||||
const isProduction = 'production' === process.env.NODE_ENV;
|
const isProduction = 'production' === process.env.NODE_ENV;
|
||||||
|
|
||||||
// Set the build prefix.
|
// Set the build prefix.
|
||||||
|
|
@ -73,7 +76,20 @@ const config = {
|
||||||
"sass-loader",
|
"sass-loader",
|
||||||
"postcss-loader",
|
"postcss-loader",
|
||||||
],
|
],
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: "file-loader",
|
||||||
|
options: {
|
||||||
|
esModule: false,
|
||||||
|
name: "[name].[ext]",
|
||||||
|
outputPath: "./fonts",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
optimization: {
|
optimization: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue