aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/index.css
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-05-08 16:44:10 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitffaed83e11abcfdad86e0d952b1ac8c506b48f48 (patch)
tree4ebe936906b4e11b7f584ea656e43bd94cf0c94e /vnext/src/index.css
parente1733e62f1e0daaead2882cd13b6379908b53658 (diff)
New layout WIP
Diffstat (limited to 'vnext/src/index.css')
-rw-r--r--vnext/src/index.css46
1 files changed, 15 insertions, 31 deletions
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 83a9a0e6..505298cc 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -3,6 +3,10 @@
--main-width: 1000px;
}
+* {
+ box-sizing: border-box;
+}
+
html,
body,
div,
@@ -89,7 +93,6 @@ hr {
grid-template-areas: "header" "content" "footer";
grid-template-columns: 100%;
grid-template-rows: auto 1fr auto;
- transition: margin-left 0.2s;
min-height: 100%;
max-height: 100%;
}
@@ -101,6 +104,7 @@ hr {
transition: transform 0.2s;
overflow-x: hidden;
}
+
.header--hidden {
transform: translateY(-100%);
}
@@ -114,25 +118,25 @@ hr {
}
#sidebar {
- display: none;
+ grid-area: footer;
+ display: flex;
+ flex-direction: row;
}
.nav_content {
padding: 10px;
}
-#wrapper {
+#content {
background: #fefdfe;
grid-area: content;
margin-top: 12px;
- overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
- transition: margin-left 0.4s;
}
#footer {
- grid-area: footer;
+ display: none;
background: #f8f8f8;
border-top: 1px solid #ccc;
color: #363636;
@@ -287,42 +291,22 @@ hr {
@media (--viewport-desktop) {
#app {
- grid-template-areas: "header header" "content content" "footer footer";
- grid-template-columns: 1fr 1fr;
- grid-template-rows: min-content minmax(min-content, 1fr) min-content;
+ grid-template-areas: "header header header header""moo footer content zoo";
+ grid-template-columns: auto 240px 760px auto;
+ grid-template-rows: auto 1fr;
}
#header_wrapper,
.footer_container {
margin: 0 auto;
width: var(--main-width);
}
- #wrapper {
- justify-self: center;
- width: var(--main-width);
- display: grid;
- grid-template-columns: 240px minmax(1fr, max-content);
- grid-template-rows: auto;
- grid-template-areas: "nav feed";
- }
.desktop {
display: block;
}
.mobile {
display: none;
}
- #content {
- grid-area: feed;
- width: 758px;
- min-height: 100vh;
- }
#sidebar {
- border: 0;
- display: block;
- grid-area: nav;
- top: inherit;
- left: inherit;
- z-index: inherit;
- overflow-x: inherit;
- width: 240px;
+ flex-direction: column;
}
-}
+} \ No newline at end of file