css: finish responsive wrapper support
This commit is contained in:
parent
8662d30bcb
commit
bbfa34f229
2 changed files with 28 additions and 13 deletions
|
@ -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 {
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<article class="text-wrapper">
|
||||
<article class="text-wrapper size-920">
|
||||
<h1>
|
||||
Titre de niveau 1
|
||||
</h1>
|
||||
|
|
Loading…
Reference in a new issue