Use Sass extends to deal with heading sizes, not classes

malept · Apr 20, 2015 · f170211 · f170211
1 parent 4db2339
commit f170211
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/gmusicprocurator/static/scss/typography.scss b/gmusicprocurator/static/scss/typography.scss
@@ -1,3 +1,5 @@
+// scss-lint:disable PlaceholderInExtend
+
 $roboto-font-path: 'vendor/roboto-fontface/fonts';
 
 @import '../vendor/roboto-fontface/roboto-fontface';
@@ -12,3 +14,15 @@ $typl8-font-size: 100;
 $fa-font-path: 'vendor/font-awesome/fonts';
 
 @import '../vendor/font-awesome/scss/font-awesome';
+
+h1 {
+  @extend .typl8-beta;
+}
+
+h3 {
+  @extend .typl8-delta;
+}
+
+h4 {
+  @extend .typl8-epsilon;
+}
diff --git a/gmusicprocurator/templates/base.html b/gmusicprocurator/templates/base.html
@@ -16,7 +16,7 @@
   <![endif]-->
 
   <header>
-    <h1 class="beta">GMusicProcurator</h1>
+    <h1>GMusicProcurator</h1>
     {% block header %}{% endblock %}
   </header>
 

diff --git a/gmusicprocurator/templates/js/playlist.mtpl b/gmusicprocurator/templates/js/playlist.mtpl
@@ -2,7 +2,7 @@
   [% if (typeof(playlist.ownerName) !== 'undefined' || playlist.id == AlpacAudio.QUEUE_ID) { %]
   <section id="playlist-info">
     [% if (!!playlist.name) { %]
-    <h3 class="delta name">[[ playlist.name ]]</h3>
+    <h3 class="name">[[ playlist.name ]]</h3>
     [% } /* playlist.name */ %]
     [% if (playlist.id != AlpacAudio.QUEUE_ID) { %]
     <ul class="actions">