Allow linking to a specific card (#156)

Co-authored-by: Stan Ulbrych <stan@ulbrych.org>

Author: merwok

src/style.css

@@ -58,6 +58,11 @@ body {
   flex: 1;
 }
 
+.card:target {
+  scroll-margin-top: 4.5rem;
+  border-color: #1595fe;
+}
+
 .card-body p {
   margin-bottom: 0;
   margin-top: 0;
@@ -67,6 +72,24 @@ body {
   margin-bottom: 0.4rem;
 }
 
+.card-title a {
+  color: inherit;
+  text-decoration: none;
+  border-radius: 4px;
+  padding: 0 4px;
+  margin: 0 -4px;
+}
+
+.card-title a::after {
+  content: " #";
+  font-size: 0.8em;
+  color: #7ec3ff;
+}
+
+.card-title a:focus, .card-title a:hover {
+  background-color: #f5e9a8;
+}
+
 /* ------------------------------ Index ------------------------------------- */
 
 .progress-bar-container {

templates/index.html.jinja

@@ -5,9 +5,9 @@
   <div class="row">
     {% for project in completion_progress | sort(attribute='completion') | reverse %}
       <div class="col-12 col-sm-6 col-md-4 d-flex">
-        <div class="card shadow mb-3 w-100">
+        <div id="{{ project.language.code }}" class="card shadow mb-3 w-100">
           <div class="card-body">
-            <h3 class="card-title">{{ project.language.name }}</h3>
+            <h3 class="card-title"><a href="#{{ project.language.code }}">{{ project.language.name }}</a></h3>
             <h5 class="card-subtitle mb-2 text-muted">{{ project.translated_name }}</h5>
             <p class="text-muted">Completion: <strong>{{ '{:.2f}%'.format(project.completion) }}</strong></p>
             <p class="text-muted">30-day progress: {{ '{:.2f}%'.format(project.change) }}</p>