typographie

This commit is contained in:
2020-07-28 22:14:58 +02:00
parent f7a6562f51
commit b8dad034eb
91 changed files with 718 additions and 255 deletions
@@ -1,4 +1,4 @@
#toolbar-administration{
z-index: 1000;
z-index: 99999;
position: fixed;
}
@@ -4,7 +4,7 @@
background: white;
border-radius: 0;
a{
font-family: 'truenoregular';
font-family: 'truenobold';
font-size: 0.6rem;
color: $color2;
span{
@@ -4,18 +4,7 @@ footer{
height: auto;
padding: 2rem 0 0 0;
margin-top:2rem;
h2{
font-size: 1.5rem;
text-transform: uppercase;
line-height: 1rem;
}
a{
color: black;
&:hover{
color: black;
}
}
& > .row{
& > .d-flex{
& > div{
margin-bottom: 1.5rem;
}
@@ -75,7 +64,6 @@ footer{
}
.site_setting_entity{
img{
// width: 100%;
height: auto;
}
}
@@ -182,21 +182,3 @@ header.front{
display: none;
}
}
#block-mainnavigation{
ul{
li{
font-size: 0.8rem;
a{
color: black;
font-family: 'truenoregular';
&:hover{
color: black;
text-decoration: none;
font-weight: bold;
}
}
}
}
}
@@ -20,12 +20,13 @@
color: $color2;
background: white;
transition: color 0.3s ease, background 0.3s ease;
font-size: 1.7rem;
font-size: 2rem;
font-family: 'dukefill';
letter-spacing: 0.05rem;
text-transform: uppercase;
@media screen and (min-width: 576px) {
@media screen and (min-width: 768px) {
// padding: 1rem 1rem;
font-size: 2.5rem;
}
&:hover{
text-decoration: none;
@@ -11,22 +11,20 @@ body{
margin-right: -50vw;
}
}
.__img-hero{
height: 300px;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.__img-hero{
height: 300px;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.participant_full{
@@ -52,12 +52,12 @@
&.first{
flex-direction: column;
span{
font-family: 'truenolight';
position: absolute;
top: -2.5rem;
width: max-content;
font-size: 1.2rem;
line-height: 1.2;
font-family: 'truenoregular';
}
}
}
@@ -51,6 +51,9 @@ section{
.__wrap{
padding: 0.5rem;
}
div > *{
color:$color2;
}
}
&.bibliographie{
@@ -69,7 +72,7 @@ section{
width: calc(100% / 4 - #{$gutter} * 2);
}
& > div * {
color: $col_black;
color: $color2;
&.__auteur *{
font-size: 1.4rem;
}
@@ -103,7 +106,6 @@ section{
.__publications{
.publications{
// margin: $gutter;
.__media{
padding: 0.5rem 0 0.5rem 0.5rem;
}
@@ -28,6 +28,11 @@ h2{
font-family: 'dukefill';
font-size: 2.5rem;
line-height: 2.5rem;
color: $color2;
@media screen and (min-width: 768px) {
font-size: 3rem;
line-height: 3.5rem;
}
a{
color: $color2;
}
@@ -38,6 +43,10 @@ h3{
font-family: 'dukefill';
font-size: 2rem;
color: $lightgrey;
@media screen and (min-width: 768px){
font-size: 2.5rem;
line-height: 3.5rem;
}
}
p {
@@ -50,6 +59,19 @@ p{
font-size: 1rem;
line-height: 1.5rem;
font-family: 'truenoregular';
strong{
font-family: 'truenobold';
em{
font-family: 'truenobold_italic';
}
}
em{
font-family: 'truenoregular_italic';
}
a{
display: inline;
background: $underline;
}
}
a{
@@ -86,8 +108,6 @@ img{
object-fit: cover;
}
button{
outline:0;
border: 0;
@@ -96,3 +116,15 @@ button{
border: 0;
}
}
footer{
*{
font-family: 'truenobold';
color: $col_black;
}
h2{
text-transform: uppercase;
font-size: 1rem;
line-height: 1.5rem;
}
}
@@ -20,10 +20,51 @@
font-style: normal;
}
@font-face {
font-family: 'truenolight';
src: url('../fonts/trueno/truenolt-webfont.woff2') format('woff2'),
url('../fonts/trueno/truenolt-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'truenolight_italic';
src: url('../fonts/trueno/truenoltit-webfont.woff2') format('woff2'),
url('../fonts/trueno/truenoltit-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'truenoregular';
src: url('../fonts/truenorg-webfont.woff2') format('woff2'),
url('../fonts/truenorg-webfont.woff') format('woff');
src: url('../fonts/trueno/truenorg-webfont.woff2') format('woff2'),
url('../fonts/trueno/truenorg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'truenoregular_italic';
src: url('../fonts/trueno/truenorgit-webfont.woff2') format('woff2'),
url('../fonts/trueno/truenorgit-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'truenobold';
src: url('../fonts/trueno/truenobd-webfont.woff2') format('woff2'),
url('../fonts/trueno/truenobd-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'truenobold_italic';
src: url('../fonts/trueno/truenobdit-webfont.woff2') format('woff2'),
url('../fonts/trueno/truenobdit-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@@ -66,13 +107,28 @@
}
}
main{
// page publication
form{
label{
font-family: 'truenolight';
}
.select-items{
div{
font-family: 'truenolight';
}
}
.select-selected{
font-family: 'truenoregular';
}
input{
font-family: 'truenolight';
}
}
.thumbnails{
&.programme{
.__content{
font-family: 'truenoregular';
font-weight: bold;
font-family: 'truenobold';
font-size: 1rem;
text-transform: uppercase;
}
@@ -102,6 +158,32 @@ main{
}
}
// thumbnails_participants
.thumbnails_participants{
@include shadow_participants;
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular_italic';
font-size: 0.8rem;
}
}
.paragraph--type--role-de-l-intervenant{
.___title_inter{
div{
font-family: 'truenobold';
font-size: 0.8rem;
text-transform: uppercase;
}
}
}
// page shadow_participants
article{
&.participant_full{
@@ -109,14 +191,17 @@ article{
h2{
font-family: 'truenoregular';
font-size: 2rem;
line-height: 1;
letter-spacing: normal;
}
}
.status{
div{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
font-family: 'truenoregular_italic';
color: $color2;
font-size: 1rem;
line-height: 1.2rem;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
@@ -125,34 +210,3 @@ article{
}
}
}
// thumbnails_participants
.thumbnails_participants{
@include shadow_participants;
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 0.8rem;
font-style: italic;
}
}
.paragraph--type--role-de-l-intervenant{
.___title_inter{
div{
font-family: 'truenoregular';
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
}
}
}
}
@@ -51,14 +51,20 @@ article img,
}
.side_notes{
position: relative;
& > a{
position: absolute;
// margin-top: -5.5rem;
transform: translateY(-50%);
}
}
.side_notes > *{
position: absolute;
width: 300px;
.side_notes *{
margin: 0 0 0 0;
padding: 0;
flex: 100%;
max-width: 100%;
}
.side_notes .d-flex {
flex-direction: column;
// flex-direction: column;
}
@@ -1,36 +1,57 @@
header{
#block-mainnavigation{
ul{
li{
font-size: 0.8rem;
a{
color: black;
font-family: 'truenoregular';
&:hover{
font-family: 'truenobold';
color: black;
text-decoration: none;
}
}
}
}
}
}
#txt_present{
margin: 3rem 0;
@media screen and (min-width: 992px) {
margin: 5rem 0;
}
& * {
color: $color2;
}
& > div{
margin: 2rem auto;
}
.__title-present{
h2{
font-size: 1.5rem;
letter-spacing: $letter_spacingH;
font-size: 1.9rem;
font-family: 'truenoregular';
line-height: normal;
}
}
.__sub-title-present{
p{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
line-height: 1rem;
font-family: 'truenoregular_italic';
font-size: 0.9rem;
line-height: 1.3rem;
}
}
.__body-present{
p{
font-family: 'truenoregular';
font-weight: lighter;
font-size: 1rem;
line-height: 1.5rem;
font-family: 'truenolight';
font-size: 1.2rem;
line-height: 1.8rem;
}
}
@@ -7,6 +7,40 @@ main:not(.home){
}
}
//
body{
position: relative;
&::before{
z-index: -1;
content: " ";
width: 100%;
height: 100%;
background-image: url("../images/croix_fond.svg");
background-size: content;
display: block;
position: absolute;
top: 0;
left: 0;
}
&::after{
z-index: -1;
content: " ";
width: 100%;
height: 100%;
background:
linear-gradient(
to top,
rgba(255, 255, 255, 0.8), white, rgba(255, 255, 255, 0.8)
);
display: block;
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 0;
}
}
article{
.__title{
@include croix_or;
@@ -6,7 +6,7 @@
}
h3{
font-size: 1.5rem;
font-family: 'truenoregular';
font-family: 'truenolight';
color: $col_black;
}
.views{