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

Compare commits

base: Commander1024:ad17e48049bbfea462d74e2c7af2f7131d9ee226
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:6f3fb3850f5a3c84f74034ba664b2f594d6cf8e8
Branches Tags
Commander1024:master
Commander1024:linklist-add

4 Commits
ad17e48049 ... 6f3fb3850f

Author SHA1 Message Date
reverend
6f3fb3850f Minor improvements 2020-08-04 19:42:13 +02:00
reverend
8af6803dcc More stuff 2020-08-04 19:41:55 +02:00
reverend
19c7bc9442 fixes and first steps towards navigation on the side 2020-08-04 19:41:47 +02:00
reverend
862582c7ba Changed font of link 2020-08-04 19:40:55 +02:00
7 changed files with 112 additions and 35 deletions
Show Stats Expand all files Collapse all files

6
components/01_Atoms/link/_link.scss
View File

@ -1,13 +1,13 @@
.LP-Link {
color: $-grey;
text-decoration: none;
font-family: $-primary-sans-serif-accent-font;
font-family: $-primary-sans-serif-font;
&:hover {
color: $-light-brown;
}
.LP-Text{
font-family: $-primary-sans-serif-accent-font;
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
&:hover{
color: $-light-brown;
}

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

@ -1,9 +1,10 @@
.LP-Menu{
border-left: 1px solid $-light-brown;
.LP-Menu__List {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: space-around;
padding: 0;
margin: 0;
}
@ -11,7 +12,6 @@
.LP-Menu__Item {
padding: 15px 0;
margin: 0;
width: 100px;
text-align: center;
background-color: transparent;
}
@ -24,6 +24,24 @@
color: $-wine-red;
}
}
&--sidebar{
border: none;
min-width: 80px;
.LP-Menu__List{
flex-direction: column;
.LP-Menu__Item{
text-align: left;
border-left: 1px solid $-light-brown;
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
}
}
}
}
@media(max-width: $-viewport-medium){
@ -32,7 +50,11 @@
.LP-Menu__List{
display: flex;
flex-direction: row;
justify-content: flex-start
justify-content: flex-start;
.LP-Menu__Item{
flex: 1 1 auto;
}
}
}
}

10
components/02_Molecules/navigation/navigation.config.json
View File

@ -1,3 +1,11 @@
{
"title": "Navigation",
"variants": [
{
"name": "Sidebar",
"context":{
"modifier": "--sidebar"
}
}
]
}

2
components/02_Molecules/navigation/navigation.hbs
View File

@ -1,4 +1,4 @@
<nav class="LP-Menu">
<nav class="LP-Menu LP-Menu{{modifier}}">
<ul class="LP-Menu__List">
<li class="LP-Menu__Item">{{> @link text='Home'}}</li>
<li class="LP-Menu__Item">{{> @link text='About'}}</li>

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

@ -5,12 +5,17 @@
margin-bottom: 70px;
height: 60px;
&__Navigation{
flex-grow: 2;
}
&__Logo {
height: 60px;
margin: 25px;
object-fit:cover;
max-height: 100%;
overflow: hidden;
flex-shrink: 0;
.LP-Image{
height: 60px;
@ -18,6 +23,19 @@
}
}
.LP-Header__UserInformation{
margin-right: 3%;
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
white-space: nowrap;
}
.LP-Link{
margin: 0 3px;
padding: 4px 4px;
}
}
@media(max-width: $-viewport-medium){
.LP-Header__Logo{
width: 60px;

5
components/03_Organisms/header/header.hbs
View File

@ -2,6 +2,11 @@
<div class="LP-Header__Logo">
{{> @image source='/images/logo.png'}}
</div>
<div class="LP-Header__UserInformation">
<span class="LP-Paragraph">
Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
</span>
</div>
<div class="LP-Header__Navigation">
{{> @navigation}}
</div>

78
public/components.css
View File

@ -9,12 +9,12 @@
.LP-Link {
color: #565656;
text-decoration: none;
font-family: Roboto, Arial, sans-serif; }
font-family: Montserrat, Helvetica, sans-serif; }
.LP-Link:hover {
color: #C09F80; }
.LP-Link .LP-Text {
font-family: Roboto, Arial, sans-serif; }
.LP-Link .LP-Text:hover {
.LP-Link .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif; }
.LP-Link .LP-Paragraph:hover {
color: #C09F80; }
.LP-Link__IconWrapper {
@ -229,33 +229,45 @@
.LP-TagList .LP-TagList__List .LP-TagList__Item {
margin: 6px; }
.LP-Menu .LP-Menu__List {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0;
margin: 0; }
.LP-Menu .LP-Menu__Item {
padding: 15px 0;
margin: 0;
width: 100px;
text-align: center;
background-color: transparent; }
.LP-Menu .LP-Link__Text {
color: #565656;
font-weight: bold;
text-shadow: 0px 0px 20px white; }
.LP-Menu .LP-Link__Text:hover {
color: #76323F; }
.LP-Menu {
border-left: 1px solid #C09F80; }
.LP-Menu .LP-Menu__List {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 0;
margin: 0; }
.LP-Menu .LP-Menu__Item {
padding: 15px 0;
margin: 0;
text-align: center;
background-color: transparent; }
.LP-Menu .LP-Link__Text {
color: #565656;
font-weight: bold;
text-shadow: 0px 0px 20px white; }
.LP-Menu .LP-Link__Text:hover {
color: #76323F; }
.LP-Menu--sidebar {
border: none;
min-width: 80px; }
.LP-Menu--sidebar .LP-Menu__List {
flex-direction: column; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
text-align: left;
border-left: 1px solid #C09F80;
margin-bottom: 10px; }
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
margin-bottom: 0; }
@media (max-width: 750px) {
.LP-Menu .LP-Menu__List {
display: flex;
flex-direction: row;
justify-content: flex-start; } }
justify-content: flex-start; }
.LP-Menu .LP-Menu__List .LP-Menu__Item {
flex: 1 1 auto; } }
@media (max-width: 450px) {
.LP-Menu .LP-Menu__List {
@ -267,15 +279,27 @@
justify-content: space-between;
margin-bottom: 70px;
height: 60px; }
.LP-Header__Navigation {
flex-grow: 2; }
.LP-Header__Logo {
height: 60px;
margin: 25px;
object-fit: cover;
max-height: 100%;
overflow: hidden; }
overflow: hidden;
flex-shrink: 0; }
.LP-Header__Logo .LP-Image {
height: 60px; }
.LP-Header__UserInformation {
margin-right: 3%; }
.LP-Header__UserInformation .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif;
white-space: nowrap; }
.LP-Header__UserInformation .LP-Link {
margin: 0 3px;
padding: 4px 4px; }
@media (max-width: 750px) {
.LP-Header__Logo {
width: 60px; }