|
@@ -1,14 +1,20 @@
|
|
|
|
|
+h1, h2, h3, h4 {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.admin {
|
|
.admin {
|
|
|
color: red;
|
|
color: red;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#article_browser {
|
|
#article_browser {
|
|
|
|
|
+ height: 90vh;
|
|
|
|
|
+
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-areas: ". up ."
|
|
grid-template-areas: ". up ."
|
|
|
"before focused after"
|
|
"before focused after"
|
|
|
". down .";
|
|
". down .";
|
|
|
- grid-template-columns: 1fr auto 1fr;
|
|
|
|
|
- grid-template-rows: 1fr auto 1fr;
|
|
|
|
|
|
|
+ grid-template-columns: 1fr 3fr 1fr;
|
|
|
|
|
+ grid-template-rows: 1fr 3fr 1fr;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#article_browser .focused {
|
|
#article_browser .focused {
|
|
@@ -16,22 +22,29 @@
|
|
|
|
|
|
|
|
align-self: center;
|
|
align-self: center;
|
|
|
justify-self: center;
|
|
justify-self: center;
|
|
|
- padding: 3em;
|
|
|
|
|
|
|
+ padding: 1em;
|
|
|
|
|
+
|
|
|
|
|
+ overflow: scroll;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
#article_browser .up {
|
|
#article_browser .up {
|
|
|
grid-area: up;
|
|
grid-area: up;
|
|
|
|
|
+ overflow: scroll;
|
|
|
}
|
|
}
|
|
|
#article_browser .before {
|
|
#article_browser .before {
|
|
|
grid-area: before;
|
|
grid-area: before;
|
|
|
|
|
+ align-self: center;
|
|
|
}
|
|
}
|
|
|
#article_browser .after {
|
|
#article_browser .after {
|
|
|
grid-area: after;
|
|
grid-area: after;
|
|
|
|
|
+ align-self: center;
|
|
|
}
|
|
}
|
|
|
#article_browser .down {
|
|
#article_browser .down {
|
|
|
grid-area: down;
|
|
grid-area: down;
|
|
|
|
|
+ overflow: scroll;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-#article-browser ul {
|
|
|
|
|
|
|
+#article_browser :not(.focused) ul {
|
|
|
list-style: none;
|
|
list-style: none;
|
|
|
margin-block-start: 0;
|
|
margin-block-start: 0;
|
|
|
}
|
|
}
|