Update tailwind config
This commit is contained in:
samaradel
@@ -73,6 +73,7 @@ body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
|
||||
.act-link {
|
||||
@apply bg-gray-300;
|
||||
}
|
||||
@@ -197,11 +198,11 @@ button:focus {
|
||||
|
||||
}
|
||||
|
||||
text-6xl {
|
||||
.text-6xl {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
text-5xl {
|
||||
.text-5xl {
|
||||
font-family: "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
<template>
|
||||
<div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
|
||||
<header
|
||||
class="flex items-center justify-between flex-wrap container mx-auto px-4 py-1 sm:px-0 transition-all transition-500"
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-between
|
||||
flex-wrap
|
||||
container
|
||||
mx-auto
|
||||
px-4
|
||||
py-1
|
||||
sm:px-0
|
||||
transition-all transition-500
|
||||
"
|
||||
>
|
||||
<div class="flex items-center justify-between px-4 py-2 sm:p-0">
|
||||
<div class="sm:hidden ml-auto">
|
||||
@@ -40,14 +51,29 @@
|
||||
class="inline-flex md:order-2 sm:w-28 px-2 pt-2 pb-4 sm:flex sm:p-0"
|
||||
>
|
||||
<ul
|
||||
class="list-none sm:flex justify-left capitalize transition-all transition-500"
|
||||
class="
|
||||
list-none
|
||||
sm:flex
|
||||
justify-left
|
||||
capitalize
|
||||
transition-all transition-500
|
||||
"
|
||||
>
|
||||
<!-- Topics -->
|
||||
<li class="py-1 mx-5">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(0)"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
>
|
||||
<span class="capitalize">{{ topic.replace(/_/g, " ") }}</span>
|
||||
<svg
|
||||
@@ -57,7 +83,17 @@
|
||||
'rotate-180': active == 0,
|
||||
'rotate-0': !active == 0,
|
||||
}"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -75,11 +111,28 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="w-64 max-h-10 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
class="
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
>
|
||||
<a
|
||||
v-for="topic in topics"
|
||||
@@ -88,7 +141,30 @@
|
||||
setTopic(topic);
|
||||
open = false;
|
||||
"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
>{{ topic.replace(/_/g, " ") }}</a
|
||||
>
|
||||
</div>
|
||||
@@ -101,7 +177,16 @@
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(1)"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
>
|
||||
<span class="capitalize">{{ year }}</span>
|
||||
<svg
|
||||
@@ -111,7 +196,17 @@
|
||||
'rotate-180': active == 1,
|
||||
'rotate-0': !active == 1,
|
||||
}"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -129,16 +224,56 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
class="
|
||||
w-64
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
>
|
||||
<a
|
||||
v-for="year in years"
|
||||
:key="year"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
@click.self="
|
||||
setYear(year);
|
||||
open = false;
|
||||
@@ -155,7 +290,16 @@
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="setActive(2)"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
class="
|
||||
flex flex-row
|
||||
items-center
|
||||
w-full
|
||||
md:w-auto
|
||||
md:inline
|
||||
md:mt-0
|
||||
md:ml-4
|
||||
animated-link
|
||||
"
|
||||
>
|
||||
<span class="capitalize">{{ month }}</span>
|
||||
<svg
|
||||
@@ -165,7 +309,17 @@
|
||||
'rotate-180': active == 2,
|
||||
'rotate-0': !active == 2,
|
||||
}"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
class="
|
||||
inline
|
||||
w-4
|
||||
h-4
|
||||
mt-1
|
||||
ml-1
|
||||
transition-transform
|
||||
duration-200
|
||||
transform
|
||||
md:-mt-1
|
||||
"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@@ -183,16 +337,58 @@
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
|
||||
class="
|
||||
absolute
|
||||
w-full
|
||||
mt-2
|
||||
origin-top-right
|
||||
rounded-md
|
||||
shadow-lg
|
||||
md:w-48
|
||||
z-30
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="open"
|
||||
class="w-64 overflow-y-auto h-40 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
|
||||
class="
|
||||
w-64
|
||||
overflow-y-auto
|
||||
h-40
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
rounded-md
|
||||
shadow
|
||||
dark:bg-gray-700
|
||||
"
|
||||
>
|
||||
<a
|
||||
v-for="month in months"
|
||||
:key="month"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
class="
|
||||
cursor-pointer
|
||||
block
|
||||
px-4
|
||||
py-2
|
||||
mt-2
|
||||
text-sm
|
||||
font-semibold
|
||||
bg-transparent
|
||||
rounded-lg
|
||||
dark:bg-transparent
|
||||
dark:hover:bg-gray-600
|
||||
dark-:focus:bg-gray-600
|
||||
dark:focus:text-white
|
||||
dark:hover:text-white
|
||||
dark:text-gray-200
|
||||
md:mt-0
|
||||
hover:text-gray-900
|
||||
focus:text-gray-900
|
||||
hover:bg-gray-200
|
||||
focus:bg-gray-200
|
||||
focus:outline-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
@click.self="
|
||||
setMonth(month);
|
||||
open = false;
|
||||
|
||||
@@ -117,7 +117,6 @@
|
||||
v-if="open"
|
||||
class="
|
||||
w-64
|
||||
max-h-10
|
||||
px-2
|
||||
py-2
|
||||
bg-white
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
relative
|
||||
bg-gray-50
|
||||
pt-16
|
||||
pb-20
|
||||
px-4
|
||||
sm:px-6
|
||||
lg:pt-24
|
||||
lg:pb-28
|
||||
lg:px-8
|
||||
"
|
||||
>
|
||||
<div class="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ module.exports = {
|
||||
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
|
||||
theme: {
|
||||
borderWidth: {
|
||||
default: '1px',
|
||||
DEFAULT: '1px',
|
||||
'0': '0',
|
||||
'2': '2px',
|
||||
'3': '3px',
|
||||
@@ -43,16 +43,203 @@ module.exports = {
|
||||
corePlugins: {
|
||||
container: false
|
||||
},
|
||||
extend: {},
|
||||
fontSize: {
|
||||
'xs': '.75rem',
|
||||
'sm': '.875rem',
|
||||
'base': '1rem',
|
||||
'lg': '1.125rem',
|
||||
'xl': '1.25rem',
|
||||
'2xl': '1.5rem',
|
||||
'3xl': '1.875rem',
|
||||
'4xl': '2.25rem',
|
||||
'5xl': '3rem',
|
||||
'6xl': '4rem',
|
||||
'7xl': '5rem',
|
||||
},
|
||||
colors: {
|
||||
current: "currentColor",
|
||||
transparent: "transparent",
|
||||
white: "#ffffff",
|
||||
black: "#000000",
|
||||
gray: {
|
||||
50: "#f9fafb",
|
||||
100: "#F7FAFC",
|
||||
200: "#EDF2F7",
|
||||
300: "#E2E8F0",
|
||||
400: "#CBD5E0",
|
||||
500: "#A0AEC0",
|
||||
600: "#718096",
|
||||
700: "#4A5568",
|
||||
800: "#2D3748",
|
||||
900: "#1A202C",
|
||||
},
|
||||
red: {
|
||||
50: "#fdf2f2",
|
||||
100: "#FFF5F5",
|
||||
200: "#FED7D7",
|
||||
300: "#FEB2B2",
|
||||
400: "#FC8181",
|
||||
500: "#F56565",
|
||||
600: "#E53E3E",
|
||||
700: "#C53030",
|
||||
800: "#9B2C2C",
|
||||
900: "#742A2A",
|
||||
},
|
||||
orange: {
|
||||
50: "#fff8f1",
|
||||
100: "#feecdc",
|
||||
200: "#fcd9bd",
|
||||
300: "#fdba8c",
|
||||
400: "#ff8a4c",
|
||||
500: "#ff5a1f",
|
||||
600: "#d03801",
|
||||
700: "#b43403",
|
||||
800: "#8a2c0d",
|
||||
900: "#73230d",
|
||||
},
|
||||
yellow: {
|
||||
50: "#fdfdea",
|
||||
100: "#fdf6b2",
|
||||
200: "#fce96a",
|
||||
300: "#faca15",
|
||||
400: "#e3a008",
|
||||
500: "#c27803",
|
||||
600: "#9f580a",
|
||||
700: "#8e4b10",
|
||||
800: "#723b13",
|
||||
900: "#633112",
|
||||
},
|
||||
green: {
|
||||
50: "#f3faf7",
|
||||
100: "#def7ec",
|
||||
200: "#bcf0da",
|
||||
300: "#84e1bc",
|
||||
400: "#31c48d",
|
||||
500: "#0e9f6e",
|
||||
600: "#057a55",
|
||||
700: "#046c4e",
|
||||
800: "#03543f",
|
||||
900: "#014737",
|
||||
},
|
||||
teal: {
|
||||
50: "#edfafa",
|
||||
100: "#E6FFFA",
|
||||
200: "#B2F5EA",
|
||||
300: "#81E6D9",
|
||||
400: "#4FD1C5",
|
||||
500: "#38B2AC",
|
||||
600: "#319795",
|
||||
700: "#2C7A7B",
|
||||
800: "#285E61",
|
||||
900: "#234E52",
|
||||
},
|
||||
blue: {
|
||||
50: "#ebf5ff",
|
||||
100: "#EBF8FF",
|
||||
200: "#BEE3F8",
|
||||
300: "#90CDF4",
|
||||
400: "#63B3ED",
|
||||
500: "#4299E1",
|
||||
600: "#3182CE",
|
||||
700: "#2B6CB0",
|
||||
800: "#2C5282",
|
||||
900: "#2A4365",
|
||||
},
|
||||
indigo: {
|
||||
50: "#f0f5ff",
|
||||
100: "#e5edff",
|
||||
200: "#cddbfe",
|
||||
300: "#b4c6fc",
|
||||
400: "#8da2fb",
|
||||
500: "#6875f5",
|
||||
600: "#5850ec",
|
||||
700: "#5145cd",
|
||||
800: "#42389d",
|
||||
900: "#362f78",
|
||||
},
|
||||
purple: {
|
||||
50: "#f6f5ff",
|
||||
100: "#edebfe",
|
||||
200: "#dcd7fe",
|
||||
300: "#cabffd",
|
||||
400: "#ac94fa",
|
||||
500: "#9061f9",
|
||||
600: "#7e3af2",
|
||||
700: "#6c2bd9",
|
||||
800: "#5521b5",
|
||||
900: "#4a1d96",
|
||||
},
|
||||
pink: {
|
||||
50: "#fdf2f8",
|
||||
100: "#fce8f3",
|
||||
200: "#fad1e8",
|
||||
300: "#f8b4d9",
|
||||
400: "#f17eb8",
|
||||
500: "#e74694",
|
||||
600: "#d61f69",
|
||||
700: "#bf125d",
|
||||
800: "#99154b",
|
||||
900: "#751a3d",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
backgroundColor: ['group-focus', 'active'],
|
||||
borderColor: ['group-focus'],
|
||||
boxShadow: ['group-focus'],
|
||||
opacity: ['group-focus'],
|
||||
textColor: ['group-focus', 'active'],
|
||||
textDecoration: ['group-focus'],
|
||||
boxShadow: {
|
||||
solid: '0 0 0 2px currentColor',
|
||||
outline: `0 0 0 3px rgba(156, 163, 175, .5)`,
|
||||
'outline-gray': `0 0 0 3px rgba(254, 202, 202, .5)`,
|
||||
'outline-blue': `0 0 0 3px rgba(191, 219, 254, .5)`,
|
||||
'outline-green': `0 0 0 3px rgba(167, 243, 208, .5)`,
|
||||
'outline-yellow': `0 0 0 3px rgba(253, 230, 138, .5)`,
|
||||
'outline-red': `0 0 0 3px rgba(254, 202, 202, .5)`,
|
||||
'outline-pink': `0 0 0 3px rgba(251, 207, 232, .5)`,
|
||||
'outline-purple': `0 0 0 3px rgba(221, 214, 254,, .5)`,
|
||||
'outline-indigo': `0 0 0 3px rgba(199, 210, 254, .5)`,
|
||||
},
|
||||
padding: {
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
full: '100%',
|
||||
}
|
||||
},
|
||||
radialGradients: {
|
||||
shapes: { // defaults to this value
|
||||
'default': 'ellipse',
|
||||
'DEFAULT': 'ellipse',
|
||||
},
|
||||
sizes: { // defaults to this value
|
||||
'default': '',
|
||||
'DEFAULT': '',
|
||||
},
|
||||
positions: { // defaults to these values
|
||||
'default': 'center',
|
||||
'DEFAULT': 'center',
|
||||
't': 'top'
|
||||
},
|
||||
colors: { // defaults to {}
|
||||
@@ -63,7 +250,6 @@ module.exports = {
|
||||
variants: {},
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
|
||||
function ({
|
||||
addComponents
|
||||
}) {
|
||||
|
||||
Reference in New Issue
Block a user