Add new task skeleton

task_2_ts/css/layout.css

@@ -0,0 +1,115 @@
+:root {
+    --spacing: 0.25rem;
+    --border-color: #a0a0a0;
+}
+
+/* Style for definition list */
+dl {
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+dt,
+dd {
+    line-height: 1.42857143;
+}
+
+dt {
+    font-weight: 700;
+}
+
+dd {
+    margin-left: 0;
+}
+
+body h1,
+body h2 {
+    margin-bottom: 0;
+}
+
+nav {
+    border-bottom: 1px solid var(--border-color);
+}
+
+article {
+    width: 400px;
+}
+
+body>main {
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+
+    padding: var(--spacing) !important;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: start;
+    gap: var(--spacing);
+
+    & article {
+        margin: 0;
+        padding: var(--spacing);
+
+        &>header {
+            margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) var(--spacing);
+            padding: var(--spacing);
+        }
+    }
+}
+
+/* Set a fixed scrollable wrapper */
+#table-content {
+    max-height: 400px;
+    overflow: auto;
+
+    /* Set header to stick to the top of the container. */
+    & thead tr th {
+        position: sticky;
+        top: 0;
+    }
+
+    /* If we use border, we must use table-collapse to avoid a slight movement of the header row */
+    & table {
+        border-collapse: collapse;
+        border-top: 0;
+    }
+
+    /* Because we must set sticky on th, we have to apply background styles here rather than on thead */
+    & th {
+        border-left: 1px dotted rgba(200, 209, 224, 0.6);
+        border-bottom: 1px solid #ddd;
+
+        background: #eee;
+        text-align: left;
+        box-shadow: 0px 0px 0 2px #e8e8e8;
+
+        &.active {
+            background: #ddd;
+        }
+
+        &.sortable::after {
+            font-family: FontAwesome;
+            content: "\f0dc";
+            position: absolute;
+            right: 8px;
+            color: #999;
+        }
+
+        &.active::after {
+            position: absolute;
+            right: 8px;
+            color: #999;
+        }
+
+        &.active.asc::after {
+            font-family: FontAwesome;
+            content: "\f0d8";
+        }
+
+        &.active.desc::after {
+            font-family: FontAwesome;
+            content: "\f0d7";
+        }
+    }
+}