Some CSS flex fixes

faerun_calendar/static/faerun_calendar/css/main.css

@@ -12,10 +12,6 @@ table.month, table.month th, table.month td {
     background: gainsboro;
 }
 
-table.month th {
-    text-align: center;
-}
-
 table.month td {
     text-align: right;
 }
@@ -30,15 +26,14 @@ table.month th.subtitle {
     font-weight: normal;
 }
 
-div.month {
+div.calendar {
-    display: inline-flex;
+    display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
-    justify-content: space-between;
+    justify-content: space-around;
 }
 
 table.month {
     margin: 10px;
-    width: 300px;
+    width: 350px;
-    max-width: 300px;
+    max-width: 350px;
-    border-radius: 10px;
 }

faerun_calendar/templates/faerun_calendar/calendar.html

@@ -1,22 +1,22 @@
-{% include 'faerun_calendar/month.html' with title="Хаммер" subtitle="Глубокозимье" %}
+<div class="calendar">
-{% include 'faerun_calendar/month.html' with title="Зимний солнцеворот" subtitle="Мертвозимье" oneday=1 %}
+    {% include 'faerun_calendar/month.html' with title="Хаммер" subtitle="Глубокозимье" %}
-{% include 'faerun_calendar/month.html' with title="Альтурик" subtitle="Коготь зимы" %}
+    {% include 'faerun_calendar/month.html' with title="Зимний солнцеворот" subtitle="Мертвозимье" oneday=1 %}
-{% include 'faerun_calendar/month.html' with title="Чез" subtitle="Коготь закатов" %}
+    {% include 'faerun_calendar/month.html' with title="Альтурик" subtitle="Коготь зимы" %}
-{% include 'faerun_calendar/month.html' with title="Тарсак" subtitle="Коготь бурь" %}
+    {% include 'faerun_calendar/month.html' with title="Чез" subtitle="Коготь закатов" %}
-{% include 'faerun_calendar/month.html' with title="Зеленотравье" oneday=1 %}
+    {% include 'faerun_calendar/month.html' with title="Тарсак" subtitle="Коготь бурь" %}
-
+    {% include 'faerun_calendar/month.html' with title="Зеленотравье" oneday=1 %}
-{% include 'faerun_calendar/month.html' with title="Миртул" subtitle="Таяние" %}
-{% include 'faerun_calendar/month.html' with title="Кайторн" subtitle="Время цветов" %}
-{% include 'faerun_calendar/month.html' with title="Флеймрул" subtitle="Разгар лета" %}
-{% include 'faerun_calendar/month.html' with title="Летний солнцеворот" oneday=1 %}
-{% include 'faerun_calendar/month.html' with title="Шильдмит*" oneday=1 %}
-{% include 'faerun_calendar/month.html' with title="Элесис" subtitle="Солнцестояние" %}
-
-{% include 'faerun_calendar/month.html' with title="Элейнт" subtitle="Увядание" %}
-{% include 'faerun_calendar/month.html' with title="Праздник урожая" oneday=1 %}
-{% include 'faerun_calendar/month.html' with title="Марпенот" subtitle="Листопад" %}
-{% include 'faerun_calendar/month.html' with title="Уктар" subtitle="Перегной" %}
-{% include 'faerun_calendar/month.html' with title="Пир луны" oneday=1 %}
-{% include 'faerun_calendar/month.html' with title="Найтал" subtitle="Спячка" %}
 
+    {% include 'faerun_calendar/month.html' with title="Миртул" subtitle="Таяние" %}
+    {% include 'faerun_calendar/month.html' with title="Кайторн" subtitle="Время цветов" %}
+    {% include 'faerun_calendar/month.html' with title="Флеймрул" subtitle="Разгар лета" %}
+    {% include 'faerun_calendar/month.html' with title="Летний солнцеворот" oneday=1 %}
+    {% include 'faerun_calendar/month.html' with title="Шильдмит*" oneday=1 %}
+    {% include 'faerun_calendar/month.html' with title="Элесис" subtitle="Солнцестояние" %}
 
+    {% include 'faerun_calendar/month.html' with title="Элейнт" subtitle="Увядание" %}
+    {% include 'faerun_calendar/month.html' with title="Праздник урожая" oneday=1 %}
+    {% include 'faerun_calendar/month.html' with title="Марпенот" subtitle="Листопад" %}
+    {% include 'faerun_calendar/month.html' with title="Уктар" subtitle="Перегной" %}
+    {% include 'faerun_calendar/month.html' with title="Пир луны" oneday=1 %}
+    {% include 'faerun_calendar/month.html' with title="Найтал" subtitle="Спячка" %}
+</div>

main/static/main/css/main.css

@@ -14,16 +14,9 @@ aside.menu {
     margin: 25px;
 }
 
-aside.menu ul {
+div.menu {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
     display: flex;
-}
+    flex-flow: row wrap;
-
-aside.menu li {
-    display: flex;
-    margin: 10px;
 }
 
 aside.menu a {
@@ -33,6 +26,17 @@ aside.menu a {
     font-weight: bold;
     background: DeepSkyBlue;
     padding: 10px;
+    margin: 10px;
+
+    max-width: 100px;
+    max-width: 200px;
+
+    display: flex;
+    flex: 1 1 0px;
+    flex-grow: 1;
+
+    justify-content: center;
+    align-items: center;
 }
 
 aside.menu a:hover {

main/templates/main/pagetemplate.html

@@ -7,7 +7,7 @@
     <meta charset="UTF-8">
     <title>{% block pagetitle %}{% endblock %}</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">-->
     <link rel="stylesheet" href="{% static 'main/css/main.css' %}">
 
     {% block additional_css %}
@@ -19,11 +19,17 @@
 </head>
 <body>
     <aside class="menu">
-        <ul>
+        <div class="menu">
-            <li><a href="/">Главная</a></li>
+            <a class="menuitem" href="/">
-            <li><a href="/calendar">Календарь</a></li>
+                Главная
-            <li><a href="/links">Полезные ссылки</a></li>
+            </a>
-        </ul>
+            <a class="menuitem" href="/calendar">
+                Календарь
+            </a>
+            <a class="menuitem" href="/links">
+                Полезные ссылки
+            </a>
+        </div>
     </aside>
 
     {% block content %}