[WIP] refactoring for tailwindcss
This commit is contained in:
Gregory Trullemans
parent
13325937cf
commit
981c82992d
|
|
@ -70,10 +70,10 @@
|
|||
<script src="/_next/static/pBqep00ipwfkbmauoJW5M/_buildManifest.js" defer=""></script>
|
||||
<script src="/_next/static/pBqep00ipwfkbmauoJW5M/_ssgManifest.js" defer=""></script>
|
||||
</head>
|
||||
<body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900">
|
||||
<body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-jarvis-blue-900">
|
||||
<div id="__next">
|
||||
<!-- FLARE -->
|
||||
<div class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
|
||||
<!-- <div class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
|
||||
<div class="w-[108rem] flex-none flex justify-end">
|
||||
<picture>
|
||||
<source srcSet="{% static "/img/docs@30.8b9a76a2.avif" %}" type="image/avif"/>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<img src="{% static "/img/docs-dark.png" %}" alt="" class="w-[90rem] flex-none max-w-none hidden dark:block" decoding="async"/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- HEAD MENU -->
|
||||
<div class="sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent">
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
|
||||
<!-- LEFT MENU -->
|
||||
<div class="hidden lg:block fixed z-20 inset-0 top-[3.8125rem] left-[max(0px,calc(50%-45rem))] right-auto w-[14rem] pb-10 pl-8 pr-6 overflow-y-auto">
|
||||
<div class="h-6 bg-gradient-to-b from-white dark:from-slate-900"></div>
|
||||
<div class="h-5"></div>
|
||||
<nav id="nav" class="lg:text-sm lg:leading-6 relative">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
</div>
|
||||
|
||||
<div class="lg:pl-[13rem]">
|
||||
<div class="">
|
||||
<div class="dark:bg-jarvis-blue-800 rounded-md px-2 py-2">
|
||||
|
||||
<header id="header" class="relative z-20">
|
||||
<div>
|
||||
|
|
@ -236,37 +236,7 @@
|
|||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<footer class="text-sm leading-6 mt-12">
|
||||
|
||||
<!-- <div class="mb-10 text-slate-700 font-semibold flex items-center dark:text-slate-200">
|
||||
<a class="group flex items-center hover:text-slate-900 dark:hover:text-white" href="/docs/isolation">
|
||||
<svg viewBox="0 0 3 6" class="mr-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300">
|
||||
<path d="M3 0L0 3L3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Isolation
|
||||
</a>
|
||||
<a class="group ml-auto flex items-center hover:text-slate-900 dark:hover:text-white" href="/docs/object-position">
|
||||
Object Position
|
||||
<svg viewBox="0 0 3 6" class="ml-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300">
|
||||
<path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="pt-10 pb-28 border-t border-slate-200 sm:flex justify-between text-slate-500 dark:border-slate-200/5">
|
||||
<div class="mb-6 sm:mb-0 sm:flex">
|
||||
<p>
|
||||
Copyright ©
|
||||
2023
|
||||
Tailwind Labs Inc.
|
||||
</p>
|
||||
<p class="sm:ml-4 sm:pl-4 sm:border-l sm:border-slate-200 dark:sm:border-slate-200/5">
|
||||
<a class="hover:text-slate-900 dark:hover:text-slate-400" href="/brand">Trademark Policy</a>
|
||||
</p>
|
||||
</div>
|
||||
<a class="hover:text-slate-900 dark:hover:text-slate-400" href="https://github.com/tailwindlabs/tailwindcss.com/edit/master/src/pages/docs/object-fit.mdx">Edit this page on GitHub</a>
|
||||
</div> -->
|
||||
</footer>
|
||||
<footer class="text-sm leading-6">{% block footer %}{% endblock %}</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -274,9 +244,6 @@
|
|||
</div>
|
||||
<div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div>
|
||||
</div>
|
||||
<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/docs/object-fit","query":{},"buildId":"pBqep00ipwfkbmauoJW5M","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
|
||||
<script>
|
||||
</script>
|
||||
{% block footerscript %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -34,23 +34,9 @@
|
|||
<script src="{% static "js/plugins/chartjs/chartjs-adapter-moment_1.0.0.js" %}"></script>
|
||||
</head>
|
||||
|
||||
<body class="antialiased dark:bg-gray-900 flex items-center justify-center h-screen">
|
||||
<div id="__next">
|
||||
<div class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
|
||||
<div class="w-[108rem] flex-none flex justify-end">
|
||||
<!-- <picture>
|
||||
<source srcSet="/_next/static/media/docs@30.8b9a76a2.avif" type="image/avif"/>
|
||||
<img src="/_next/static/media/docs@tinypng.d9e4dcdc.png" alt="" class="w-[71.75rem] flex-none max-w-none dark:hidden" decoding="async"/>
|
||||
</picture> -->
|
||||
<picture>
|
||||
<source srcSet="{% static "/img/docs-dark.avif" %}" type="image/avif"/>
|
||||
<img src="{% static "/img/docs-dark.png" %}" alt="" class="w-[90rem] flex-none max-w-none hidden dark:block" decoding="async"/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<body class="antialiased dark:bg-jarvis-blue-900 flex items-center justify-center h-screen">
|
||||
|
||||
<div class="bg-slate-800 p-8 rounded shadow-md w-96 text-white">
|
||||
<div class="bg-jarvis-blue-700 p-8 rounded shadow-md w-96 text-white">
|
||||
<h2 class="text-2xl font-semibold mb-6">Connection</h2>
|
||||
<form action="/login/" method="post" id="formulaire">
|
||||
{% csrf_token %}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
{% block content %}
|
||||
<div class="card mb-0">
|
||||
<div class="card-header">
|
||||
<h4 class=""> Club Listing</h4>
|
||||
</div>
|
||||
<div class="card-body pb-0">
|
||||
<div class="table-responsive pb-0">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<h4 class=""> Places Listing</h4>
|
||||
</div>
|
||||
<div class="col-1 ml-auto">
|
||||
<div class="text-right">
|
||||
|
|
|
|||
|
|
@ -12,35 +12,35 @@
|
|||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300">
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-jarvis-blue-800 dark:text-slate-300">
|
||||
<div class="py-2 pr-2 border-b border-slate-200 dark:border-slate-400/20">Lastname</div>
|
||||
</th>
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300">
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-jarvis-blue-800 dark:text-slate-300">
|
||||
<div class="py-2 pl-2 border-b border-slate-200 dark:border-slate-400/20">Firstname</div>
|
||||
</th>
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300">
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-jarvis-blue-800 dark:text-slate-300">
|
||||
<div class="py-2 pr-2 border-b border-slate-200 dark:border-slate-400/20">Gender</div>
|
||||
</th>
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300">
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-jarvis-blue-800 dark:text-slate-300 text-right">
|
||||
<div class="py-2 pl-2 border-b border-slate-200 dark:border-slate-400/20">Age</div>
|
||||
</th>
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300">
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-jarvis-blue-800 dark:text-slate-300 text-right">
|
||||
<div class="py-2 pr-2 border-b border-slate-200 dark:border-slate-400/20">Category</div>
|
||||
</th>
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300">
|
||||
<th class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-jarvis-blue-800 dark:text-slate-300 text-right">
|
||||
<div class="py-2 pl-2 border-b border-slate-200 dark:border-slate-400/20">Club</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
{% for season_information in season_information_list %}
|
||||
<tr>
|
||||
<td><a href="{% url 'gymnast_details' season_information.gymnast.id %}">{{ season_information.gymnast.last_name }}</a></td>
|
||||
<td><a href="{% url 'gymnast_details' season_information.gymnast.id %}">{{ season_information.gymnast.first_name }}</a></td>
|
||||
<tr class="odd:bg-jarvis-blue-700 odd:dark:bg-jarvis-blue-700 even:bg-jarvis-blue-800 even:dark:bg-jarvis-blue-800">
|
||||
<td class="uppercase py-4"><a href="{% url 'gymnast_details' season_information.gymnast.id %}" class="text-jarvis-link-900 hover:text-jarvis-link-800">{{ season_information.gymnast.last_name }}</a></td>
|
||||
<td><a href="{% url 'gymnast_details' season_information.gymnast.id %}" class="text-jarvis-link-900 hover:text-jarvis-link-800">{{ season_information.gymnast.first_name }}</a></td>
|
||||
<td>{{ season_information.gymnast.get_gender_display }}</td>
|
||||
<td>{{ season_information.gymnast.age }}</td>
|
||||
<td>{{ season_information.get_category_display }}</td>
|
||||
<td>{{ season_information.club.name }}</td>
|
||||
<td class="text-right">{{ season_information.gymnast.age }}</td>
|
||||
<td class="text-right">{{ season_information.get_category_display }}</td>
|
||||
<td class="text-right">{{ season_information.club.name }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<h4 class="mb-0"> Event Listing</h4>
|
||||
{% if event_list %}<a href="{% url 'calendar' %}" class="mb-3">Calendar</a>{% endif %}
|
||||
</div>
|
||||
<div class="col-1 ml-auto">
|
||||
|
|
|
|||
|
|
@ -918,6 +918,10 @@ video {
|
|||
width: 108rem;
|
||||
}
|
||||
|
||||
.w-\[14rem\] {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.w-\[19\.5rem\] {
|
||||
width: 19.5rem;
|
||||
}
|
||||
|
|
@ -950,22 +954,6 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-\[16rem\] {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.w-\[17rem\] {
|
||||
width: 17rem;
|
||||
}
|
||||
|
||||
.w-\[18rem\] {
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
.w-\[14rem\] {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
|
@ -1173,6 +1161,11 @@ video {
|
|||
background-color: rgb(165 180 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-jarvis-blue-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-purple-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(216 180 254 / var(--tw-bg-opacity));
|
||||
|
|
@ -1201,11 +1194,6 @@ video {
|
|||
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
|
|
@ -1355,6 +1343,11 @@ video {
|
|||
padding: 2rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
|
|
@ -1536,16 +1529,6 @@ video {
|
|||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1562,6 +1545,10 @@ video {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.leading-5 {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
|
@ -1587,6 +1574,11 @@ video {
|
|||
color: rgb(79 70 229 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-jarvis-link-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(173 90 237 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-sky-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(125 211 252 / var(--tw-text-opacity));
|
||||
|
|
@ -1696,6 +1688,16 @@ video {
|
|||
mask-image: linear-gradient(0deg,#fff,rgba(255,255,255,0.6));
|
||||
}
|
||||
|
||||
.odd\:bg-jarvis-blue-700:nth-child(odd) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.even\:bg-jarvis-blue-800:nth-child(even) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 39 56 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:border-slate-400:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(148 163 184 / var(--tw-border-opacity));
|
||||
|
|
@ -1714,6 +1716,11 @@ video {
|
|||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.hover\:text-jarvis-link-800:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(208 88 197 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-sky-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
||||
|
|
@ -1917,9 +1924,14 @@ video {
|
|||
border-color: rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
.dark\:bg-gray-900 {
|
||||
.dark\:bg-jarvis-blue-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
background-color: rgb(37 39 56 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-jarvis-blue-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 29 37 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:bg-sky-500 {
|
||||
|
|
@ -2045,6 +2057,16 @@ video {
|
|||
mask-image: linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5));
|
||||
}
|
||||
|
||||
.odd\:dark\:bg-jarvis-blue-700:nth-child(odd) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.even\:dark\:bg-jarvis-blue-800:nth-child(even) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 39 56 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:border-slate-500:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(100 116 139 / var(--tw-border-opacity));
|
||||
|
|
@ -2219,11 +2241,6 @@ video {
|
|||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.sm\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -2325,30 +2342,14 @@ video {
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[19\.5rem\] {
|
||||
padding-left: 19.5rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[17\.5rem\] {
|
||||
padding-left: 17.5rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[16rem\] {
|
||||
padding-left: 16rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[14rem\] {
|
||||
padding-left: 14rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[12rem\] {
|
||||
padding-left: 12rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[13rem\] {
|
||||
padding-left: 13rem;
|
||||
}
|
||||
|
||||
.lg\:pl-\[19\.5rem\] {
|
||||
padding-left: 19.5rem;
|
||||
}
|
||||
|
||||
.lg\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,19 @@
|
|||
module.exports = {
|
||||
content: ["./jarvis/**/templates/*.html", "./jarvis/**/templates/**/*.html"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
'jarvis-blue': {
|
||||
900: '#1e1d25',
|
||||
800: '#252738',
|
||||
700: '#27293b',
|
||||
},
|
||||
'jarvis-link': {
|
||||
900: '#ad5aed',
|
||||
800: '#d058c5',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue