diff --git a/README.md b/README.md
index 4cad1b8..ca37848 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,8 @@
This project is a reusable Django app that uses the following technologies:
-1. Tailwind CSS for styling
-2. Stimulus JS for interactivity
-3. django-viewcomponent for preview discovery and rendering
+1. [Tailwind CSS](https://tailwindcss.com/)
+2. [Stimulus JS](https://stimulus.hotwire.dev/)
## Storybook Controls
diff --git a/docs/source/images/bootstrap-preview.jpg b/docs/source/images/bootstrap-preview.jpg
new file mode 100644
index 0000000..fd2f966
Binary files /dev/null and b/docs/source/images/bootstrap-preview.jpg differ
diff --git a/docs/source/images/params-editor.gif b/docs/source/images/params-editor.gif
new file mode 100644
index 0000000..cc90c9d
Binary files /dev/null and b/docs/source/images/params-editor.gif differ
diff --git a/docs/source/images/preview-v2.png b/docs/source/images/preview-params.png
similarity index 100%
rename from docs/source/images/preview-v2.png
rename to docs/source/images/preview-params.png
diff --git a/docs/source/images/preview-v1.png b/docs/source/images/preview-v1.png
deleted file mode 100644
index 0b876bb..0000000
Binary files a/docs/source/images/preview-v1.png and /dev/null differ
diff --git a/docs/source/index.rst b/docs/source/index.rst
index 4685147..8ec722f 100644
--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -10,5 +10,7 @@ Topics
:maxdepth: 2
install.md
+ install_with_viewcomponent.md
write_preview.md
+ params.md
contributing.md
diff --git a/docs/source/install.md b/docs/source/install.md
index 282629a..9b8fed3 100644
--- a/docs/source/install.md
+++ b/docs/source/install.md
@@ -1,17 +1,18 @@
# Installation
+```{note}
+If you already used `django-viewcomponent`, you can follow the [Installation with django-viewcomponent](install_with_viewcomponent.md).
+```
+
```shell
$ pip install django-lookbook
```
-`django-viewcomponent` will also be installed as a dependency.
-
Then add the app into `INSTALLED_APPS` in settings.py
```python
INSTALLED_APPS = [
...,
- "django_viewcomponent",
"django_lookbook",
]
```
@@ -19,15 +20,22 @@ INSTALLED_APPS = [
Add code below in settings.py
```python
-VIEW_COMPONENTS = {
+LOOKBOOK = {
# we will put previews in this directory later
"preview_base": ["previews"],
+ # show_previews is True by default
+ "show_previews": DEBUG,
}
# to make iframe work
X_FRAME_OPTIONS = "SAMEORIGIN"
```
+Notes:
+
+1. `preview_base` is the base path for your previews.
+2. `show_previews` is a boolean value, which is used to control whether to show the previews. It is `True` by default, here we set it with same value of `DEBUG`. So the previews will only be shown in the development environment.
+
Update urls.py
```python
@@ -36,70 +44,49 @@ from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
- path("previews/", include("django_viewcomponent.urls")), # new
path("lookbook/", include("django_lookbook.urls")), # new
]
```
-Next, let's create *previews/hello_preview.py*
+Next, let's create *previews/template_preview.py*
```python
+from django_lookbook.preview import LookbookPreview
from django.template import Context, Template
-from django_viewcomponent.preview import ViewComponentPreview
+from django.template.loader import render_to_string
-class HelloComponentPreview(ViewComponentPreview):
- def hello_world(self, **kwargs):
+class PartialTemplatesPreview(LookbookPreview):
+
+ def header(self, **kwargs):
"""
- This is a simple test for you to check how doc of the preview works
+ `includes/header.html` is a partial template, we can write preview for it in this way.
+
+ **Markdown syntax is supported in docstring**
"""
- template = Template(
- """
Hello World
""",
- )
- return template.render(Context({}))
+ return render_to_string("includes/header.html")
- def hello_world_with_name(self, name=None, **kwargs):
+ def footer(self, **kwargs):
"""
- This preview is to display hello world for a specific name
+ We can write template code directly
"""
- name = name if name else "Michael Yin"
template = Template(
- """Hello {{ name }}
""",
+ """""",
)
- return template.render(Context({'name': name}))
+ return template.render(Context({}))
```
Notes:
-1. We create `HelloWorldComponentPreview` which inherits from `ViewComponentPreview`, the class name `HelloComponentPreview` can be seen as a `group` which can contains multiple previews.
-2. We define two methods `hello_world` and `hello_world_with_name` which will be used to render the preview
+1. We create `PartialTemplatesPreview` which inherits from `LookbookPreview`, the class can be seen as a `group` which can contains multiple previews.
+2. We define two methods `header` and `footer` which will be used to render the preview
```bash
├── previews
-│ └── hello_preview.py
-```
-
-```bash
-# create db tables and launch Django server
-(venv)$ python manage.py migrate
-(venv)$ python manage.py runserver
+│ └── template_preview.py
```
-Now please check on [http://127.0.0.1:8000/lookbook](http://127.0.0.1:8000/lookbook):
-
-1. The preview has been automatically detected and can be seen in the left sidebar
-2. You can see the UI of the preview on the right side and final HTML source code can also be seen
-3. The docstring of the preview has been extracted and display in the `Notes` tab, `Markdown` syntax is supported
-
-![](./images/preview-v1.png)
-
-Each time we visit a preview, the method would be called and the final result would be displayed in the top iframe.
-
-## Override Template
-
-In some cases, you might need to render HTML code which need work with your own CSS and JS. You can override the `preview` template to include them.
-
-Create *django_viewcomponent/preview.html* in the project `templates` directory
+Create *django_lookbook/preview.html* in the project `templates` directory
```html
@@ -127,66 +114,22 @@ Create *django_viewcomponent/preview.html* in the project `templates` directory
1. We import Bootstrap CSS and JS to the page.
2. `preview_html` is the HTML generated by the preview method.
-Now if we refresh the page and check again, the `preview` HTML should be rendered with Bootstrap CSS and JS.
-
-If you have other frontend assets such as Alpine.js, jQuery or CSS file, **you should remember to include them in this template file**.
-
-### Params Editor
-
-Next, let's make our preview work with dynamic parameters.
-
-Update *previews/hello_preview.py*
-
-```python
-from django import forms
-from django.template import Context, Template
-from django_viewcomponent.preview import ViewComponentPreview
-from django_lookbook.utils import register_form_class # new
-
-
-class HelloForm(forms.Form): # new
- """
- This is to show how to add parameter editor to preview
- """
- name = forms.CharField(
- label="Name",
- max_length=100,
- help_text="Enter name text",
- initial="",
- )
-
-
-class HelloComponentPreview(ViewComponentPreview):
- def hello_world(self, **kwargs):
- """
- This is a simple test for you to check how doc of the preview works
- """
- template = Template(
- """Hello World
""",
- )
- return template.render(Context({}))
-
- @register_form_class(HelloForm) # new
- def hello_world_with_name(self, name=None, **kwargs):
- """
- This preview is to display hello world for a specific name
- """
- name = name if name else "Michael Yin"
- template = Template(
- """Hello {{ name }}
""",
- )
- return template.render(Context({'name': name}))
+```{note}
+If you have other frontend assets such as Alpine.js, jQuery or CSS file, you should remember to include them in this template file `django_lookbook/preview.html`.
```
-Notes:
-
-1. We defined a `HelloForm`, which is a regular Django form, nothing special.
-2. Use `@register_form_class(HelloForm)` to attach the form class to the method `hello_world_with_name`
+```bash
+# create db tables and launch Django server
+(venv)$ python manage.py migrate
+(venv)$ python manage.py runserver
+```
-If we check the `hello_world_with_name` preview's `Params` tab, we can see the form.
+Now please check on [http://127.0.0.1:8000/lookbook](http://127.0.0.1:8000/lookbook):
-And then, let's input `Elon Musk` in the `name` field, we can see the top iframe is also updated in real-time.
+1. The preview has been automatically detected and can be seen in the left sidebar
+2. You can see the UI of the preview on the right side and final HTML source code can also be seen
+3. The docstring of the preview has been extracted and display in the `Notes` tab, `Markdown` syntax is supported
-![](./images/preview-v2.png)
+Each time we visit a preview, the preview method would be called and the HTML would be displayed in the top iframe.
-In this case, the `name` field value is passed to the `hello_world_with_name` method, then it can generate HTML according to the value.
+![](./images/bootstrap-preview.jpg)
diff --git a/docs/source/install_with_viewcomponent.md b/docs/source/install_with_viewcomponent.md
new file mode 100644
index 0000000..79d35a6
--- /dev/null
+++ b/docs/source/install_with_viewcomponent.md
@@ -0,0 +1,127 @@
+# Installation with django-viewcomponent
+
+```{note}
+If your project already used `django-viewcomponent`, you can follow this guide to install `django-lookbook`.
+```
+
+```shell
+$ pip install django-lookbook
+```
+
+Then add the app into `INSTALLED_APPS` in settings.py
+
+```python
+INSTALLED_APPS = [
+ ...,
+ "django_viewcomponent",
+ "django_lookbook", # new
+]
+```
+
+Add code below in settings.py
+
+```python
+VIEW_COMPONENTS = {
+ # we will put previews in this directory later
+ "preview_base": ["previews"],
+ # show_previews is True by default
+ "show_previews": DEBUG,
+}
+
+# to make iframe work
+X_FRAME_OPTIONS = "SAMEORIGIN"
+```
+
+Notes:
+
+1. `preview_base` is the base path for your previews.
+2. `show_previews` is a boolean value, which is used to control whether to show the previews. It is `True` by default, here we set it with same value of `DEBUG`. So the previews will only be shown in the development environment.
+
+Update urls.py
+
+```python
+from django.contrib import admin
+from django.urls import path, include
+
+urlpatterns = [
+ path('admin/', admin.site.urls),
+ path("previews/", include("django_viewcomponent.urls")), # new
+ path("lookbook/", include("django_lookbook.urls")), # new
+]
+```
+
+Next, let's create *previews/hello_preview.py*
+
+```python
+from django.template import Context, Template
+from django_viewcomponent.preview import ViewComponentPreview
+
+
+class HelloComponentPreview(ViewComponentPreview):
+ def hello_world(self, **kwargs):
+ """
+ This is a simple test for you to check how doc of the preview works
+ """
+ template = Template(
+ """Hello World
""",
+ )
+ return template.render(Context({}))
+```
+
+Notes:
+
+1. We create `HelloWorldComponentPreview` which inherits from `ViewComponentPreview`, the class name `HelloComponentPreview` can be seen as a `group` which can contains multiple previews.
+2. We define two methods `hello_world` and `hello_world_with_name` which will be used to render the preview
+
+```bash
+├── previews
+│ └── hello_preview.py
+```
+
+Create *django_viewcomponent/preview.html* in the project `templates` directory
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+ {{ preview_html }}
+
+
+
+
+
+```
+
+1. We import Bootstrap CSS and JS to the page.
+2. `preview_html` is the HTML generated by the preview method.
+
+Now if we refresh the page and check again, the `preview` HTML should be rendered with Bootstrap CSS and JS.
+
+```{note}
+If you have other frontend assets such as Alpine.js, jQuery or CSS file, you should remember to include them in this template file `django_viewcomponent/preview.html`.
+```
+
+```bash
+# create db tables and launch Django server
+(venv)$ python manage.py migrate
+(venv)$ python manage.py runserver
+```
+
+Now please check on [http://127.0.0.1:8000/lookbook](http://127.0.0.1:8000/lookbook):
+
+1. The preview has been automatically detected and can be seen in the left sidebar
+2. You can see the UI of the preview on the right side and final HTML source code can also be seen
+3. The docstring of the preview has been extracted and display in the `Notes` tab, `Markdown` syntax is supported
+
+Each time we visit a preview, the method would be called and the final result would be displayed in the top iframe.
diff --git a/docs/source/params.md b/docs/source/params.md
new file mode 100644
index 0000000..1f56072
--- /dev/null
+++ b/docs/source/params.md
@@ -0,0 +1,55 @@
+# Dynamic Params
+
+> Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
+
+django-lookbook provides simple way to let developer use classic Django form to add `Params Editor` to the preview, which allow user to interact with the preview in real-time.
+
+![](./images/params-editor.gif)
+
+Let's see how to build a preview with dynamic params.
+
+```python
+from django import forms
+from django.template import Context, Template
+from django_viewcomponent.preview import ViewComponentPreview
+from django_lookbook.utils import register_form_class # new
+
+
+class HelloForm(forms.Form): # new
+ """
+ This is to show how to add parameter editor to preview
+ """
+ name = forms.CharField(
+ label="Name",
+ max_length=100,
+ help_text="Enter name text",
+ initial="",
+ )
+
+
+class HelloComponentPreview(ViewComponentPreview):
+
+ @register_form_class(HelloForm) # new
+ def hello_world_with_name(self, name=None, **kwargs):
+ """
+ This preview is to display hello world for a specific name
+ """
+ name = name if name else "Michael Yin"
+ template = Template(
+ """Hello {{ name }}
""",
+ )
+ return template.render(Context({'name': name}))
+```
+
+Notes:
+
+1. We defined a `HelloForm`, which is a regular Django form, nothing special, the form has `name` field.
+2. Use `@register_form_class(HelloForm)` to attach the form class to the method `hello_world_with_name`
+3. The preview method has `name` parameter, which is the same as the form field name.
+4. If the name is provided, it will be used, otherwise, it will use the default value `Michael Yin`.
+
+And then, let's input `Elon Musk` in the `name` field of the `Params` tab, we can see the top iframe is also updated in real-time.
+
+![](./images/preview-params.png)
+
+While user typing, the `name` field value is passed to the `hello_world_with_name` method, then the generated HTML will be used to update the preview.
diff --git a/src/django_lookbook/__init__.py b/src/django_lookbook/__init__.py
index e69de29..263dc2d 100644
--- a/src/django_lookbook/__init__.py
+++ b/src/django_lookbook/__init__.py
@@ -0,0 +1,24 @@
+import glob
+import importlib
+import importlib.util
+import sys
+from pathlib import Path
+
+
+def autodiscover_previews():
+ from .app_settings import app_settings
+
+ if app_settings.SHOW_PREVIEWS:
+ preview_base_ls = [Path(p) for p in app_settings.PREVIEW_BASE]
+ for directory in preview_base_ls:
+ for path in glob.iglob(str(directory / "**/*.py"), recursive=True):
+ import_component_file(path)
+
+
+def import_component_file(path):
+ MODULE_PATH = path
+ MODULE_NAME = Path(path).stem
+ spec = importlib.util.spec_from_file_location(MODULE_NAME, MODULE_PATH)
+ module = importlib.util.module_from_spec(spec)
+ sys.modules[spec.name] = module
+ spec.loader.exec_module(module)
diff --git a/src/django_lookbook/app_settings.py b/src/django_lookbook/app_settings.py
new file mode 100644
index 0000000..76302cf
--- /dev/null
+++ b/src/django_lookbook/app_settings.py
@@ -0,0 +1,31 @@
+from django.conf import settings
+
+
+class AppSettings:
+ def __init__(self):
+ self.settings = getattr(settings, "LOOKBOOK", {})
+
+ @property
+ def PREVIEW_BASE(self):
+ from django_viewcomponent.app_settings import (
+ app_settings as view_component_settigs,
+ )
+
+ if "preview_base" in self.settings:
+ return self.settings["preview_base"]
+ else:
+ return view_component_settigs.PREVIEW_BASE
+
+ @property
+ def SHOW_PREVIEWS(self):
+ from django_viewcomponent.app_settings import (
+ app_settings as view_component_settigs,
+ )
+
+ if "show_previews" in self.settings:
+ return self.settings["show_previews"]
+ else:
+ return view_component_settigs.SHOW_PREVIEWS
+
+
+app_settings = AppSettings()
diff --git a/src/django_lookbook/apps.py b/src/django_lookbook/apps.py
index f4b8cf1..2bd7ac9 100644
--- a/src/django_lookbook/apps.py
+++ b/src/django_lookbook/apps.py
@@ -3,3 +3,6 @@
class LookbookConfig(AppConfig):
name = "django_lookbook"
+
+ def ready(self):
+ self.module.autodiscover_previews()
diff --git a/src/django_lookbook/preview.py b/src/django_lookbook/preview.py
new file mode 100644
index 0000000..bc23499
--- /dev/null
+++ b/src/django_lookbook/preview.py
@@ -0,0 +1,56 @@
+import inspect
+import os
+import re
+from typing import Dict, Type
+
+from .app_settings import app_settings
+
+pattern = re.compile(r"(? :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * 0);
@@ -1621,14 +1626,22 @@ select {
padding-top: 0.625rem;
}.text-center {
text-align: center;
+}.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
}.text-5xl {
font-size: 3rem;
line-height: 1;
+}.text-6xl {
+ font-size: 3.75rem;
+ line-height: 1;
}.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}.font-black {
font-weight: 900;
+}.font-bold {
+ font-weight: 700;
}.font-medium {
font-weight: 500;
}.uppercase {
@@ -1649,6 +1662,10 @@ select {
--tw-text-opacity: 1;
color: rgba(99, 102, 241, 1);
color: rgba(99, 102, 241, var(--tw-text-opacity));
+}.text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgba(239, 68, 68, 1);
+ color: rgba(239, 68, 68, var(--tw-text-opacity));
}.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, 1);
@@ -1837,6 +1854,12 @@ select {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
+}@media (min-width: 768px) {
+
+ .md\:text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ }
}@media (min-width: 1024px) {
.lg\:p-32 {
diff --git a/src/django_lookbook/static/lookbook/css/app.css.map b/src/django_lookbook/static/lookbook/css/app.css.map
index 85dcf5a..dbba61f 100644
--- a/src/django_lookbook/static/lookbook/css/app.css.map
+++ b/src/django_lookbook/static/lookbook/css/app.css.map
@@ -1 +1 @@
-{"version":3,"file":"css/app.css","mappings":"AAAA;;CAAA;;;CAAA;;AAAA;;;EAAA;UAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;EAAA;AAAA;;AAAA;;;;;;;;CAAA;;AAAA;;EAAA;EAAA;EAAA;EAAA;KAAA;EAAA;EAAA;UAAA;EAAA;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;EAAA;UAAA;AAAA;;AAAA;;CAAA;;AAAA;;;;;;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;;;;CAAA;;AAAA;;;;EAAA;EAAA;UAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;;;;;EAAA;EAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;;;;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;;;;;;;;;;;;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;CAAA;AAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;;;;;;;;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;EAAA;AAAA;;AAAA;AAAA;EAAA;AAAA;;AAAA;EAAA;KAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;AAAA;;AAAA;EAAA;KAAA;UAAA;EAAA;EAAA;UAAA;EAAA;EAAA;EAAA;EAAA;KAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;EAAA;IAAA;OAAA;YAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;EAAA;IAAA;OAAA;YAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;EAAA;IAAA;OAAA;YAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA,CCyBI;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,CAGF,kBACE,6DACA,yBACA,eACA,WAGF,wBACE,aAGF,iDACE,oBACA,aAGF,wCACE,wCACA,gBACA,oBACA,YACA,WAGF,oCACE,oBACA,aAGF,oCACE,YACA,oBACA,YACA,WAKA;EAAA;EAAA;AAAA,CAGF,kBACE,WAEA,wDAGF,gDACE,UAIA;EAAA;EAAA;AAAA,CAGF,eACE,gBACA,mBACA,sBACA,mCACA,4BACA,uCCjFM;EAAA;AAAA,CAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,CAGF,uEACE,UAGF,uEACE,UAMA;EAAA;AAAA,CAIA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,CAIA;EAAA;AAAA,CAGF,6EACE,gBAgCF;EAAA;AAAA,CCnEF;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;AAAA,CHHN;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;UAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;;EAAA;IAAA;YAAA;EAAA;AAAA;;EAAA;IAAA;YAAA;EAAA;AAAA;EAAA;UAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;KAAA;UAAA;AAAA;EAAA;AAAA;EAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA,CIEA,sBACE,6BACA,cACA,sKACA,0DACA,wHACA,cAGF,0BACE,mBACA,oBACA,qBACA,sBACA,WACA,YAGF,wCACE,iBAGF,wCACE,iBAGF,+BACE,6BACA,cACA,sKACA,0DACA,wHACA,cAGF,mCACE,mBACA,oBACA,qBACA,sBACA,WACA,YAGF,sCACE,aAGF,iDACE,iBAGF,iDACE,iBAIA;EAAA;EAAA;EAAA;AAAA,CAIA;EAAA;EAAA;EAAA;AAAA,CAIA;EAAA;AAAA,CAGE;EAAA;AAAA,CAKJ,SACE,yBAGF,mBACE,+BAGF,iBACE,2BACA,gEACA,kBACA,WACA,4BACA,mBACA,kBAIF,cACE,kBJ/FF;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,sBKQQ;ELRR,oCKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,kBKQQ;ELRR,wCKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,gCKQQ;ELRR,wBKQQ;ELRR,gEKQQ;ULRR,wDKQQ;ELRR,kCKQQ;ULRR;AKQQ,CLRR;EAAA,kBKQQ;ELRR,wCKQQ;ELRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR,6BKQQ;ELRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR,0BKQQ;ELRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR,0BKQQ;ELRR;AKQQ,CLRR;EAAA;AKQQ,CLRR;EAAA,sBKQQ;ELRR,oCKQQ;ELRR;AKQQ,CLRR;EAAA,8BKQQ;ELRR;AKQQ,CLRR;EAAA,2GKQQ;ELRR,yGKQQ;ELRR,wFKQQ;ULRR,gFKQQ;ELRR,4GKQQ;ULRR;AKQQ,CLRR;EAAA,2GKQQ;ELRR,yGKQQ;ELRR,wFKQQ;ULRR,gFKQQ;ELRR,4GKQQ;ULRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR;AKQQ,CLRR;EAAA;AKQQ,CLRR;EAAA,8BKQQ;ELRR;AKQQ,CLRR;EAAA,kBKQQ;ELRR,sCKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,sBKQQ;ELRR,sLKQQ;ULRR,8KKQQ;ELRR,uMKQQ;ULRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,sBKQQ;ELRR,oCKQQ;ELRR;AKQQ,CLRR;EAAA,8BKQQ;ELRR;AKQQ,CLRR;EAAA,2GKQQ;ELRR,yGKQQ;ELRR,wFKQQ;ULRR,gFKQQ;ELRR,4GKQQ;ULRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR;AKQQ,CLRR;;EAAA;IAAA,oBKQQ;ILRR;EKQQ;AAAA,CLRR;;EAAA;IAAA;EKQQ;;ELRR;IAAA,iBKQQ;ILRR;EKQQ;;ELRR;IAAA,kBKQQ;ILRR;EKQQ;;ELRR;IAAA,iBKQQ;ILRR;EKQQ;AAAA,CLRR;;EAAA;IAAA;EKQQ;;ELRR;IAAA;EKQQ;;ELRR;IAAA,wBKQQ;ILRR,qCKQQ;ILRR,8DKQQ;ILRR,yCKQQ;ILRR,kEKQQ;ILRR,kCKQQ;ILRR;EKQQ;;ELRR;IAAA,iBKQQ;ILRR;EKQQ;;ELRR;IAAA;EKQQ;AAAA,CLRR;;EAAA;IAAA,sBKQQ;ILRR,iCKQQ;ILRR;EKQQ;;ELRR;IAAA,sBKQQ;ILRR,iCKQQ;ILRR;EKQQ;;ELRR;IAAA,kBKQQ;ILRR,qCKQQ;ILRR;EKQQ;;ELRR;IAAA,oBKQQ;ILRR;EKQQ;AAAA,C;ACRR,sgD;ACAA,cACE,cACA,gBACA,YAEF,UACE,gBAEF;;;;;;;;;CAAA,CAUA,MACE,cACA,gBAEF,mIAQE,cAEF,oFAKE,cAEF,0JAWE,cAEF,kDAIE,cAEF,4BAGE,cAEF,uCAIE,cAEF,gEAKE,cAEF,YAEE,cAEF,cAEE,cACA,iBAEF,aAEE,cAEF,eAEE,cACA,kBAEF,aAEE,cACA,iBAEF,eAEE,cACA,yBAEF,eAEE,cACA,yB","sources":["webpack://python-webpack-boilerplate/./node_modules/tailwindcss/base.css","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_base.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_params.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_toolbar.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_lookbook.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_header.scss","webpack://python-webpack-boilerplate/./node_modules/tippy.js/dist/tippy.css","webpack://python-webpack-boilerplate/./node_modules/highlight.js/styles/github.css"],"sourcesContent":["@tailwind base;\n","@layer base {\n [data-theme=\"dark\"] body {\n @apply bg-gray-800;\n }\n\n [data-theme=\"light\"] body {\n @apply bg-white;\n }\n}\n\n@layer components {\n [type=\"text\"],\n [type=\"email\"],\n [type=\"url\"],\n [type=\"password\"],\n [type=\"number\"],\n [type=\"date\"],\n [type=\"datetime-local\"],\n [type=\"month\"],\n [type=\"search\"],\n [type=\"tel\"],\n [type=\"time\"],\n [type=\"week\"],\n textarea,\n select {\n @apply rounded-md text-sm w-full block;\n }\n\n input[type=\"range\"] {\n appearance: none;\n background: transparent;\n cursor: pointer;\n width: 100%;\n }\n\n input[type=\"range\"]:focus {\n outline: none;\n }\n\n input[type=\"range\"]::-webkit-slider-runnable-track {\n border-radius: 0.5rem;\n height: 0.5rem;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n margin-top: -4px;\n border-radius: 0.5rem;\n height: 1rem;\n width: 1rem;\n }\n\n input[type=\"range\"]::-moz-range-track {\n border-radius: 0.5rem;\n height: 0.5rem;\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n border: none;\n border-radius: 0.5rem;\n height: 1rem;\n width: 1rem;\n }\n\n input[type=\"range\"]:focus::-webkit-slider-thumb,\n input[type=\"range\"]:focus::-moz-range-thumb {\n @apply outline-1 outline-offset-2;\n }\n\n input[type=\"color\"] {\n width: 46px;\n\n @apply border rounded-lg cursor-pointer;\n }\n\n input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n input[type=\"color\"]::-webkit-color-swatch {\n @apply border-0 rounded-lg;\n }\n\n select.compact {\n font-size: 0.8rem;\n line-height: 1.1rem;\n border-radius: 0.375rem;\n padding: 0.26rem 1.5rem 0.26rem 0.6rem;\n background-size: 1.2em 1.2em;\n background-position: right 0.4rem center;\n }\n\n}\n","/* stylelint-disable no-descending-specificity */\n/* stylelint-disable no-duplicate-selectors */\n\n@layer components {\n [data-component=\"params-editor\"] {\n table:not(.linear) {\n thead {\n tr {\n @apply border-b;\n }\n\n th {\n @apply font-semibold py-4 px-4 align-middle text-left;\n }\n\n th.param-label {\n width: 18%;\n }\n\n th.param-input {\n width: 45%;\n }\n }\n\n tbody {\n tr + tr td {\n @apply border-t ;\n }\n\n td {\n @apply py-4 px-4 align-middle;\n }\n\n td.param-label {\n @apply font-semibold;\n }\n\n .param-input-wrapper {\n min-height: 38px;\n }\n }\n }\n }\n\n [data-component=\"params-editor\"] {\n table.linear {\n table,\n tr,\n td {\n display: block;\n }\n\n thead,\n th {\n display: none;\n }\n\n tr:not(:last-child) {\n @apply border-b ;\n }\n\n tr {\n @apply space-y-3 py-4;\n }\n\n td {\n @apply px-4 align-middle;\n }\n\n td.param-label {\n @apply font-semibold;\n }\n\n td.param-description-empty {\n @apply hidden;\n }\n }\n }\n}\n\n/* stylelint-enable no-descending-specificity */\n/* stylelint-enable no-duplicate-selectors */\n","@layer components {\n [data-component=\"toolbar\"] {\n & .toolbar-sections > * {\n @apply h-10 flex items-center whitespace-nowrap;\n }\n }\n}\n","/* stylelint-disable no-descending-specificity */\n\n[data-component=\"icon\"] {\n flex: none;\n line-height: 1;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n display: block;\n}\n\n[data-component=\"icon\"] svg {\n fill: #0000;\n stroke: currentcolor;\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 100%;\n height: 100%;\n}\n\n[data-component=\"icon\"].icon-stroke-2 svg {\n stroke-width: 2px;\n}\n\n[data-component=\"icon\"].icon-stroke-1 svg {\n stroke-width: 1px;\n}\n\n[data-component=\"lookbook-icon\"] {\n flex: none;\n line-height: 1;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n display: block;\n}\n\n[data-component=\"lookbook-icon\"] svg {\n fill: #0000;\n stroke: currentcolor;\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 100%;\n height: 100%;\n}\n\n[data-component=\"lookbook-icon\"].hidden {\n display: none;\n}\n\n[data-component=\"lookbook-icon\"].icon-stroke-2 svg {\n stroke-width: 2px;\n}\n\n[data-component=\"lookbook-icon\"].icon-stroke-1 svg {\n stroke-width: 1px;\n}\n\n[data-controller=\"lookbook-sidebar-link\"] {\n @apply hover:bg-gray-100;\n}\n\n[data-controller=\"lookbook-sidebar-link\"].active {\n @apply bg-blue-100;\n}\n\n.lookbook-pre {\n @apply h-full;\n\n code {\n @apply h-full;\n }\n}\n\n/* for block of numbers */\n.hljs-ln {\n border-collapse: collapse\n}\n\n.hljs-ln-n::before {\n content: attr(data-line-number)\n}\n\n.hljs-ln-numbers {\n -webkit-touch-callout: none;\n user-select: none;\n text-align: center;\n color: #ccc;\n border-right: 1px solid #CCC;\n vertical-align: top;\n padding-right: 5px;\n}\n\n/* for block of code */\n.hljs-ln-code {\n padding-left: 10px;\n}\n\n/* stylelint-enable no-descending-specificity */\n","@layer components {\n [data-component=\"header\"] {\n .header-project-icon {\n @apply h-5 inline-block flex-none;\n\n width: min-content;\n\n svg {\n @apply h-full w-auto;\n }\n }\n }\n}\n",".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}","pre code.hljs {\n display: block;\n overflow-x: auto;\n padding: 1em\n}\ncode.hljs {\n padding: 3px 5px\n}\n/*!\n Theme: GitHub\n Description: Light theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n Updated: 2021-05-15\n\n Outdated base version: https://github.com/primer/github-syntax-light\n Current colors taken from GitHub's CSS\n*/\n.hljs {\n color: #24292e;\n background: #ffffff\n}\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n /* prettylights-syntax-keyword */\n color: #d73a49\n}\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n /* prettylights-syntax-entity */\n color: #6f42c1\n}\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n /* prettylights-syntax-constant */\n color: #005cc5\n}\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n /* prettylights-syntax-string */\n color: #032f62\n}\n.hljs-built_in,\n.hljs-symbol {\n /* prettylights-syntax-variable */\n color: #e36209\n}\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n /* prettylights-syntax-comment */\n color: #6a737d\n}\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n /* prettylights-syntax-entity-tag */\n color: #22863a\n}\n.hljs-subst {\n /* prettylights-syntax-storage-modifier-import */\n color: #24292e\n}\n.hljs-section {\n /* prettylights-syntax-markup-heading */\n color: #005cc5;\n font-weight: bold\n}\n.hljs-bullet {\n /* prettylights-syntax-markup-list */\n color: #735c0f\n}\n.hljs-emphasis {\n /* prettylights-syntax-markup-italic */\n color: #24292e;\n font-style: italic\n}\n.hljs-strong {\n /* prettylights-syntax-markup-bold */\n color: #24292e;\n font-weight: bold\n}\n.hljs-addition {\n /* prettylights-syntax-markup-inserted */\n color: #22863a;\n background-color: #f0fff4\n}\n.hljs-deletion {\n /* prettylights-syntax-markup-deleted */\n color: #b31d28;\n background-color: #ffeef0\n}\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n /* purposely ignored */\n \n}"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"css/app.css","mappings":"AAAA;;CAAA;;;CAAA;;AAAA;;;EAAA;UAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;EAAA;AAAA;;AAAA;;;;;;;;CAAA;;AAAA;;EAAA;EAAA;EAAA;EAAA;KAAA;EAAA;EAAA;UAAA;EAAA;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;EAAA;UAAA;AAAA;;AAAA;;CAAA;;AAAA;;;;;;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;;;;CAAA;;AAAA;;;;EAAA;EAAA;UAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;;;;;EAAA;EAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;;;;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;;;;;;;;;;;;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;;EAAA;EAAA;EAAA;AAAA;;AAAA;;CAAA;AAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;EAAA;AAAA;;AAAA;;;CAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;AAAA;;AAAA;;CAAA;AAAA;EAAA;AAAA;;AAAA;;;;CAAA;;AAAA;;;;;;;;EAAA;EAAA;AAAA;;AAAA;;CAAA;;AAAA;;EAAA;EAAA;AAAA;;AAAA;AAAA;EAAA;AAAA;;AAAA;EAAA;KAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;AAAA;;AAAA;EAAA;KAAA;UAAA;EAAA;EAAA;UAAA;EAAA;EAAA;EAAA;EAAA;KAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;EAAA;IAAA;OAAA;YAAA;EAAA;AAAA;;AAAA;EAAA;AAAA;;AAAA;;EAAA;IAAA;OAAA;YAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;;EAAA;IAAA;OAAA;YAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA,CCyBI;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,CAGF,kBACE,6DACA,yBACA,eACA,WAGF,wBACE,aAGF,iDACE,oBACA,aAGF,wCACE,wCACA,gBACA,oBACA,YACA,WAGF,oCACE,oBACA,aAGF,oCACE,YACA,oBACA,YACA,WAKA;EAAA;EAAA;AAAA,CAGF,kBACE,WAEA,wDAGF,gDACE,UAIA;EAAA;EAAA;AAAA,CAGF,eACE,gBACA,mBACA,sBACA,mCACA,4BACA,uCCjFM;EAAA;AAAA,CAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,CAGF,uEACE,UAGF,uEACE,UAMA;EAAA;AAAA,CAIA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA,CAIA;EAAA;AAAA,CAGF,6EACE,gBAgCF;EAAA;AAAA,CCnEF;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;AAAA,CHHN;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;UAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;;EAAA;IAAA;YAAA;EAAA;AAAA;;EAAA;IAAA;YAAA;EAAA;AAAA;EAAA;UAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;KAAA;UAAA;AAAA;EAAA;AAAA;EAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;EAAA;EAAA;UAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA;EAAA;UAAA;AAAA,CIEA,sBACE,6BACA,cACA,sKACA,0DACA,wHACA,cAGF,0BACE,mBACA,oBACA,qBACA,sBACA,WACA,YAGF,wCACE,iBAGF,wCACE,iBAGF,+BACE,6BACA,cACA,sKACA,0DACA,wHACA,cAGF,mCACE,mBACA,oBACA,qBACA,sBACA,WACA,YAGF,sCACE,aAGF,iDACE,iBAGF,iDACE,iBAIA;EAAA;EAAA;EAAA;AAAA,CAIA;EAAA;EAAA;EAAA;AAAA,CAIA;EAAA;AAAA,CAGE;EAAA;AAAA,CAKJ,SACE,yBAGF,mBACE,+BAGF,iBACE,2BACA,gEACA,kBACA,WACA,4BACA,mBACA,kBAIF,cACE,kBJ/FF;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,sBKQQ;ELRR,oCKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,kBKQQ;ELRR,wCKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,gCKQQ;ELRR,wBKQQ;ELRR,gEKQQ;ULRR,wDKQQ;ELRR,kCKQQ;ULRR;AKQQ,CLRR;EAAA,kBKQQ;ELRR,wCKQQ;ELRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR,6BKQQ;ELRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR,0BKQQ;ELRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR,0BKQQ;ELRR;AKQQ,CLRR;EAAA;AKQQ,CLRR;EAAA,sBKQQ;ELRR,oCKQQ;ELRR;AKQQ,CLRR;EAAA,8BKQQ;ELRR;AKQQ,CLRR;EAAA,2GKQQ;ELRR,yGKQQ;ELRR,wFKQQ;ULRR,gFKQQ;ELRR,4GKQQ;ULRR;AKQQ,CLRR;EAAA,2GKQQ;ELRR,yGKQQ;ELRR,wFKQQ;ULRR,gFKQQ;ELRR,4GKQQ;ULRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR;AKQQ,CLRR;EAAA;AKQQ,CLRR;EAAA,8BKQQ;ELRR;AKQQ,CLRR;EAAA,kBKQQ;ELRR,sCKQQ;ELRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,sBKQQ;ELRR,sLKQQ;ULRR,8KKQQ;ELRR,uMKQQ;ULRR;AKQQ,CLRR;EAAA,0BKQQ;ELRR,sBKQQ;ELRR,oCKQQ;ELRR;AKQQ,CLRR;EAAA,8BKQQ;ELRR;AKQQ,CLRR;EAAA,2GKQQ;ELRR,yGKQQ;ELRR,wFKQQ;ULRR,gFKQQ;ELRR,4GKQQ;ULRR;AKQQ,CLRR;EAAA,oBKQQ;ELRR;AKQQ,CLRR;;EAAA;IAAA,oBKQQ;ILRR;EKQQ;AAAA,CLRR;;EAAA;IAAA,mBKQQ;ILRR;EKQQ;AAAA,CLRR;;EAAA;IAAA;EKQQ;;ELRR;IAAA,iBKQQ;ILRR;EKQQ;;ELRR;IAAA,kBKQQ;ILRR;EKQQ;;ELRR;IAAA,iBKQQ;ILRR;EKQQ;AAAA,CLRR;;EAAA;IAAA;EKQQ;;ELRR;IAAA;EKQQ;;ELRR;IAAA,wBKQQ;ILRR,qCKQQ;ILRR,8DKQQ;ILRR,yCKQQ;ILRR,kEKQQ;ILRR,kCKQQ;ILRR;EKQQ;;ELRR;IAAA,iBKQQ;ILRR;EKQQ;;ELRR;IAAA;EKQQ;AAAA,CLRR;;EAAA;IAAA,sBKQQ;ILRR,iCKQQ;ILRR;EKQQ;;ELRR;IAAA,sBKQQ;ILRR,iCKQQ;ILRR;EKQQ;;ELRR;IAAA,kBKQQ;ILRR,qCKQQ;ILRR;EKQQ;;ELRR;IAAA,oBKQQ;ILRR;EKQQ;AAAA,C;ACRR,sgD;ACAA,cACE,cACA,gBACA,YAEF,UACE,gBAEF;;;;;;;;;CAAA,CAUA,MACE,cACA,gBAEF,mIAQE,cAEF,oFAKE,cAEF,0JAWE,cAEF,kDAIE,cAEF,4BAGE,cAEF,uCAIE,cAEF,gEAKE,cAEF,YAEE,cAEF,cAEE,cACA,iBAEF,aAEE,cAEF,eAEE,cACA,kBAEF,aAEE,cACA,iBAEF,eAEE,cACA,yBAEF,eAEE,cACA,yB","sources":["webpack://python-webpack-boilerplate/./node_modules/tailwindcss/base.css","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_base.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_params.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_toolbar.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_lookbook.scss","webpack://python-webpack-boilerplate/./frontend/src/styles/lookbook/_header.scss","webpack://python-webpack-boilerplate/./node_modules/tippy.js/dist/tippy.css","webpack://python-webpack-boilerplate/./node_modules/highlight.js/styles/github.css"],"sourcesContent":["@tailwind base;\n","@layer base {\n [data-theme=\"dark\"] body {\n @apply bg-gray-800;\n }\n\n [data-theme=\"light\"] body {\n @apply bg-white;\n }\n}\n\n@layer components {\n [type=\"text\"],\n [type=\"email\"],\n [type=\"url\"],\n [type=\"password\"],\n [type=\"number\"],\n [type=\"date\"],\n [type=\"datetime-local\"],\n [type=\"month\"],\n [type=\"search\"],\n [type=\"tel\"],\n [type=\"time\"],\n [type=\"week\"],\n textarea,\n select {\n @apply rounded-md text-sm w-full block;\n }\n\n input[type=\"range\"] {\n appearance: none;\n background: transparent;\n cursor: pointer;\n width: 100%;\n }\n\n input[type=\"range\"]:focus {\n outline: none;\n }\n\n input[type=\"range\"]::-webkit-slider-runnable-track {\n border-radius: 0.5rem;\n height: 0.5rem;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n margin-top: -4px;\n border-radius: 0.5rem;\n height: 1rem;\n width: 1rem;\n }\n\n input[type=\"range\"]::-moz-range-track {\n border-radius: 0.5rem;\n height: 0.5rem;\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n border: none;\n border-radius: 0.5rem;\n height: 1rem;\n width: 1rem;\n }\n\n input[type=\"range\"]:focus::-webkit-slider-thumb,\n input[type=\"range\"]:focus::-moz-range-thumb {\n @apply outline-1 outline-offset-2;\n }\n\n input[type=\"color\"] {\n width: 46px;\n\n @apply border rounded-lg cursor-pointer;\n }\n\n input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n input[type=\"color\"]::-webkit-color-swatch {\n @apply border-0 rounded-lg;\n }\n\n select.compact {\n font-size: 0.8rem;\n line-height: 1.1rem;\n border-radius: 0.375rem;\n padding: 0.26rem 1.5rem 0.26rem 0.6rem;\n background-size: 1.2em 1.2em;\n background-position: right 0.4rem center;\n }\n\n}\n","/* stylelint-disable no-descending-specificity */\n/* stylelint-disable no-duplicate-selectors */\n\n@layer components {\n [data-component=\"params-editor\"] {\n table:not(.linear) {\n thead {\n tr {\n @apply border-b;\n }\n\n th {\n @apply font-semibold py-4 px-4 align-middle text-left;\n }\n\n th.param-label {\n width: 18%;\n }\n\n th.param-input {\n width: 45%;\n }\n }\n\n tbody {\n tr + tr td {\n @apply border-t ;\n }\n\n td {\n @apply py-4 px-4 align-middle;\n }\n\n td.param-label {\n @apply font-semibold;\n }\n\n .param-input-wrapper {\n min-height: 38px;\n }\n }\n }\n }\n\n [data-component=\"params-editor\"] {\n table.linear {\n table,\n tr,\n td {\n display: block;\n }\n\n thead,\n th {\n display: none;\n }\n\n tr:not(:last-child) {\n @apply border-b ;\n }\n\n tr {\n @apply space-y-3 py-4;\n }\n\n td {\n @apply px-4 align-middle;\n }\n\n td.param-label {\n @apply font-semibold;\n }\n\n td.param-description-empty {\n @apply hidden;\n }\n }\n }\n}\n\n/* stylelint-enable no-descending-specificity */\n/* stylelint-enable no-duplicate-selectors */\n","@layer components {\n [data-component=\"toolbar\"] {\n & .toolbar-sections > * {\n @apply h-10 flex items-center whitespace-nowrap;\n }\n }\n}\n","/* stylelint-disable no-descending-specificity */\n\n[data-component=\"icon\"] {\n flex: none;\n line-height: 1;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n display: block;\n}\n\n[data-component=\"icon\"] svg {\n fill: #0000;\n stroke: currentcolor;\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 100%;\n height: 100%;\n}\n\n[data-component=\"icon\"].icon-stroke-2 svg {\n stroke-width: 2px;\n}\n\n[data-component=\"icon\"].icon-stroke-1 svg {\n stroke-width: 1px;\n}\n\n[data-component=\"lookbook-icon\"] {\n flex: none;\n line-height: 1;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n display: block;\n}\n\n[data-component=\"lookbook-icon\"] svg {\n fill: #0000;\n stroke: currentcolor;\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 100%;\n height: 100%;\n}\n\n[data-component=\"lookbook-icon\"].hidden {\n display: none;\n}\n\n[data-component=\"lookbook-icon\"].icon-stroke-2 svg {\n stroke-width: 2px;\n}\n\n[data-component=\"lookbook-icon\"].icon-stroke-1 svg {\n stroke-width: 1px;\n}\n\n[data-controller=\"lookbook-sidebar-link\"] {\n @apply hover:bg-gray-100;\n}\n\n[data-controller=\"lookbook-sidebar-link\"].active {\n @apply bg-blue-100;\n}\n\n.lookbook-pre {\n @apply h-full;\n\n code {\n @apply h-full;\n }\n}\n\n/* for block of numbers */\n.hljs-ln {\n border-collapse: collapse\n}\n\n.hljs-ln-n::before {\n content: attr(data-line-number)\n}\n\n.hljs-ln-numbers {\n -webkit-touch-callout: none;\n user-select: none;\n text-align: center;\n color: #ccc;\n border-right: 1px solid #CCC;\n vertical-align: top;\n padding-right: 5px;\n}\n\n/* for block of code */\n.hljs-ln-code {\n padding-left: 10px;\n}\n\n/* stylelint-enable no-descending-specificity */\n","@layer components {\n [data-component=\"header\"] {\n .header-project-icon {\n @apply h-5 inline-block flex-none;\n\n width: min-content;\n\n svg {\n @apply h-full w-auto;\n }\n }\n }\n}\n",".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}","pre code.hljs {\n display: block;\n overflow-x: auto;\n padding: 1em\n}\ncode.hljs {\n padding: 3px 5px\n}\n/*!\n Theme: GitHub\n Description: Light theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n Updated: 2021-05-15\n\n Outdated base version: https://github.com/primer/github-syntax-light\n Current colors taken from GitHub's CSS\n*/\n.hljs {\n color: #24292e;\n background: #ffffff\n}\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n /* prettylights-syntax-keyword */\n color: #d73a49\n}\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n /* prettylights-syntax-entity */\n color: #6f42c1\n}\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n /* prettylights-syntax-constant */\n color: #005cc5\n}\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n /* prettylights-syntax-string */\n color: #032f62\n}\n.hljs-built_in,\n.hljs-symbol {\n /* prettylights-syntax-variable */\n color: #e36209\n}\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n /* prettylights-syntax-comment */\n color: #6a737d\n}\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n /* prettylights-syntax-entity-tag */\n color: #22863a\n}\n.hljs-subst {\n /* prettylights-syntax-storage-modifier-import */\n color: #24292e\n}\n.hljs-section {\n /* prettylights-syntax-markup-heading */\n color: #005cc5;\n font-weight: bold\n}\n.hljs-bullet {\n /* prettylights-syntax-markup-list */\n color: #735c0f\n}\n.hljs-emphasis {\n /* prettylights-syntax-markup-italic */\n color: #24292e;\n font-style: italic\n}\n.hljs-strong {\n /* prettylights-syntax-markup-bold */\n color: #24292e;\n font-weight: bold\n}\n.hljs-addition {\n /* prettylights-syntax-markup-inserted */\n color: #22863a;\n background-color: #f0fff4\n}\n.hljs-deletion {\n /* prettylights-syntax-markup-deleted */\n color: #b31d28;\n background-color: #ffeef0\n}\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n /* purposely ignored */\n \n}"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/django_lookbook/templates/django_lookbook/404.html b/src/django_lookbook/templates/django_lookbook/404.html
new file mode 100644
index 0000000..992e34f
--- /dev/null
+++ b/src/django_lookbook/templates/django_lookbook/404.html
@@ -0,0 +1,15 @@
+{% extends 'django_lookbook/base.html' %}
+
+{% block content %}
+
+
+
4😵4
+
+
+ Oops! Preview not found
+
+
+
+
+{% endblock %}
diff --git a/src/django_lookbook/templates/django_lookbook/includes/sidebar_2_level.html b/src/django_lookbook/templates/django_lookbook/includes/sidebar_2_level.html
index 2bcf9ec..bc9c199 100644
--- a/src/django_lookbook/templates/django_lookbook/includes/sidebar_2_level.html
+++ b/src/django_lookbook/templates/django_lookbook/includes/sidebar_2_level.html
@@ -41,7 +41,7 @@