add Dockerfile, CI files

run.sh

+#!/bin/bash
+
+# exit on error
+set -e
+
+# migrate database
+python manage.py migrate
+
+# start webserver
+exec gunicorn -c gunicorn.conf.py majak_uistyleguide.wsgi

src/css/molecules/card_box.pcss

+.flip-card {
+  .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  @apply w-auto h-[33rem] cursor-pointer;
+
+  perspective: 1000px; /* Remove this if you don't want the 3D effect */
+}
+
+/* This container is needed to position the front and back side */
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+/* Do an horizontal flip when you move the mouse over the flip box container */
+.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+/* Position the front and back side */
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+}
+
+/* Style the back side */
+.flip-card-back {
+  transform: rotateY(180deg);
+}

src/css/style.pcss

@@ -33,6 +33,7 @@
 @import "molecules/representative_box.pcss";
 @import "molecules/popout.pcss";
 @import "molecules/candidate_list.pcss";
+@import "molecules/card_box.pcss";
 
 @import "organisms/article-timeline.pcss";
 @import "organisms/footer.pcss";

tailwind.config.js

@@ -27,6 +27,44 @@ module.exports = {
             scale: {
                 '-1': '-1',
             },
+            typography: ({ theme }) => ({
+                black: {
+                    css: {
+                        '--tw-prose-body': theme('colors.black'),
+                        '--tw-prose-headings': theme('colors.black'),
+                        '--tw-prose-lead': theme('colors.black'),
+                        '--tw-prose-links': theme('colors.black'),
+                        '--tw-prose-bold': theme('colors.black'),
+                        '--tw-prose-counters': theme('colors.black'),
+                        '--tw-prose-bullets': theme('colors.black'),
+                        '--tw-prose-hr': theme('colors.black'),
+                        '--tw-prose-quotes': theme('colors.black'),
+                        '--tw-prose-quote-borders': theme('colors.black'),
+                        '--tw-prose-captions': theme('colors.black'),
+                        '--tw-prose-code': theme('colors.black'),
+                        '--tw-prose-pre-code': theme('colors.black'),
+                        '--tw-prose-pre-bg': theme('colors.white'),
+                        '--tw-prose-th-borders': theme('colors.black'),
+                        '--tw-prose-td-borders': theme('colors.black'),
+                        '--tw-prose-invert-body': theme('colors.white'),
+                        '--tw-prose-invert-headings': theme('colors.white'),
+                        '--tw-prose-invert-lead': theme('colors.white'),
+                        '--tw-prose-invert-links': theme('colors.white'),
+                        '--tw-prose-invert-bold': theme('colors.white'),
+                        '--tw-prose-invert-counters': theme('colors.white'),
+                        '--tw-prose-invert-bullets': theme('colors.white'),
+                        '--tw-prose-invert-hr': theme('colors.white'),
+                        '--tw-prose-invert-quotes': theme('colors.white'),
+                        '--tw-prose-invert-quote-borders': theme('colors.white'),
+                        '--tw-prose-invert-captions': theme('colors.white'),
+                        '--tw-prose-invert-code': theme('colors.white'),
+                        '--tw-prose-invert-pre-code': theme('colors.white'),
+                        '--tw-prose-invert-pre-bg': theme('colors.black'),
+                        '--tw-prose-invert-th-borders': theme('colors.white'),
+                        '--tw-prose-invert-td-borders': theme('colors.white')
+                    }
+                }
+            }),
         },
         // Breakpoints
         screens: {
@@ -165,7 +203,7 @@ module.exports = {
         textDecorationColor: { // defaults to theme => theme('colors')
             'white': '#fff',
             'black': '#000',
-        },
+        }
     },
     plugins: [
         require('@tailwindcss/typography'),