Make articles responsive

This commit is contained in:
Ben Visness 2022-10-26 13:26:01 -05:00
parent 8eee541ccc
commit 4e44ba0b45
4 changed files with 15 additions and 17 deletions

Binary file not shown.

View File

@ -4599,7 +4599,7 @@ code, .code {
.pa1 {
padding: 0.25rem; }
.pa2, .tab, header .root-item > a, header .submenu > a {
.pa2, .tab, figure, header .root-item > a, header .submenu > a {
padding: 0.5rem; }
.pa3, header #login-popup {
@ -4721,7 +4721,7 @@ code, .code {
.optionbar .options button,
.optionbar .options .button,
.optionbar .options input[type=button],
.optionbar .options input[type=submit], .post-content th, .post-content td,
.optionbar .options input[type=submit], .post-content th, .post-content td, figure figcaption,
button.button-small,
.button.button-small,
input.button-small[type=button],
@ -4929,7 +4929,7 @@ input[type=submit]:not(.button-small), .notice {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2, .post-content table {
.mv2, .post-content table, figure {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
@ -4953,7 +4953,7 @@ input[type=submit]:not(.button-small), .notice {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0 {
.mh0, figure {
margin-left: 0;
margin-right: 0; }
@ -4992,7 +4992,7 @@ input[type=submit]:not(.button-small), .notice {
padding: 0.25rem; }
.pa2-ns {
padding: 0.5rem; }
.pa3-ns {
.pa3-ns, figure {
padding: 1rem; }
.pa4-ns {
padding: 2rem; }
@ -5076,7 +5076,7 @@ input[type=submit]:not(.button-small), .notice {
.optionbar .options button,
.optionbar .options .button,
.optionbar .options input[type=button],
.optionbar .options input[type=submit] {
.optionbar .options input[type=submit], figure figcaption {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-ns {
@ -5207,7 +5207,7 @@ input[type=submit]:not(.button-small), .notice {
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-ns {
.mv3-ns, figure {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-ns {
@ -8029,10 +8029,7 @@ pre {
figure {
display: flex;
flex-direction: column;
margin: 1rem 0;
padding: 1rem 1rem 0; }
figure figcaption {
padding: 0.5rem 0; }
padding-bottom: 0; }
.toolbar {
background-color: #fff;

View File

@ -175,13 +175,12 @@ pre {
}
figure {
@extend .bg--dim, .br3;
@extend .mh0, .mv2, .mv3-ns, .pa2, .pa3-ns, .bg--dim, .br3;
display: flex;
flex-direction: column;
margin: $spacing-medium 0;
padding: $spacing-medium $spacing-medium 0;
padding-bottom: 0;
figcaption {
padding: $spacing-small 0;
@extend .pv1, .pv2-ns;
}
}

View File

@ -41,6 +41,7 @@
{{ end }}
{{ define "content" }}
<div class="ph2 ph0-ns">
<h1>{{ .Title }}</h1>
{{ if and .User .User.IsEduAuthor }}
<div class="mb3">
@ -51,10 +52,10 @@
</div>
{{ end }}
<div class="flex">
<div class="edu-article flex-grow-1 post-content">
<div class="edu-article flex-grow-1 post-content mw-100 overflow-hidden">
{{ .Article.Content }}
</div>
<div class="sidebar ml3 flex-shrink-0 w-30">
<div class="sidebar ml3 flex-shrink-0 w-30 dn db-ns">
<div class="toc-container flex flex-column">
{{ range .TOC }}
<a href="#{{ .ID }}" class="db ph2 pv1 br2 toc toc-{{ .Level }}">{{ .Text }}</a>
@ -112,4 +113,5 @@
});
toggleNotes();
</script>
</div>
{{ end }}