biiiig change [now we're a sitix project]

site/base.css

@@ -0,0 +1,95 @@
+body {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+    margin: 0px;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+body > div {
+    height: 100vh;
+    overflow-y: auto;
+}
+
+#leftpanel {
+    width: 400px;
+    padding: 10px;
+    background-color: rgb(221, 184, 255);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+#contpanel {
+    padding: 20px;
+    box-sizing: border-box;
+    text-align: center;
+    flex-grow: 2;
+}
+
+#contpanel > div {
+    max-width: 800px;
+    text-align: left;
+    display: inline-block;
+}
+
+#leftpanel > img {
+    width: 128px;
+    margin-left: auto;
+    margin-right: auto;
+    display: inline-block;
+}
+
+#titleblock {
+    display: flex;
+    flex-direction: row;
+    color: black;
+    text-decoration: none;
+}
+
+#titleblock > p {
+    flex-grow: 2;
+}
+
+#titleblock > img {
+    width: 100px
+}
+
+#titleblock > * {
+    padding: 10px;
+}
+
+.subject > input {
+    display: none;
+}
+
+.subject > input + label + div {
+    height: 0px;
+    overflow: hidden;
+}
+
+.subject > input:checked + label + div {
+    height: min-content;
+}
+
+.subject > input + label::before {
+    content: "▶";
+}
+
+.subject > input:checked + label::before {
+    content: "▼";
+}
+
+.subject > label {
+    font-weight: bold;
+}
+
+.subject > div > a {
+    padding: 10px;
+    display: block;
+}
+
+.subject > div > a:hover {
+    background-color: red;
+}