diff --git a/musician/static/musician/css/default.css b/musician/static/musician/css/default.css
index 0bbfe4b..fdeabd3 100644
--- a/musician/static/musician/css/default.css
+++ b/musician/static/musician/css/default.css
@@ -46,6 +46,15 @@ a:hover {
z-index: 999;
display: flex;
flex-direction: column;
+ transition-duration: 200ms;
+ transition-property: left;
+}
+
+#sidebar-btn {
+ display: none;
+ width: fit-content;
+ transition-duration: 200ms;
+ transition-property: left;
}
#sidebar #sidebar-services {
@@ -317,3 +326,59 @@ h1.service-name {
td:hover .roll-hover {
visibility: visible;
}
+
+#sidebar-btn * {
+ font-size: 14.4px !important;
+ font-family: "Font Awesome 5 Free";
+}
+
+@media (min-width: 1350px){
+ .card-deck .card {
+ flex: 1 0 0%;
+ }
+}
+
+@media (max-width: 800px){
+ #sidebar {
+ left: calc(-277px + 34px);
+ }
+ #sidebar * {
+ opacity: 0;
+ transition-delay: 150ms;
+ transition-duration: 300ms;
+ }
+ #sidebar-btn {
+ display: block;
+ }
+ #sidebar-btn::before {
+ font-family: "Font Awesome 5 Free";
+ content: "\f0c9";
+ font-weight: 900;
+ }
+ #content {
+ margin-left: 34px;
+ }
+ #sidebar-toggle:checked {
+ width: 277px;
+ }
+ #sidebar-toggle:checked ~ #sidebar {
+ left: 0;
+ }
+ #sidebar-toggle:checked ~ #sidebar * {
+ opacity: 100%;
+ }
+ #sidebar-toggle:checked ~ #sidebar-btn {
+ left: 243px;
+ }
+ #sidebar-toggle:checked ~ #sidebar-btn::before {
+ content: "\f00d";
+ }
+
+}
+
+@media (min-width: 576px){
+ .card-deck .card {
+ flex: 1 0 40%;
+ margin: 15px;
+ }
+}
diff --git a/musician/templates/musician/base.html b/musician/templates/musician/base.html
index 7b56ab9..e8cf514 100644
--- a/musician/templates/musician/base.html
+++ b/musician/templates/musician/base.html
@@ -9,6 +9,7 @@
{% block meta %}
+
{% endblock %}
{% block title %}{% if title %}{{ title }} – {% endif %}Django musician{% endblock %}
@@ -32,6 +33,8 @@
+
+