fixing link page layout

This commit is contained in:
yequari 2023-10-17 15:32:40 -07:00
parent b64f9903af
commit af0a42ec55
8 changed files with 39 additions and 23 deletions

View File

@ -18,3 +18,6 @@ links:
- name: Beej's Guides - name: Beej's Guides
description: Beej's Guides are all excellent tools to learn various programming languages and technologies. Notably useful for me are Beej's Guide to Network Programming and Beej's Guide to C (both volumes) description: Beej's Guides are all excellent tools to learn various programming languages and technologies. Notably useful for me are Beej's Guide to Network Programming and Beej's Guide to C (both volumes)
url: https://beej.us/guide/ url: https://beej.us/guide/
- name: A Complete Guide to Flexbox
description: A terrific guide to using CSS flexbox with examples and explanations of all the properties. My go-to resource whenever I have questions regarding flexbox.
url: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background

View File

@ -2,9 +2,21 @@
<div id="content"> <div id="content">
{{ .Content }} {{ .Content }}
<div id="links-main"> <div id="links-main">
{{ range $.Site.Data.links }} <div class="links-column">
{{ partial "linklist.html" . }} {{ range $.Site.Data.links.left }}
{{ end }} {{ partial "linklist.html" . }}
{{ end }}
</div>
<div class="links-column">
{{ range $.Site.Data.links.middle }}
{{ partial "linklist.html" . }}
{{ end }}
</div>
<div class="links-column">
{{ range $.Site.Data.links.right }}
{{ partial "linklist.html" . }}
{{ end }}
</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}

View File

@ -1,15 +1,13 @@
<div class="links-column"> <ul class="link-list">
<ul class="link"> <h2>{{ .name }}</h2>
<h2>{{ .name }}</h2> {{ range .links }}
{{ range .links }} <li>
<li> <details>
<details> <summary>
<summary> <a target="_blank" href="{{ .url }}" >{{ .name }}</a>
<a target="_blank" href="{{ .url }}" >{{ .name }}</a> </summary>
</summary> {{ .description }}
{{ .description }} </details>
</details> </li>
</li> {{ end }}
{{ end }} </ul>
</ul>
</div>

View File

@ -329,6 +329,7 @@ footer {
#links-main { #links-main {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: flex-start;
} }
#links-main li { #links-main li {
@ -336,27 +337,29 @@ footer {
list-style-type: none; list-style-type: none;
} }
.links-column details { .link-list details {
border: 1px dotted var(--pewter-blue); border: 1px dotted var(--pewter-blue);
padding: 0.5em 0.5em 0; padding: 0.5em 0.5em 0;
} }
.links-column details[open] { .link-list details[open] {
padding: 0.5em; padding: 0.5em;
} }
.links-column details[open] summary { .link-list details[open] summary {
border-bottom: 1px dotted var(--pewter-blue); border-bottom: 1px dotted var(--pewter-blue);
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.links-column summary { .link-list summary {
margin: -0.5em -0.5em 0; margin: -0.5em -0.5em 0;
padding: 0.5em; padding: 0.5em;
} }
.links-column { .links-column {
flex: 1 1 300px; display: flex;
flex-direction: column;
flex: 1 1 30%;
overflow-wrap: break-word; overflow-wrap: break-word;
} }