adam/wp-73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

replace tailwind with bootstrap: initial webpack config for development

Browse source
This commit is contained in:
Adam Piontek 2021-07-02 12:51:45 -04:00
parent 1388a95038
commit 8a9a7e0b52
16 changed files with 9 additions and 468 deletions

12
assets/css/app.scss
View file

@ -1,13 +1 @@
// @import "tailwindcss/base";
// @import "tailwindcss/components";
// @import "tailwindcss/utilities";
// @import "whitelist/whitelist.css";
// @import "conditional/conditional.css";
// /* Fonts */
// @import "fonts";
// /* Load Bootstrap v5 and customizations */
// @import "bs-load";
@import "../../node_modules/bootstrap/scss/bootstrap.scss"

41
assets/css/conditional/article.css
View file

@ -1,41 +0,0 @@
.post-title {
@apply text-4xl mb-0;
@screen lg {
@apply text-5xl;
}
}
.article {
@apply mt-8;
> p:first-of-type {
@apply text-lg;
}
h2,
h3,
h4,
h5,
h6 {
@apply font-bold;
}
h4,
h5,
h6 {
text-transform: uppercase;
}
@screen lg {
p,
ul,
ol {
@apply mt-4 mb-8 leading-normal;
}
p.text-sm {
@apply text-sm;
}
}
}

2
assets/css/conditional/conditional.css
View file

@ -1,2 +0,0 @@
@import "header";
@import "article";

12
assets/css/conditional/header.css
View file

@ -1,12 +0,0 @@
.header {
@apply py-2 z-10 bg-gray-100;
@screen lg {
@apply py-6;
}
.container {
@apply flex justify-between items-center;
}
}

55
assets/css/whitelist/buttons.css
View file

@ -1,55 +0,0 @@
.button {
@apply font-sans not-italic font-light rounded bg-gray-800 border-2 border-gray-800 leading-normal inline-block no-underline text-gray-200 px-6 py-4 shadow-lg text-center;
transform: translateY(0);
@screen lg {
@apply px-12 py-4;
}
&:focus,
&:hover {
@apply text-white border-gray-800 bg-gray-800 no-underline shadow;
transform: translate3d(1px, 2px, 0);
cursor: pointer;
}
}
.button-white {
@extend .button;
@apply bg-gray-100 text-gray-800;
&:focus,
&:hover {
@apply bg-white text-gray-600;
}
}
.button-primary {
@extend .button;
@apply bg-primary-100 text-white border-none;
&:focus,
&:hover {
@apply border-primary-100 bg-primary-100 text-white bg-primary-200;
}
}
.button-link {
@apply font-bold font-serif not-italic;
}
.highlight {
@apply font-bold font-sans not-italic text-primary-100;
}
.button-sm {
@apply px-4 py-2 text-sm;
}
.button-lg {
@apply px-12 py-4;
@screen lg {
@apply py-6;
}
}

44
assets/css/whitelist/forms.css
View file

@ -1,44 +0,0 @@
label {
@apply text-sm font-sans uppercase font-bold;
}
input,
textarea,
select {
@apply border-2 bg-gray-100 leading-normal rounded w-full py-3 px-4 mb-2 italic text-base w-full border-gray-300;
@extend .transition;
&[aria-invalid="true"] {
@apply border-primary-100;
}
&:focus {
@apply shadow-lg bg-gray-100 border-gray-200;
transform: translate3d(-1px, -1px, 0);
outline: 0;
}
}
input,
textarea {
&:focus {
@apply border-gray-800;
}
}
textarea {
@apply h-24;
}
select {
@apply h-12 bg-gray-100;
option {
@apply bg-white;
}
&:focus {
@apply shadow-none border-gray-300;
transform: none;
}
}

17
assets/css/whitelist/icons.css
View file

@ -1,17 +0,0 @@
.svg-icon {
width: 1em;
height: 1em;
path,
polygon,
rect {
@apply fill-current;
}
circle {
@apply stroke-current;
stroke-width: 1;
}
}

113
assets/css/whitelist/navigation.css
View file

@ -1,113 +0,0 @@
.nav-primary {
@apply hidden;
a {
@apply text-gray-800 italic no-underline font-normal;
&:focus,
&:hover {
@apply underline;
}
}
li {
@apply leading-tight;
}
.highlight {
@apply text-primary-100 not-italic font-bold;
}
.button {
@apply text-white;
}
.current-menu-item a {
@apply font-bold not-italic;
}
@screen md {
@apply block;
.dark-header & {
transform: none;
}
li {
@apply mb-0;
&:last-child a {
@apply mr-0;
}
}
a {
@apply mx-4;
}
.button {
@extend .button-sm;
}
.sub-menu {
@apply hidden absolute bg-white shadow-lg;
@extend .list-reset;
a {
@apply text-gray-200;
}
}
.menu-item-has-children {
@apply relative;
&:hover {
.sub-menu {
@apply block;
}
}
}
}
}
.nav-mobile {
@extend .nav-primary, .transition;
@apply fixed left-0 top-0 h-full bg-white p-4 z-50 w-full overflow-scroll block z-50 text-center;
transform: translate3d(-100%, 0, 0);
&.active {
transform: translate3d(0, 0, 0);
}
a {
@apply block w-full text-2xl;
}
@screen md {
@apply hidden;
}
.admin-bar & {
top: 46px;
@screen md {
top: 32px;
}
}
}
@screen md {
.toggle {
@apply hidden;
}
}
.footer-menu {
@apply pl-0 ml-0;
@extend .list-reset;
a {
@apply text-white not-italic;
}
}

13
assets/css/whitelist/transitions.css
View file

@ -1,13 +0,0 @@
.transition {
transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a,
.button,
.button-large,
.button-lg,
.button-primary,
.button-bg-primary-200,
.button-bg-primary-200 .icon {
@extend .transition;
}

111
assets/css/whitelist/type.css
View file

@ -1,111 +0,0 @@
html {
font-size: 18px;
}
body {
@apply bg-gray-100 font-serif text-base font-light leading-normal antialiased;
}
strong,
b {
@apply font-bold;
}
p {
@apply mt-2 mb-4;
}
a {
@apply text-primary-100 underline font-bold;
&:focus,
&:hover {
@apply text-gray-600;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply mt-8 mb-4 font-sans font-light;
@screen lg {
@apply mt-12;
}
}
h1,
h2,
h3 {
@apply leading-tight;
}
h4,
h5,
h6 {
@apply leading-normal;
}
h1 {
@apply text-5xl;
}
h2 {
@apply text-4xl;
}
h3 {
@apply text-3xl;
}
h4 {
@apply text-2xl;
}
h5 {
@apply text-xl;
}
h6 {
@apply text-xl tracking-wide;
}
ul,
ol {
@apply mt-4 mb-10 ml-2;
@screen lg {
@apply ml-8;
}
}
li {
@apply mb-2;
.sidebar &,
.article & {
list-style-type: disc;
}
}
blockquote {
@apply text-center italic m-10;
@screen lg {
@apply m-16 text-lg;
}
}
.list-reset {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
::selection {
@apply bg-primary-100 text-gray-200;
}

7
assets/css/whitelist/whitelist.css
View file

@ -1,7 +0,0 @@
@import "type.css";
@import "navigation.css";
@import "buttons.css";
@import "transitions.css";
@import "icons.css";
@import "forms.css";
@import "wordpress.css";

28
assets/css/whitelist/wordpress.css
View file

@ -1,28 +0,0 @@
.alignright {
@apply float-right ml-4 mb-4;
}
.alignleft {
@apply float-left mr-4 mb-4;
}
.aligncenter {
@apply mx-auto;
}
img {
@apply rounded;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}