feat: login view

theme/static_src/tailwind.config.js

@@ -4,54 +4,75 @@
  * If you need the full config, get it from here:
  * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
  */
+const colors = require('tailwindcss/colors')
+
 
 module.exports = {
-    content: [
-        /**
-         * HTML. Paths to Django template files that will contain Tailwind CSS classes.
-         */
+  content: [
+    /**
+     * HTML. Paths to Django template files that will contain Tailwind CSS classes.
+     */
 
-        /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
-        '../templates/**/*.html',
+    /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
+    '../templates/**/*.html',
 
-        /*
-         * Main templates directory of the project (BASE_DIR/templates).
-         * Adjust the following line to match your project structure.
-         */
-        '../../templates/**/*.html',
+    /*
+     * Main templates directory of the project (BASE_DIR/templates).
+     * Adjust the following line to match your project structure.
+     */
+    '../../templates/**/*.html',
 
-        /*
-         * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
-         * Adjust the following line to match your project structure.
-         */
-        '../../**/templates/**/*.html',
+    /*
+     * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
+     * Adjust the following line to match your project structure.
+     */
+    '../../**/templates/**/*.html',
 
-        /**
-         * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
-         * patterns match your project structure.
-         */
-        /* JS 1: Ignore any JavaScript in node_modules folder. */
-        // '!../../**/node_modules',
-        /* JS 2: Process all JavaScript files in the project. */
-        // '../../**/*.js',
+    /**
+     * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
+     * patterns match your project structure.
+     */
+    /* JS 1: Ignore any JavaScript in node_modules folder. */
+    // '!../../**/node_modules',
+    /* JS 2: Process all JavaScript files in the project. */
+    // '../../**/*.js',
 
-        /**
-         * Python: If you use Tailwind CSS classes in Python, uncomment the following line
-         * and make sure the pattern below matches your project structure.
-         */
-        // '../../**/*.py'
-    ],
-    theme: {
-        extend: {},
-    },
-    plugins: [
-        /**
-         * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
-         * for forms. If you don't like it or have own styling for forms,
-         * comment the line below to disable '@tailwindcss/forms'.
-         */
-        require('@tailwindcss/forms'),
-        require('@tailwindcss/typography'),
-        require('@tailwindcss/aspect-ratio'),
-    ],
+    /**
+     * Python: If you use Tailwind CSS classes in Python, uncomment the following line
+     * and make sure the pattern below matches your project structure.
+     */
+    // '../../**/*.py'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        gray: colors.zinc,
+        accent: colors.teal,
+        primary: colors.rose,
+        secondary: {
+          50: '#d1daf5',
+          100: '#bac3e0',
+          200: '#a4accc',
+          300: '#8e96b8',
+          400: '#7a81a4',
+          500: '#656c91',
+          DEFAULT: '#52587e',
+          600: '#3f446b',
+          700: '#2c3259',
+          800: '#192047',
+          900: '#070e36'
+        }
+      }
+    }
+  },
+  plugins: [
+    /**
+     * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
+     * for forms. If you don't like it or have own styling for forms,
+     * comment the line below to disable '@tailwindcss/forms'.
+     */
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
+  ],
 }

theme/templates/theme/base.html

@@ -5,7 +5,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{ title }}</title>
+
+  <script src="https://unpkg.com/htmx.org@2.0.3"></script>
+
   {% tailwind_css %}
+  {% block extra_js %}
+  {% endblock %}
 </head>
 <body>
 {% block main %}