added content container
This commit is contained in:
parent
aa13ce4698
commit
638bf4cb59
|
@ -27,16 +27,29 @@
|
||||||
}
|
}
|
||||||
/* The side navigation menu */
|
/* The side navigation menu */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: var(--sidebar-size);
|
width: var(--sidebar-size);
|
||||||
background-color: var(--color-tertiary);
|
background-color: var(--color-tertiary);
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
z-index: 999999;
|
z-index: 999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
margin-left: calc(var(--sidebar-size) + 40px);
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-dashboard {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Sidebar links */
|
/* Sidebar links */
|
||||||
.sidebar a {
|
.sidebar a {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -46,7 +59,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active/current link */
|
/* Active/current link */
|
||||||
.sidebar .active > .icon{
|
.sidebar .active > .icon {
|
||||||
background-color: var(--button-color-active);
|
background-color: var(--button-color-active);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
@ -92,14 +105,19 @@ div.content {
|
||||||
height: 1000px;
|
height: 1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
@media screen and (max-width: 1150px) {
|
||||||
@media screen and (max-width: 700px) {
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: -700px;
|
left: -1150px;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
div.content {
|
div.content {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding: 1px 16px;
|
padding: 1px 16px;
|
||||||
|
@ -116,6 +134,13 @@ div.content {
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-button {
|
||||||
|
display: inline;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
|
|
Loading…
Reference in New Issue