Chosto
/
blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better responsiveness / fix horizontal scrollbar on mobiles

master
Quentin Duchemin 2023-07-04 13:02:28 +02:00
parent 5328326aca
commit a1e72e7fd3
Signed by: Chosto
GPG Key ID: 96AB8AE7DFEA3D74
3 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
themes/chosto/layouts/_default/single.html
View File

@ -5,8 +5,12 @@
with all other blog posts belonging to that case, emphasis to the current. with all other blog posts belonging to that case, emphasis to the current.
Still use empty container if nothing to show for homogeneous layout Still use empty container if nothing to show for homogeneous layout
--> -->
<div class="columns is-variable is-8"> <!-- is-desktop stacks vertically columns for tablets and mobiles. is-8 is a
<aside class="menu column mt-2 is-one-quarter"> maximum gap of 2rem between columns -->
<div class="columns is-variable is-desktop is-8">
<!-- To ease reading, the content is a bit wider for small screens
but not too wide for big screens -->
<aside class="menu column mt-2 is-one-fifth-desktop is-one-quarter-fullhd is-full-tablet is-full-mobile">
{{ if (and .IsPage (eq .FirstSection.Section "posts"))}} {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
{{ with .CurrentSection }} {{ with .CurrentSection }}
{{ if .Params.Title }} {{ if .Params.Title }}
@ -24,7 +28,7 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</aside> </aside>
<section class="column content is-half"> <section class="column content is-three-fifths-desktop is-half-fullhd is-full-tablet is-full-mobile">
<div> <div>
<article> <article>
<!-- If this is part of a thematic serie, remind it so it is clear --> <!-- If this is part of a thematic serie, remind it so it is clear -->
@ -33,7 +37,8 @@
{{ if .Params.Title }} {{ if .Params.Title }}
<div class="message is-info"> <div class="message is-info">
<div class="message-body content"> <div class="message-body content">
Le post que vous lisez fait partie du dossier « <a href="{{ .Permalink }}">{{ .Params.Title }}</a> ». Le menu sur la gauche permet de naviguer entre ses billets. Bonne lecture ! 😄 Le post que vous lisez fait partie du dossier « <a href="{{ .Permalink }}">{{ .Params.Title }}</a> ». Le
menu sur la gauche permet de naviguer entre ses billets. Bonne lecture ! 😄
</div> </div>
</div> </div>
{{ end }} {{ end }}
@ -60,7 +65,8 @@
<div class="message is-link"> <div class="message is-link">
<div class="message-header">Sommaire</div> <div class="message-header">Sommaire</div>
<!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code --> <!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
<div class="message-body has-text-left pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div> <div class="message-body has-text-left pt-1">
{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
</div> </div>
{{ end }} {{ end }}
<!-- Finally, content! --> <!-- Finally, content! -->

2
themes/chosto/layouts/shortcodes/quote.html
View File

@ -1 +1 @@
<blockquote>{{ .Inner }}</blockquote> <blockquote>{{ .Inner | markdownify}}</blockquote>

9
themes/chosto/static/css/custom.css
View File

@ -44,3 +44,12 @@ figure img {
.menu-label { .menu-label {
text-justify: none; text-justify: none;
} }
/* Workaround for horizontal scrollbar,
probably because I'm messing with containers,
sections and columns, but I do not understand
CSS enough to fix it properly.
See https://github.com/jgthms/bulma/issues/449 */
body {
overflow-x: hidden;
}