website: mobile css tweaks
- make it so on small screens (mobile), code blocks don't
run off the screen
- make the gutters a bit smaller on mobile, to not waste too
much real estate
Change-Id: Ifd07a47b8ac0e37e6aab0424b3fa43030afc1500
diff --git a/stylesheets/code.less b/stylesheets/code.less
index d76f54b..eaea532 100644
--- a/stylesheets/code.less
+++ b/stylesheets/code.less
@@ -18,6 +18,10 @@
margin: 0 -@gutter-half;
width: @pre-width;
+ @media @small-screen {
+ width: auto;
+ }
+
/* Include <pre> because clipboard buttons are in <pre>, not <code>. */
&, & code, & .hljs {
&:not(.noclipboard) {
diff --git a/stylesheets/index.less b/stylesheets/index.less
index 8062340..8992980 100644
--- a/stylesheets/index.less
+++ b/stylesheets/index.less
@@ -157,6 +157,10 @@
padding: 0 calc(@gutter + @gutter-half) @gutter;
max-width: @main-max-width;
+ @media @small-screen {
+ padding: 0 @gutter @gutter;
+ }
+
/* Prevent headings from being obscured by the <header> for #heading urls. */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
/**
