initial implementation

content/schulchronik/2004.md

@@ -13,7 +13,7 @@ pretext: >
   Nur der Cantorpreis wurde hauptsächlich für andere Leistungen vergeben. Der Preisträger dieses Jahres ist sehr engagiert und initiierte im November 2003 als Schülersprecher den Schülerstreik. Marcus Syring hat diesen Preis auf jeden Fall verdient und schließt sich mit seiner außergewöhnlichen Arbeit für die Schule als neunter Preisträger in die Reihe großer Cantorianer an.
 topics:
   - title: Franziska Flegel bei der internationalen Olympiade für
-      Nachwuchswissenschaftler
+      Nachwuchs­wissenschaftler
     content: |
       {{< image src="/media/schulchronik/2004/franziska-flegel.webp" >}}
   - title: Wettbewerbserfolge

layouts/schulchronik/single.html

@@ -32,6 +32,7 @@
           </div>
       </div>
       {{ end }}
+    </div>
   {{ end }}
     {{ range .Params.topics }}
       {{ partial "modal" . }}
@@ -39,21 +40,78 @@
     {{ if and .Params.pretext (ne .Params.pretext "\n\n\n") }}
       {{ partial "modal" (dict "title" .Title "content" .Params.pretext) }}
     {{ end }}
-    <div id="wc-canvas"></div>
-    {{ $topics := slice }}
-    {{ if .Params.pretext }}
-      {{ $topics = $topics | append (dict "Title" .Params.Title "Size" (int 200) "ID" (md5 .Title)) }}
-    {{ else }}
-      {{ $topics = $topics | append (dict "Title" .Params.Title "Size" (int 200)) }}
-    {{ end }}
-    {{ range .Params.topics }}
-      {{ if .superhaufen.enable }}
-        {{ $topics  = $topics | append (dict "Title" .title "Size" 30 "ID" (.superhaufen.link | urlize)  "Superhaufen" true ) }}
-      {{ else }}
-        {{ $topics  = $topics | append (dict "Title" .title "Size" 30 "ID" (md5 .title)) }}
+    <!--div id="wc-canvas"></div-->
+    <style>
+      .kh-parent {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        justify-content: space-between;
+        align-content: space-between;
+      }
+      .kh-jahr {
+        grid-column: 2 / 4;
+        grid-row: 2 / 2;
+        justify-self: center;
+        // align-self: center;
+        rotate: -25deg;
+        color: #ffbc3b;
+        margin: 0
+      }
+      .kh-jahr-active {
+        cursor: pointer;
+      }
+      .kh-jahr-active:hover {
+        text-decoration: 3px underline;
+      }
+      .kh-jahr-inner {
+        font-size: 3em;
+      }
+      .kh-0 {
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
+      }
+      .kh-1 {
+        grid-column: 3 / 5;
+        grid-row: 3 / 4;
+      }
+      .kh-2 {
+        grid-column: 1 / 3;
+        grid-row: 3 / 4;
+      }
+      .kh-3 {
+        grid-column: 3 / 5;
+        grid-row: 1 / 2;
+      }
+      .kh {
+        color: #1a1a37;
+        text-align: center;
+        align-self: center;
+        hyphens: manual;
+        cursor: pointer;
+      }
+      .kh:hover {
+        text-decoration: underline;
+      }
+      @media (min-width: 1200px) {
+        .kh-inner {
+          font-size: 1.5em;
+        }
+      }
+    </style>
+    <div class="kh-parent">
+      <div class="kh-jahr h1 {{ if and .Params.pretext (ne .Params.pretext "\n\n\n") }}kh-jahr-active" onclick="$('{{ print `#` (md5 .Title) }}').modal('show')"{{ else }}"{{ end }}><div class="kh-jahr-inner">{{ .Title }}</div></div>
+      {{ $topics := slice }}
+      {{ range .Params.topics }}
+        {{ $topics = $topics | append (dict "titleLength" (len .title) "topic" .) }}
       {{ end }}
-    {{ end }}
-    <script>
+
+      {{ range $id, $topic := sort $topics "titleLength" "desc" }}
+        <div class="kh kh-{{ $id }} h3" onclick="{{ if not $topic.topic.superhaufen.enable }}$('{{ print `#` (md5 $topic.topic.title) }}').modal('show'){{ else }}window.location = '{{ print (`/superhaufen/` | relURL ) ($topic.topic.superhaufen.link | urlize) }}'{{ end }}"><div class="kh-inner">{{ $topic.topic.title | safeHTML }}</div></div>
+      {{ end }}
+    </div>
+    
+    <!--script>
       WordCloud(
         document.getElementById('wc-canvas'),
         {
@@ -62,7 +120,7 @@
               if (item[3])  {
                 window.location.href = "{{ `/superhaufen/` | relURL }}" + item[2];
               } else {
-                $('#' + item[2]).modal('show');
+                ;
               }
             }
           },
@@ -86,7 +144,7 @@
           clearCanvas: true
         } 
       );
-    </script>
+    </script-->
     {{ .Content }}
   </div>
   </div>