большое обновление фронта

static/css/style.css

@@ -1,27 +1,26 @@
-/* TODO исправить стили, тут верхней навигации вообще нет */
-
-
 /* ========== THEME ========== */
 body {
-  --text-color: #111;
-  --brand-color: #231765;
-  --bkg-color-blue: #0066e3;
+  --text-color: #262626;
+  --text-color2: #3d3d3d;
 
-  --bkg-color: #fff;
-  --bkg-color2: #ccc;
-  --bkg-color3: #aaa;
+  --brand-bg: #EDF3FE;
+  --brand-text: #5488F7;
+
+  --bg-color: #FEFEFE;
+  --bg-selected: #F1F1F1;
 }
 
 @media (prefers-color-scheme: dark) {
   /* defaults to dark theme */
   body {
     --text-color: #eee;
-    --brand-color: #654dea;
-    --bkg-color-blue: #003aac;
+    --text-color2: #bbb;
 
-    --bkg-color: #121212;
-    --bkg-color2: #202020;
-    --bkg-color3: #353435;
+    --brand-bg: #393E50;
+    --brand-text: #5F93F3;
+
+    --bg-color: #2d2c33;
+    --bg-selected: #424248;
   }
 }
 
@@ -30,50 +29,28 @@ body {
   color: var(--text-color);
 }
 
-body {
-  background: var(--bkg-color);
+*, *::before, *::after {
+  box-sizing: border-box;
 }
 
-.page-header {
-  text-align: center;
-  margin: 1em 3em;
+body {
+  background: var(--bg-color);
+  margin: 0; /* браузеры зачем-то ставят свое значение */
+}
+
+#content {
+  margin: 0.2em;
 }
 
 /* ========== MAIN STYLES ========== */
 
-#header-wrapper {
-  display: flex;
-  margin: 1em;
+header > h1 {
+  text-align: center;
+  background-color: var(--brand-bg);
+  padding: 0.5em;
 }
 
-#header-wrapper * {
-  color: var(--brand-color);
+header * {
+  color: var(--brand-text);
 }
 
-header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: 0 auto;
-}
-
-header > * {
-  margin: auto 0.5em;
-  text-decoration: none;
-  font-size: medium;
-}
-
-header > div > * {
-  display: block;
-  margin: 0.1em 0;
-}
-
-#logo-text {
-  font-weight: bolder;
-  font-size: xx-large;
-}
-
-#logo-image {
-  width: 50px;
-  height: 50px;
-}