Compare revisions

aac6d1d3 · aac6d1d3 · aac6d1d3 · aac6d1d3 · aac6d1d3 · aac6d1d3
--- a/source/images/favicons/mstile-70x70.png
+++ b/source/images/favicons/mstile-70x70.png
--- a/source/images/logo-full-black.svg
+++ b/source/images/logo-full-black.svg
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172" height="55.25" viewBox="0 0 172 55.25">
+  <defs>
+    <path id="a" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#b)" d="M24.691 7.159c-5.866 0-11.384 2.289-15.542 6.438-4.147 4.149-6.435 9.669-6.435 15.535 0 5.876 2.287 11.396 6.435 15.539 4.158 4.147 9.675 6.429 15.542 6.429 5.87 0 11.384-2.281 15.531-6.429 4.158-4.144 6.44-9.663 6.44-15.539 0-5.866-2.282-11.386-6.44-15.535-4.146-4.15-9.66-6.438-15.531-6.438m0 41.857c-10.965 0-19.885-8.915-19.885-19.884 0-10.962 8.919-19.88 19.885-19.88 10.961 0 19.883 8.918 19.883 19.88.001 10.969-8.922 19.884-19.883 19.884"/>
+  <path clip-path="url(#b)" d="M18.068 16.063v-3.077h-1.921v3.552c-1.301.401-2.056.815-1.932 1.069.431-.118 1.115-.169 1.932-.121v18.495c-1.962 3.833.861 9.698.861 9.698s-2.124-6.299 2.6-9.272c4.337-2.732 19.302-1.451 19.246-9.894-.065-11.962-13.868-11.891-20.786-10.45m6.177 11.597c-.673 3.185-4.147 4.845-6.177 6.224V17.779c3.459.83 7.525 3.489 6.177 9.881M59.936 9.602c-1.753 0-3.416.112-4.987.344v16.436h4.42v-5.167c.393.042.884.066 1.474.066 2.222 0 3.912-.517 5.071-1.554 1.153-1.033 1.733-2.559 1.733-4.569 0-3.702-2.571-5.556-7.711-5.556m2.722 7.709c-.529.455-1.288.682-2.268.682-.379 0-.718-.021-1.021-.068v-4.804c.346-.079.688-.114 1.021-.114 2.04 0 3.061.794 3.061 2.38 0 .827-.264 1.474-.793 1.924"/>
+  <path d="M69.733 9.832h4.987v16.55h-4.987z"/>
+  <defs>
+    <path id="c" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="d">
+    <use xlink:href="#c" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#d)" d="M86.441 26.381h4.648l-1.63-4.536c-.272-.734-.561-1.307-.863-1.708-.3-.398-.682-.729-1.135-.986v-.045c.938-.348 1.704-.932 2.295-1.744.588-.819.885-1.704.885-2.654 0-3.401-2.269-5.104-6.805-5.104-1.967 0-3.933.114-5.897.342v16.435h4.423v-5.778h1.019c.423 0 .765.114 1.022.337.257.229.467.603.634 1.136l1.404 4.305zM83.61 17.31h-1.248v-4.188c.344-.078.761-.112 1.248-.112 1.658 0 2.494.717 2.494 2.153 0 .662-.225 1.186-.669 1.574-.449.383-1.058.573-1.825.573"/>
+  <path d="M97.507 23.208h4.603l.772 3.174h4.806l-5.441-16.553h-4.76l-5.441 16.553h4.714l.747-3.174zm2.29-9.523h.046l1.474 6.125h-2.993l1.473-6.125zM104.399 4.385h-4.988l-2.267 4.088h3.626M111.863 26.382h4.625v-12.81h4.487v-3.74H107.37v3.74h4.493"/>
+  <defs>
+    <path id="e" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="f">
+    <use xlink:href="#e" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#f)" d="M128.277 23.097c-.756 0-1.586-.152-2.482-.458-.898-.302-1.734-.717-2.506-1.24l-1.021 3.508c.668.486 1.555.893 2.668 1.215 1.109.327 2.148.486 3.117.486 2.309 0 4.041-.43 5.189-1.301 1.148-.87 1.725-2.133 1.725-3.798 0-1.377-.484-2.506-1.455-3.39-.965-.885-2.635-1.644-5.008-2.278-.982-.27-1.475-.726-1.475-1.36 0-.411.184-.735.547-.989.365-.249.898-.371 1.605-.371 1.574 0 3.125.38 4.65 1.13l.793-3.51c-1.541-.758-3.426-1.138-5.666-1.138-2.088 0-3.705.442-4.854 1.316-1.15.877-1.723 2.064-1.723 3.562 0 1.36.467 2.487 1.406 3.379.936.891 2.508 1.653 4.715 2.288 1.211.348 1.814.837 1.814 1.475.002.98-.679 1.474-2.039 1.474"/>
+  <path d="M151.451 9.832h-5.215l-4.265 7.029h-.043V9.832h-4.537v16.55h4.537v-7.708h.043l4.492 7.708h5.213l-5.44-8.616M164.762 4.385h-4.991l-2.269 4.088h3.631M162.607 9.832h-4.76l-5.445 16.55h4.715l.75-3.174h4.602l.771 3.174h4.809l-5.442-16.55zm-3.925 9.976l1.475-6.125h.045l1.475 6.125h-2.995z"/>
+  <g>
+    <defs>
+      <path id="g" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="h">
+      <use xlink:href="#g" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#h)" d="M60.617 38.221c-.982-.27-1.476-.726-1.476-1.36 0-.407.184-.733.545-.987.363-.249.901-.372 1.608-.372 1.575 0 3.122.378 4.651 1.129l.792-3.508c-1.541-.76-3.43-1.14-5.667-1.14-2.085 0-3.707.442-4.851 1.319-1.151.876-1.724 2.062-1.724 3.559 0 1.36.467 2.487 1.406 3.38.937.892 2.509 1.652 4.716 2.287 1.207.349 1.812.839 1.812 1.474 0 .986-.678 1.476-2.038 1.476-.756 0-1.583-.148-2.483-.456-.9-.304-1.735-.715-2.507-1.242l-1.019 3.509c.665.486 1.553.891 2.665 1.215 1.111.327 2.149.489 3.118.489 2.31 0 4.042-.432 5.19-1.303 1.15-.871 1.726-2.135 1.726-3.798 0-1.375-.485-2.507-1.454-3.392-.966-.888-2.638-1.642-5.01-2.279"/>
+  </g>
+  <path d="M68.483 35.953h4.495v12.81h4.625v-12.81h4.486v-3.74H68.483"/>
+  <g>
+    <defs>
+      <path id="i" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="j">
+      <use xlink:href="#i" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#j)" d="M95.178 42.517c-.304-.398-.684-.73-1.141-.984v-.046c.939-.345 1.703-.93 2.291-1.745.592-.816.885-1.701.885-2.652 0-3.403-2.266-5.104-6.801-5.104-1.967 0-3.929.113-5.896.345v16.435h4.422v-5.779h1.021c.422 0 .765.112 1.02.338.257.227.469.604.636 1.134l1.405 4.308h4.646l-1.631-4.537c-.27-.741-.559-1.312-.857-1.713m-3.17-3.4c-.44.388-1.051.576-1.824.576h-1.246v-4.192c.347-.08.762-.113 1.246-.113 1.662 0 2.497.717 2.497 2.152 0 .664-.224 1.192-.673 1.577"/>
+  </g>
+  <path d="M104.287 32.213l-5.439 16.55h4.713l.748-3.174h4.605l.772 3.174h4.8l-5.438-16.55h-4.761zm.838 9.975l1.475-6.123h.047l1.475 6.123h-2.997zM125.762 41.282h-.049l-4.942-9.071h-4.421v16.553h4.421v-9.073h.047l4.944 9.073h4.42V32.211h-4.42M137.484 32.213l-5.443 16.55h4.717l.75-3.174h4.596l.773 3.174h4.812l-5.441-16.55h-4.764zm.838 9.975l1.473-6.123h.043l1.475 6.123h-2.991z"/>
+</svg>
--- a/source/images/logo-round-black.svg
+++ b/source/images/logo-round-black.svg
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="Vrstva_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.2 55.2">
+  <style>
+    .st0{fill:none}
+  </style>
+  <path d="M24.7 7.2c-5.9 0-11.4 2.3-15.5 6.4-4.2 4.1-6.5 9.7-6.5 15.5C2.7 35 5 40.5 9.1 44.7c4.2 4.1 9.7 6.4 15.5 6.4 5.9 0 11.4-2.3 15.5-6.4 4.2-4.1 6.4-9.7 6.4-15.5 0-5.9-2.3-11.4-6.4-15.5-4-4.3-9.5-6.5-15.4-6.5m0 41.8c-11 0-19.9-8.9-19.9-19.9 0-11 8.9-19.9 19.9-19.9 11 0 19.9 8.9 19.9 19.9 0 11-8.9 19.9-19.9 19.9"/>
+  <path d="M18.1 16.1V13h-1.9v3.6c-1.3.4-2.1.8-1.9 1.1.4-.1 1.1-.2 1.9-.1V36c-2 3.8.9 9.7.9 9.7s-2.1-6.3 2.6-9.3c4.3-2.7 19.3-1.5 19.2-9.9-.1-11.9-13.9-11.9-20.8-10.4m6.1 11.6c-.7 3.2-4.1 4.8-6.2 6.2V17.8c3.5.8 7.6 3.5 6.2 9.9"/>
+  <path class="st0" d="M0 0h52.2v55.2H0z"/>
+</svg>
+
--- a/source/js/.gitkeep
+++ b/source/js/.gitkeep
--- a/source/js/components/RegionMap.vue
+++ b/source/js/components/RegionMap.vue
--- a/source/js/components/full-calendar/MonthCalendar.vue
+++ b/source/js/components/full-calendar/MonthCalendar.vue
+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin ],
+                initialView: "dayGridMonth",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                eventTimeFormat: {
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    meridiem: false
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>
--- a/source/js/components/full-calendar/YearCalendar.vue
+++ b/source/js/components/full-calendar/YearCalendar.vue
+<script>
+import FullCalendar from "@fullcalendar/vue"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import multiMonthPlugin from "@fullcalendar/multimonth"
+
+import { showEventData } from './utils'
+
+export default {
+    components: {
+        FullCalendar // make the <FullCalendar> tag available
+    },
+    props: ["events"],
+    data() {
+        return {
+            calendarOptions: {
+                plugins: [ dayGridPlugin, multiMonthPlugin ],
+                initialView: "multiMonthYear",
+                contentHeight: "auto",
+                locale: "cs",
+                buttonText: {
+                    today: "dnes"
+                },
+                moreLinkContent: (arg) => { return `+${arg.num} další` },
+                eventClick (info) {
+                    showEventData(info)
+                },
+                events: JSON.parse(this.events)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FullCalendar :options="calendarOptions" />
+</template>
--- a/source/js/components/full-calendar/utils.js
+++ b/source/js/components/full-calendar/utils.js
+import tippy from 'tippy.js';
+
+
+const showEventData = (info) => {
+    if (
+        info.event.url === ''
+        && info.event.extendedProps.location === undefined
+        && info.event.extendedProps.url === undefined
+    ) {
+        return
+    }
+
+    info.jsEvent.preventDefault();
+
+    const popup = tippy(
+        info.el,
+        {
+            content: `
+                <div class="p-2 flex flex-col gap-3 text-white whitespace-nowrap">
+                    ${
+                        (info.event.title !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <div>${info.event.title}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.location !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--location" aria-label="Místo konání"></i>
+                                <div>${info.event.extendedProps.location}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.extendedProps.description !== undefined) ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--info" aria-label="Popis"></i>
+                                <div>${info.event.extendedProps.description}</div>
+                            </div>
+                        ` : ''
+                    }
+                    ${
+                        (info.event.url !== '') ?
+                        `
+                            <div class="flex gap-2 items-baseline">
+                                <i class="ico--link" aria-label="Adresa"></i>
+                                <a class="underline cursor-pointer" href="${info.event.url}">${info.event.url}</a>
+                            </div>
+                        ` : ''
+                    }
+                </div>
+            `,
+            trigger: (
+                (
+                    info.event.url !== ''
+                    && info.event.extendedProps.location === undefined
+                    && info.event.extendedProps.url === undefined
+                ) ?
+                'hover' : 'click'
+            ),
+            allowHTML: true,
+            interactive: true
+        }
+    );
+
+    popup.show();
+} 
+
+export { showEventData }
--- a/source/js/components/navbar/Navbar.vue
+++ b/source/js/components/navbar/Navbar.vue
 <script>
  import UiNavbarSubitem from "./NavbarSubitem";
+  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
  import { isLgScreenSize } from "../../utils";

  export default {
    components: {
-      UiNavbarSubitem
+      UiNavbarSubitem,
+      UiNavbarSubitemReplacing,
    },
    data() {
      return {

--- a/source/js/components/navbar/NavbarSubitemReplacing.vue
+++ b/source/js/components/navbar/NavbarSubitemReplacing.vue
+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
+    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
+      <ul class="navbar-menu__submenu">
+        <li v-for="(item, index) in parsedItems" :key="index">
+            <a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLgScreenSize } from "../../utils";
+
+export default {
+  data() {
+    return {
+      show: false,
+      parsedItems: JSON.parse(this.items),
+    };
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    items: {
+      type: String,
+    }
+  },
+  methods: {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
+        if (this.$props.href) {
+          window.location = this.$props.href;
+        }
+      }
+
+      this.$data.show = !this.$data.show;
+    }
+  }
+}
+</script>
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -4,17 +4,23 @@ import { forEachNode } from "./utils";

 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
-import GoogleProvider from "./components/calendar/GoogleProvider";
+import GoogleProvider from "./components/calendar/GoogleProvider"
+import MonthCalendar from "./components/full-calendar/MonthCalendar";
+import YearCalendar from "./components/full-calendar/YearCalendar";
 import RegionMap from "./components/RegionMap";
 import ViewProvider from "./components/ViewProvider";
 import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";

+import Chart from 'chart.js/auto';
+

 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
 Vue.component("ui-calendar-google-provider", GoogleProvider);
+Vue.component("ui-month-calendar", MonthCalendar);
+Vue.component("ui-year-calendar", YearCalendar);
 Vue.component("ui-region-map", RegionMap);
 Vue.component("ui-view-provider", ViewProvider);
 Vue.component("ui-navbar", Navbar);
@@ -51,9 +57,41 @@ function renderVueAppElement(el) {
 }


+function renderChart(element) {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
+
+  new Chart(
+    element,
+    {
+      type: 'bar',
+      data: {
+        labels: data.map(row => row.year),
+        datasets: [
+          {
+            label: 'Firemní akvizice každý rok',
+            data: data.map(row => row.count)
+          }
+        ]
+      }
+    }
+  );
+}
+
+
 function init(event) {
  // Initialize Vue.js apps.
  forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+
+  // Show example charts.
+  forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
 }

 document.addEventListener('DOMContentLoaded', init);
--- a/tailwind-plugins/buttons.js
+++ b/tailwind-plugins/buttons.js
@@ -59,6 +59,10 @@ module.exports = function (options) {
          maxWidth: theme('maxWidth.xs'),
          textDecoration: 'none',
        },
+        '.btn[disabled]': {
+          opacity: '0.7',
+          cursor: 'not-allowed',
+        },
        '.btn:hover': {
          textDecoration: 'none',
        },
@@ -106,6 +110,46 @@ module.exports = function (options) {
        '.btn--condensed .btn__body': {
          padding: '.75em 1em',
        },
+        '@keyframes btn-loading-spinner': {
+          'to': {
+            transform: 'rotate(360deg)',
+          }
+        },
+        '.btn--loading': {
+          position: 'relative',
+        },
+        '.btn--loading::before': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '2',
+          backgroundColor: theme('colors.black'),
+          opacity: '0.4',
+        },
+        '.btn--loading::after': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '3',
+          top: '50%',
+          left: '50%',
+          width: '1.5rem',
+          height: '1.5rem',
+          marginTop: '-0.75rem',
+          marginLeft: '-0.75rem',
+          borderRadius: '50%',
+          border: `3px solid ${theme('colors.cyan.200')}`,
+          borderLeftColor: 'transparent',
+          animation: 'btn-loading-spinner 1s linear infinite',
+        }
      },
      ..._.map(options.colors, (colorOptions, name) => {
        const bg = getThemeColor(colorOptions.background, '#000');

--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,6 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
 const darken = (clr, val) => Color(clr).darken(val).rgb().string();

 module.exports = {
-  purge: {
  content: [
    "./source/**/*.mustache",
    "./source/**/*.json",
@@ -16,31 +15,57 @@ module.exports = {
  ],
  options: {
    whitelistPatterns: [
+      /^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
      /^((sm|md|lg|xl)\:)?w-\d\d?/,
-        /^((sm|md|lg|xl)\:)?w-screen/,
+      /^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
      /^((sm|md|lg|xl)\:)?h-\d\d?/,
      /^((sm|md|lg|xl)\:)?h-screen/,
-        /^((sm|md|lg|xl)\:)?m.?-\d\d?/,
-        /^((sm|md|lg|xl)\:)?m.?-auto?/,
+      /^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?-?m.?-auto?/,
      /^((sm|md|lg|xl)\:)?p.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
+      /^((sm|md|lg|xl)\:)?hidden/,
+      /^((sm|md|lg|xl)\:)?block/,
+      /^((sm|md|lg|xl)\:)?inline-block/,
+      /^((sm|md|lg|xl)\:)?flex/,
+      /^((sm|md|lg|xl)\:)?inline-flex/,
+      /^((sm|md|lg|xl)\:)?grid/,
+      /^((sm|md|lg|xl)\:)?gap-\d\d?/,
+      /^((sm|md|lg|xl)\:)?static/,
+      /^((sm|md|lg|xl)\:)?flex-row-*/,
+      /^((sm|md|lg|xl)\:)?flex-col-*/,
      /^((sm|md|lg|xl)\:)?grid-cols-*/,
      /^((sm|md|lg|xl)\:)?col-span-*/,
      /^((sm|md|lg|xl)\:)?row-span-*/,
+      /^((sm|md|lg|xl)\:)?order-*/,
+      /^((sm|md|lg|xl)\:)?items-*/,
      /^((sm|md|lg|xl)\:)?float-*/,
+      /^((sm|md|lg|xl|hover)\:)?text-*/,
      /^((sm|md|lg|xl)\:)?grid-flow-*/,
      /^((sm|md|lg|xl)\:)?head-*/,
      /^((sm|md|lg|xl)\:)?clearfix/,
-        /^text-*/,
+      /^((sm|md|lg|xl|hover)\:)?elevation-*/,
+      /^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
+      /^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
+      /whitespace-*/,
+      /opacity-*/,
+      /^truncate/,
+      /^break-*/,
+      /^overflow-*/,
+      /^duration-*/,
      /^max-w-*/,
+      /^max-h-*/,
      /ico--*/,
    ],
-    }
  },
  theme: {
    extend: {
      maxWidth: {
        'xxs': '16rem',
      },
+      height: {
+        '120': '30rem',
+      },
      opacity: {
        '85': '0.85',
      },
@@ -54,7 +79,7 @@ module.exports = {
        '36': '9rem',
        '44': '11rem',
        '52': '13rem',
-        '80': '20rem'
+        '80': '20rem',
      },
      // flip-x
      scale: {
@@ -118,6 +143,8 @@ module.exports = {
      'yellow': {
        '100': '#fff7bf',
        '200': '#f7f38a',
+        '300': '#ffea5a',
+        '400': '#fde119',
      },
      'red': {
        '600': '#d60d53'
@@ -152,6 +179,9 @@ module.exports = {
        '400': '#840048',
        '500': '#670047',
      },
+      'pirati': {
+        'yellow': '#fec934'
+      },
    },
    container: {
      center: true,
@@ -183,7 +213,7 @@ module.exports = {
        // options
      }
    ),
-    require('tailwindcss-typography')({
+    require('@tailwindcss/typography')({
      // all these options default to the values specified here
      ellipsis: false,         // whether to generate ellipsis utilities
      hyphens: false,          // whether to generate hyphenation utilities
@@ -225,11 +255,13 @@ module.exports = {
        'grey-125': {
          text: 'black',
          background: 'grey.125',
+          hoverText: 'black',
        },
        'white': {
          text: 'black',
          background: 'white',
          iconBorder: 'grey.100',
+          hoverText: 'black',
        },
        'blue-300': {
          text: 'white',
No results found