uniweb: Switch to Pirate template

62fc7fba · jan.bednarik · 2768bdd9 · 62fc7fba · 62fc7fba · 2768bdd9
Commit 62fc7fba authored 4 years ago by jan.bednarik
--- a/shared/image_formats.py
+++ b/shared/image_formats.py
+from wagtail.images.formats import Format, register_image_format
+register_image_format(
+    Format(
+        "tailwind_center_800",
+        "šablona: Uprostřed 800px",
+        "mx-auto my-6",
+        "max-800x800",
+    )
+)
+register_image_format(
+    Format(
+        "tailwind_left_400",
+        "šablona: Vlevo 400px",
+        "float-left mr-4 mb-6",
+        "max-400x400",
+    )
+)
+register_image_format(
+    Format(
+        "tailwind_right_400",
+        "šablona: Vpravo 400px",
+        "float-right ml-4 mb-6",
+        "max-400x400",
+    )
+)
--- a/uniweb/models.py
+++ b/uniweb/models.py
@@ -16,6 +16,7 @@ from wagtailmetadata.models import MetadataPageMixin
 from tuning import help
 RICH_TEXT_FEATURES = [
+    "h2",
    "h3",
    "h4",
    "h5",

--- a/uniweb/static/uniweb/assets/css/icons.css
+++ b/uniweb/static/uniweb/assets/css/icons.css
-@font-face {
-  font-family: 'icomoon';
-  src:  url('../../icons/icomoon.eot?qfo5nx');
-  src:  url('../../icons/icomoon.eot?qfo5nx#iefix') format('embedded-opentype'),
-    url('../../icons/icomoon.ttf?qfo5nx') format('truetype'),
-    url('../../icons/icomoon.woff?qfo5nx') format('woff'),
-    url('../../icons/icomoon.svg?qfo5nx#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-i {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.icon-heart:before {
-  content: "\f004";
-}
-.icon-linkedin:before {
-  content: "\f08c";
-}
-.icon-twitter:before {
-  content: "\f099";
-}
-.icon-youtube:before {
-  content: "\f167";
-}
-.icon-instagram:before {
-  content: "\f16d";
-}
-.icon-flickr:before {
-  content: "\f16e";
-}
-.icon-facebook-f:before {
-  content: "\f39e";
-}
-.icon-check:before {
-  content: "\f00c";
-}
-.icon-chevron-left:before {
-  content: "\f053";
-}
-.icon-chevron-right:before {
-  content: "\f054";
-}
-.icon-external-link:before {
-  content: "\f08e";
-}
-.icon-calendar:before {
-  content: "\f133";
-}
--- a/uniweb/static/uniweb/assets/css/pattern-scaffolding.css
+++ b/uniweb/static/uniweb/assets/css/pattern-scaffolding.css
+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+  -webkit-box-sizing: border-box !important;
+          box-sizing: border-box !important;
+  max-width: 100%;
+  padding: 0 0.5em;
+}
+.demo-animate {
+  background: #ddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.sg-colors {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.sg-colors li {
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+  padding: 0.3em;
+  margin: 0 0.5em 0.5em 0;
+  min-width: 5em;
+  max-width: 14em;
+  border: 1px solid #ddd;
+  border-radius: 0;
+}
+.sg-swatch {
+  display: block;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0;
+}
+.sg-label {
+  font-size: 1rem;
+}
+.sg-pattern-example {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+}
+.sg-pattern-head .sg-pattern-title a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+  color: #202020 !important;
+}
+.sg-pattern-category-title a {
+  font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 3.5rem !important;
+}
--- a/uniweb/static/uniweb/assets/css/style.css
+++ b/uniweb/static/uniweb/assets/css/style.css
-/*
-*
-* Custom styling for Piráti donate website
-* Author: Daniel Hlavacek
-* Author's website: https://danielhlavacek.cz/
-*
-*/
-/* GENERAL */
-body {
-  font-size: 16px;
-  /*padding-top: 79px;*/
-  font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-a:hover {
-  color: #757575;
-}
-/* HEADINGS */
-h1, h1.lead {
-  font-size: 3.6rem;
-}
-h2, h2.lead {
-  font-size: 2.8rem;
-}
-h3, h3.lead {
-  font-size: 2.1rem;
-}
-h4, h4.lead {
-  font-size: 1.65rem;
-}
-h5, h5.lead {
-  font-size: 1.3rem;
-}
-h6, h6.lead {
-  font-size: 1rem;
-}
-@media screen and (max-width: 500px) {
-  h1, h1.lead {
-    font-size: 3rem;
-  }
-  h2, h2.lead {
-    font-size: 2.4rem;
-  }
-  h3, h3.lead {
-    font-size: 1.85rem;
-  }
-  h4, h4.lead {
-    font-size: 1.4rem;
-  }
-  h5, h5.lead {
-    font-size: 1.2rem;
-  }
-  h6, h6.lead {
-    font-size: 1rem;
-  }
-}
-h1.lead, h2.lead, h3.lead, h4.lead, h5.lead, h6.lead {
-  font-family: "Bebas Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  line-height: 1;
-  text-transform: uppercase;
-}
-h1.homepage-heading {
-  font-size: 6rem;
-}
-h1.heading {
-  font-size: 4rem;
-}
-h2.page-subheading {
-  font-size: 4rem;
-}
-h3.page-subheading {
-  font-size: 3.8rem;
-}
-@media screen and (max-width: 1200px) {
-  h1.homepage-heading {
-    font-size: 5.4rem;
-  }
-  h1.heading {
-    font-size: 4rem;
-  }
-  h2.page-subheading {
-    font-size: 4rem;
-  }
-  h3.page-subheading {
-    font-size: 3.6rem;
-  }
-}
-@media screen and (max-width: 991px) {
-  h1.homepage-heading {
-    font-size: 4.4rem;
-  }
-  h1.heading {
-    font-size: 3.7rem;
-  }
-  h2.page-subheading {
-    font-size: 3.7rem;
-  }
-  h3.page-subheading {
-    font-size: 3.2rem;
-  }
-}
-@media screen and (max-width: 440px) {
-  h1.homepage-heading {
-    font-size: 3.8rem;
-  }
-  h1.heading {
-    font-size: 3.4rem;
-  }
-  h2.page-subheading {
-    font-size: 3.4rem;
-  }
-  h3.page-subheading {
-    font-size: 3rem;
-  }
-}
-@media screen and (max-width: 370px) {
-  h1.homepage-heading {
-    font-size: 3.6rem;
-  }
-  h2.page-subheading {
-    font-size: 3rem;
-  }
-  h3.page-subheading {
-    font-size: 2.6rem;
-  }
-}
-@media screen and (max-width: 330px) {
-  h1.homepage-heading {
-    font-size: 3rem;
-  }
-  h2.page-subheading {
-    font-size: 2.8rem;
-  }
-  h3.page-subheading {
-    font-size: 2.3rem;
-  }
-}
-/* BUTTONS */
-.btn-dark {
-  background: #000000;
-}
-.btn-light {
-  background: #CCCCCC;
-}
-.btn-dark:hover, .btn-light:hover {
-  background: #222222;
-  color: #FFFFFF;
-}
-.btn {
-  border-radius: 0;
-  padding: 0.7rem 1.6rem;
-}
-.btn {
-  font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-.btn-lg {
-  border-radius: 0;
-  padding: 0.7rem 3rem;
-}
-/* TOOLS AND FIXES */
-.lazyload, .lazyloading {
-  opacity: 0;
-}
-.lazyloaded {
-  opacity: 1;
-  transition: opacity .5s;
-}
-/* SECTIONS */
-.section--primary {
-  background: #ffffff;
-  color: #000000;
-}
-.section--alternate {
-  background: #f7f7f7;
-  color: #000000;
-}
-.section--black {
-  background: #000000;
-  color: #ffffff;
-}
-/* SECTION SIZING */
-section {
-  padding: 4rem 0rem;
-}
-.section--lead {
-  padding: 6rem 0rem;
-}
-.section--no-bottom-padding {
-  padding-bottom: 0rem;
-}
-.section--form {
-  padding-top: 2rem;
-}
-@media screen and (max-width: 991px) {
-  section {
-    padding: 3.5rem 0rem;
-  }
-  .section--lead {
-    padding: 4rem 0rem;
-  }
-}
-@media screen and (max-width: 768px) {
-  section {
-    padding: 3rem 0rem;
-  }
-  .section--lead {
-    padding: 3.5rem 0rem;
-  }
-}
-@media screen and (max-width: 575px) {
-  section {
-    padding: 2.5rem 0rem;
-  }
-  .section--lead {
-    padding: 3rem 0rem;
-  }
-}
-/* HEADER */
-.navbar {
-  background: #212121;
-}
-@media screen and (max-width: 991.99px) {
-  .navbar {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 1030;
-  }
-  main {
-    margin-top: 90px;
-  }
-}
-.navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-.navbar-dark .navbar-nav .nav-link {
-	color: rgba(255,255,255);
-}
-.navbar-dark .navbar-toggler {
-  color: #ffffff;
-  border: none;
-  margin-right: -1rem;
-}
-.nav-link {
-  display: block;
-  padding: .5rem 1rem;
-  text-transform: uppercase;
-  font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1.2rem;
-}
-.navbar-brand {
-  font-family: "Bebas Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 2.2rem;
-  text-transform: uppercase;
-}
-@media screen and (max-width: 420px) {
-  .navbar-brand {
-    font-size: 2rem;
-  }
-}
-@media screen and (max-width: 390px) {
-  .navbar-brand {
-    font-size: 1.8rem;
-  }
-}
-@media screen and (max-width: 350px) {
-  .navbar-brand {
-    font-size: 1.6rem;
-  }
-}
-.brand-wrapper {
-  height: 90px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.brand-wrapper img {
-  width: 160px;
-}
-@media screen and (max-width: 575px) {
-  .brand-wrapper {
-    height: 74px;
-  }
-  .brand-wrapper img {
-    width: 150px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .navbar-expand-xl .navbar-nav .nav-link {
-    padding-right: 0.8rem;
-    padding-left: 0.8rem;
-  }
-}
-@media screen and (min-width: 576px) and (max-width: 1199.99px) {
-  .navbar .navbar-collapse .navbar-nav {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-}
-.header__socials {
-  display: flex;
-  margin-left: -0.5rem;
-}
-.header__socials a {
-  padding: 0.5rem;
-}
-.header__socials a i {
-	font-size: 1rem;
-	color: white;
-}
-.header__socials.header__socials--mobile {
-  margin-left: -0.7rem;
-  padding-top: 0.4rem;
-}
-.header__socials.header__socials--mobile a {
-  padding: 0.7rem;
-}
-.header__socials.header__socials--mobile a i {
-  font-size: 1.3rem;
-  color: rgba(255,255,255,.5);
-}
-.header_link.header_link--desktop {
-	color: white;
-}
-.header_link.header_link--mobile {
-	color: rgba(255,255,255,.5);
-}
-/*--/ Hamburger Navbar /--*/
-.navbar-toggler {
-  position: relative;
-}
-.navbar-toggler:focus,
-.navbar-toggler:active {
-  outline: 0;
-}
-.navbar-toggler span {
-  display: block;
-  background-color: #ffffff;
-  height: 2px;
-  width: 30px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  -webkit-transform: rotate(0deg);
-  transform: rotate(0deg);
-  left: 0;
-  opacity: 1;
-}
-.navbar-toggler span:nth-child(1),
-.navbar-toggler span:nth-child(3) {
-  transition: -webkit-transform .35s ease-in-out;
-  transition: transform .35s ease-in-out;
-  transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
-}
-.navbar-toggler:not(.collapsed) span:nth-child(1) {
-  position: absolute;
-  left: 12px;
-  top: 10px;
-  -webkit-transform: rotate(135deg);
-  transform: rotate(135deg);
-  opacity: 0.9;
-}
-.navbar-toggler:not(.collapsed) span:nth-child(2) {
-  height: 12px;
-  visibility: hidden;
-  background-color: transparent;
-}
-.navbar-toggler:not(.collapsed) span:nth-child(3) {
-  position: absolute;
-  left: 12px;
-  top: 10px;
-  -webkit-transform: rotate(-135deg);
-  transform: rotate(-135deg);
-  opacity: 0.9;
-}
-/* FOOTER */
-.footer__top {
-  background: #212121;
-}
-.footer__bottom {
-  background: #000000;
-}
-footer {
-  color: #8a8a8a;
-}
-footer a {
-  color: #8a8a8a;
-}
-footer a:hover {
-  color: #ffffff;
-  text-decoration: none;
-}
-footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
-  color: #ffffff;
-}
-.footer__top {
-  padding: 4rem 0rem;
-}
-@media screen and (max-width: 991px) {
-  .footer__top {
-    padding: 3.5rem 0rem;
-  }
-}
-@media screen and (max-width: 768px) {
-  .footer__top {
-    padding: 3rem 0rem;
-  }
-}
-@media screen and (max-width: 575px) {
-  .footer__top {
-    padding: 2.5rem 0rem;
-  }
-}
-.footer__bottom {
-  padding: 2rem 0rem;
-}
-.footer__bottom a {
-  border-bottom: 1px dotted;
-}
-.footer__bottom a:hover {
-  border-bottom: none;
-  text-decoration: none;
-  color: #8a8a8a;
-}
-.footer__list-heading {
-  text-transform: uppercase;
-  margin-bottom: 1.6rem;
-}
-.footer__menu {
-  padding-left: 0;
-  list-style: none;
-}
-.footer__menu li {
-  padding: 0.15rem 0;
-}
-.footer__logo img {
-  width: 180px;
-}
-/* UVOD */
-.uvod__image-wrapper {
-  max-width: 180px;
-  display: inline-block;
-}
-.uvod__button {
-  margin-right: 2rem;
-}
-/* PROJEKTY */
-.project {
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  border-radius: 0;
-  border: 0;
-  height: 100%;
-  color: black;
-  transition: all 0.5s ease-in-out;
-}
-.project:hover {
-  text-decoration: none;
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, 0.73);
-  color: black;
-}
-.project:hover .card-img-top {
-  opacity: 0.9;
-}
-.project .card-footer {
-  border-radius: 0;
-  border: 0;
-}
-.card-footer .text-muted {
-  color: #707070 !important;
-}
-.project .card-img, .project .card-img-top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-.project .card-body h5 {
-	font-weight: bold;
-}
-.project .card-body p:last-child {
-	margin-bottom: 0;
-}
-.project .card-body p {
-	color: #797676;
-}
-.project .card-footer p {
-  margin-bottom: 0;
-}
-.project .progress-bar {
-  background-color: #04a548;
-}
-.project .progress {
-  margin-bottom: 0.8rem;
-}
-.project__flags {
-	position: absolute;
-	top: 0;
-	margin-bottom: 0;
-	z-index: 1;
-	left: -0.25rem;
-	display: flex;
-	flex-direction: column;
-  align-items: flex-start;
-  list-style: none;
-  padding-left: 0;
-}
-.project__flag {
-	margin-top: .5rem;
-	color: #fff;
-	background: #2fb5d2;
-  padding: .25rem .6rem;
-  font-weight: bold;
-}
-.project__flag.almost {
-  background: #04a548;
-}
-.project__flag.new {
-  background: #04a548;
-}
-.project-images {
-  margin-right: -7.5px;
-  margin-left: -7.5px;
-}
-.project-images > div{
-  padding-right: 7.5px;
-  padding-left: 7.5px;
-  margin-bottom: 15px;
-}
-.project-donate-form .progress-bar {
-  background-color: #04a548;
-}
-/* KRAJE */
-.region {
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  border-radius: 0;
-  border: 0;
-  height: 100%;
-  color: black;
-  transition: all 0.5s ease-in-out;
-}
-.region:hover {
-  text-decoration: none;
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, 0.73);
-  color: black;
-}
-.region:hover .card-img-top {
-  opacity: 0.9;
-}
-.region .card-img, .region .card-img-top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-.region .card-body h5 {
-	font-weight: bold;
-}
-.region .card-body p:last-child {
-	margin-bottom: 0;
-}
-.region .card-body p {
-	color: #797676;
-}
-/* DONATE FORM */
-.donate-form {
-  display: flex;
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-}
-.donate-form__left {
-  background: #090A0B;
-  color: white;
-  padding: 1.8rem;
-  flex: 0 0 auto;
-  justify-content: space-between;
-  display: flex;
-  flex-direction: column;
-}
-.donate-form__icon {
-  max-width: 7rem;
-  margin-bottom: 4rem;
-}
-.donate-form__right {
-  width: 100%;
-  padding: 1.8rem;
-}
-.custom-control-input:checked ~ .custom-control-label::before {
-	color: #fff;
-	border-color: #d02d40;
-	background-color: #d02d40;
-}
-.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-	color: #fff;
-	background-color: #b3ffd1;
-	border-color: #b3ffd1;
-}
-.custom-control-input:focus ~ .custom-control-label::before {
-	box-shadow: 0 0 0 .2rem rgba(0, 255, 147, 0.25);
-}
-.custom-control-label {
-    line-height: 1.2;
-    padding-top: .7rem;
-}
-.custom-control-label::after {
-	top: .5rem;
-	left: -2.5rem;
-	width: 2rem;
-	height: 2rem;
-}
-.custom-control-label::before {
-	top: .5rem;
-	left: -2.5rem;
-	width: 2rem;
-	height: 2rem;
-}
-.custom-control-input {
-	width: 2rem;
-	height: 2.5rem;
-}
-.custom-control {
-	min-height: 2.5rem;
-	padding-left: 2.5rem;
-}
-.input-group-lg > .form-control,
-.input-group-lg > .input-group-append > .input-group-text {
-	border-radius: 0;
-}
-.form-control-lg {
-	border-radius: 0;
-}
-.form-control:focus {
-	border-color: #28a745;
-	box-shadow: 0 0 0 .2rem rgba(43, 174, 70, 0.25);
-}
-@media screen and (min-width: 1200px) {
-  .donate-form__left {
-    width: 16rem;
-  }
-}
-@media screen and (max-width: 991px) {
-  .donate-form {
-    flex-direction: column;
-  }
-  .donate-form__left {
-    flex-direction: row;
-    align-items: center;
-  }
-  .donate-form__icon {
-    max-width: 2.5rem;
-    margin-bottom: 0rem;
-    order: 1;
-    margin-left: 1.8rem;
-  }
-  .donate-form__left-content {
-    order: 0;
-  }
-}
-.donate-form .custom-amount {
-  max-width: 15rem;
-}
-/* REGION DONATE FORM */
-.region-donate-form {
-  display: flex;
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  flex-direction: column;
-}
-.region-donate-form__left {
-  background: #090A0B;
-  color: white;
-  padding: 1.8rem;
-  flex: 0 0 auto;
-  justify-content: space-between;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.region-donate-form__icon {
-  max-width: 2.5rem;
-  margin-bottom: 0rem;
-  order: 1;
-  margin-left: 1.8rem;
-}
-.region-donate-form__right {
-  width: 100%;
-  padding: 1.8rem;
-}
-/* PROJECT DONATE FORM */
-.project-donate-form {
-  display: flex;
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  flex-direction: column;
-}
-.project-donate-form__left {
-  background: #090A0B;
-  color: white;
-  padding: 1.8rem;
-  flex: 0 0 auto;
-  justify-content: space-between;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.project-donate-form__icon {
-  max-width: 2.5rem;
-  margin-bottom: 0rem;
-  order: 1;
-  margin-left: 1.8rem;
-}
-.project-donate-form__right {
-  width: 100%;
-  padding: 1.8rem;
-}
-/* FOOTER */
-.socials {
-  display: flex;
-  margin-left: -0.8rem;
-}
-.socials a {
-  padding: 0.8rem;
-}
-.socials a:last-child {
-  margin-right: 0;
-}
-.socials a i {
-  font-size: 1.4rem;
-  color: white;
-}
-/* PAGINATION */
-.page-link {
-  padding: .8rem 1.1rem;
-  color: #333;
-  background-color: #f3f3f3;
-  border: 1px solid #f3f3f3;
-  font-weight: bold;
-}
-.page-link:hover {
-  color: #333;
-  background-color: #e9ecef;
-  border-color: #e9ecef;
-}
-.page-link:focus {
-  box-shadow: 0 0 0 .2rem rgba(168, 168, 168, 0.25);
-}
-.page-item {
-  margin-right: 0.5rem;
-}
-.page-item:last-child {
-  margin-right: 0;
-}
-.page-item.active .page-link {
-  color: #fff;
-  background-color: #333;
-  border-color: #333;
-}
-.page-item:first-child .page-link {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.page-item:last-child .page-link {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-/* PROJECT */
-.project__header {
-  padding: 4rem 0 2rem 0;
-}
-.project__date {
-  margin-bottom: 0;
-  color: #707070;
-}
-.project__badges .badge {
-  font-size: 1rem;
-  background: white;
-  border-radius: 0;
-  padding: 0.8rem 1.3rem;
-  font-weight: bold;
-}
-.badge.almost {
-  background: #04a548;
-  color: white;
-}
-.badge.new {
-  background: #e1242a;
-  color: white;
-}
-/* SHARING BOX */
-.article__sharing-box {
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  border: none;
-  border-radius: 0;
-}
-.article__sharing-box h3 {
-  margin-bottom: 0;
-}
-.article__sharing-box .icon i {
-  font-size: 2.4rem;
-}
-.article__sharing-box .icon {
-  margin-bottom: 2.8rem;
-}
-.article__sharing-box .card-body {
-  padding: 2rem;
-  margin-bottom: 1rem;
-}
-.btn-facebook {
-  color: #fff;
-  background-color: #3b5998;
-  border-color: #3b5998;
-}
-.btn-twitter {
-  color: #fff;
-  background-color: #55acee;
-  border-color: #55acee;
-}
-.btn-linkedin {
-  color: #fff;
-  background-color: #007bb5;
-  border-color: #007bb5;
-}
-.btn-facebook:hover {
-  color: #fff;
-  background-color: #253860;
-  border-color: #253860;
-}
-.btn-twitter:hover {
-  color: #fff;
-  background-color: #448cc4;
-  border-color: #448cc4;
-}
-.btn-linkedin:hover {
-  color: #fff;
-  background-color: #006291;
-  border-color: #006291;
-}
-.sharing-buttons {
-  display: flex;
-  justify-content: space-between;
-}
-.sharing-buttons a {
-  flex: 1;
-  margin-right: 8px;
-  padding: .375rem .75rem;
-}
-.sharing-buttons a:last-child {
-  margin-right: 0;
-}
-.sharing-box__content {
-  margin-bottom: 0.6rem;
-}
-@media screen and (max-width: 991px) {
-  .article__sharing-box .card-body {
-    padding: 1.8rem;
-    margin-bottom: 0;
-  }
-  .article__sharing-box .image {
-    display: none;
-  }
-  .sharing-box__content {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-  .article__sharing-box .icon {
-    margin-bottom: 0;
-    margin-right: 1.2rem;
-  }
-}
-/* REGION */
-.region__header {
-  padding: 4rem 0 2rem 0;
-}
-.other-regions a {
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  margin-bottom: 1rem;
-  color: black;
-  padding: 0.8rem 1rem;
-  display: block;
-  font-weight: bold;
-}
-/* ARTICLE CONTENT */
-article img {
-  max-width: 100%;
-  height: auto;
-  margin-top: 1rem;
-  margin-bottom: 3rem;
-}
-/* REGION MAP */
-.region-map {
-    overflow: hidden;
-}
-.region-map svg {
-    position: relative;
-    top: -0.734375px;
-}
-.region-map path {
-  stroke-linejoin: round;
-  cursor: pointer;
-  fill: #333333;
-  stroke: #666666;
-}
-.region-map a:hover path {
-  fill: #000000;
-}
-.region-list {
-    padding: 0;
-}
-.region-list li {
-    list-style-type: none;
-}
-.region-list a {
-  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
-  margin-bottom: 1rem;
-  color: black;
-  padding: 0.6rem 1rem;
-  display: block;
-  font-weight: bold;
-}
-/* FORM TWEAKS */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type=number] {
-  -moz-appearance: textfield;
-}
-/* VARIOUS */
-img.full-width {
-  width: 100%;
-  height: auto;
-}
-.btn-danger {
-  background-color: #d02d40;
-}
-.btn-wide {
-  width: 250px;
-}
-.richtext i {
-  font-family: inherit !important;
-  font-style: italic;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  font-variant: inherit;
-  text-transform: inherit;
-}
-.richtext blockquote {
-  font-style: italic;
-  padding: 0 1rem 0 1rem;
-  font-size: 115%;
-  border-left: 2px solid #BBBBBB;
-  color: #666666;
-}
-.richtext-image.left {
-  float: left;
-  margin: 0 1.5rem 1rem 0;
-}
-.richtext-image.right {
-  float: right;
-  margin: 0 0 1rem 1.5rem;
-}
-.richtext ol, .richtext ul {
-  padding-left: 0;
-  margin-left: 0;
-}
-.richtext ol li, .richtext ul li {
-  position: relative;
-  left: 2.5rem;
-  padding-right: 2.5rem;
-}
--- a/uniweb/static/uniweb/assets/css/styles.css
+++ b/uniweb/static/uniweb/assets/css/styles.css
--- a/uniweb/static/uniweb/assets/fonts/pirati-ui.eot
+++ b/uniweb/static/uniweb/assets/fonts/pirati-ui.eot
--- a/uniweb/static/uniweb/assets/fonts/pirati-ui.svg
+++ b/uniweb/static/uniweb/assets/fonts/pirati-ui.svg
--- a/uniweb/static/uniweb/assets/fonts/pirati-ui.ttf
+++ b/uniweb/static/uniweb/assets/fonts/pirati-ui.ttf
--- a/uniweb/static/uniweb/assets/fonts/pirati-ui.woff
+++ b/uniweb/static/uniweb/assets/fonts/pirati-ui.woff
--- a/uniweb/static/uniweb/assets/images/logo-round-white.svg
+++ b/uniweb/static/uniweb/assets/images/logo-round-white.svg
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 20.217 20.156" width="20.217pt" height="20.156pt"><defs><clipPath id="_clipPath_tR3ALwD3k6PT9ZS47lNZPyjlLQOtvovj"><rect width="20.217" height="20.156"/></clipPath></defs><g clip-path="url(#_clipPath_tR3ALwD3k6PT9ZS47lNZPyjlLQOtvovj)"><path d=" M 10.081 19.222 C 5.04 19.214 0.96 15.123 0.965 10.083 C 0.97 5.042 5.059 0.959 10.1 0.962 C 15.14 0.965 19.225 5.051 19.225 10.092 C 19.214 15.135 15.124 19.219 10.081 19.222 M 17.242 2.97 C 13.848 -0.384 8.558 -0.878 4.603 1.791 C 0.647 4.46 -0.877 9.549 0.963 13.953 C 2.802 18.356 7.493 20.849 12.172 19.911 C 16.85 18.973 20.217 14.864 20.217 10.092 C 20.212 7.417 19.142 4.854 17.242 2.97" fill="rgb(255,255,255)"/><path d=" M 9.888 9.432 C 9.588 10.889 7.988 11.659 7.051 12.292 L 7.051 4.892 C 8.065 5.051 8.96 5.643 9.505 6.513 C 10.049 7.384 10.189 8.447 9.888 9.429 M 7.051 4.094 L 7.051 2.694 L 6.17 2.694 L 6.17 4.316 C 5.564 4.508 5.233 4.701 5.289 4.811 C 5.578 4.746 5.875 4.727 6.17 4.756 L 6.17 13.256 C 5.261 15.016 6.556 17.711 6.556 17.711 C 6.556 17.711 5.592 14.824 7.74 13.449 C 9.723 12.184 16.609 12.789 16.581 8.912 C 16.581 3.412 10.219 3.44 7.051 4.1" fill="rgb(255,255,255)"/></g></svg>
--- a/uniweb/static/uniweb/assets/images/logo.svg
+++ b/uniweb/static/uniweb/assets/images/logo.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="144.365" height="39.988" viewBox="0 0 144.365 39.988">
+  <g id="logo-flag-text-white" transform="translate(-288.3 -170.5)">
+    <g id="Group_11" data-name="Group 11" transform="translate(288.3 173.149)">
+      <path id="Path_17" data-name="Path 17" d="M306.944,211.307A16.912,16.912,0,1,1,323.856,194.4a16.936,16.936,0,0,1-16.912,16.912M320.189,181.2a18.571,18.571,0,1,0,5.5,13.194,18.794,18.794,0,0,0-5.5-13.194" transform="translate(-288.3 -175.7)" fill="#fff"/>
+      <path id="Path_18" data-name="Path 18" d="M316,197.98c-.56,2.7-3.515,4.126-5.247,5.3v-13.7c2.9.713,6.368,2.955,5.247,8.405M310.75,188.1v-2.6h-1.63v3.005c-1.121.357-1.732.713-1.63.917a5.119,5.119,0,0,1,1.63-.1v15.741c-1.681,3.26.713,8.252.713,8.252s-1.783-5.349,2.19-7.9c3.668-2.343,16.4-1.223,16.352-8.405,0-10.188-11.767-10.137-17.625-8.915" transform="translate(-297.709 -180.508)" fill="#fff"/>
+      <path id="Path_19" data-name="Path 19" d="M384.221,186.483a4.663,4.663,0,0,0,.866.051,2.758,2.758,0,0,0,1.936-.611,2.117,2.117,0,0,0,.662-1.681c0-1.375-.866-2.038-2.649-2.038a5.022,5.022,0,0,0-.866.1v4.177Zm0,2.853v4.432H380.4V179.606a29.174,29.174,0,0,1,4.279-.306c4.432,0,6.622,1.579,6.622,4.788a5.032,5.032,0,0,1-1.477,3.922,6.265,6.265,0,0,1-4.381,1.324,9.753,9.753,0,0,1-1.223,0" transform="translate(-333.484 -177.466)" fill="#fff"/>
+    </g>
+    <rect id="Rectangle_29" data-name="Rectangle 29" width="4.279" height="14.263" transform="translate(347.951 175.187)" fill="#fff"/>
+    <g id="Group_12" data-name="Group 12" transform="translate(355.032 174.983)">
+      <path id="Path_20" data-name="Path 20" d="M423.121,185.973h1.07a2.269,2.269,0,0,0,1.579-.509,1.639,1.639,0,0,0,.56-1.375q0-1.834-2.14-1.834a6.358,6.358,0,0,0-1.07.1Zm0,2.8v4.992H419.3V179.606a42.086,42.086,0,0,1,5.094-.306c3.922,0,5.858,1.477,5.858,4.381a3.871,3.871,0,0,1-.764,2.292A4.207,4.207,0,0,1,427.5,187.5v.051a2.646,2.646,0,0,1,.968.866,6.5,6.5,0,0,1,.764,1.477l1.426,3.922h-4.024l-1.223-3.719a1.949,1.949,0,0,0-.56-.968,1.2,1.2,0,0,0-.866-.306h-.866Z" transform="translate(-419.3 -179.3)" fill="#fff"/>
+    </g>
+    <path id="Path_21" data-name="Path 21" d="M448.551,183.8h2.6l-1.273-5.3h-.051Zm2.089-9.781h-3.107l1.936-3.515h4.279Zm-2.8,12.684-.662,2.751H443.1l4.687-14.263h4.126L456.6,189.45h-4.126l-.662-2.751Z" transform="translate(-75.944)" fill="#fff"/>
+    <path id="Path_22" data-name="Path 22" d="M480.816,179.7v3.209h-3.871v11.054h-3.973V182.909H469.1V179.7Z" transform="translate(-88.7 -4.513)" fill="#fff"/>
+    <g id="Group_13" data-name="Group 13" transform="translate(393.237 175.034)">
+      <path id="Path_23" data-name="Path 23" d="M504.233,183.373a8.828,8.828,0,0,0-4.024-.968,2.5,2.5,0,0,0-1.375.306,1,1,0,0,0-.458.866c0,.56.408.917,1.274,1.172a11.092,11.092,0,0,1,4.33,1.987,4.145,4.145,0,0,1-.2,6.164,7.27,7.27,0,0,1-4.483,1.121,10.863,10.863,0,0,1-2.7-.408,6,6,0,0,1-2.292-1.07l.866-3.005a8.413,8.413,0,0,0,2.14,1.07,6.866,6.866,0,0,0,2.139.408c1.172,0,1.783-.408,1.783-1.273,0-.56-.509-.968-1.579-1.274a10.417,10.417,0,0,1-4.075-1.987,3.808,3.808,0,0,1-1.223-2.9,3.719,3.719,0,0,1,1.477-3.056,6.681,6.681,0,0,1,4.177-1.121,10.873,10.873,0,0,1,4.89.968Z" transform="translate(-494.3 -179.4)" fill="#fff"/>
+    </g>
+    <path id="Path_24" data-name="Path 24" d="M523.722,185.762h.051l3.668-6.062h4.483l-4.483,6.826,4.687,7.437h-4.483l-3.872-6.622h-.051v6.622H519.8V179.7h3.922Z" transform="translate(-113.573 -4.513)" fill="#fff"/>
+    <path id="Path_25" data-name="Path 25" d="M550.651,183.8h2.6l-1.274-5.3h-.051Zm2.089-9.781h-3.107l1.936-3.515h4.279Zm-2.8,12.684-.662,2.751H545.2l4.687-14.263h4.126L558.7,189.45h-4.126l-.662-2.751Z" transform="translate(-126.034)" fill="#fff"/>
+    <g id="Group_14" data-name="Group 14" transform="translate(334.758 194.289)">
+      <path id="Path_26" data-name="Path 26" d="M389.433,221.173a8.828,8.828,0,0,0-4.024-.968,2.5,2.5,0,0,0-1.375.306,1,1,0,0,0-.458.866c0,.56.408.917,1.274,1.172a11.093,11.093,0,0,1,4.33,1.987,4.146,4.146,0,0,1-.2,6.164,7.27,7.27,0,0,1-4.483,1.121,10.866,10.866,0,0,1-2.7-.408,6.866,6.866,0,0,1-2.292-1.07l.866-3.005a8.414,8.414,0,0,0,2.139,1.07,6.867,6.867,0,0,0,2.14.408c1.172,0,1.783-.408,1.783-1.274,0-.56-.509-.968-1.579-1.273a10.419,10.419,0,0,1-4.075-1.987,3.808,3.808,0,0,1-1.223-2.9,3.719,3.719,0,0,1,1.477-3.056,6.681,6.681,0,0,1,4.177-1.121,10.874,10.874,0,0,1,4.89.968Z" transform="translate(-379.5 -217.2)" fill="#fff"/>
+    </g>
+    <path id="Path_27" data-name="Path 27" d="M415.016,217.6v3.209h-3.871v11.054h-3.973V220.809H403.3V217.6Z" transform="translate(-56.418 -23.107)" fill="#fff"/>
+    <g id="Group_15" data-name="Group 15" transform="translate(360.686 194.289)">
+      <path id="Path_28" data-name="Path 28" d="M434.221,223.822h1.07a2.269,2.269,0,0,0,1.579-.509,1.639,1.639,0,0,0,.56-1.375q0-1.834-2.14-1.834a6.36,6.36,0,0,0-1.07.1Zm0,2.853v4.992H430.4V217.506a42.1,42.1,0,0,1,5.094-.306c3.922,0,5.858,1.477,5.858,4.381a3.871,3.871,0,0,1-.764,2.292A4.207,4.207,0,0,1,438.6,225.4v.051a2.647,2.647,0,0,1,.968.866,6.5,6.5,0,0,1,.764,1.477l1.426,3.922h-4.024L436.513,228a1.949,1.949,0,0,0-.56-.968,1.2,1.2,0,0,0-.866-.306h-.866Z" transform="translate(-430.4 -217.2)" fill="#fff"/>
+    </g>
+    <path id="Path_29" data-name="Path 29" d="M460.051,226.158h2.6l-1.273-5.3h-.051Zm-.713,2.955-.662,2.751H454.6l4.687-14.263h4.126l4.687,14.263h-4.126l-.662-2.751Z" transform="translate(-81.586 -23.107)" fill="#fff"/>
+    <path id="Path_30" data-name="Path 30" d="M492.349,225.394h.051V217.6h3.821v14.263H492.4l-4.279-7.845h-.051v7.845H484.3V217.6h3.77Z" transform="translate(-96.157 -23.107)" fill="#fff"/>
+    <path id="Path_31" data-name="Path 31" d="M516.151,226.158h2.6l-1.274-5.3h-.051Zm-.713,2.955-.662,2.751H510.7l4.686-14.263h4.126l4.687,14.263h-4.126l-.662-2.751Z" transform="translate(-109.108 -23.107)" fill="#fff"/>
+  </g>
+</svg>
--- a/uniweb/static/uniweb/assets/js/main.bundle.js
+++ b/uniweb/static/uniweb/assets/js/main.bundle.js
--- a/uniweb/static/uniweb/assets/js/vue.2.6.11.js
+++ b/uniweb/static/uniweb/assets/js/vue.2.6.11.js
--- a/uniweb/static/uniweb/icons/icomoon.eot
+++ b/uniweb/static/uniweb/icons/icomoon.eot
--- a/uniweb/static/uniweb/icons/icomoon.svg
+++ b/uniweb/static/uniweb/icons/icomoon.svg
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="896" descent="-128" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
-<glyph unicode="&#xf004;" glyph-name="heart" d="M924.6 770.8c125.6-107.201 132.201-299.602 19.6-415.8l-387-399.6c-25-25.801-65.6-25.801-90.6 0l-387 399.6c-112.4 116.199-105.799 308.6 19.801 415.8 109.6 93.398 272.798 76.6 373.2-27.201l39.4-40.6 39.4 40.6c100.6 103.801 263.6 120.6 373.2 27.201z" />
-<glyph unicode="&#xf00c;" glyph-name="check" horiz-adv-x="896" d="M827.010 712.098c9.373 9.373 24.568 9.373 33.939 0l22.629-22.627c9.371-9.375 9.371-24.57 0-33.943l-599.626-599.624c-9.373-9.373-24.568-9.373-33.941 0l-237.588 237.588c-9.371 9.373-9.371 24.57 0 33.941l22.627 22.627c9.373 9.371 24.568 9.371 33.941 0l197.99-197.99z" />
-<glyph unicode="&#xf053;" glyph-name="chevron-left" horiz-adv-x="512" d="M476.95-55.070c-9.371-9.373-24.566-9.373-33.939-0.002l-422.102 422.1c-9.373 9.375-9.373 24.57 0 33.943l422.102 422.1c9.373 9.371 24.568 9.371 33.939 0l14.143-14.141c9.373-9.373 9.373-24.57 0-33.941l-390.986-390.988 390.986-390.988c9.373-9.373 9.373-24.57 0-33.941z" />
-<glyph unicode="&#xf054;" glyph-name="chevron-right" horiz-adv-x="512" d="M35.051 823.070c9.371 9.373 24.566 9.373 33.939 0l422.102-422.098c9.373-9.375 9.373-24.57 0-33.943l-422.102-422.1c-9.373-9.371-24.568-9.371-33.939 0l-14.143 14.141c-9.373 9.373-9.373 24.57 0 33.941l390.986 390.988-390.986 390.988c-9.373 9.373-9.373 24.57 0 33.941z" />
-<glyph unicode="&#xf08c;" glyph-name="linkedin" d="M832 832c35.199 0 64-29 64-64.6v-766.8c0-35.6-28.801-64.6-64-64.6h-768.2c-35.201 0-63.801 29-63.801 64.6v766.8c0 35.6 28.6 64.6 63.801 64.6h768.2zM270.8 64h0.199v427.6h-133v-427.6h132.801zM204.4 550c42.6 0 77 34.4 77 77 0 42.4-34.6 77-77 77-42.6 0-77-34.6-77-77s34.4-77 77-77zM768.6 64v234.4c0 115.199-25 203.798-159.4 203.798-64.6 0-108-35.398-125.799-69h-1.801v58.4h-127.4v-427.6h132.801v211.6c0 55.801 10.6 109.801 79.801 109.801 68 0 69-63.801 69-113.4v-208h132.799z" />
-<glyph unicode="&#xf08e;" glyph-name="external-link" d="M880 384c8.832 0 16-7.168 16-16v-400c0-52.992-43.008-96-96-96h-704c-52.992 0-96 43.008-96 96v704c0 52.992 43.008 96 96 96h400c8.832 0 16-7.168 16-16v-32c0-8.832-7.168-16-16-16h-400c-17.664 0-32-14.336-32-32v-704c0-17.664 14.336-32 32-32h704c17.664 0 32 14.336 32 32v400c0 8.832 7.168 16 16 16h32zM1000 896c13.248 0 24-10.752 24-24l-0.68-272.080c0-13.248-10.752-24-24-24h-20c-13.248 0-24 10.752-24 24l0.68 180-1.42 1.4-646.24-646.36c-3.883-3.898-11.498-7.061-17-7.061-5.5 0-13.117 3.162-17 7.061l-11.32 11.318c-3.896 3.883-7.059 11.5-7.059 17 0 5.502 3.162 13.117 7.059 17l646.38 646.3-1.4 1.42-180-0.68c-13.248 0-24 10.752-24 24v20c0 13.248 10.752 24 24 24z" />
-<glyph unicode="&#xf099;" glyph-name="twitter" d="M918.74 592.568c0.65-9.096 0.65-18.195 0.65-27.291 0-277.44-211.166-597.116-597.118-597.116-118.904 0-229.36 34.438-322.274 94.211 16.895-1.947 33.137-2.598 50.68-2.598 98.109 0 188.426 33.137 260.548 89.664-92.264 1.951-169.584 62.377-196.225 145.545 12.996-1.949 25.99-3.248 39.637-3.248 18.842 0 37.686 2.6 55.227 7.146-96.162 19.494-168.285 103.959-168.285 205.968v2.598c27.938-15.594 60.428-25.34 94.861-26.637-56.527 37.686-93.561 102.010-93.561 174.781 0 38.984 10.393 74.721 28.588 105.908 103.309-127.35 258.6-210.516 432.728-219.614-3.248 15.594-5.197 31.836-5.197 48.080 0 115.654 93.564 209.868 209.868 209.868 60.428 0 115.004-25.34 153.342-66.273 47.43 9.096 92.91 26.639 133.197 50.68-15.596-48.732-48.732-89.666-92.264-115.654 42.234 4.547 83.168 16.244 120.852 32.486-28.584-41.582-64.322-78.617-105.256-108.506z" />
-<glyph unicode="&#xf133;" glyph-name="calendar" horiz-adv-x="896" d="M800 768c53.020 0 96-42.98 96-96v-704c0-53.020-42.98-96-96-96h-704c-53.020 0-96 42.98-96 96v704c0 53.020 42.98 96 96 96h96v104c0 13.254 10.746 24 24 24h16c13.254 0 24-10.746 24-24v-104h384v104c0 13.254 10.746 24 24 24h16c13.254 0 24-10.746 24-24v-104h96zM96 704c-17.645 0-32-14.355-32-32v-96h768v96c0 17.645-14.355 32-32 32h-704zM800-64c17.645 0 32 14.355 32 32v544h-768v-544c0-17.645 14.355-32 32-32h704z" />
-<glyph unicode="&#xf167;" glyph-name="youtube" horiz-adv-x="1152" d="M1099.31 647.834c22.824-85.734 22.824-264.61 22.824-264.61s0-178.877-22.824-264.612c-12.563-47.299-49.574-83-96.568-95.641-85.182-22.973-426.742-22.973-426.742-22.973s-341.56 0-426.742 22.973c-46.994 12.641-84.006 48.342-96.568 95.641-22.824 85.734-22.824 264.612-22.824 264.612s0 178.875 22.824 264.61c12.563 47.301 49.574 84.551 96.568 97.193 85.182 22.973 426.742 22.973 426.742 22.973s341.562 0 426.742-22.973c46.994-12.641 84.006-49.893 96.568-97.193zM464.29 220.818l285.478 162.402-285.478 162.41v-324.812z" />
-<glyph unicode="&#xf16d;" glyph-name="instagram" d="M448.2 614c127.201 0 229.8-102.6 229.8-229.8s-102.6-229.798-229.8-229.798c-127.199 0-229.798 102.6-229.798 229.798 0 127.201 102.6 229.8 229.798 229.8zM448.2 234.8c82.201 0 149.4 67 149.4 149.398 0 82.4-67 149.4-149.4 149.4-82.398 0-149.398-67-149.398-149.4 0-82.398 67.199-149.398 149.398-149.398zM741 623.4c0-29.801-24-53.6-53.6-53.6-29.801 0-53.6 24-53.6 53.6s24 53.6 53.6 53.6 53.6-24 53.6-53.6zM893.2 569c4.201-74 4.201-295.6 0-369.6-3.6-71.801-20-135.4-72.398-187.801-52.4-52.6-116-69-187.801-72.4-74-4.199-295.8-4.199-369.8 0-71.799 3.602-135.199 20-187.799 72.4s-69 116-72.4 187.801c-4.199 74-4.199 295.798 0 369.798 3.6 71.801 19.801 135.4 72.4 187.801s116.199 68.801 187.799 72.199c74 4.201 295.8 4.201 369.8 0 71.801-3.6 135.4-20 187.801-72.398 52.6-52.4 69-116 72.398-187.801zM797.6 120c23.4 58.801 18 199 18 264.2s5.4 205.202-18 264.202c-15.799 39.4-46 69.6-85.199 85.199-58.801 23.201-199 18-264.202 18-65.199 0-205.2 5.4-264.2-18-39.4-15.799-69.6-46-85.199-85.199-23.201-58.801-18-199-18-264.202 0-65.199-5.4-205.2 18-264.2 15.799-39.4 46-69.6 85.199-85.199 58.801-23.201 199-18 264.2-18s205.202-5.4 264.202 18c39.4 15.799 69.6 46 85.199 85.199z" />
-<glyph unicode="&#xf16e;" glyph-name="flickr" d="M800 832c53 0 96-43 96-96v-704c0-53-43-96-96-96h-704c-53 0-96 43-96 96v704c0 53 43 96 96 96h704zM289 258c70.199 0 127 56.801 127 127s-56.801 127-127 127-127-56.801-127-127 56.801-127 127-127zM607 258c70.199 0 127 56.801 127 127s-56.801 127-127 127-127-56.801-127-127 56.801-127 127-127z" />
-<glyph unicode="&#xf39e;" glyph-name="facebook-f" horiz-adv-x="640" d="M558.28 320h-149.379v-448h-200.34v448h-162.781v185.32h162.781v141.24c0 160.68 95.719 249.44 242.16 249.44 70.139 0 143.5-12.52 143.5-12.52v-157.781h-80.84c-79.641 0-104.48-49.42-104.48-100.119v-120.26h177.82z" />
-</font></defs></svg>
--- a/uniweb/static/uniweb/icons/icomoon.ttf
+++ b/uniweb/static/uniweb/icons/icomoon.ttf
--- a/uniweb/static/uniweb/icons/icomoon.woff
+++ b/uniweb/static/uniweb/icons/icomoon.woff
--- a/uniweb/templates/uniweb/base.html
+++ b/uniweb/templates/uniweb/base.html
@@ -2,25 +2,9 @@
 <!doctype html>
 <html lang="cs">
 <head>
-  <!-- Font loader -->
-  <script type="text/javascript">
-    WebFontConfig = {
-      google: { families: ['Roboto+Condensed:300,300i,400,400i,700,700i:latin-ext', 'Bebas+Neue'] }
-    };
-    (function () {
-      var wf = document.createElement('script');
-      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-      wf.type = 'text/javascript';
-      wf.async = 'true';
-      var s = document.getElementsByTagName('script')[0];
-      s.parentNode.insertBefore(wf, s);
-    })();
-  </script>
  <!-- Meta -->
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width" />
  {% meta_tags %}
  {% if settings.MAJAK_ENV == "test" %}
    <meta name="robots" content="noindex, nofollow">
@@ -29,86 +13,129 @@
  <!-- Favicon -->
  {% include "shared/favicon_snippet.html" %}
-  <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="{% static "shared/vendor/bootstrap-4.4.1/css/bootstrap.min.css" %}">
-  <link rel="stylesheet" href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}">
  <!-- Styles -->
-  <link href="{% static "uniweb/assets/css/style.css" %}" rel="stylesheet">
+  <link href="{% static "uniweb/assets/css/styles.css" %}" rel="stylesheet" media="all" />
-  <link href="{% static "uniweb/assets/css/icons.css" %}" rel="stylesheet">
+  <link href="{% static "uniweb/assets/css/pattern-scaffolding.css" %}" rel="stylesheet" media="all" />
+  <link href="{% static "shared/vendor/fancybox/jquery.fancybox.min.css" %}" rel="stylesheet">
+  <style type="text/css">
+    .float-left {
+      float: left;
+    }
+    .float-right {
+      float: right;
+    }
+    .clearfix::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    .mx-auto {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  </style>
  {% if page.matomo_id %}
    {% include "shared/matomo_snippet.html" with matomo_id=page.matomo_id %}
  {% endif %}
 </head>
-<body id="top">
+<body>
-  <!-- HEADER -->
+  <nav class="navbar __js-root">
-  <div class="pre-navbar d-none d-lg-flex" style="background:black;">
+    <ui-app inline-template>
-    <div class="container d-flex justify-content-end">
+      <ui-navbar inline-template>
-      <a href="https://www.pirati.cz/" class="header_link header_link--desktop mr-4 py-2" target="_blank" rel="noreferrer"><i class="icon-external-link mr-2" title="Ikona odkazu"></i>www.pirati.cz</a>
+        <div>
-    </div>
+          <div class="container navbar__content max-w-screen-xl" :class="{'navbar__content--initialized': true}">
-  </div>
+            <div class="navbar__brand my-4 flex items-center lg:block lg:pr-8 lg:my-0">
+              <a href="/" class="no-underline hover:no-underline">
-  <nav class="navbar navbar-expand-xl navbar-dark">
+                <img src="{% static "uniweb/assets/images/logo-round-white.svg" %}" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-8" />
-    <div class="container">
+              </a>
+              <a href="/" class="no-underline hover:no-underline pt-1">
-      <div class="brand-wrapper">
+                <span class="lg:hidden pl-4 head-alt-base">{{ page.root_page.seo_title }}</span>
-        <a class="navbar-brand" href="/">
+              </a>
-          <h1 class="lead ml-1 mt-3" style="color: #FFFFFF; font-size: 3rem;">
+            </div>
-            <img src="{% static "shared/img/logo_white.svg" %}" alt="Logo Pirátské strany" style="width: 50px; height: 50px;" class="mr-2">
+            <div class="navbar__menutoggle my-4 lg:hidden flex justify-end">
-            {{ page.root_page.seo_title }}
+              <a href="#" @click="show = !show" class="no-underline hover:no-underline">
-          </h1>
+                <i class="ico--menu text-3xl"></i>
-        </a>
+              </a>
-      </div>
+            </div>
+            <div v-if="isLgScreenSize" class="lg:mt-4">
-      <!-- Mobile menu toggler -->
+              <a href="/" class="no-underline hover:no-underline">
-      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Otevřít menu">
+                <span class="head-alt-base lg:head-alt-md">{{ page.root_page.seo_title }}</span>
-        <span></span>
+              </a>
-        <span></span>
+            </div>
-        <span></span>
+            <div v-if="show || isLgScreenSize" class="my-4 lg:mb-0 flex justify-end">
-      </button>
+              <ul class="navbar-menu text-white">
+                {% for item in page.root_page.top_menu %}
-      <!-- Navigation -->
+                <li class="navbar-menu__item">
-      <div class="collapse navbar-collapse" id="mainNavigation">
+                  <a class="navbar-menu__link" href="{% pageurl item.value.page %}">{{ item.value.name }}</a>
-        <ul class="navbar-nav ml-auto">
+                </li>
-          {% for item in page.root_page.top_menu %}
+                {% endfor %}
-          <li class="nav-item">
+              </ul>
-            <a class="nav-link" href="{% pageurl item.value.page %}">{{ item.value.name }}</a>
+            </div>
-          </li>
+          </div>
-          {% endfor %}
+        </div>
-        </ul>
+      </ui-navbar>
-        <a href="https://www.pirati.cz/" class="d-block d-lg-none mb-3 header_link header_link--mobile"  target="_blank" rel="noreferrer"><i class="icon-external-link mr-2" title="Ikona odkazu"></i>www.pirati.cz</a>
+    </ui-app>
-      </div><!-- /navigation -->
-    </div><!-- /container -->
  </nav>
-  <!-- /HEADER -->
+  <div class="container container--default py-4 lg:py-12">
  {% block content %}{% endblock %}
+  </div>
-  <!-- FOOTER -->
+  <footer class="footer bg-grey-700 text-white __js-root">
-  <footer id="kontakt">
+    <ui-app inline-template>
+      <div>
-    <div class="footer__bottom">
+        <div class="footer__main py-4 lg:py-16 container container--default">
-      <div class="container">
+          <section class="footer__brand">
-        <div class="row">
+            <a href="https://www.pirati.cz">
-          <div class="col-12 col-md-6 mb-3 mb-md-0">
+              <img src="{% static "uniweb/assets/images/logo.svg" %}" alt="logo pirátské strany" class="w-32 md:w-40 pb-6" />
-            <p class="mb-0">&copy; {% now "Y" %} Piráti. Všechna práva vyhlazena.<br/>Sdílejte a nechte ostatní sdílet za stejných podmínek.</p>
+            </a>
-          </div><!-- /column -->
+            <p class="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
-        </div><!-- /row -->
+            {% now "Y" %} Piráti. Všechna práva vyhlazena. Sdílejte a nechte ostatní sdílet za stejných podmínek.
-      </div><!-- /container -->
+            </p>
-    </div><!-- /footer_bottom -->
+          </section>
+          <section class="footer__social lg:text-right">
+            <div class="mb-4">
+              <div class="social-icon-group space-x-2 text-white pb-4">
+                <a href="https://www.pirati.cz" class="social-icon "><i class="ico--home"></i></a>
+                <a href="https://www.facebook.com/ceska.piratska.strana/" class="social-icon "><i class="ico--facebook"></i></a>
+                <a href="https://twitter.com/PiratskaStrana" class="social-icon "><i class="ico--twitter"></i></a>
+                <a href="https://www.youtube.com/user/CeskaPiratskaStrana" class="social-icon "><i class="ico--youtube"></i></a>
+                <a href="https://www.instagram.com/pirati.cz/" class="social-icon "><i class="ico--instagram"></i></a>
+                <a href="https://www.flickr.com/photos/pirati/" class="social-icon "><i class="ico--flickr"></i></a>
+              </div>
+            </div>
+            <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
+              <a href="https://dary.pirati.cz" class="btn btn--icon btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
+                <div class="btn__body-wrap">
+                  <div class="btn__body ">Přispěj</div>
+                  <div class="btn__icon ">
+                    <i class="ico--pig"></i>
+                  </div>
+                </div>
+              </a>
+              <a href="https://nalodeni.pirati.cz" class="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
+                <div class="btn__body-wrap">
+                  <div class="btn__body ">Naloď se</div>
+                  <div class="btn__icon ">
+                    <i class="ico--anchor"></i>
+                  </div>
+                </div>
+              </a>
+            </div>
+          </section>
+        </div>
+      </div>
+    </ui-app>
  </footer>
-  <!-- /FOOTER -->
-  <!-- JavaScript libraries -->
+  <script src="{% static "uniweb/assets/js/vue.2.6.11.js" %}"></script>
+  <script src="{% static "uniweb/assets/js/main.bundle.js" %}"></script>
  <script src="{% static "shared/vendor/jquery/jquery-3.4.1.min.js" %}"></script>
-  <script src="{% static "shared/vendor/bootstrap-4.4.1/js/bootstrap.min.js" %}"></script>
  <script src="{% static "shared/vendor/lazysizes/lazysizes.min.js" %}"></script>
  <script src="{% static "shared/vendor/fancybox/jquery.fancybox.min.js" %}"></script>
 </body>
 </html>
--- a/uniweb/templates/uniweb/snippet_sections.html
+++ b/uniweb/templates/uniweb/snippet_sections.html
 {% load wagtailcore_tags wagtailimages_tags %}
 {% for section in page.content %}
-<section class="section--{% cycle "alternate" "primary" %}">
+<section class="mb-8 lg:mb-16 clearfix">
-  <div class="container">
-    {% if section.value.title %}
+  {% if section.value.title %}
-      <h2 class="lead page-subheading mb-4">{{ section.value.title }}</h2>
+    <h1 class="head-alt-md md:head-alt-lg max-w-5xl mt-4 mb-6">{{ section.value.title }}</h1>
-    {% endif %}
+  {% endif %}
-    {% if section.block_type == "text_section" %}
+  {% if section.block_type == "text_section" %}
-    <div class="row">
+  <div class="content-block w-full my-4">
-      <div class="col-12 richtext">
+    {{ section.value.text|richtext }}
-        {{ section.value.text|richtext }}
+  </div>
-      </div>
+  {% endif %}
-    </div>
-    {% endif %}
-    {% if section.block_type == "gallery_section" %}
-    <div class="row about-images">
-      {% for picture in section.value.images %}
-        {% image picture width-2000 as img %}
-        {% image picture fill-300x200 as thumb %}
-        <div class="col-6 col-md-3 mb-4">
-          <a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ thumb.alt }}"></a>
-        </div>
-      {% endfor %}
-    </div>
-    {% endif %}
+  {% if section.block_type == "gallery_section" %}
+  <div class="content-block w-full my-6 grid grid-cols-4 gap-4">
+    {% for picture in section.value.images %}
+      {% image picture width-2000 as img %}
+      {% image picture fill-300x200 as thumb %}
+      <div>
+        <a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ thumb.alt }}"></a>
+      </div>
+    {% endfor %}
  </div>
+  {% endif %}
 </section>
 {% endfor %}