fixing link page layout
This commit is contained in:
parent
b64f9903af
commit
af0a42ec55
|
@ -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
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue