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
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/
- 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">
{{ .Content }}
<div id="links-main">
{{ range $.Site.Data.links }}
<div class="links-column">
{{ range $.Site.Data.links.left }}
{{ 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>
{{ end }}

View File

@ -1,5 +1,4 @@
<div class="links-column">
<ul class="link">
<ul class="link-list">
<h2>{{ .name }}</h2>
{{ range .links }}
<li>
@ -11,5 +10,4 @@
</details>
</li>
{{ end }}
</ul>
</div>
</ul>

View File

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