From bbfa34f229d52433dcb703a35baa40b4c96284ef Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Wed, 3 Oct 2018 17:02:35 +0200 Subject: [PATCH] css: finish responsive wrapper support --- css/clear-typography.css | 39 +++++++++++++++++++++++++++------------ example.html | 2 +- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/css/clear-typography.css b/css/clear-typography.css index 4376e62..bb860e5 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -79,21 +79,35 @@ a { /* ------------------ WRAPPERS ------------------- */ .text-wrapper { - font-size: calc(3mm + 1.1vw); + font-size: calc(2.5mm + 1vw); margin: auto; - line-height: 1.5em; + line-height: 1.5em; +} + +@media screen and (min-width: 640px) { + .text-wrapper.size-640 { + max-width: 640px; + font-size: calc(2.5mm + 6.4px); + } } @media screen and (min-width: 800px) { - .text-wrapper { - font-size: calc(3mm + 8.8px);; + .text-wrapper.size-800 { + font-size: calc(2.5mm + 8.0px); + max-width: 800px; + } +} + +@media screen and (min-width: 920px) { + .text-wrapper.size-920 { + font-size: calc(2.5mm + 9.2px); max-width: 800px; } } @media screen and (min-width: 1200px) { - .text-wrapper .size-1200 { - font-size: calc(3mm + 13.1px);; + .text-wrapper.size-1200 { + font-size: calc(2.5mm + 12px); max-width: 800px; } } @@ -174,12 +188,12 @@ hr { blockquote { border-top: 0px; - border-left: 2px; + border-left: 0.15em; border-right: 0px; border-bottom: 0px; border-color: rgba(1, 1, 1, 0.15); border-style: solid; - border-radius:3px; + border-radius: 3px; margin: 0.5em; margin-left: 0.1em; margin-right: 0.1em; @@ -187,7 +201,7 @@ blockquote { padding-left: 1em; padding-right: 1em; - max-width:100% + max-width: 100% } .night-mode blockquote { @@ -196,12 +210,12 @@ blockquote { pre { border-top: 0px; - border-left: 2px; + border-left: 0.15em; border-right: 0px; border-bottom: 0px; border-color: rgba(1,1,1,0.20); border-style: solid; - border-radius:3px; + border-radius: 3px; margin: 0px; margin-left: 0.1em; margin-right: 0.1em; @@ -210,7 +224,8 @@ pre { padding-right: 1em; background-color:#EEE; - max-width:100% + max-width:100%; + overflow-x: scroll; } .night-mode pre { diff --git a/example.html b/example.html index 6945f6f..80c5f96 100644 --- a/example.html +++ b/example.html @@ -18,7 +18,7 @@ -
+

Titre de niveau 1