Merge pull request #25830 from code-dot-org/extract-styles-student-pr…

…ojects Dance Landing: extract styles for student-dance-projects
code-dot-org · Nov 5, 2018 · 9b33fb2 · 9b33fb2
2 parents a920ce9 + 56c1892
commit 9b33fb2
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git a/pegasus/sites.v3/code.org/public/css/dance-landing/student-dance-projects.css b/pegasus/sites.v3/code.org/public/css/dance-landing/student-dance-projects.css
@@ -0,0 +1,33 @@
+.project-card {
+  height: 240px;
+  width: 216px;
+  border: 1px solid gray;
+  display: inline-block;
+  margin: 10px;
+}
+
+.project-video {
+  height: 150px;
+  width: 100%
+}
+
+.project-details {
+  padding: 10px;
+}
+
+.project-title {
+  font-size: 18px;
+  font-family: 'Gotham 7r', sans-serif;
+}
+
+.student-label, .age-label {
+  font-size: 14px;
+  font-family: 'Gotham 7r', sans-serif;
+  display: inline-block;
+}
+
+.student-name, .student-age {
+  font-size: 14px;
+  display: inline-block;
+  font-family: 'Gotham 4r', sans-serif;
+}
diff --git a/pegasus/sites.v3/code.org/views/student_dance_projects.haml b/pegasus/sites.v3/code.org/views/student_dance_projects.haml
@@ -1,3 +1,5 @@
+%link{:rel=>'stylesheet', :type=>'text/css', :href=>'/css/dance-landing/student-dance-projects.css'}
+
 :ruby
   dance_projects = [
     {
@@ -32,20 +34,18 @@
 
 .student_dance_projects
   - dance_projects.each do |project|
-    %a{href: project[:link], style: "color: #696969;"}
-      .project-card{style: "height: 240px; width: 216px; border: 1px solid gray; display: inline-block; margin: 10px;"}
-        .project-video
-          %img{src:"/images/animated-examples/student-dance-projects/#{project[:image]}.gif", style: "height: 150px; width:100%"}
-        .project-details{style: "padding: 10px;"}
-          .project-title{style: "font-size: 18px; font-family: 'Gotham 7r', sans-serif;"}
-            = project[:title]
-          .project-author
-            .span{style: "font-size: 14px; font-family: 'Gotham 7r', sans-serif; display: inline-block;"}
-              By:
-            .span{style: "font-size: 14px; display: inline-block; font-family: 'Gotham 4r', sans-serif;"}
-              = project[:name]
-          .project-age
-            .span{style: "font-size: 14px; font-family: 'Gotham 7r', sans-serif; display: inline-block;"}
-              Age:
-            .span{style: "font-size: 14px; display: inline-block; font-family: 'Gotham 4r', sans-serif;"}
-              = project[:age]
+    %a.project-card{href: project[:link], style: "color: #696969; text-decoration: none"}
+      %img.project-video{src:"/images/animated-examples/student-dance-projects/#{project[:image]}.gif"}
+      .project-details
+        .project-title
+          = project[:title]
+        .project-author
+          .span.student-label
+            By:
+          .span.student-name
+            = project[:name]
+        .project-age
+          .span.age-label
+            Age:
+          .span.student-age
+            = project[:age]