diff --git a/.gitignore b/.gitignore
index 925d54ce..33acb324 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ rls
translations
po/*.po~
.env
+Rocket.toml
diff --git a/static/images/boxicon-menu.svg b/static/images/boxicon-menu.svg
new file mode 100644
index 00000000..0dd7a2ba
--- /dev/null
+++ b/static/images/boxicon-menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/main.css b/static/main.css
index a53268bb..85b7ade6 100644
--- a/static/main.css
+++ b/static/main.css
@@ -24,8 +24,7 @@ a, a:visited {
small {
margin-left: 1em;
- color: #242424;
- opacity: 0.6;
+ color: rgba(36, 36, 36, 0.6);
font-size: 0.75em;
word-wrap: break-word;
word-break: break-all;
@@ -54,14 +53,31 @@ small {
*/
header {
+ background: #ECECEC;
+}
+header #content {
display: flex;
align-content: center;
justify-content: space-between;
- background: #ECECEC;
}
-header #menu {
+header nav#menu {
+ position: relative;
display: none;
+ transform: skewX(-15deg);
+ left: -1em;
+ padding: 1em 1em 1em 2em;
+ background: #7765E3;
+ align-self: flex-start;
+}
+header nav#menu a {
+ transform: skewX(15deg);
+ width: 1.75em;
+ height: 1.75em;
+ margin: 0;
+ padding: 0;
+ background: url("/static/images/boxicon-menu.svg") no-repeat center;
+ background-size: contain;
}
header nav {
@@ -452,6 +468,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
flex-direction: row;
align-items: center;
margin-bottom: 0;
+ z-index: -20;
}
.badge {
margin-left: 1em;
@@ -555,31 +572,80 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
* Small Screens *
* ================= */
-@media screen and (max-width: 500px) {
- header {
- padding: 1em;
+@media screen and (max-width: 900px) {
+ header {
flex-direction: column;
}
- header #menu {
- display: flex;
+ header nav#menu {
+ display: inline-flex;
}
- header > nav {
+ header #content {
display: none;
text-align: center;
}
- header nav a, header nav a.title { padding: 0.5em; }
- header nav a.title {
- width: 100vw;
- margin: 0;
- border: none;
- font-size: 1.75em;
+
+ @keyframes menuOpening {
+ from {
+ transform: scaleX(0);
+ transform-origin: left;
+ opacity: 0;
+ }
+
+ to {
+ transform: scaleX(1);
+ transform-origin: left;
+ opacity: 1;
+ }
}
- header:focus-within > nav {
+ header:focus-within #content {
+ position: fixed;
display: flex;
flex-direction: column;
+ justify-content: flex-start;
+
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+
+ animation: 0.2s menuOpening;
+ }
+ header:focus-within #content::before {
+ content: "";
+ position: absolute;
+ transform: skewX(-10deg);
+ top: 0;
+ left: -20%;
+ width: 100%;
+ height: 100%;
+
+ z-index: -10;
+
+ background: #7765E3;
+ }
+ header:focus-within #content > nav {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ header:focus-within #content > nav a {
+ margin: 0;
+ padding: 1rem 1.5rem;
+ color: #F4F4F4;
+ font-size: 1.4em;
+ font-weight: 300;
+ }
+ header:focus-within #content > nav a.title {
+ font-size: 1.8em;
+ }
+ header:focus-within #content > nav hr {
+ display: block;
+ margin: 0;
+ width: 100%;
+ border: solid #F4F4F4 0.1rem;
}
body > main > * {
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 9a7fc977..d54b8856 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -9,24 +9,28 @@
{% block content %}