improvement: make vertical rythm work by using rem

This commit is contained in:
Kazhnuz 2019-10-17 09:58:36 +02:00
parent af3633ca84
commit 0ffa2940bb
7 changed files with 141 additions and 123 deletions

View file

@ -245,14 +245,14 @@ body {
font-family: Work Sans, WorkSans, sans-serif;
text-align: left;
font-size: 4.75mm;
line-height: 1.55em;
line-height: 1.5rem;
color: #073642;
font-weight: 300;
}
body, body #wrapper {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(255, 255, 255, 0) 1px);
background-repeat: repeat-y;
background-size: 100% 7.3625mm;
background-size: 100% 1.5rem;
}
.night-mode {
@ -278,7 +278,7 @@ a:hover, a:active {
p {
padding: 0;
padding-bottom: 1.55em;
padding-bottom: 1.5rem;
margin: 0;
}
p:last-child {
@ -287,7 +287,7 @@ p:last-child {
ul, ol {
padding: 0;
padding-bottom: 1.55em;
padding-bottom: 1.5rem;
margin: 0;
}
ul ul, ul ol, ol ul, ol ol {
@ -296,8 +296,8 @@ ul ul, ul ol, ol ul, ol ol {
}
ul li, ol li {
margin: 0;
margin-left: 1.55em;
line-height: 1.55em;
margin-left: 1.5rem;
line-height: 1.5rem;
}
::selection {
@ -338,7 +338,7 @@ ul li, ol li {
margin: 0;
}
.container-typographic .bypass-flex-fontsize {
line-height: 1.55em;
line-height: 1.5rem;
}
/* 2.3 - Titles */
@ -375,55 +375,55 @@ h1.page-title-flex > a:hover, h1.page-title-flex > a:focus, h1.page-title-flex >
h1 {
font-family: Amatic SC;
font-size: 15.8175mm;
line-height: 1.3963963964em;
font-size: 3.33rem;
line-height: 4.5rem;
padding: 0;
padding-bottom: 0.4654654655em;
padding-bottom: 1.5rem;
font-weight: 200;
}
h2 {
font-family: Amatic SC;
font-size: 12.94375mm;
line-height: 1.1376146789em;
font-size: 2.725rem;
line-height: 3rem;
padding: 0;
padding-bottom: 0.5688073394em;
padding-bottom: 1.5rem;
font-weight: 200;
}
h3 {
font-family: Work Sans;
font-size: 10.5925mm;
line-height: 1.3901345291em;
font-size: 2.23rem;
line-height: 3rem;
padding: 0;
padding-bottom: 0.6950672646em;
padding-bottom: 1.5rem;
font-weight: 500;
}
h4 {
font-family: Work Sans;
font-size: 8.66875mm;
line-height: 1.698630137em;
font-size: 1.825rem;
line-height: 3rem;
padding: 0;
padding-bottom: 0.8493150685em;
padding-bottom: 1.5rem;
font-weight: 500;
}
h5 {
font-family: Work Sans;
font-size: 6.83525mm;
line-height: 1.0771369006em;
font-size: 1.439rem;
line-height: 1.5rem;
padding: 0;
padding-bottom: 1.0771369006em;
padding-bottom: 1.5rem;
font-weight: 500;
}
h6 {
font-family: Work Sans;
font-size: 5.8045mm;
line-height: 1.2684124386em;
font-size: 1.222rem;
line-height: 1.5rem;
padding: 0;
padding-bottom: 1.2684124386em;
padding-bottom: 1.5rem;
font-weight: 800;
}
@ -439,24 +439,27 @@ hr {
}
/* 2.5 - Wells and quotes */
blockquote, .quote, .well {
blockquote, .quote {
border-width: 0 0 0 0em;
border-style: none;
border-radius: 0px;
margin: 0.75em -0.325em 0.75em -0.325em;
padding: 0.75em 1em 0.75em 1em;
margin: 0 0 1.5rem 0;
padding: 1.5rem 1rem 1.5rem 1rem;
max-width: 100%;
background-color: #eee8d5;
font-style: italic;
color: #073642;
}
blockquote:before, .quote:before {
content: "";
}
pre, .pre, .well-pre {
.well, pre, .pre, .well-pre {
border-width: 0 0 0 0em;
border-style: none;
border-radius: 0px;
margin: 0.75em -0.325em 0.75em -0.325em;
padding: 0.75em 1em 0.75em 1em;
margin: 0 0 1.5rem 0;
padding: 1.5rem 1rem 1.5rem 1rem;
max-width: 100%;
background-color: #eee8d5;
font-style: italic;
@ -574,7 +577,7 @@ mark {
/* ------------------ HEADERS ------------------- */
#page-header {
background: #2aa198 url("../img/background.png") center bottom repeat-x;
height: 22.5em;
height: 22.5rem;
border-top: 6px solid #073642;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(255, 255, 255, 0) 1px);
background-repeat: repeat-y;
@ -676,8 +679,8 @@ ul.social li a:hover {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: none;
margin: 0;
margin-bottom: 1.5em;
padding: 1.5em;
margin-bottom: 1.5rem;
padding: 1.5rem;
}
.card .card-body {
padding: 0;
@ -689,9 +692,9 @@ ul.social li a:hover {
font-size: 1.1em;
font-weight: 600;
border-radius: 0;
padding: 0.75em;
padding-bottom: 0.75em !important;
margin-left: -3em;
padding: 0.75rem;
padding-bottom: 0.75rem !important;
margin-left: -3rem;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
font-size: 1em;
@ -709,16 +712,16 @@ ul.social li a:hover {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: none;
margin: 0;
margin-bottom: 1.5em;
padding: 0.75em;
margin-bottom: 1.5rem;
padding: 0.75rem;
}
.smallcard-header, .toast-header, .menu-header {
font-size: 1.1em;
font-weight: 600;
border-radius: 0;
padding: 0.75em;
padding-bottom: 0.75em !important;
margin-left: -3em;
padding: 0.75rem;
padding-bottom: 0.75rem !important;
margin-left: -3rem;
}
.smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10, .toast-header h1, .toast-header h2, .toast-header h3, .toast-header h4, .toast-header h5, .toast-header h6, .toast-header h7, .toast-header h8, .toast-header h9, .toast-header h10, .menu-header h1, .menu-header h2, .menu-header h3, .menu-header h4, .menu-header h5, .menu-header h6, .menu-header h7, .menu-header h8, .menu-header h9, .menu-header h10 {
font-size: 1em;
@ -909,12 +912,14 @@ ul.social li a:hover {
*
*/
.btn {
padding: 1.5em;
padding-top: 0.75em;
padding-bottom: 0.75em;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
margin: 0.75em;
margin-bottom: 1em;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
position: relative;
@ -929,8 +934,8 @@ ul.social li a:hover {
content: " ";
position: absolute;
top: 0;
left: -0.75em;
right: -0.75em;
left: -0.75rem;
right: -0.75rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
@ -946,14 +951,19 @@ ul.social li a:hover {
.btn:hover, .btn:active {
border: 0px solid rgba(0, 0, 0, 0.3);
}
p .btn:last-child {
margin-bottom: 0;
}
.label, label.label, a.label, .chip, a.chip {
padding: 0.375em;
padding-top: 0.1875em;
padding-bottom: 0.1875em;
padding: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
margin: 0.1875rem;
margin-top: 0.125rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
margin: 0.1875em;
margin-bottom: 0.25em;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
position: relative;
@ -967,8 +977,8 @@ ul.social li a:hover {
content: " ";
position: absolute;
top: 0;
left: -0.1875em;
right: -0.1875em;
left: -0.1875rem;
right: -0.1875rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
@ -996,7 +1006,7 @@ ul.social li a:hover {
}
.btn-toolbar {
padding: 0 1.5em;
padding: 0 1.5rem;
}
.btn-group {
@ -1006,7 +1016,7 @@ ul.social li a:hover {
}
.btn-group .btn {
margin: 0 0.95em 0 0.95em !important;
margin: 0 0.95rem 0 0.95rem !important;
}
/* ------------------ BREADCRUMB ------------------- */
@ -1014,7 +1024,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
padding-top: 0em;
background-color: transparent;
margin: 0;
padding-bottom: 1.5em;
padding-bottom: 2rem;
}
.breadcrumb li.breadcrumb-item {
@ -1025,19 +1035,21 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
}
.breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item span {
display: inline-block;
padding: 1.5em;
padding-top: 0.75em;
padding-bottom: 0.75em;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
margin: 0.75em;
margin-bottom: 1em;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
position: relative;
z-index: 1;
overflow: visible;
color: #073642;
margin: 0 0.6em 0 0.6em;
margin: 0 0.6rem 0 0.6rem;
}
.breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:focus, a:hover > .breadcrumb li.breadcrumb-item a, a:active > .breadcrumb li.breadcrumb-item a, a:focus > .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item span:hover, .breadcrumb li.breadcrumb-item span:active, .breadcrumb li.breadcrumb-item span:focus, a:hover > .breadcrumb li.breadcrumb-item span, a:active > .breadcrumb li.breadcrumb-item span, a:focus > .breadcrumb li.breadcrumb-item span {
text-decoration: none;
@ -1046,8 +1058,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
content: " ";
position: absolute;
top: 0;
left: -0.75em;
right: -0.75em;
left: -0.75rem;
right: -0.75rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
@ -1327,7 +1339,15 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
background-color: rgba(26, 26, 26, 0);
}
/* social */
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin-top: 1.5rem;
}
.reagir {
text-align: right;
}
.btn-facebook, a.btn-facebook {
color: #fdf6e3;
}
@ -1389,15 +1409,6 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
background-color: #3d4455;
}
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin: 15px;
}
.reagir {
text-align: right;
}
/* ------------------ PREVIEWS ------------------- */
.previews-section {
display: flex;

File diff suppressed because one or more lines are too long

View file

@ -7,8 +7,8 @@
$color-button-light: $color-light;
$color-button-dark: $color-dark;
$button_large: 1.5em;
$button_small: 0.375em;
$button_large: 1.5rem;
$button_small: 0.375rem;
@mixin biseau($size) {
position: relative;
@ -30,11 +30,14 @@ $button_small: 0.375em;
@mixin button($size) {
padding: $size;
padding-top: $size/2;
padding-bottom:$size/2;
padding-top: $size/3;
padding-bottom: $size/3;
margin:$size/2;
margin-top: $size/3;
margin-bottom: 1.5rem;
//font-size: 4.75mm;
line-height:1.5rem;
height:auto;
margin: $size/2;
margin-bottom:$size/1.5;
@include borders();
@include border-radius();
@ -86,6 +89,10 @@ $button_small: 0.375em;
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
}
.label, label.label, a.label, .chip, a.chip {
@ -100,7 +107,7 @@ $button_small: 0.375em;
// BUTTONS GROUPS
$grouped-test: $button-large/1.5 - 0.05em ;
$grouped-test: $button-large/1.5 - 0.05rem ;
.btn-toolbar {
padding: 0 $button-large;
@ -122,7 +129,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
padding-top: 0em;
background-color:transparent;
margin: 0;
padding-bottom:1.5em;
padding-bottom:2rem;
}
.breadcrumb li.breadcrumb-item {
@ -176,8 +183,15 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
&-link {@include button-color(transparent, $color-dark);}
}
/* social */
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin-top:1.5rem;
}
.reagir {
text-align:right;
}
.btn, a.btn {
&-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, $color-button-light);}

View file

@ -5,8 +5,8 @@
*
*/
$card-bigpad: 1.5em;
$card-smallpad: 0.75em;
$card-bigpad: 1.5rem;
$card-smallpad: 0.75rem;
@mixin card($size) {
@include border-radius();
@ -14,7 +14,7 @@ $card-smallpad: 0.75em;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:1.5em;
margin-bottom:1.5rem;
padding: $size;
}

View file

@ -6,16 +6,6 @@
@import 'buttons';
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin:15px;
}
.reagir {
text-align:right;
}
/* ------------------ PREVIEWS ------------------- */
.previews-section {

View file

@ -32,7 +32,7 @@
#page-header {
background: $color-turquoise url('../img/background.png') center bottom repeat-x;
height:15*1.5em;
height:15*1.5rem;
border-top: 6px solid $color-dark2;
@include limitedSize();

View file

@ -10,8 +10,8 @@
/* 2.2 - Global Typography */
$baseline: 1.55;
$base_lineheight: $baseline * 1em;
$baseline: 1.5;
$base_lineheight: $baseline * 1rem;
$base_fontsize: 4.75mm;
@mixin paragraph() {
@ -31,7 +31,7 @@ body {
&, #wrapper {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.25) 0, rgba(255, 255, 255, 0) 1px);
background-repeat: repeat-y;
background-size: 100% $baseline * $base_fontsize;}
background-size: 100% 1.5rem;}
}
.night-mode {
@ -118,15 +118,13 @@ ul, ol {
/* 2.3 - Titles */
@mixin newTitle($font, $size, $lineNumber, $weight) {
$linesize: $lineNumber * $baseline;
$lineheight: $linesize / $size;
$padding: $lineheight / $lineNumber;
@mixin newTitle($font, $size, $weight) {
$lineNumber: ceil($size / 1.5);
font-family: $font;
font-size: $size * $base_fontsize;
line-height: $lineheight * 1em;
font-size: $size * 1rem;
line-height: $lineNumber * 1.5rem;
padding: 0;
padding-bottom: $padding * 1em;
padding-bottom: 1.5rem;
font-weight: $weight;
}
@ -167,28 +165,28 @@ h1, h2, h3, h4, h5, h6, h7 {
h1 {
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
@include newTitle(Amatic SC, 3.33, 3, 200);
@include newTitle(Amatic SC, 3.33, 200);
}
h2 {
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
@include newTitle(Amatic SC, 2.725, 2, 200);
@include newTitle(Amatic SC, 2.725, 200);
}
h3 {
@include newTitle(Work Sans, 2.23, 2, 500);
@include newTitle(Work Sans, 2.23, 500);
}
h4 {
@include newTitle(Work Sans, 1.825, 2, 500);
@include newTitle(Work Sans, 1.825, 500);
}
h5 {
@include newTitle(Work Sans, 1.439, 1, 500);
@include newTitle(Work Sans, 1.439, 500);
}
h6 {
@include newTitle(Work Sans, 1.222, 1, 800);
@include newTitle(Work Sans, 1.222, 800);
}
/* 2.4 - hr */
@ -210,8 +208,8 @@ hr {
border-style: none;
border-radius: 0px;
margin: 0.75em -0.325em 0.75em -0.325em;
padding: 0.75em 1em 0.75em 1em;
margin: 0 0 1.5rem 0;
padding: 1.5rem 1rem 1.5rem 1rem;
max-width: 100%;
background-color: $color-light2;
@ -219,13 +217,18 @@ hr {
color: $color-dark2;
}
blockquote, .quote, .well {
blockquote, .quote {
@include well();
&:before {
content:"";
}
}
.well, pre, .pre, .well-pre {
@include well();
}
pre, .pre, .well-pre {
@include well();
}
code {
background:transparent;