diff --git a/public/assets/bitmap.png b/public/assets/bitmap.png new file mode 100644 index 0000000000..0ce9620654 Binary files /dev/null and b/public/assets/bitmap.png differ diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 604276803b..30783d697a 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -21,6 +21,7 @@ ul { .drop-down ul li { position: relative; + z-index: 2; } .drop-down ul li ul a { @@ -31,7 +32,6 @@ ul { display: none; position: absolute; background-color: #F6F6F6; - ; padding: 0.4em 0.8em 0.8em 0.8em; border-radius: 0.5em; color: #29323c; @@ -89,16 +89,24 @@ b { width: 100%; margin-left: 20%; margin-right: 20%; - background-color: rgba(0, 0, 0, 0.40); - ; - padding: 1em 1em; box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } +#top { + display: flex; + justify-content: space-between; + vertical-align: top; + flex-wrap: wrap; + order: 1; + width: 100%; + padding: 1em 1em 0.6em 1em; +} + /* MENU -------------------------------*/ .icon-menu { display: inline-block; + vertical-align: top; width: 1em; height: 1em; stroke-width: 0; @@ -112,21 +120,17 @@ b { order: 2; } -.icon-logo { - display: inline-block; - vertical-align: middle; - width: 1.25em; - height: 1.25em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; +#instance b { + margin: 0; + padding: 0; + vertical-align: top; } -.icon-drop { +.icon-logo { display: inline-block; - vertical-align: middle; - width: 0.5em; - height: 0.5em; + vertical-align: top; + width: 1em; + height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -140,7 +144,7 @@ b { .icon-search { display: inline-block; - vertical-align: middle; + vertical-align: top; width: 1em; height: 1em; stroke-width: 0; @@ -150,44 +154,57 @@ b { /*-------------------------------------*/ /* PROFILE ----------------------------*/ +#cover { + display: flex; + justify-content: start; + align-items: center; + order: 3; + width: 100%; +} + +#cover-img { + width: 100%; + height: auto; +} + +#avatar { + z-index: 1; + position: absolute; + width: 4em; + height: 4em; + margin-left: 1em; +} + + #profile { display: flex; + flex-wrap: wrap; justify-content: flex-start; - order: 4; width: 100%; - margin-top: 2em; - font-size: 0.7em; + padding: 1em 1em; + order: 4; + font-size: 0.8em; align-items: center; } -.icon-avatar { - margin-right: 1em; - width: 3em; - height: 3em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; -} -#nick { +#info { order: 1; display: flex; - align-items: center; - margin-right: 1em; + justify-content: flex-start; } #tags { - order: 2; color: #91B9D0; } -#tags i:last-child { +#tags i { margin-left: 0.5em; } #stats { margin-left: auto; - order: 3; + order: 2; display: flex; justify-content: flex-end; } diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css index 614b904f54..fdff926b06 100644 --- a/public/assets/css/base_mid.css +++ b/public/assets/css/base_mid.css @@ -2,12 +2,12 @@ body, html { background-color: #29323c; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.8C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.8 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.8 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; background-size: cover; color: #F6F6F6; font-family: 'Open Sans', sans-serif; - font-size: 1.1em; + font-size: 1.2em; margin: 0; padding: 0; } @@ -21,6 +21,7 @@ ul { .drop-down ul li { position: relative; + z-index: 2; } .drop-down ul li ul a { @@ -31,7 +32,6 @@ ul { display: none; position: absolute; background-color: #F6F6F6; - ; padding: 0.4em 0.8em 0.8em 0.8em; border-radius: 0.5em; color: #29323c; @@ -63,7 +63,7 @@ a:visited { } ul li ul a { - font-size: 0.7em; + font-size: 0.65em; } b { @@ -87,22 +87,26 @@ b { flex-wrap: wrap; order: 1; width: 100%; - margin-left: 10%; - margin-right: 10%; - align-items: center; + margin-left: 5%; + margin-right: 5%; background-color: rgba(0, 0, 0, 0.40); - ; - padding: 1em 1em; box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } -/* MENU -------------------------------*/ -#menu { +#top { + display: flex; + justify-content: space-between; + vertical-align: top; + flex-wrap: wrap; order: 1; + width: 100%; + padding: 1em 1em 0.6em 1em; } +/* MENU -------------------------------*/ .icon-menu { display: inline-block; + vertical-align: top; width: 1em; height: 1em; stroke-width: 0; @@ -116,21 +120,17 @@ b { order: 2; } -.icon-logo { - display: inline-block; - vertical-align: middle; - width: 1em; - height: 1em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; +#instance b { + margin: 0; + padding: 0; + vertical-align: top; } -.icon-drop { +.icon-logo { display: inline-block; - vertical-align: middle; - width: 0.5em; - height: 0.5em; + vertical-align: top; + width: 1em; + height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -144,7 +144,7 @@ b { .icon-search { display: inline-block; - vertical-align: middle; + vertical-align: top; width: 1em; height: 1em; stroke-width: 0; @@ -154,63 +154,61 @@ b { /*-------------------------------------*/ /* PROFILE ----------------------------*/ +#cover { + display: flex; + justify-content: start; + align-items: center; + order: 3; + width: 100%; +} + +#cover-img { + width: 100%; + height: auto; +} + +#avatar { + z-index: 1; + position: absolute; + width: 3em; + height: 3em; + margin-left: 1em; +} + #profile { display: flex; + flex-wrap: wrap; justify-content: flex-start; - order: 4; width: 100%; - margin-top: 2em; + padding: 1em 1em; + order: 4; font-size: 0.8em; align-items: center; } -.icon-avatar { - order: 1; - margin-right: 1em; - width: 4em; - height: 4em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; -} - #info { - order: 2; - margin-right: auto; -} - -#nick { order: 1; display: flex; - align-items: center; - margin-right: 1em; + justify-content: flex-start; } #tags { - order: 2; color: #91B9D0; } -#tags i:last-child { +#tags i { margin-left: 0.5em; } #stats { - order: 3; - display: flex; margin-left: auto; - flex-flow: column; -} - -#followers { - order: 1; - width: 100%; -} - -#following { order: 2; - width: 100%; - text-align: right; + display: flex; + justify-content: flex-end; +} + +#stats b:last-child { + margin-left: 1em; } /*-------------------------------------*/ \ No newline at end of file diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index 927170bf5d..867c8acd26 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -21,17 +21,17 @@ ul { .drop-down ul li { position: relative; + z-index: 2; } .drop-down ul li ul a { - line-height: 0.8em; + line-height: 1.1em; } .drop-down ul li ul { display: none; position: absolute; background-color: #F6F6F6; - ; padding: 0.4em 0.8em 0.8em 0.8em; border-radius: 0.5em; color: #29323c; @@ -63,7 +63,7 @@ a:visited { } ul li ul a { - font-size: 0.7em; + font-size: 0.8em; } b { @@ -89,21 +89,24 @@ b { width: 100%; margin-left: 0; margin-right: 0; - align-items: center; - background-color: rgba(0, 0, 0, 0.40); - ; - padding: 1em 1em; box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1); } -/* MENU -------------------------------*/ -#menu { +#top { + display: flex; + justify-content: space-between; + vertical-align: top; + flex-wrap: wrap; order: 1; + width: 100%; + padding: 1em 1em 0.6em 1em; } +/* MENU -------------------------------*/ .icon-menu { display: inline-block; + vertical-align: top; width: 1em; height: 1em; stroke-width: 0; @@ -117,21 +120,17 @@ b { order: 2; } -.icon-logo { - display: inline-block; - vertical-align: middle; - width: 1em; - height: 1em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; +#instance b { + margin: 0; + padding: 0; + vertical-align: top; } -.icon-drop { +.icon-logo { display: inline-block; - vertical-align: middle; - width: 0.5em; - height: 0.5em; + vertical-align: top; + width: 1em; + height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; @@ -145,7 +144,7 @@ b { .icon-search { display: inline-block; - vertical-align: middle; + vertical-align: top; width: 1em; height: 1em; stroke-width: 0; @@ -155,41 +154,59 @@ b { /*-------------------------------------*/ /* PROFILE ----------------------------*/ +#cover { + display: flex; + justify-content: start; + align-items: center; + order: 3; + width: 100%; +} + +#cover-img { + width: 100%; + height: auto; +} + +#avatar { + z-index: 1; + position: absolute; + width: 2em; + height: 2em; + margin-left: 1em; +} + #profile { display: flex; + flex-wrap: wrap; justify-content: flex-start; - order: 4; width: 100%; - margin-top: 2em; - font-size: 0.7em; + padding: 0.8em 1em 0.8em 1em; + order: 4; + font-size: 0.75em; align-items: center; } -.icon-avatar { - order: 1; - margin-right: 1em; - width: 4em; - height: 4em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; -} - #info { - order: 2; + order: 1; margin-right: auto; + display: flex; + flex-flow: column; } #nick { order: 1; - display: flex; - align-items: center; - margin-right: 1em; + width: 100%; } #tags { order: 2; + width: 100%; color: #91B9D0; + +} + +#tags i { + margin-left: 0; } #tags i:last-child { @@ -197,7 +214,7 @@ b { } #stats { - order: 3; + order: 2; display: flex; margin-left: auto; flex-flow: column; @@ -206,6 +223,7 @@ b { #followers { order: 1; width: 100%; + text-align: right; } #following { diff --git a/public/assets/css/faq/faq_mid.css b/public/assets/css/faq/faq_mid.css index d56ce3a5b1..4a92c04461 100644 --- a/public/assets/css/faq/faq_mid.css +++ b/public/assets/css/faq/faq_mid.css @@ -6,8 +6,8 @@ flex-wrap: wrap; order: 2; width: 100%; - margin-left: 10%; - margin-right: 10%; + margin-left: 5%; + margin-right: 5%; background-color: #00000080; padding: 1em 1em; font-size: 0.8em; @@ -19,8 +19,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: 10%; - margin-right: 10%; + margin-left: 5%; + margin-right: 5%; padding: 0; } @@ -53,8 +53,8 @@ width: 100%; margin-top: 1em; margin-bottom: 1em; - margin-left: 10%; - margin-right: 10%; + margin-left: 5%; + margin-right: 5%; background-color: rgba(0, 0, 0, 0.40); padding: 0 1em 1em 1em; border-radius: 1em; diff --git a/templates/base.html.twig b/templates/base.html.twig index 9965407e03..911c743dbd 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -10,7 +10,7 @@ - + {% endblock %} @@ -51,58 +51,58 @@
{% block header %} - + +
+ + +
+
-
-
- someone -
-
- coffee addict - lazy -
+
+ someone +
+
+ coffee addict + lazy +
-
- 1337 Followers -
-
- 42 Following -
-
+
+ 1337 Followers +
+
+ 42 Following +
+
{% endblock %} diff --git a/templates/faq/base.html.twig b/templates/faq/base.html.twig index 2e434e6e21..a2f4e0280b 100644 --- a/templates/faq/base.html.twig +++ b/templates/faq/base.html.twig @@ -8,7 +8,7 @@ {{ parent() }} - + {% endblock %} {% block header %}{{ parent() }}{% endblock %}