aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/index.css
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2022-11-03 16:59:20 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:58 +0300
commite9f4a48efd06d539eaaebd75880d569d6d093d58 (patch)
treec30a0b1e514814d7445ba9cb693273faf545eeff /vnext/src/index.css
parent27d7faaac7adc1f254f565faf1ed2ddf57f8c91a (diff)
Switch back to grid layout
Diffstat (limited to 'vnext/src/index.css')
-rw-r--r--vnext/src/index.css93
1 files changed, 40 insertions, 53 deletions
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 14810bc2..1d9292a2 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -48,7 +48,7 @@ html,
body {
width: 100%;
height: 100%;
- overscroll-behavior-y: none;
+ overscroll-behavior: none;
}
body {
@@ -124,12 +124,21 @@ hr {
border: none;
}
+#app {
+ display: grid;
+ grid-template-columns: auto;
+ grid-template-rows: auto 1fr auto;
+ grid-template-areas:
+ "header"
+ "content"
+ "footer";
+}
+
#header {
+ grid-area: header;
background: var(--text-background-color);
border-bottom: 1px solid var(--border-color);
- z-index: 10;
- position: fixed;
- width: 100%;
+ position: sticky;
top: 0;
}
@@ -142,17 +151,16 @@ hr {
}
#sidebar {
- position: fixed;
+ grid-area: footer;
+ position: sticky;
bottom: 0;
- left: 0;
- width: 100%;
+ background: var(--text-background-color);
z-index: 10;
}
#sidebar_wrapper {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
+ display: inline-block;
+ width: 100%;
}
.nav_content {
@@ -160,8 +168,7 @@ hr {
}
#content {
- margin-top: 64px !important;
- padding-bottom: 64px;
+ grid-area: content;
}
.desktop {
@@ -190,20 +197,14 @@ hr {
}
#ctitle {
- display: flex;
- flex: 1;
- white-space: nowrap;
- overflow: hidden;
-}
-
-#ctitle a {
- border-bottom: 2px solid transparent;
- text-overflow: ellipsis;
- overflow: hidden;
+ padding: 24px;
}
#global {
display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ width: 100%;
}
.l {
@@ -211,13 +212,9 @@ hr {
flex-flow: row wrap;
}
-#global a,
-#ctitle a {
+#global > a {
display: flex;
align-items: center;
-}
-
-#global a {
color: var(--dimmed-link-color);
padding: 14px 16px;
}
@@ -231,7 +228,7 @@ hr {
vertical-align: middle;
}
-#sidebar_wrapper > a:hover {
+#global > a:hover {
background-color: var(--background-color);
border-top: 2px solid #ff339a;
cursor: pointer;
@@ -250,15 +247,11 @@ hr {
font-weight: 400;
}
-#global a,
-#ctitle a,
.l a,
.msg-button {
border-bottom: 2px solid transparent;
}
-#global a:hover,
-#ctitle a:hover,
.l a:hover,
.msg-button:hover {
background-color: var(--background-color);
@@ -763,19 +756,18 @@ blockquote {
display: none;
}
- #content {
- width: 640px;
- margin-bottom: 12px;
- padding-bottom: 12px;
+ #app {
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 300px auto;
+ grid-template-areas:
+ "sidebar header header"
+ "sidebar content content"
+ "sidebar content content";
}
#sidebar {
- position: sticky;
- padding: 12px;
- margin-top: 66px;
+ grid-area: sidebar;
height: 100%;
- z-index: auto;
- overflow-y: auto;
}
article,
@@ -785,28 +777,23 @@ blockquote {
}
#sidebar_wrapper {
- width: 300px;
- overflow-y: auto;
- height: 100%;
- position: fixed;
- flex-direction: column;
- justify-content: start;
+ padding: 12px;
+ display: inline-block;
+ position: sticky;
+ top: 0;
}
- #sidebar_wrapper a,
.l a {
border-right: 2px solid transparent;
}
- #sidebar_wrapper > a:hover {
+ #global > a:hover {
border-top: initial;
border-right: 2px solid #ff339a;
}
- #header_wrapper,
- #content_wrapper {
- width: 1000px;
- margin: 0 auto;
+ #global {
+ flex-direction: column;
}
#content_wrapper {