Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: Commander1024:f973dccd2789ec39866192c204b75229931e095f
Branches Tags
Commander1024:master Commander1024:linklist-add
...
compare: Commander1024:linklist-add
Branches Tags
Commander1024:master Commander1024:linklist-add

20 Commits
f973dccd27 ... linklist-a

Author SHA1 Message Date
reverend
313968fafd Form fine tuning and link list add 2020-08-21 12:08:51 +02:00
reverend
8fa8033be4 LinkList add LInk 2020-08-21 10:51:07 +02:00
Commander1024
b64724b586 Converted indentation to spaces globally. 2020-08-17 15:39:17 +02:00
reverend
e80e93bcaa Pagination disabled class 2020-08-16 20:56:34 +02:00
reverend
384cdcaae7 More Paginatoin Styling, responsive 2020-08-16 17:50:55 +02:00
reverend
427ce11adb Removed JS, using transition instead of animation for sidebar menu sliding 2020-08-16 17:22:08 +02:00
reverend
15b4bc7880 Padding fix 2020-08-16 12:26:10 +02:00
reverend
9ebfef6c6e Sidebar height fix 2020-08-16 11:56:21 +02:00
reverend
3f69ff8f0d No absolute icon paths 2020-08-16 11:42:13 +02:00
reverend
5f4b72f9be Sidebar animation is not triggered when loading page 2020-08-16 11:40:40 +02:00
reverend
57afcbdffb Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend 2020-08-16 10:31:01 +02:00
reverend
681cdad1cb Responsive Sidebarmenu 2020-08-16 10:30:55 +02:00
Commander1024
a613d9a069 Made inactive pag-items gray and non-hover. 2020-08-15 20:47:40 +02:00
Commander1024
fb72b00456 Aligned page numbers to the rest again. 2020-08-14 13:56:11 +02:00
Commander1024
3970aed176 Added beautiful navigation icons to pagination nav-css. 2020-08-14 13:41:27 +02:00
Commander1024
0eacea8243 Added fest/previous next/last again incl text for alignment. 2020-08-14 11:31:35 +02:00
Commander1024
14ea0910ef Added first/last pagination item. 2020-08-14 11:21:13 +02:00
reverend
0e3f005639 Using grid for master layout 2020-08-13 23:44:06 +02:00
reverend
fc0a96b167 Unbugged nav 2020-08-13 23:43:49 +02:00
reverend
8edcf77d44 Removed after content for prev/next 2020-08-13 23:43:34 +02:00
60 changed files with 1188 additions and 876 deletions
Expand all files Collapse all files

2
components/01_Atoms/input/_input.scss
View File

@@ -8,7 +8,7 @@
.LP-Input__Field{ .LP-Input__Field{
border: none; border: none;
border-bottom: 1px solid $-grey; border-bottom: 1px solid $-grey;
padding: 8px; padding: 8px 0;
margin-bottom: $-margin-bottom; margin-bottom: $-margin-bottom;
&:focus, &:active, &:invalid{ &:focus, &:active, &:invalid{

2
components/01_Atoms/input/input.hbs
View File

@@ -1,6 +1,6 @@
<div class="LP-Input LP-Input{{modifier}}"> <div class="LP-Input LP-Input{{modifier}}">
<label for="input123" class="LP-Input__Label">{{label}}</label> <label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}" <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}">
{{#if disabled}} {{#if disabled}}
disabled="disabled" disabled="disabled"
{{/if}} {{/if}}

10
components/01_Atoms/message/_message.scss
View File

@@ -13,14 +13,14 @@
&--error{ &--error{
.LP-Message__Icon{ .LP-Message__Icon{
background-color: invert(#fd6861); background-color: invert(#fd6861);
background-image: url('/icons/error.png'); background-image: url('icons/error.png');
} }
} }
&--warning{ &--warning{
.LP-Message__Icon{ .LP-Message__Icon{
background-color:invert(#ffb818); background-color:invert(#ffb818);
background-image: url('/icons/error.png'); background-image: url('icons/error.png');
} }
} }
@@ -28,21 +28,21 @@
&--info{ &--info{
.LP-Message__Icon{ .LP-Message__Icon{
background-color: invert(lightblue); background-color: invert(lightblue);
background-image: url('/icons/information.svg'); background-image: url('icons/information.svg');
} }
} }
&--success{ &--success{
.LP-Message__Icon{ .LP-Message__Icon{
background-color: invert(#96c800); background-color: invert(#96c800);
background-image: url('/icons/success.svg'); background-image: url('icons/success.svg');
} }
} }
&--debug{ &--debug{
.LP-Message__Icon{ .LP-Message__Icon{
background-color: invert(#fb95d0); background-color: invert(#fb95d0);
background-image: url('/icons/debug.png'); background-image: url('icons/debug.png');
} }
} }

62
components/01_Atoms/pagination/_pagination.scss
View File

@@ -9,16 +9,29 @@
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-left: 0;
padding-right: 0;
} }
.LP-Pagination__Item{ .LP-Pagination__Item{
margin: 0 4px; margin: 0 4px;
&--disabled{
color: rgb(182, 182, 182);
.LP-Link{
color: rgb(182, 182, 182);
cursor: default;
&:hover{
background-color: unset;
color: unset;
}
}
}
&--current{ &--current{
.LP-Link{ .LP-Link{
background-color: $-beige; background-color: $-beige;
border-radius: 2px;
&:hover{ &:hover{
background-color: $-beige; background-color: $-beige;
@@ -26,29 +39,54 @@
} }
} }
} }
} }
.LP-Link{ .LP-Link{
padding: 15px 25px; padding: 15px 20px;
vertical-align: sub;
border-radius: 2px;
&:active, &:hover{ &:active, &:hover{
background-color: $-beige; background-color: $-beige;
border-radius: 2px;
color: $-grey; color: $-grey;
} }
} }
.LP-Pagination__Previous{ .LP-Icon{
font-size: larger;
&:before{
content: "«";
}
} }
}
.LP-Pagination__Next{ @media(max-width: $-viewport-normal){
&:before{ .LP-Pagination{
content: "»"; .LP-Link{
padding: 10px 15px;
}
.LP-Pagination__Item--other{
.LP-Text{
display: none;
}
}
}
}
@media(max-width: $-viewport-small){
.LP-Pagination{
.LP-Pagination__Item{
margin: 0 1px;
.LP-Link{
padding: 13px 16px;
}
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Pagination{
.LP-Pagination__Item{
.LP-Link{
padding: 8px 11px;
}
} }
} }
} }

65
components/01_Atoms/pagination/pagination.hbs
View File

@@ -1,37 +1,54 @@
<div class="LP-Pagination"> <div class="LP-Pagination">
<ul class="LP-Pagination__List"> <ul class="LP-Pagination__List">
<li class="LP-Pagination__Item LP-Pagination__Item--previous"> <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
<a href="#" class="LP-Link"><span class="LP-Pagination__Previous"></span></a> <a href="#" class="LP-Link">
<span class="LP-Icon">⟪</span>
<span class="LP-Text">First</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--disabled LP-Pagination__Item--previous">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a> <a href="#" class="LP-Link">
<span class="LP-Icon">⟨</span>
<span class="LP-Text">Previous</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</span></a> <a href="#" class="LP-Link">
<span class="LP-Text">1</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a> <a href="#" class="LP-Link">
<span class="LP-Text">2</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a> <a href="#" class="LP-Link">
<span class="LP-Text">3</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current"> <li class="LP-Pagination__Item LP-Pagination__Item--current">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a> <a href="#" class="LP-Link">
<span class="LP-Text">4</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</span></a> <a href="#" class="LP-Link">
<span class="LP-Text">5</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</span></a> <a href="#" class="LP-Link">
<span class="LP-Text">Next</span>
<span class="LP-Icon">⟩</span>
</a>
</li> </li>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a> <a href="#" class="LP-Link">
</li> <span class="LP-Text">Last</span>
<li class="LP-Pagination__Item LP-Pagination__Item--number"> <span class="LP-Icon">⟫</span>
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
</li> </a>
<li class="LP-Pagination__Item LP-Pagination__Item--next">
<a href="#" class="LP-Link"><span class="LP-Pagination__Next"></span></a>
</li> </li>
</ul> </ul>
</div> </div>

1
components/02_Molecules/navigation/_navigation.scss
View File

@@ -34,7 +34,6 @@
border-left: none; border-left: none;
min-width: 60px; min-width: 60px;
background-color: $-almost-white; background-color: $-almost-white;
height: 100%;
padding-top: 25px; padding-top: 25px;
.LP-Menu__List{ .LP-Menu__List{

28
components/03_Organisms/form/_form.scss
View File

@@ -1,11 +1,20 @@
.LP-Form{ .LP-Form{
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&--inline{
padding: 0 10px;
.LP-Form__Fieldset{
.LP-Form__Composition{
gap: 10px;
}
}
}
.LP-Form__Fieldset{ .LP-Form__Fieldset{
border: none; border: none;
padding: 0;
margin: 0;
max-width: 1200px; max-width: 1200px;
min-width: $-viewport-medium; min-width: $-viewport-medium;
@@ -16,15 +25,21 @@
font-size: 21px; font-size: 21px;
} }
}
.LP-Form__Composition{ .LP-Form__Composition{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 30px;
&--buttons{
gap: 10px;
}
.LP-Form__Field{ .LP-Form__Field{
flex: 3 2 100px; flex: 3 2 100px;
padding: 6px 15px; padding: 6px 0;
&--wider{ &--wider{
flex: 5 2; flex: 5 2;
@@ -41,6 +56,10 @@
&--narrower{ &--narrower{
flex: 1 2; flex: 1 2;
} }
&--static{
flex: 0 0;
}
} }
&--buttons{ &--buttons{
@@ -64,7 +83,6 @@
} }
} }
} }
}
} }
@media(max-width: $-viewport-medium){ @media(max-width: $-viewport-medium){
@@ -88,7 +106,7 @@
} }
@media(max-width: $-viewport-extra-small){ @media(max-width: $-viewport-extra-small){
.LP-Form{ .LP-Form :not(.LP-Form--inline){
.LP-Form__Fieldset{ .LP-Form__Fieldset{
.LP-Form__Composition{ .LP-Form__Composition{
display: flex; display: flex;

13
components/03_Organisms/header/_header.scss
View File

@@ -6,6 +6,9 @@ $-logo-height: 45px;
justify-content: space-between; justify-content: space-between;
height: 60px; height: 60px;
box-shadow: 0 0 2px $-light-brown; box-shadow: 0 0 2px $-light-brown;
grid-area: header;
background-color: white;
padding-left: 25px;
&__Navigation{ &__Navigation{
flex-grow: 2; flex-grow: 2;
@@ -13,7 +16,6 @@ $-logo-height: 45px;
&__Logo { &__Logo {
height: $-logo-height; height: $-logo-height;
margin: 25px;
object-fit:cover; object-fit:cover;
max-height: 100%; max-height: 100%;
width: 225px; width: 225px;
@@ -58,3 +60,12 @@ $-logo-height: 45px;
width: 100%; width: 100%;
} }
} }
@media(max-width: $-viewport-toggle-sidebar){
.LP-Header{
padding-left: 60px;
width: calc(100% - 60px);
position: fixed;
z-index: 10;
}
}

31
components/03_Organisms/linkList/_linkList.scss
View File

@@ -9,6 +9,37 @@
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
width: calc(100% - 1px); width: calc(100% - 1px);
margin-top: 12px; margin-top: 12px;
position: relative;
&--add{
.LP-LinkList__AddTrigger{
display: none;
&:checked{
& ~ .LP-LinkList__AddPlaceHolder{
visibility: hidden;
}
& ~ .LP-LinkList__Add{
display: block;
}
}
}
.LP-LinkList__Add{
position: absolute;
top: 3px;
display: none;
width: 100%;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
}
}
.LP-Link{ .LP-Link{
$-link-padding: 1em; $-link-padding: 1em;

25
components/03_Organisms/linkList/linkList.hbs
View File

@@ -6,7 +6,10 @@
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized"> <li class="LP-LinkList__Item LP-LinkList__Item--add">
<input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
<label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
<span class="LP-Link LP-Link--iconized">
<div class="LP-Link__IconWrapper"> <div class="LP-Link__IconWrapper">
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" <svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
@@ -17,6 +20,24 @@
</g> </g>
</svg> </svg>
</div> </div>
<span class="LP-Text">Link hinzufügen</span></a></li> <span class="LP-Text">Link hinzufügen</span>
</span>
</label>
<span class="LP-LinkList__Add">
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<div class="LP-Form__Composition LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--static LP-Input">
<button class="LP-Button">Add</button>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
<input class="LP-Input__Field" type="url"/>
</div>
</div>
</div>
</fieldset>
</form>
</span>
</li>
</ul> </ul>
</div> </div>

2
components/03_Organisms/placeList/_placeList.scss
View File

@@ -21,7 +21,7 @@
.LP-PlaceList__Item{ .LP-PlaceList__Item{
max-width: 900px; max-width: 900px;
min-width: 450px; //min-width: 450px;
margin: 18px 0; margin: 18px 0;
} }
} }

6
components/05_Pages/place/place.hbs
View File

@@ -1,5 +1,7 @@
{{> @header}} <div class="LP-Wrapper__Site">
<div class="LP-Main"> {{> @header}}
<input id="toggle_sidebar" class="LP-Menu__Trigger" type="checkbox"/>
<label id="toggle_sidebar_label" for="toggle_sidebar" class="LP-Menu__TriggerLabel"></label>
<aside class="LP-Main__Sidebar"> <aside class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}} {{> @navigation modifier='--sidebar'}}
</aside> </aside>

101
components/main.scss
View File

@@ -26,11 +26,13 @@ $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
$-primary-serif-font: Crimson, Times, serif; $-primary-serif-font: Crimson, Times, serif;
$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif; $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
$-viewport-small: 650px;
$-viewport-extra-small: 450px; $-viewport-extra-small: 450px;
$-viewport-small: 650px;
$-viewport-medium: 750px; $-viewport-medium: 750px;
$-viewport-normal: 1000px; $-viewport-normal: 1000px;
$-viewport-toggle-sidebar: $-viewport-small;
$-sidebar-width: 250px; $-sidebar-width: 250px;
html{ html{
@@ -42,27 +44,28 @@ html{
body{ body{
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0;
} }
.LP-Main{ .LP-Wrapper__Site{
display: table; display: grid;
flex-direction: row-reverse; grid-template-columns: $-sidebar-width 1fr;
height: calc(100% - 61px); grid-template-rows: auto 1fr;
width: 100%; grid-template-areas: "header header" "sidebar content";
margin: 0;
padding: 0;
min-height: 100vh;
}
.LP-Main__Content{ .LP-Main__Content{
display: table-cell;
width: calc(100% - 300px);
min-height: 1px; min-height: 1px;
padding: 25px; padding: 25px;
} grid-area: content;
}
.LP-Main__Sidebar{ .LP-Main__Sidebar{
display: table-cell; grid-area: sidebar;
width: $-sidebar-width; background-color: #f9f9f9;
flex-grow: 0;
height: 100%;
}
} }
.LP-Section{ .LP-Section{
@@ -75,6 +78,15 @@ body{
} }
} }
.LP-Menu__Trigger{
display: none;
}
@media(max-width: $-viewport-normal){
.LP-Wrapper__Site{
grid-template-columns: (0.75 * $-sidebar-width) 1fr;
}
}
@media(max-width: $-viewport-small){ @media(max-width: $-viewport-small){
.LP-Section{ .LP-Section{
@@ -86,6 +98,63 @@ body{
} }
} }
} }
@media(max-width: $-viewport-extra-small){
.LP-Main__Sidebar{
max-width: 100vw;
}
}
@media(max-width: $-viewport-toggle-sidebar){
.LP-Wrapper__Site{
grid-template-columns: 0 1fr;
}
.LP-Main__Sidebar{
grid-area:unset;
width: $-sidebar-width;
z-index: 15;
position: fixed;
left: -1 * $-sidebar-width - 1;
height: 100vh;
top: 60px;
border-right: 1px solid $-light-brown;
transition: left 0.3s;
&--hidden{
visibility: hidden;
}
}
#toggle_sidebar:checked ~ .LP-Main__Sidebar{
left: 0 ;
}
#toggle_sidebar ~ .LP-Main__Sidebar{
left: -1 * $-sidebar-width - 1;
}
.LP-Menu__TriggerLabel{
z-index: 20;
height: 60px;
width: 60px;
background-image: url('icons/hamburger_menu.svg');
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;
position: fixed;
}
.LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{
background-color: invert($-grey);
filter: invert(1);
}
.LP-Main__Content{
margin-top: 60px;
}
}
@import '01_Atoms/atoms'; @import '01_Atoms/atoms';
@import '02_Molecules/molecules'; @import '02_Molecules/molecules';
@import '03_Organisms/organisms'; @import '03_Organisms/organisms';

1
public/icons/hamburger_menu.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

211
public/main.css
View File

@@ -1,4 +1,3 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: Crimson; font-family: Crimson;
src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@@ -14,23 +13,26 @@ html {
body { body {
height: 100%; height: 100%;
margin: 0; } margin: 0;
padding: 0; }
.LP-Main { .LP-Wrapper__Site {
display: table; display: grid;
flex-direction: row-reverse; grid-template-columns: 250px 1fr;
height: calc(100% - 61px); grid-template-rows: auto 1fr;
width: 100%; } grid-template-areas: "header header" "sidebar content";
.LP-Main .LP-Main__Content { margin: 0;
display: table-cell; padding: 0;
width: calc(100% - 300px); min-height: 100vh; }
.LP-Main__Content {
min-height: 1px; min-height: 1px;
padding: 25px; } padding: 25px;
.LP-Main .LP-Main__Sidebar { grid-area: content; }
display: table-cell;
width: 250px; .LP-Main__Sidebar {
flex-grow: 0; grid-area: sidebar;
height: 100%; } background-color: #f9f9f9; }
.LP-Section { .LP-Section {
clear: both; clear: both;
@@ -39,6 +41,13 @@ body {
.LP-Section .LP-Headline { .LP-Section .LP-Headline {
margin-left: -25px; } margin-left: -25px; }
.LP-Menu__Trigger {
display: none; }
@media (max-width: 1000px) {
.LP-Wrapper__Site {
grid-template-columns: 187.5px 1fr; } }
@media (max-width: 650px) { @media (max-width: 650px) {
.LP-Section { .LP-Section {
padding-left: 0; padding-left: 0;
@@ -46,6 +55,44 @@ body {
.LP-Section .LP-Headline { .LP-Section .LP-Headline {
margin: 0; } } margin: 0; } }
@media (max-width: 450px) {
.LP-Main__Sidebar {
max-width: 100vw; } }
@media (max-width: 650px) {
.LP-Wrapper__Site {
grid-template-columns: 0 1fr; }
.LP-Main__Sidebar {
grid-area: unset;
width: 250px;
z-index: 15;
position: fixed;
left: -251px;
height: 100vh;
top: 60px;
border-right: 1px solid #C09F80;
transition: left 0.3s; }
.LP-Main__Sidebar--hidden {
visibility: hidden; }
#toggle_sidebar:checked ~ .LP-Main__Sidebar {
left: 0; }
#toggle_sidebar ~ .LP-Main__Sidebar {
left: -251px; }
.LP-Menu__TriggerLabel {
z-index: 20;
height: 60px;
width: 60px;
background-image: url("icons/hamburger_menu.svg");
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;
position: fixed; }
.LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel {
background-color: darkgray;
filter: invert(1); }
.LP-Main__Content {
margin-top: 60px; } }
.LP-Link { .LP-Link {
color: #565656; color: #565656;
text-decoration: none; text-decoration: none;
@@ -131,7 +178,7 @@ body {
.LP-Input .LP-Input__Field { .LP-Input .LP-Input__Field {
border: none; border: none;
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
padding: 8px; padding: 8px 0;
margin-bottom: 30px; } margin-bottom: 30px; }
.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 .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
margin-bottom: 29px; margin-bottom: 29px;
@@ -219,19 +266,19 @@ body {
overflow: hidden; } overflow: hidden; }
.LP-Message--error .LP-Message__Icon { .LP-Message--error .LP-Message__Icon {
background-color: #02979e; background-color: #02979e;
background-image: url("/icons/error.png"); } background-image: url("icons/error.png"); }
.LP-Message--warning .LP-Message__Icon { .LP-Message--warning .LP-Message__Icon {
background-color: #0047e7; background-color: #0047e7;
background-image: url("/icons/error.png"); } background-image: url("icons/error.png"); }
.LP-Message--info .LP-Message__Icon { .LP-Message--info .LP-Message__Icon {
background-color: #522719; background-color: #522719;
background-image: url("/icons/information.svg"); } background-image: url("icons/information.svg"); }
.LP-Message--success .LP-Message__Icon { .LP-Message--success .LP-Message__Icon {
background-color: #6937ff; background-color: #6937ff;
background-image: url("/icons/success.svg"); } background-image: url("icons/success.svg"); }
.LP-Message--debug .LP-Message__Icon { .LP-Message--debug .LP-Message__Icon {
background-color: #046a2f; background-color: #046a2f;
background-image: url("/icons/debug.png"); } background-image: url("icons/debug.png"); }
.LP-Message .LP-Message__Icon { .LP-Message .LP-Message__Icon {
background-size: 40px 40px; background-size: 40px 40px;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -259,25 +306,49 @@ body {
.LP-Pagination .LP-Pagination__List { .LP-Pagination .LP-Pagination__List {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; } flex-direction: row;
padding-left: 0;
padding-right: 0; }
.LP-Pagination .LP-Pagination__Item { .LP-Pagination .LP-Pagination__Item {
margin: 0 4px; } margin: 0 4px; }
.LP-Pagination .LP-Pagination__Item--disabled {
color: #b6b6b6; }
.LP-Pagination .LP-Pagination__Item--disabled .LP-Link {
color: #b6b6b6;
cursor: default; }
.LP-Pagination .LP-Pagination__Item--disabled .LP-Link:hover {
background-color: unset;
color: unset; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link { .LP-Pagination .LP-Pagination__Item--current .LP-Link {
background-color: #D7CEC7; background-color: #D7CEC7; }
border-radius: 2px; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link:hover { .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
background-color: #D7CEC7; background-color: #D7CEC7;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Link { .LP-Pagination .LP-Link {
padding: 15px 25px; } padding: 15px 20px;
vertical-align: sub;
border-radius: 2px; }
.LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover { .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
background-color: #D7CEC7; background-color: #D7CEC7;
border-radius: 2px;
color: #565656; } color: #565656; }
.LP-Pagination .LP-Pagination__Previous:before { .LP-Pagination .LP-Icon {
content: "«"; } font-size: larger; }
.LP-Pagination .LP-Pagination__Next:before {
content: "»"; } @media (max-width: 1000px) {
.LP-Pagination .LP-Link {
padding: 10px 15px; }
.LP-Pagination .LP-Pagination__Item--other .LP-Text {
display: none; } }
@media (max-width: 650px) {
.LP-Pagination .LP-Pagination__Item {
margin: 0 1px; }
.LP-Pagination .LP-Pagination__Item .LP-Link {
padding: 13px 16px; } }
@media (max-width: 450px) {
.LP-Pagination .LP-Pagination__Item .LP-Link {
padding: 8px 11px; } }
.LP-Content { .LP-Content {
padding: 35px; } padding: 35px; }
@@ -391,7 +462,6 @@ body {
border-left: none; border-left: none;
min-width: 60px; min-width: 60px;
background-color: #f9f9f9; background-color: #f9f9f9;
height: 100%;
padding-top: 25px; } padding-top: 25px; }
.LP-Menu--sidebar .LP-Menu__List { .LP-Menu--sidebar .LP-Menu__List {
flex-direction: column; } flex-direction: column; }
@@ -440,12 +510,14 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 60px; height: 60px;
box-shadow: 0 0 2px #C09F80; } box-shadow: 0 0 2px #C09F80;
grid-area: header;
background-color: white;
padding-left: 25px; }
.LP-Header__Navigation { .LP-Header__Navigation {
flex-grow: 2; } flex-grow: 2; }
.LP-Header__Logo { .LP-Header__Logo {
height: 45px; height: 45px;
margin: 25px;
object-fit: cover; object-fit: cover;
max-height: 100%; max-height: 100%;
width: 225px; width: 225px;
@@ -476,6 +548,13 @@ body {
.LP-Header__Navigation { .LP-Header__Navigation {
width: 100%; } } width: 100%; } }
@media (max-width: 650px) {
.LP-Header {
padding-left: 60px;
width: calc(100% - 60px);
position: fixed;
z-index: 10; } }
.LP-PlaceGrid .LP-PlaceGrid__Grid { .LP-PlaceGrid .LP-PlaceGrid__Grid {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -499,7 +578,6 @@ body {
border-left: 2px #565656 solid; } border-left: 2px #565656 solid; }
.LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item { .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
max-width: 900px; max-width: 900px;
min-width: 450px;
margin: 18px 0; } margin: 18px 0; }
.LP-PlaceList .LP-Pagination { .LP-PlaceList .LP-Pagination {
@@ -514,7 +592,24 @@ body {
.LP-LinkList__List .LP-LinkList__Item { .LP-LinkList__List .LP-LinkList__Item {
border-left: 1px solid #C09F80; border-left: 1px solid #C09F80;
width: calc(100% - 1px); width: calc(100% - 1px);
margin-top: 12px; } margin-top: 12px;
position: relative; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
display: none; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
visibility: hidden; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
display: block; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
position: absolute;
top: 3px;
display: none;
width: 100%; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
min-width: unset; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
display: block;
min-width: 0px; }
.LP-LinkList__List .LP-LinkList__Item .LP-Link { .LP-LinkList__List .LP-LinkList__Item .LP-Link {
padding: 1em 0 1em 1em; padding: 1em 0 1em 1em;
width: calc(100% - 1em); width: calc(100% - 1em);
@@ -566,11 +661,16 @@ body {
background-color: inherit; } background-color: inherit; }
.LP-Form { .LP-Form {
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; } align-items: center; }
.LP-Form--inline {
padding: 0 10px; }
.LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
gap: 10px; }
.LP-Form .LP-Form__Fieldset { .LP-Form .LP-Form__Fieldset {
border: none; border: none;
padding: 0;
margin: 0;
max-width: 1200px; max-width: 1200px;
min-width: 750px; } min-width: 750px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend { .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
@@ -578,30 +678,35 @@ body {
padding: 0; padding: 0;
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-size: 21px; } font-size: 21px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition { .LP-Form .LP-Form__Composition {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between;
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { gap: 30px; }
.LP-Form .LP-Form__Composition--buttons {
gap: 10px; }
.LP-Form .LP-Form__Composition .LP-Form__Field {
flex: 3 2 100px; flex: 3 2 100px;
padding: 6px 15px; } padding: 6px 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { .LP-Form .LP-Form__Composition .LP-Form__Field--wider {
flex: 5 2; } flex: 5 2; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { .LP-Form .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 2; } flex: 4 2; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { .LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 1; } flex: 2 1; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { .LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 2; } flex: 1 2; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons { .LP-Form .LP-Form__Composition .LP-Form__Field--static {
flex: 0 0; }
.LP-Form .LP-Form__Composition--buttons {
justify-content: flex-end; } justify-content: flex-end; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { .LP-Form .LP-Form__Composition .LP-Form__Button {
flex-grow: 0; flex-grow: 0;
padding-left: 0; padding-left: 0;
min-width: 130px; } min-width: 130px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link { .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
display: contents; } display: contents; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph { .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
color: #565656; } color: #565656; }
@@ -616,16 +721,16 @@ body {
justify-content: space-between; } } justify-content: space-between; } }
@media (max-width: 450px) { @media (max-width: 450px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition { .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; } justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) { .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px; } padding: 12px 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
padding: 0 15px; } padding: 0 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons { .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
justify-content: flex-end; } } justify-content: flex-end; } }
.LP-ImageGrid .LP-ImageGrid__List { .LP-ImageGrid .LP-ImageGrid__List {