kazhnuz/moineau
1
0
Fork 0
Code Issues 7 Pull requests Releases 2 Wiki Activity

css: finish responsive wrapper support

Browse source
This commit is contained in:
Kazhnuz 2018-10-03 17:02:35 +02:00
parent 8662d30bcb
commit bbfa34f229
2 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
css/clear-typography.css
View file

@ -79,21 +79,35 @@ a {
/* ------------------ WRAPPERS ------------------- */ /* ------------------ WRAPPERS ------------------- */
.text-wrapper { .text-wrapper {
font-size: calc(3mm + 1.1vw); font-size: calc(2.5mm + 1vw);
margin: auto; 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) { @media screen and (min-width: 800px) {
.text-wrapper { .text-wrapper.size-800 {
font-size: calc(3mm + 8.8px);; 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; max-width: 800px;
} }
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
.text-wrapper.size-1200 { .text-wrapper.size-1200 {
font-size: calc(3mm + 13.1px);; font-size: calc(2.5mm + 12px);
max-width: 800px; max-width: 800px;
} }
} }
@ -174,7 +188,7 @@ hr {
blockquote { blockquote {
border-top: 0px; border-top: 0px;
border-left: 2px; border-left: 0.15em;
border-right: 0px; border-right: 0px;
border-bottom: 0px; border-bottom: 0px;
border-color: rgba(1, 1, 1, 0.15); border-color: rgba(1, 1, 1, 0.15);
@ -196,7 +210,7 @@ blockquote {
pre { pre {
border-top: 0px; border-top: 0px;
border-left: 2px; border-left: 0.15em;
border-right: 0px; border-right: 0px;
border-bottom: 0px; border-bottom: 0px;
border-color: rgba(1,1,1,0.20); border-color: rgba(1,1,1,0.20);
@ -210,7 +224,8 @@ pre {
padding-right: 1em; padding-right: 1em;
background-color:#EEE; background-color:#EEE;
max-width:100% max-width:100%;
overflow-x: scroll;
} }
.night-mode pre { .night-mode pre {

2
example.html
View file

@ -18,7 +18,7 @@
</head> </head>
<body> <body>
<article class="text-wrapper"> <article class="text-wrapper size-920">
<h1> <h1>
Titre de niveau 1 Titre de niveau 1
</h1> </h1>