Kreative Haufen in CSS #254

Merged
Denys Konovalov merged 2 commits from feat/kh-remake into master 2024-01-02 21:55:32 +01:00
2 changed files with 75 additions and 17 deletions
Showing only changes of commit 97a633952b - Show all commits

@ -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

@ -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>