hmn
/
hmn
4
Fork 9
Code Issues 59 Pull Requests 1 Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/parsing.wasm
View File

Binary file not shown.

19
public/style.css
View File

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

7
src/rawdata/scss/_content.scss
View File

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

6
src/templates/src/education_article.html
View File

@ -41,6 +41,7 @@
{{ end }} {{ end }}
{{ define "content" }} {{ define "content" }}
<div class="ph2 ph0-ns">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ if and .User .User.IsEduAuthor }} {{ if and .User .User.IsEduAuthor }}
<div class="mb3"> <div class="mb3">
@ -51,10 +52,10 @@
</div> </div>
{{ end }} {{ end }}
<div class="flex"> <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 }} {{ .Article.Content }}
</div> </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"> <div class="toc-container flex flex-column">
{{ range .TOC }} {{ range .TOC }}
<a href="#{{ .ID }}" class="db ph2 pv1 br2 toc toc-{{ .Level }}">{{ .Text }}</a> <a href="#{{ .ID }}" class="db ph2 pv1 br2 toc toc-{{ .Level }}">{{ .Text }}</a>
@ -112,4 +113,5 @@
}); });
toggleNotes(); toggleNotes();
</script> </script>
</div>
{{ end }} {{ end }}