up to tailwind 2

Dymantic · Apr 12, 2021 · 21aba6b · 21aba6b
1 parent 9a99b5c
commit 21aba6b
Show file tree

Hide file tree

Showing 41 changed files with 19,260 additions and 15,186 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,33 +1,33 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "production": "mix --production"
     },
     "devDependencies": {
         "axios": "^0.18",
         "cross-env": "^5.1",
-        "laravel-mix": "^5.0",
         "less": "^3.8.1",
-        "less-loader": "^4.1.0",
+        "less-loader": "^8.0.0",
         "lodash": "^4.17.5",
-        "vue": "^2.6.12"
+        "vue": "^2.6.12",
+        "webpack": "^5.26.3"
     },
     "dependencies": {
         "@dymantic/modal": "^0.1.0",
         "@dymantic/vue-forms": "^1.1.0",
+        "autoprefixer": "^10.2.5",
         "flickity": "^2.1.2",
         "flickity-imagesloaded": "^2.0.0",
         "jump.js": "^1.0.2",
-        "laravel-mix-purgecss": "^4.1.0",
+        "laravel-mix": "^6.0.13",
         "lazysizes": "^5.2.0",
         "lodash.throttle": "^4.1.1",
-        "tailwindcss": "^0.6.5",
+        "postcss": "^8.2.8",
+        "tailwindcss": "^2.0.4",
         "vue-loader": "^15.9.5",
         "vue-template-compiler": "^2.6.12"
     }

diff --git a/resources/js/components/ContactForm.vue b/resources/js/components/ContactForm.vue
@@ -11,9 +11,9 @@
         :class="{'opacity-50': waiting}"
         class="px-4"
       >
-        <div class="max-w-sm mx-auto">
+        <div class="max-w-lg mx-auto">
           <div class="form-group my-3" :class="{'has-error': form.errors.name}">
-            <label class="font-heading text-sm text-brown-dark" for="name">{{ trans.name }}</label>
+            <label class="type-b7 text-brown-dark" for="name">{{ trans.name }}</label>
             <span class="text-xs text-red" v-show="formErrors.name">{{ formErrors.name }}</span>
             <input
               type="text"
@@ -24,7 +24,7 @@
             >
           </div>
           <div class="form-group my-3" :class="{'has-error': formErrors.phone}">
-            <label class="font-heading text-sm text-brown-dark" for="phone">{{ trans.phone }}</label>
+            <label class="type-b7 text-brown-dark" for="phone">{{ trans.phone }}</label>
             <span class="text-xs text-red" v-show="formErrors.phone">{{ formErrors.phone }}</span>
             <input
               type="text"
@@ -35,7 +35,7 @@
             >
           </div>
           <div class="form-group my-3" :class="{'has-error': formErrors.email}">
-            <label class="font-heading text-sm text-brown-dark" for="email">{{ trans.email }}</label>
+            <label class="type-b7 text-brown-dark" for="email">{{ trans.email }}</label>
             <span class="text-xs text-red" v-show="formErrors.email">{{ formErrors.email }}</span>
             <input
               type="text"
@@ -47,7 +47,7 @@
           </div>
           <div class="form-group my-3" :class="{'has-error': formErrors.message_body}">
             <label
-              class="font-heading text-sm text-brown-dark"
+              class="type-b7 text-brown-dark"
               for="message_body"
             >{{ trans.message_body }}</label>
             <span

diff --git a/resources/less/app.less b/resources/less/app.less
@@ -5,11 +5,11 @@
   font-weight: bold;
 }
 
-@tailwind preflight;
+@tailwind base;
 
 @import (less) "~flickity/dist/flickity.css";
 
-@import "./typerules.less";
+@import "./type.less";
 @import "./buttons-links.less";
 @import "layout-helpers";
 @import "navbar";
@@ -43,6 +43,3 @@ picture {
   font-size: 0;
 }
 
-.object-contain {
-    object-fit: contain;
-}
diff --git a/resources/less/buttons-links.less b/resources/less/buttons-links.less
@@ -1,31 +1,31 @@
 .btn {
-  @apply .block .mx-auto .px-6 .py-1 .font-sans .tracking-wide .font-medium;
+  @apply block mx-auto px-6 py-1 type-a1 tracking-wide font-medium;
 }
 
 .inline-button {
-@apply .px-6 .py-1 .font-sans .tracking-wide;
+@apply px-6 py-1 type-a1 tracking-wide;
 }
 
 .btn-brown {
-  @apply .bg-brown-dark .text-white;
+  @apply bg-brown-dark text-white;
 }
 
 .btn-warning {
-@apply .bg-warning .text-white;
+@apply bg-warning text-white;
 }
 
 .btn-purple {
-@apply .bg-purple .text-cream-light;
+@apply bg-purple text-cream-light;
 }
 
 .btn-purple:hover {
-@apply .bg-purple-soft;
+@apply bg-purple-soft;
 }
 
 .btn-purple-ghost {
-@apply .bg-transparent .text-purple border-2 border-purple;
+@apply bg-transparent text-purple border-2 border-purple;
 }
 
 .text-link {
-  @apply .font-sans .no-underline .font-medium;
-}
+  @apply type-a1 no-underline font-medium;
+}
diff --git a/resources/less/flickity.less b/resources/less/flickity.less
@@ -50,14 +50,14 @@
 
         .flickity-page-dots {
             .dot {
-            @apply .bg-purple;
+            @apply bg-purple;
             }
         }
     }
 
     .flickity-page-dots {
         .dot {
-        @apply .bg-white;
+        @apply bg-white;
         }
     }
 
@@ -94,4 +94,4 @@
             min-height: calc((100vw - 10rem) * .57);
         }
     }
-}
+}
diff --git a/resources/less/layout-helpers.less b/resources/less/layout-helpers.less
@@ -15,5 +15,5 @@
 }
 
 .reg-section-space {
-  @apply .px-4 .py-20;
-}
+  @apply px-4 py-20;
+}
diff --git a/resources/less/navbar.less b/resources/less/navbar.less
@@ -3,11 +3,11 @@
 }
 
 .main-nav.scrolled {
-@apply .bg-purple;
+@apply bg-purple;
 }
 
 .nav-link {
-@apply .no-underline .uppercase .tracking-wide .mx-4 .px-1;
+@apply no-underline uppercase tracking-wide mx-4 px-1;
 }
 
 

diff --git a/resources/less/pages/journal.less b/resources/less/pages/journal.less
@@ -17,23 +17,23 @@
 }
 
 .journal-entry figcaption {
-  @apply .text-center .text-sm;
+  @apply text-center text-sm;
 }
 
 .journal-entry figure {
-  @apply .m-0;
+  @apply m-0;
 }
 
 .journal-entry iframe {
-@apply .max-w-full;
+@apply max-w-full;
 }
 
 .journal-entry a {
-    @apply .text-purple .no-underline;
+    @apply text-purple no-underline;
 }
 
 .journal-entry a:hover {
-@apply .text-hover-purple .underline;
+@apply text-hover-purple underline;
 }
 
 .aspect-16-9 {

diff --git a/resources/less/type.less b/resources/less/type.less
@@ -0,0 +1,43 @@
+.type-a1 {
+    @apply font-display text-lg font-medium;
+}
+
+.type-h0 {
+    @apply font-sans text-4xl md:text-5xl;
+}
+
+.type-h1 {
+    @apply font-sans font-bold text-lg;
+}
+
+.type-h2 {
+@apply font-sans font-bold text-4xl;
+}
+
+.type-b1 {
+    @apply font-serif text-lg;
+}
+
+.type-b2 {
+    @apply font-serif text-lg italic;
+}
+
+.type-b3 {
+    @apply font-serif text-base italic;
+}
+
+.type-b4 {
+    @apply font-serif text-sm italic;
+}
+
+.type-b5 {
+    @apply font-serif text-3xl md:text-5xl zh:text-4xl italic;
+}
+
+.type-b6 {
+    @apply font-serif text-5xl;
+}
+
+.type-b7 {
+    @apply font-sans text-sm;
+}
diff --git a/resources/views/components/blog-subnav.blade.php b/resources/views/components/blog-subnav.blade.php
@@ -1,8 +1,8 @@
-<div class="pb-6 md:pb-12 pt-3 md:pt-6 md:px-4 bg-green-softest">
+<div class="pb-6 md:pb-12 pt-3 md:pt-6 md:px-4">
     <div class="flex flex-wrap justify-center md:justify-center items-center w-9/10 sm:w-full mx-auto">
         @foreach($subcategories as $category)
             <div class="px-4 md:px-8 flex-shrink-0 mt-3">
-                <a class="{{ $isCurrent($category['slug']) ? 'underline' : 'no-underline' }} heading-text  text-brown-dark whitespace-no-wrap" href="{{ localUrl('journal/category/' . $category['slug']) }}">{{ $category['title'] }}</a>
+                <a class="{{ $isCurrent($category['slug']) ? 'underline' : 'no-underline' }} type-h1  text-brown-dark whitespace-nowrap" href="{{ localUrl('journal/category/' . $category['slug']) }}">{{ $category['title'] }}</a>
             </div>
         @endforeach
     </div>

diff --git a/resources/views/components/info-section-dark.blade.php b/resources/views/components/info-section-dark.blade.php
@@ -1,9 +1,9 @@
 <div class="bg-navy reg-section-space">
-    <div class="max-w-md mx-auto flex flex-col items-center">
-        <p class="heading-text mb-4 text-cream-light">{{ $title }}</p>
+    <div class="max-w-xl mx-auto flex flex-col items-center">
+        <p class="type-h1 mb-4 text-cream-light">{{ $title }}</p>
         <span class="inline-block mb-12">
                 @include('svgs.logos.leaf-cream')
             </span>
         {{ $slot }}
     </div>
-</div>
+</div>
diff --git a/resources/views/components/info-section-light.blade.php b/resources/views/components/info-section-light.blade.php
@@ -1,9 +1,9 @@
 <div class="reg-section-space">
-    <div class="max-w-md mx-auto flex flex-col items-center">
-        <p class="heading-text mb-4 text-purple">{{ $title }}</p>
+    <div class="max-w-xl mx-auto flex flex-col items-center">
+        <p class="type-h1 mb-4 text-purple">{{ $title }}</p>
         <span class="inline-block mb-12">
                 @include('svgs.logos.leaf-purple')
             </span>
         {{ $slot }}
     </div>
-</div>
+</div>
diff --git a/resources/views/components/info-section.blade.php b/resources/views/components/info-section.blade.php
@@ -1,9 +1,9 @@
 <div class="bg-pinky-grey reg-section-space {{ $topClass ?? '' }}">
-    <div class="max-w-md mx-auto flex flex-col items-center">
-        <p class="heading-text mb-4 text-purple">{{ $title }}</p>
+    <div class="max-w-xl mx-auto flex flex-col items-center">
+        <p class="type-h1 mb-4 text-purple">{{ $title }}</p>
         <span class="inline-block mb-12">
                 @include('svgs.logos.leaf-purple')
             </span>
         {{ $slot }}
     </div>
-</div>
+</div>
diff --git a/resources/views/front/about/page.blade.php b/resources/views/front/about/page.blade.php
@@ -15,8 +15,8 @@
 @section('content')
     <div class="h-12 bg-pinky-grey"></div>
     <section class="about-banner-main section-height flex justify-center items-center flex-col">
-        <svg xmlns="http://www.w3.org/2000/svg" height="60px" class="text-cream-light fill-current" viewBox="0 0 38.01 37.79"><path fill-rule="evenodd" d="M17.08 17.94a12.25 12.25 0 0 1 4.27-3.18c1.71-.86 3.86-1.29 5.67-2.09.55-1 1.06-1.81 1.6-2.8l.66.12a18.76 18.76 0 0 1-3 4.34 25.77 25.77 0 0 1-8.19 5.41l-1-1.8zm10.65-4.16a21.25 21.25 0 0 1-9.58 6l.75 1.3 3.76 1.65c3.51-2 5.28-3.31 5.17-7.83z"/><path fill-rule="evenodd" d="M26.4 20c-3.14 3.43-5.65.3-7.71-2.19a13.69 13.69 0 0 0-4.4-4A17.09 17.09 0 0 0 9 12a10.43 10.43 0 0 0 2.81 9.58 9.59 9.59 0 0 0 10 1.79c-5-.33-8.49-3.67-10.9-8.16 2.2 3.19 6.81 8.2 12.2 7.59A9.21 9.21 0 0 0 26.4 20z"/><path d="M25.49 3.46C35 1.7 38 13.57 33.17 21.8c-4.11 7.93-14.25 14-14.25 14A41.8 41.8 0 0 1 5.43 23.15C-.68 13.08 2.74 7.36 6.87 4.54a8 8 0 0 1 5.67-1s3 1.19 3.3-.33C16.18 1.43 14-.19 11 0a10.73 10.73 0 0 0-6.49 2.65C3.36 3.73-4.06 9.8 3 22.81c4.56 7.9 15.91 15 15.91 15S41.2 25.38 37.63 9.06C34.93-.59 26.25 0 25.08.29s-2.9 1-2.9 2.29c.41 2.56 2.36.94 3.31.88z"/></svg>
-        <p class="banner-text font-black text-cream-light text-center px-4">{{ trans('about.banner.text') }}</p>
+        <svg xmlns="http://www.w3.org/2000/svg" height="60px" class="text-cream-light fill-current mb-4" viewBox="0 0 38.01 37.79"><path fill-rule="evenodd" d="M17.08 17.94a12.25 12.25 0 0 1 4.27-3.18c1.71-.86 3.86-1.29 5.67-2.09.55-1 1.06-1.81 1.6-2.8l.66.12a18.76 18.76 0 0 1-3 4.34 25.77 25.77 0 0 1-8.19 5.41l-1-1.8zm10.65-4.16a21.25 21.25 0 0 1-9.58 6l.75 1.3 3.76 1.65c3.51-2 5.28-3.31 5.17-7.83z"/><path fill-rule="evenodd" d="M26.4 20c-3.14 3.43-5.65.3-7.71-2.19a13.69 13.69 0 0 0-4.4-4A17.09 17.09 0 0 0 9 12a10.43 10.43 0 0 0 2.81 9.58 9.59 9.59 0 0 0 10 1.79c-5-.33-8.49-3.67-10.9-8.16 2.2 3.19 6.81 8.2 12.2 7.59A9.21 9.21 0 0 0 26.4 20z"/><path d="M25.49 3.46C35 1.7 38 13.57 33.17 21.8c-4.11 7.93-14.25 14-14.25 14A41.8 41.8 0 0 1 5.43 23.15C-.68 13.08 2.74 7.36 6.87 4.54a8 8 0 0 1 5.67-1s3 1.19 3.3-.33C16.18 1.43 14-.19 11 0a10.73 10.73 0 0 0-6.49 2.65C3.36 3.73-4.06 9.8 3 22.81c4.56 7.9 15.91 15 15.91 15S41.2 25.38 37.63 9.06C34.93-.59 26.25 0 25.08.29s-2.9 1-2.9 2.29c.41 2.56 2.36.94 3.31.88z"/></svg>
+        <p class="type-h0 mt-0 font-black text-cream-light text-center px-4">{{ trans('about.banner.text') }}</p>
     </section>
     @component('components.info-section', ['title' => trans('about.section_one.heading')])
         <p class="text-center text-purple">{{ trans('about.section_one.content') }}</p>
@@ -31,4 +31,4 @@
         <a href="{{ localUrl('/contact') }}"
            class="text-link text-purple hover:text-purple-soft mt-12">{{ trans('about.section_three.link_text') }} &rarr;</a>
     @endcomponent
-@endsection
+@endsection
diff --git a/resources/views/front/base.blade.php b/resources/views/front/base.blade.php
@@ -37,7 +37,7 @@
     <meta name="format-detection" content="telephone=no">
 </head>
 
-<body class="body-text leading-normal {{ $bodyClass ?? '' }}">
+<body class="type-b1 leading-normal {{ $bodyClass ?? '' }}">
 <!--[if lte IE 9]>
 <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
 <![endif]-->

diff --git a/resources/views/front/events/page.blade.php b/resources/views/front/events/page.blade.php
@@ -37,7 +37,7 @@ class="w-full mx-auto slide-show inner-dots large-slider">
         </div>
     </section>
     @component('components.info-section-light', ['title' => trans('events.venue.heading')])
-        <div class="max-w-xl mx-auto mb-20 flex flex-wrap">
+        <div class="max-w-4xl mx-auto mb-20 flex flex-wrap">
             @foreach($amenities as $amenity)
                 <div class="w-full md:w-1/2 my-1">
                     <div class="w-56 max-w-full mx-auto flex items-start text-green-main my-1">
@@ -59,4 +59,4 @@ class="text-link text-purple hover:text-purple-soft">{{ trans('events.bookings.l
         </div>
 
     </section>
-@endsection
+@endsection
diff --git a/resources/views/front/home/elegance.blade.php b/resources/views/front/home/elegance.blade.php
@@ -1,5 +1,5 @@
 @component('components.info-section', ['title' => trans('homepage.elegance.heading'), 'topClass' => 'post-banner'])
-    <p class="mb-12 text-purple text-center">{{ trans('homepage.elegance.content') }}</p>
+    <p class="mb-12 type-b1 text-purple text-center">{{ trans('homepage.elegance.content') }}</p>
     <a href="{{ localUrl('/menu') }}"
        class="text-link text-purple hover:text-purple-soft">{{ trans('homepage.elegance.link_text') }} &rarr;</a>
-@endcomponent
+@endcomponent
diff --git a/resources/views/front/home/journal.blade.php b/resources/views/front/home/journal.blade.php
@@ -1,11 +1,11 @@
 <div class="reg-section-space">
     @include('front.partials.heading-purple', ['text' => trans('homepage.journal.heading')])
-    <div class="journal-grid max-w-xl mx-auto mt-12">
+    <div class="journal-grid max-w-5xl mx-auto mt-12">
         @foreach($posts as $post)
             @include('front.posts.index-card', ['post' => $post])
         @endforeach
     </div>
     <div class="text-center mt-12">
         <a class="text-link text-purple hover:text-purple-soft" href="{{ localUrl('/journal') }}">{{ trans('homepage.journal.link_text') }} &rarr;</a>
     </div>
-</div>
+</div>