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

Using grid for master layout

Browse Source
This commit is contained in:
reverend
2020-08-13 23:44:06 +02:00
parent fc0a96b167
commit 0e3f005639
4 changed files with 47 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,8 @@ $-logo-height: 45px;
align-items: center;
justify-content: space-between;
height: 60px;
box-shadow: 0 0 2px $-light-brown;
box-shadow: 0 0 2px $-light-brown;
grid-area: header;
&__Navigation{
flex-grow: 2;

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

@@ -1,9 +1,9 @@
{{> @header}}
<div class="LP-Main">
<aside class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}}
</aside>
<main class="LP-Main__Content">
{{> @placedetail}}
</main>
<div class="LP-Wrapper__Site">
{{> @header}}
<aside class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}}
</aside>
<main class="LP-Main__Content">
{{> @placedetail}}
</main>
</div>

34
components/main.scss
View File

@@ -42,27 +42,27 @@ html{
body{
height: 100%;
margin: 0;
padding: 0;
}
.LP-Main{
display: table;
flex-direction: row-reverse;
height: calc(100% - 61px);
width: 100%;
.LP-Wrapper__Site{
display: grid;
grid-template-columns: $-sidebar-width 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "header header" "sidebar content";
margin: 0;
padding: 0;
}
.LP-Main__Content{
display: table-cell;
width: calc(100% - 300px);
min-height: 1px;
padding: 25px;
}
.LP-Main__Content{
min-height: 1px;
padding: 25px;
grid-area: content;
}
.LP-Main__Sidebar{
display: table-cell;
width: $-sidebar-width;
flex-grow: 0;
height: 100%;
}
.LP-Main__Sidebar{
grid-area: sidebar;
background-color: #f9f9f9;
}
.LP-Section{