[ADD] header WIP

main/static/main/css/styles.css

@@ -551,6 +551,40 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .static {
   position: static;
 }
@@ -560,10 +594,19 @@ video {
   margin-bottom: 10rem;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -572,6 +615,18 @@ video {
   display: flex;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
+.w-80 {
+  width: 20rem;
+}
+
+.w-36 {
+  width: 9rem;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -580,22 +635,82 @@ video {
   align-items: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-lightGreen {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 196 159 / var(--tw-bg-opacity));
+}
+
+.bg-purple {
+  --tw-bg-opacity: 1;
+  background-color: rgb(125 51 127 / var(--tw-bg-opacity));
+}
+
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity));
+}
+
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
 }
 
-.text-2xl {
+.btn-primary-spec {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.logo {
+  -webkit-clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
+          clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
 }

main/tailwind/.gitignore

 node_modules
-package-lock.json

main/tailwind/input.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+.btn-primary-spec {
+    @apply text-2xl;
+}
+
+
+.logo {
+    clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
+}

main/tailwind/package.json

@@ -3,7 +3,10 @@
   "version": "1.0.0",
   "description": "",
   "main": "tailwind.config.js",
-  "dependencies": {},
+  "dependencies": {
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16"
+  },
   "devDependencies": {
     "tailwindcss": "^3.1.8"
   },

main/tailwind/tailwind.config.js

 module.exports = {
-  content: ["../templates/**/*.html"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: ["../templates/**/*.html"],
+    theme: {
+        borderWidth: {
+            DEFAULT: '1px',
+            '0': '0',
+            '2': '2px',
+            '3': '3px',
+            '4': '4px',
+            '6': '6px',
+            '8': '8px',
+        },
+        extend: {
+            colors: {
+                lightGreen: '#4FC49F',
+                purple: '#7D337F'
+            },
+        },
+    },
+    plugins: [],
 }

main/templates/main/base.html

@@ -24,7 +24,9 @@
 </head>
 
 <body>
-{% block content %}{% endblock content %}
+{% include 'main/includes/layout/header.html' %}
+{% block content %}
+{% endblock content %}
 {% block scripts %}{% endblock scripts %}
 </body>
 </html>

main/templates/main/includes/layout/header.html

+{% load static %}
+<!-- Navbar -->
+<nav class="text-white bg-black transition duration-200">
+    <!-- Flex container -->
+    <div class="flex items-center justify-between">
+        <!-- Logo -->
+        <div class="logo flex bg-white px-12 w-80 h-16 my-8">
+            <img src="{% static "shared/img/logo-full-black.svg" %}" alt="Pirátská strana" class="w-36" />
+        </div>
+        <!-- Menu -->
+        <div class="flex space-x-6 uppercase gap-8">
+            <a href="#">Jak pracujeme</a>
+            <a href="#">Program</a>
+            <a href="#">O nás</a>
+            <a href="#">Naloď se</a>
+            <a href="#">Přispěj</a>
+            <a href="#">Kontakty</a>
+        </div>
+        <!-- Social & Related -->
+        <div>
+            <a href="">FB</a>
+            <a href="">TWITTER</a>
+            <a href="">INSTAGRAM</a>
+            <a href="#" class="px-12 py-3 bg-lightGreen mr-2">
+                Dary
+            </a>
+            <a href="#" class="px-12 py-3 text-blue-100 bg-purple mr-2">
+                Nalodění
+            </a>
+        </div>
+    </div>
+</nav>

shared/static/shared/img/logo-full-black.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172" height="55.25" viewBox="0 0 172 55.25">
+  <defs>
+    <path id="a" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#b)" d="M24.691 7.159c-5.866 0-11.384 2.289-15.542 6.438-4.147 4.149-6.435 9.669-6.435 15.535 0 5.876 2.287 11.396 6.435 15.539 4.158 4.147 9.675 6.429 15.542 6.429 5.87 0 11.384-2.281 15.531-6.429 4.158-4.144 6.44-9.663 6.44-15.539 0-5.866-2.282-11.386-6.44-15.535-4.146-4.15-9.66-6.438-15.531-6.438m0 41.857c-10.965 0-19.885-8.915-19.885-19.884 0-10.962 8.919-19.88 19.885-19.88 10.961 0 19.883 8.918 19.883 19.88.001 10.969-8.922 19.884-19.883 19.884"/>
+  <path clip-path="url(#b)" d="M18.068 16.063v-3.077h-1.921v3.552c-1.301.401-2.056.815-1.932 1.069.431-.118 1.115-.169 1.932-.121v18.495c-1.962 3.833.861 9.698.861 9.698s-2.124-6.299 2.6-9.272c4.337-2.732 19.302-1.451 19.246-9.894-.065-11.962-13.868-11.891-20.786-10.45m6.177 11.597c-.673 3.185-4.147 4.845-6.177 6.224V17.779c3.459.83 7.525 3.489 6.177 9.881M59.936 9.602c-1.753 0-3.416.112-4.987.344v16.436h4.42v-5.167c.393.042.884.066 1.474.066 2.222 0 3.912-.517 5.071-1.554 1.153-1.033 1.733-2.559 1.733-4.569 0-3.702-2.571-5.556-7.711-5.556m2.722 7.709c-.529.455-1.288.682-2.268.682-.379 0-.718-.021-1.021-.068v-4.804c.346-.079.688-.114 1.021-.114 2.04 0 3.061.794 3.061 2.38 0 .827-.264 1.474-.793 1.924"/>
+  <path d="M69.733 9.832h4.987v16.55h-4.987z"/>
+  <defs>
+    <path id="c" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="d">
+    <use xlink:href="#c" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#d)" d="M86.441 26.381h4.648l-1.63-4.536c-.272-.734-.561-1.307-.863-1.708-.3-.398-.682-.729-1.135-.986v-.045c.938-.348 1.704-.932 2.295-1.744.588-.819.885-1.704.885-2.654 0-3.401-2.269-5.104-6.805-5.104-1.967 0-3.933.114-5.897.342v16.435h4.423v-5.778h1.019c.423 0 .765.114 1.022.337.257.229.467.603.634 1.136l1.404 4.305zM83.61 17.31h-1.248v-4.188c.344-.078.761-.112 1.248-.112 1.658 0 2.494.717 2.494 2.153 0 .662-.225 1.186-.669 1.574-.449.383-1.058.573-1.825.573"/>
+  <path d="M97.507 23.208h4.603l.772 3.174h4.806l-5.441-16.553h-4.76l-5.441 16.553h4.714l.747-3.174zm2.29-9.523h.046l1.474 6.125h-2.993l1.473-6.125zM104.399 4.385h-4.988l-2.267 4.088h3.626M111.863 26.382h4.625v-12.81h4.487v-3.74H107.37v3.74h4.493"/>
+  <defs>
+    <path id="e" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="f">
+    <use xlink:href="#e" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#f)" d="M128.277 23.097c-.756 0-1.586-.152-2.482-.458-.898-.302-1.734-.717-2.506-1.24l-1.021 3.508c.668.486 1.555.893 2.668 1.215 1.109.327 2.148.486 3.117.486 2.309 0 4.041-.43 5.189-1.301 1.148-.87 1.725-2.133 1.725-3.798 0-1.377-.484-2.506-1.455-3.39-.965-.885-2.635-1.644-5.008-2.278-.982-.27-1.475-.726-1.475-1.36 0-.411.184-.735.547-.989.365-.249.898-.371 1.605-.371 1.574 0 3.125.38 4.65 1.13l.793-3.51c-1.541-.758-3.426-1.138-5.666-1.138-2.088 0-3.705.442-4.854 1.316-1.15.877-1.723 2.064-1.723 3.562 0 1.36.467 2.487 1.406 3.379.936.891 2.508 1.653 4.715 2.288 1.211.348 1.814.837 1.814 1.475.002.98-.679 1.474-2.039 1.474"/>
+  <path d="M151.451 9.832h-5.215l-4.265 7.029h-.043V9.832h-4.537v16.55h4.537v-7.708h.043l4.492 7.708h5.213l-5.44-8.616M164.762 4.385h-4.991l-2.269 4.088h3.631M162.607 9.832h-4.76l-5.445 16.55h4.715l.75-3.174h4.602l.771 3.174h4.809l-5.442-16.55zm-3.925 9.976l1.475-6.125h.045l1.475 6.125h-2.995z"/>
+  <g>
+    <defs>
+      <path id="g" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="h">
+      <use xlink:href="#g" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#h)" d="M60.617 38.221c-.982-.27-1.476-.726-1.476-1.36 0-.407.184-.733.545-.987.363-.249.901-.372 1.608-.372 1.575 0 3.122.378 4.651 1.129l.792-3.508c-1.541-.76-3.43-1.14-5.667-1.14-2.085 0-3.707.442-4.851 1.319-1.151.876-1.724 2.062-1.724 3.559 0 1.36.467 2.487 1.406 3.38.937.892 2.509 1.652 4.716 2.287 1.207.349 1.812.839 1.812 1.474 0 .986-.678 1.476-2.038 1.476-.756 0-1.583-.148-2.483-.456-.9-.304-1.735-.715-2.507-1.242l-1.019 3.509c.665.486 1.553.891 2.665 1.215 1.111.327 2.149.489 3.118.489 2.31 0 4.042-.432 5.19-1.303 1.15-.871 1.726-2.135 1.726-3.798 0-1.375-.485-2.507-1.454-3.392-.966-.888-2.638-1.642-5.01-2.279"/>
+  </g>
+  <path d="M68.483 35.953h4.495v12.81h4.625v-12.81h4.486v-3.74H68.483"/>
+  <g>
+    <defs>
+      <path id="i" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="j">
+      <use xlink:href="#i" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#j)" d="M95.178 42.517c-.304-.398-.684-.73-1.141-.984v-.046c.939-.345 1.703-.93 2.291-1.745.592-.816.885-1.701.885-2.652 0-3.403-2.266-5.104-6.801-5.104-1.967 0-3.929.113-5.896.345v16.435h4.422v-5.779h1.021c.422 0 .765.112 1.02.338.257.227.469.604.636 1.134l1.405 4.308h4.646l-1.631-4.537c-.27-.741-.559-1.312-.857-1.713m-3.17-3.4c-.44.388-1.051.576-1.824.576h-1.246v-4.192c.347-.08.762-.113 1.246-.113 1.662 0 2.497.717 2.497 2.152 0 .664-.224 1.192-.673 1.577"/>
+  </g>
+  <path d="M104.287 32.213l-5.439 16.55h4.713l.748-3.174h4.605l.772 3.174h4.8l-5.438-16.55h-4.761zm.838 9.975l1.475-6.123h.047l1.475 6.123h-2.997zM125.762 41.282h-.049l-4.942-9.071h-4.421v16.553h4.421v-9.073h.047l4.944 9.073h4.42V32.211h-4.42M137.484 32.213l-5.443 16.55h4.717l.75-3.174h4.596l.773 3.174h4.812l-5.441-16.55h-4.764zm.838 9.975l1.473-6.123h.043l1.475 6.123h-2.991z"/>
+</svg>