Merge pull request #941 from creativecommons/vocab-refresh

Update site to use current Vocabulary design system

Author: TimidRobot

assets/static/css/issue-finder.css

@@ -0,0 +1,87 @@
+@import "/static/vocabulary/css/vocabulary.css" layer(vocabulary);
+
+/* Issue-card styles */
+.issue-card {
+  padding: 1.3rem;
+  margin-bottom: 1.5rem;
+
+  border: 3px solid #ddd;
+  border-radius: 0.3rem;
+}
+
+.issue-card h4 {
+    font-size: 1.45rem;
+}
+
+.issue-card p {
+    font-size: 1rem;
+    color: rgb(118, 118, 118);
+}
+
+/* General container styling */
+
+.filter-container {
+  padding: 1rem;
+}
+
+/* Label styling */
+
+.filter-container label {
+  display: block;
+  margin-bottom: 0.5rem;
+
+  font-size: 1.12rem;
+  color: #333;
+}
+
+/* Strong text */
+
+.filter-container label strong {
+  display: block;
+  margin-bottom: 0.25rem;
+
+  font-size: 1.2rem;
+  color: #000;
+  font-weight: 700;
+}
+
+.filter-container select {
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 2rem;
+
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+}
+
+/* Paragraph styling */
+
+.filter-container p {
+  margin-top: 1rem;
+
+  font-size: 0.75rem;
+  color: #666;
+  line-height: 1.4;
+}
+
+/* Review: Adjust focus outline color */
+
+.filter-container select:focus {
+  outline: 2px solid #0078D4;
+  border-color: #0078D4;
+}
+
+
+@media (min-width: 1024px) {
+.issue-container {
+  display: flex;
+  margin-left: -20%;
+  margin-right: -23%
+}
+
+.filter-container {
+  width: 25%;
+  flex: none;
+}
+
+}