diff --git a/Pipfile b/Pipfile index 31c9bf3..e3458dd 100644 --- a/Pipfile +++ b/Pipfile @@ -7,8 +7,7 @@ name = "pypi" django = "*" django-responsive-images = "*" pillow = "*" - -[dev-packages] +django-widget-tweaks = "*" [requires] python_version = "3.8" diff --git a/django_web_galleries/django_web_galleries/settings.py b/django_web_galleries/django_web_galleries/settings.py index 212777d..66ec291 100644 --- a/django_web_galleries/django_web_galleries/settings.py +++ b/django_web_galleries/django_web_galleries/settings.py @@ -38,6 +38,7 @@ INSTALLED_APPS = [ 'django.contrib.messages', 'django.contrib.staticfiles', 'responsive_images', + 'widget_tweaks', 'web_galleries', ] diff --git a/django_web_galleries/web_galleries/static/web-galleries.css b/django_web_galleries/web_galleries/static/web-galleries.css new file mode 100644 index 0000000..7381f51 --- /dev/null +++ b/django_web_galleries/web_galleries/static/web-galleries.css @@ -0,0 +1,74 @@ +.RV-Header { + height: 80px; + margin-bottom: 70px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + + border-bottom: 1px solid gray; +} + +.RV-Navigation__list { + display: flex; + flex-direction: row; + + list-style-type: none; + gap: 1em; + + font-size: 22px; +} + +.RV-Navigation__link { + text-decoration: none; + display: inline-block; + transition: transform 300ms ease-in-out; +} + +.RV-Navigation__link:hover { + transform: scale(1.2); +} + +.RV-Images__list { + list-style-type: none; + display: grid; + gap: 22px; + + grid-template-columns: repeat(auto-fit, 200px); +} + +.RV-Image__link { + transition: transform 300ms ease-in-out; +} + +.RV-Image__link:hover { + transform: scale(1.1); +} + +.RV-Fieldset { + margin: 50px 200px; + display: flex; + flex-direction: column; + gap: 30px; +} + +.RV-Input { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.RV-Input--compact { + flex-direction: row; +} + +.RV-Input.RV-Input--reverse { + flex-direction: column-reverse; + align-items: flex-end; +} + +.RV-Input--compact.RV-Input--reverse { + flex-direction: row-reverse; + justify-content: flex-end; +} \ No newline at end of file diff --git a/django_web_galleries/web_galleries/templates/global.html b/django_web_galleries/web_galleries/templates/global.html index cf9376c..e96ef43 100644 --- a/django_web_galleries/web_galleries/templates/global.html +++ b/django_web_galleries/web_galleries/templates/global.html @@ -1,3 +1,5 @@ +{% load static %} +
@@ -5,10 +7,11 @@