Some CSS flex fixes

2022-07-12 11:17:03 +03:00
parent 9f88b2c7b8
commit 5a97fc131d
4 changed files with 51 additions and 46 deletions
@@ -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 {
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: space-between;
+div.calendar {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
 }

 table.month {
    margin: 10px;
-    width: 300px;
-    max-width: 300px;
-    border-radius: 10px;
+    width: 350px;
+    max-width: 350px;
 }
@@ -1,3 +1,4 @@
+<div class="calendar">
    {% 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="Коготь зимы" %}
@@ -18,5 +19,4 @@
    {% 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>
@@ -14,16 +14,9 @@ aside.menu {
    margin: 25px;
 }

-aside.menu ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+div.menu {
    display: flex;
-}
-
-aside.menu li {
-    display: flex;
-    margin: 10px;
+    flex-flow: row wrap;
 }

 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 {
@@ -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>
-            <li><a href="/">Главная</a></li>
-            <li><a href="/calendar">Календарь</a></li>
-            <li><a href="/links">Полезные ссылки</a></li>
-        </ul>
+        <div class="menu">
+            <a class="menuitem" href="/">
+                Главная
+            </a>
+            <a class="menuitem" href="/calendar">
+                Календарь
+            </a>
+            <a class="menuitem" href="/links">
+                Полезные ссылки
+            </a>
+        </div>
    </aside>

    {% block content %}