Fix the photos CSS compress

website/photos/static/photos/css/style.scss

-
 /* Solving this with dynamic a data attribute (i.e. attr(data-rotation)) does not work, as that's a string. */
 img.rotate90 {
   transform: rotate(90deg);

website/photos/templates/photos/album.html

 {% extends 'base.html' %}
-{% load staticfiles i18n thumbnail shared_thumbnail %}
+{% load staticfiles i18n thumbnail shared_thumbnail compress %}
 
 {% block title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
 
 {% block css_head %}
-{{ block.super }}
-<link href="{% static "photos/css/style.scss" %}" rel="stylesheet" type="text/scss">
+    {{ block.super }}
+    {% compress css %}
+    <link href="{% static "photos/css/style.scss" %}" rel="stylesheet" type="text/x-scss">
+    {% endcompress %}
 {% endblock %}
 
 {% block body %}

website/photos/templates/photos/index.html

 {% extends 'base.html' %}
-{% load i18n thumbnail staticfiles %}
+{% load i18n thumbnail staticfiles compress %}
 
 {% block title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
 
 {% block css_head %}
-{{ block.super }}
-<link href="{% static 'photos/css/style.scss' %}" rel="stylesheet" type="text/scss">
+    {{ block.super }}
+    {% compress css %}
+    <link href="{% static 'photos/css/style.scss' %}" rel="stylesheet" type="text/x-scss">
+    {% endcompress %}
 {% endblock %}
 
 {% block body %}