Changed in-text font and slightly modified padding.

lostplaces/lostplaces_app/static/main.css

@@ -225,17 +225,13 @@
 
 .RV-BoxShadow {
   position: relative;
-  float: left;
-  width: 40%;
-  margin: 2em 10px 4em;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  float: left; }
   .RV-BoxShadow:before, .RV-BoxShadow:after {
     content: "";
     position: absolute;
     z-index: -2; }
   .RV-BoxShadow--simple {
-    box-shadow: 0 0 20px #6b5690; }
+    box-shadow: 0 0 10px #6b5690; }
   .RV-BoxShadow--raised:after {
     box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
   .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after {
@@ -428,12 +424,46 @@
   object-position: center; }
 
 @font-face {
-  font-family: Crimson;
-  src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
+  font-family: 'Crimson Text';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Crimson Text Italic"), local("CrimsonText-Italic"), url(fonts/Crimson/CrimsonText-Italic.ttf) format("truetype"); }
 
 @font-face {
-  font-family: Montserrat;
-  src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); }
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Crimson Text Regular"), local("CrimsonText-Regular"), url(fonts/Crimson/CrimsonText-Regular.ttf) format("truetype"); }
+
+@font-face {
+  font-family: 'Crimson Text';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Crimson Text Bold"), local("CrimsonText-Bold"), url(fonts/Crimson/CrimsonText-Bold.ttf) format("truetype"); }
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Montserrat Italic"), local("Montserrat-Italic"), url(fonts/Montserrat/Montserrat-Italic.ttf) format("truetype"); }
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Montserrat Regular"), local("Montserrat-Regular"), url(fonts/Montserrat/Montserrat-Regular.ttf) format("truetype"); }
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local("Montserrat Bold"), local("Montserrat-Bold"), url(fonts/Montserrat/Montserrat-Bold.ttf) format("truetype"); }
 
 html {
   height: 100%;
@@ -553,8 +583,8 @@ body {
 
 .LP-Paragraph {
   color: black;
-  font-family: Crimson, Times, serif;
-  font-size: 1.2rem;
+  font-family: "Crimson Text", Times, serif;
+  font-size: 1.4rem;
   padding: 0;
   margin: 0;
   margin-bottom: 0.75em; }
@@ -579,7 +609,8 @@ body {
   padding: 8px 14px;
   border-radius: 2px;
   font-weight: bold;
-  cursor: pointer; }
+  cursor: pointer;
+  white-space: nowrap; }
   .LP-Button:active {
     background-color: #76323F;
     color: #f9f9f9; }
@@ -605,19 +636,28 @@ body {
   flex-direction: column;
   margin-bottom: -30px;
   padding: 10px 0; }
-  .LP-Input .LP-Input__Field {
+  .LP-Input--tagging .LP-Button {
+    height: 53px; }
+  .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify {
+    min-height: 36px;
+    height: max-content;
+    font-family: Montserrat, Helvetica, sans-serif;
+    font-size: 1em;
+    padding: 0;
+    padding-left: 8px; }
+  .LP-Input .LP-Input__Field, .LP-Input .tagify {
     border: none;
     border-bottom: 1px solid #565656;
     padding: 8px 0;
     margin-bottom: 30px;
     width: 100%; }
-    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
+    .LP-Input .LP-Input__Field:focus, .LP-Input .tagify:focus, .LP-Input .LP-Input__Field:active, .LP-Input .tagify:active, .LP-Input .LP-Input__Field:invalid, .LP-Input .tagify:invalid, .LP-Input .LP-Input__Field--active, .LP-Input .tagify--focus {
       margin-bottom: 29px;
       border-bottom: 2px solid #76323F;
       background-color: #f9f9f9;
       border-radius: 3px 3px 0 0;
       box-shadow: none; }
-    .LP-Input .LP-Input__Field[type=submit] {
+    .LP-Input .LP-Input__Field[type=submit], .LP-Input .tagify[type=submit] {
       background-color: #C09F80;
       color: #565656;
       border: none;
@@ -625,7 +665,7 @@ body {
       border-radius: 2px;
       font-weight: bold;
       cursor: pointer; }
-      .LP-Input .LP-Input__Field[type=submit]:active {
+      .LP-Input .LP-Input__Field[type=submit]:active, .LP-Input .tagify[type=submit]:active {
         background-color: #76323F;
         color: #f9f9f9; }
   .LP-Input .LP-Input__Label {
@@ -641,22 +681,30 @@ body {
     position: relative;
     top: -30px;
     overflow: hidden; }
-  .LP-Input--error .LP-Input__Field {
+  .LP-Input--error .LP-Input__Field, .LP-Input--error .tagify {
     margin-bottom: 25px;
     border-bottom: 2px solid #76323F;
     margin-bottom: 29px; }
   .LP-Input--error .LP-Input__Message {
     color: #76323F; }
-  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled {
+  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .tagify,
+  .LP-Input--disabled .LP-Input__Field:disabled,
+  .LP-Input--disabled .tagify:disabled {
     background-color: transparent;
     border-bottom: 1px dashed #565656;
     cursor: not-allowed; }
-    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled {
+    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .tagify, label + .LP-Input--disabled .LP-Input__Field:disabled, label + .LP-Input--disabled .tagify:disabled {
       color: red; }
-    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active {
+    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .tagify:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .tagify:active,
+    .LP-Input--disabled .LP-Input__Field:disabled:focus,
+    .LP-Input--disabled .tagify:disabled:focus,
+    .LP-Input--disabled .LP-Input__Field:disabled:active,
+    .LP-Input--disabled .tagify:disabled:active {
       margin-bottom: 30px;
       border-radius: 0; }
-    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message {
+    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .tagify ~ .LP-Input__Message,
+    .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message,
+    .LP-Input--disabled .tagify:disabled ~ .LP-Input__Message {
       visibility: hidden; }
   .LP-Input--disabled .LP-Input__Label {
     color: #565656; }
@@ -675,12 +723,28 @@ body {
   width: auto;
   object-fit: contain; }
 
-.LP-Tag {
+.LP-Tag, .tagify__tag {
   padding: 8px 14px;
   background-color: #D7CEC7;
   border-radius: 2px;
-  width: max-content; }
-  .LP-Tag .LP-Paragraph {
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  height: min-content;
+  gap: 3px; }
+  .LP-Tag--multiRow {
+    flex-wrap: wrap; }
+  .LP-Tag--column {
+    display: flex;
+    flex-direction: column; }
+  .LP-Tag__Remove .RV-Iconized__Icon {
+    fill: #76323F; }
+    .LP-Tag__Remove .RV-Iconized__Icon:hover {
+      fill: #565656; }
+  .LP-Tag:hover, .tagify__tag:hover {
+    background-color: #bdbdbd; }
+  .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph {
     padding: 0;
     margin: 0;
     font-family: Montserrat, Helvetica, sans-serif;
@@ -791,8 +855,11 @@ body {
   .LP-Content {
     padding: 15px; } }
 
-.LP-TextSection .LP-Text {
+.LP-TextSection__Text {
   line-height: 1.4rem; }
+  .LP-TextSection__Text .LP-Link {
+    font-family: "Crimson Text", Times, serif;
+    margin: 0 3px; }
 
 .LP-PlaceTeaser {
   width: 280px; }
@@ -824,7 +891,7 @@ body {
       padding: 0px;
       margin: 0px; }
   .LP-PlaceTeaser .LP-PlaceTeaser__Description {
-    font-family: Roboto, Arial, sans-serif;
+    font-family: Montserrat, Helvetica, sans-serif;
     color: #565656;
     display: none; }
 
@@ -866,8 +933,8 @@ body {
   flex-wrap: wrap;
   padding: 0;
   margin: 0; }
-  .LP-TagList .LP-TagList__List .LP-TagList__Item {
-    margin: 6px; }
+  .LP-TagList .LP-TagList__List .LP-TagList__Item, .LP-TagList .LP-TagList__List .tagify__tag {
+    margin: 3px; }
 
 .LP-Menu {
   border-left: 1px solid #C09F80; }
@@ -1194,7 +1261,13 @@ body {
         .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
           background-color: inherit; }
 
-.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label {
+.LP-Form--tagging {
+  margin-top: 25px; }
+  .LP-Form--tagging div.LP-Form__Composition {
+    gap: 25px; }
+
+.LP-Form--inline .LP-Form__Legend,
+.LP-Form--inline .LP-Input__Label {
   display: none; }
 
 .LP-Form--inline .LP-Form__Button {
@@ -1203,6 +1276,12 @@ body {
   width: min-content;
   flex-basis: max-content; }
 
+.LP-Form--inline fieldset.LP-Form__Fieldset {
+  max-width: unset; }
+
+.LP-Form--inline div.LP-Form__Composition {
+  padding: 0; }
+
 @media (max-width: 450px) {
   .LP-Form:not(.LP-Form--inline) .LP-Form__Composition {
     flex-wrap: wrap; } }
@@ -1397,6 +1476,7 @@ body {
   width: 700px;
   max-height: 500px;
   box-shadow: 0 0 10px #565656;
+  box-shadow: 0 0 10px #565656;
   object-fit: cover;
   object-position: 0 0;
   margin: 0;
@@ -1415,3 +1495,125 @@ body {
     margin: 0;
     padding: 0;
     margin-bottom: 25px; } }
+
+.LP-TextSection .LP-UnorderedList {
+  font-family: "Crimson Text", Times, serif;
+  font-size: 1.4rem; }
+  .LP-TextSection .LP-UnorderedList li {
+    margin-bottom: 0.75em;
+    list-style-type: square;
+    margin-left: 2em;
+    padding-left: 1em; }
+
+.tagify {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap; }
+  .tagify + input,
+  .tagify + textarea {
+    display: none; }
+
+.tagify__tag {
+  background-color: #bdbdbd;
+  display: inline-flex;
+  cursor: default;
+  transition: .13s ease-out;
+  height: max-content;
+  align-items: center;
+  gap: 3px; }
+  .tagify__tag:hover {
+    background-color: #e9e9e9; }
+
+.tagify__input {
+  flex-grow: 1;
+  display: inline-block;
+  min-width: 110px;
+  margin: 5px;
+  line-height: inherit;
+  position: relative;
+  white-space: pre-wrap;
+  margin-left: 15px;
+  height: 1em; }
+
+.tagify__tag__removeBtn {
+  order: 5;
+  cursor: pointer;
+  font: 1.5em/1 Arial;
+  transition: .2s ease-out;
+  color: #76323F; }
+
+.tagify__tag__removeBtn::after {
+  content: "\00D7"; }
+
+.tagify__tag__removeBtn:hover {
+  color: #565656; }
+
+.tagify__tag__removeBtn:hover + div > span {
+  opacity: .5; }
+
+.tagify__tag__removeBtn:hover + div::before {
+  box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important;
+  box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important;
+  transition: .2s; }
+
+.tagify__tag--loading .tagify__tag__removeBtn {
+  display: none; }
+
+.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
+  display: none; }
+
+.tagify__dropdown {
+  position: absolute;
+  z-index: 9999;
+  transform: translateY(1px);
+  overflow: hidden; }
+
+.tagify__dropdown[placement=top] {
+  margin-top: 0;
+  transform: translateY(-100%); }
+
+.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
+  border-top-width: 1px;
+  border-bottom-width: 0; }
+
+.tagify__dropdown[position=text] {
+  box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
+  font-size: .9em; }
+
+.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
+  border-width: 1px; }
+
+.tagify__dropdown__wrapper {
+  max-height: 300px;
+  overflow: hidden;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  transition: 0.25s cubic-bezier(0, 1, 0.5, 1); }
+
+.tagify__dropdown__wrapper:hover {
+  overflow: auto; }
+
+.tagify__dropdown--initial .tagify__dropdown__wrapper {
+  max-height: 20px;
+  transform: translateY(-1em); }
+
+.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
+  transform: translateY(2em); }
+
+.tagify__dropdown__item {
+  box-sizing: inherit;
+  padding: .3em .5em;
+  margin: 1px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: relative;
+  outline: 0;
+  font-family: Montserrat, Helvetica, sans-serif; }
+
+.tagify__dropdown__item--active {
+  color: #f9f9f9;
+  background-color: gray; }
+
+.tagify__dropdown__item:active {
+  filter: brightness(105%); }

lostplaces/lostplaces_app/templates/flat/codex.html

@@ -5,13 +5,13 @@
 {% block maincontent %}
 
 <header class="LP-TextSection__Headline">
-    <h1 class="LP-Headline">Take nothing but pictures. Leave nothing but footprints</h1>
+    <h1 class="LP-Headline">Take nothing but pictures. Leave nothing but footprints.</h1>
 </header>
 
 <article class="LP-TextSection">
 
     <p>This should be pretty self-explanatory, right? But as you all know, every sign has a history. We have seen too much senseless destruction so we decided to write down a basic Urban Exploration codex.</p>
-    <ul>
+    <ul class="LP-UnorderedList">
         <li>
             <b>We respect other people's property</b>, just as we demand it from others. Therefore we do not open access by force, or damage a locking device. We only enter a property or a building / a facility / a ruin if we can assume that we am not there against the will of the owner. A well-preserved fence or a permanent guard indicates that the owner is still dealing with his property. Fences that have long since collapsed, ruins in the final stages of decay, are more likely to indicate that the owner doesn't care.
         </li>