Artist detail styles

diff --git a/app/festival/static/scss/modules/artist-detail.scss b/app/festival/static/scss/modules/artist-detail.scss
index 1b75e5d9bb698e1e3beb64eb8ef6742be4db6921..be6ff891e82bcba21bb33811cca3811cff053a3e 100644 (file)
--- a/app/festival/static/scss/modules/artist-detail.scss
+++ b/app/festival/static/scss/modules/artist-detail.scss
@@ -16,9 +16,39 @@
 
   &__cta {
     @extend .btn;
-    width: 20%;
     display: block;
+    width: 40%;
+    @media (min-width : $tablet ) {
+      width: 30%;
+    }
+    @media (min-width : $desktop ) {
+        width: 20%;
+    }
     margin: 1rem auto;
     text-align: center;
   }
+}
+
+.artist__portrait {
+  display: block;
+  margin: 1rem auto;
+  &--left {
+    @extend  .artist__portrait;
+    @media (min-width : $tablet ) {
+        max-width: 40%;
+        margin-top: 0;
+        margin-right: 1rem;
+        float: left;
+    }
+  }
+
+  &--right {
+    @extend  .artist__portrait;
+    @media (min-width : $tablet ) {
+        max-width: 40%;
+        margin-top: 0;
+        margin-left: 1rem;
+        float: right;
+    }
+  }
 }
\ No newline at end of file

diff --git a/app/festival/templates/festival/artist_detail.html b/app/festival/templates/festival/artist_detail.html
index 5f5ec29da72c3c2cd354b846d933f2ab7040724e..5586e1d1d1db34f7a2563384fedef94ab9ebfe92 100644 (file)
--- a/app/festival/templates/festival/artist_detail.html
+++ b/app/festival/templates/festival/artist_detail.html
@@ -7,10 +7,10 @@
 {% endblock %}
 
 {% block main %}
-<div class="artist-bio">
+<div class="artist__detail">
  <p>
   {% if artist.photo %}
-   <img class="{% if artist.photo_alignment == 'left' %}image-left{% elif artist.photo_alignment == 'right' %}image-right{% else %}image-center{% endif %}" src="{{ MEDIA_URL }}/{{ artist.photo }}" />
+   <img class="artist__portrait{% if artist.photo_alignment == 'left' %}--left{% elif artist.photo_alignment == 'right' %}--right{% else %}--center{% endif %}" src="{{ MEDIA_URL }}/{{ artist.photo }}" />
   {% endif %}
   {{ artist.bio|safe }}
   <br style="clear: both;" />