diff --git a/musician/static/musician/css/default.css b/musician/static/musician/css/default.css
index 0bbfe4b..22e5d51 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: block;
+ width: fit-content;
+ transition-duration: 200ms;
+ transition-property: left;
}
#sidebar #sidebar-services {
@@ -317,3 +326,51 @@ h1.service-name {
td:hover .roll-hover {
visibility: visible;
}
+
+@media (min-width: 576px){
+ .card-deck .card {
+ flex: 1 0 40%;
+ margin: 15px;
+ }
+
+ #sidebar-btn {
+ display: none;
+ }
+}
+
+@media (min-width: 1350px){
+ .card-deck .card {
+ flex: 1 0 0%;
+ }
+
+ #content {
+ margin-left: 280px;
+ }
+}
+
+
+
+
+
+@media (max-width: 800px){
+
+ #sidebar-toggle:checked {
+ width: 277px;
+ }
+ #sidebar-toggle:checked ~ #sidebar {
+ left: 0;
+ }
+ #sidebar-toggle:checked ~ #sidebar-btn {
+ left: 277px;
+ }
+ #sidebar-btn {
+ display: block;
+ width: fit-content;
+ }
+ #sidebar {
+ left: -277px;
+ }
+ #content {
+ margin-left: 0;
+ }
+}
\ No newline at end of file
diff --git a/musician/templates/musician/base.html b/musician/templates/musician/base.html
index 7b56ab9..0c07e55 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 @@
+
+