2021-02-06 22:22:13 +01:00
// perso
// les différences
2021-09-02 20:04:44 +02:00
. btn {
padding : 0 .5 em 1 em ;
font-weight : 500 ;
& : hover {
background : $couleurPrincipaleOn ;
color : $couleurPrincipale !important ;
}
}
. liens . btn {
padding : 0 .7 em 1 em ;
}
. btn . blanc {
border-radius : 0 .7 em ;
}
span . btn {
cursor : text ;
}
2021-09-13 13:45:14 +02:00
. flex {
width : 100 % ;
2021-09-13 13:50:16 +02:00
clear : both ;
2021-09-13 13:45:14 +02:00
}
2021-09-02 20:04:44 +02:00
2021-02-06 22:22:13 +01:00
. page_wrapper {
background : $couleurPrincipale url( '../images/egalizer.png' ) repeat-x center - 150 px ;
2021-09-02 20:04:44 +02:00
/* background-attachment:fixed; */
2021-02-09 08:03:46 +01:00
@media ( $bp-small ) {
background : $couleurPrincipale url( '../images/egalizer-480.png' ) repeat-x center - 150 px ;
}
2021-02-06 22:22:13 +01:00
}
. page_header {
padding : 0 ;
> . page_container {
background-color : $couleurSecondaire ;
2021-07-30 00:11:35 +02:00
}
. header_title {
min-width : 150 px ;
2021-02-06 22:22:13 +01:00
}
2021-03-07 12:55:04 +01:00
. header_menu {
flex-grow : 2 ;
2021-07-30 00:11:35 +02:00
padding : $spacer ;
. nav {
padding-top : 0 ;
}
2021-03-07 12:55:04 +01:00
. liens {
2021-03-11 16:29:35 +01:00
text-align : right ;
2021-03-07 14:53:42 +01:00
margin-top : 0 .7 rem ;
2021-03-07 12:55:04 +01:00
. btn {
2021-03-11 16:29:35 +01:00
float : right ;
margin-top : 1 .55 rem ;
2021-03-07 12:55:04 +01:00
. fas : before {
font-size : 1 rem ;
}
& : hover , &: focus {
background : $couleurPrincipaleOn ;
color : $couleurPrincipale !important ;
. fas : before {
color : $couleurPrincipale !important ;
}
}
}
. sociaux {
float : right ;
2021-03-11 16:29:35 +01:00
display : inline-block ;
2021-03-07 12:55:04 +01:00
font-size : 0 .8 rem ;
2021-07-30 00:11:35 +02:00
margin : 1 .8 rem 1 .5 rem 0 0 ;
2021-03-07 12:55:04 +01:00
. socicon {
background : none !important ;
color : $blancTransparent ;
& : hover , &: focus {
color : $couleurPrincipaleOn ;
}
}
}
. formulaire_spip . formulaire_abomailman_mini_une_liste {
width : 230 px ;
float : right ;
2021-03-07 14:53:42 +01:00
position : relative ;
2021-03-11 16:29:35 +01:00
margin : 0 0 0 $spacer ;
text-align : left ;
2021-03-07 14:53:42 +01:00
. reponse_formulaire {
position : absolute ;
top : 100 % ;
margin : 0 ;
}
2021-03-07 12:55:04 +01:00
}
}
}
2021-02-06 22:22:13 +01:00
. nav a {
border : 0 ;
color : white ;
2021-02-11 21:54:18 +01:00
padding : 0 .3 em 0 .7 em 0 .2 em ;
margin-right : 0 ;
margin-left : 0 ;
2021-02-06 22:22:13 +01:00
border-radius : 4 px ;
/* background-color:$couleurSecondaire; */
. on & ,
& . on ,
& : focus ,
& : hover ,
& : active {
background-color : $couleurPrincipaleOn ;
2021-03-07 14:53:42 +01:00
color : $couleurPrincipale ;
2021-02-06 22:22:13 +01:00
}
}
> . page_container . nav > ul . loupe a {
i . fa-search {
2021-03-07 14:53:42 +01:00
background-color : $blancTransparent ;
font-size : 0 .8 rem ;
color : $couleurSecondaire ;
2021-02-06 22:22:13 +01:00
& : hover {
background-color : $couleurPrincipaleOn ;
2021-03-07 14:53:42 +01:00
color : $couleurPrincipale ;
2021-02-06 22:22:13 +01:00
}
}
}
}
2021-03-07 14:53:42 +01:00
2021-02-06 22:22:13 +01:00
. page_header_container {
align-items : flex-start ;
}
2021-03-11 16:29:35 +01:00
. arbo {
@include visuallyhidden ;
2021-03-07 12:55:04 +01:00
}
2021-09-10 12:36:03 +02:00
2021-07-30 00:11:35 +02:00
. encart {
float : right ;
text-align : right ;
font-size : 1 .1 rem ;
margin-left : 2 rem ;
span {
font-size : 145 % ;
& . bientot {
display : inline-block ;
color : $couleurSecondaire ;
font-weight : 900 ;
}
& . btn {
background : $couleurSecondaire ;
color : white !important ;
font-weight : 900 ;
margin : 0 .6 rem 0 0 .3 rem ;
padding : 1 .3 rem 2 rem ;
& : first-letter {
text-transform : uppercase ;
}
}
}
}
2021-09-10 12:36:03 +02:00
//----------------------------------------
// Boutons
//----------------------------------------
. button ,
2021-09-10 14:15:48 +02:00
. formulaire_spip : not ( . formulaire_recherche ) : not ( . formulaire_abomailman_mini_une_liste ) button ,
2021-09-10 12:36:03 +02:00
. formulaire_spip input [ type = submit ]
{
@include bouton ( $couleur-boutons , #fff , $couleurPrincipaleOn ) ;
}
2021-09-23 23:27:35 +02:00
. sansbordure a . spip_out , a . sansbordure {
border : 0 !important ;
2021-09-10 12:36:03 +02:00
}
2021-02-06 22:22:13 +01:00
. texte_accueil {
background-color : white ;
2021-07-30 00:11:35 +02:00
. main {
padding-bottom : 1 rem ;
}
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium-up ) {
. flex2 > . main {
max-width : 60 % ;
}
. flex2 > . aside {
max-width : 40 % ;
padding-left : ( $spacer * 4 ) ;
@include media ( $bp-medium ) {
padding-left : ( $spacer * 2 ) ;
}
}
2021-09-13 13:26:46 +02:00
}
2021-02-06 22:22:13 +01:00
}
. article-resume {
background-color : white ;
padding : $spacer ;
}
2021-09-07 11:11:19 +02:00
. article__texte {
margin-bottom : ( $spacer * 3 ) ;
}
2021-09-15 11:37:24 +02:00
. article__interactivite {
@include flex ;
> a {
margin-left : 1 rem ;
}
}
2021-02-06 22:22:13 +01:00
2021-06-10 18:05:33 +02:00
. page_main {
overflow : hidden ;
}
2021-09-09 14:46:52 +02:00
. page_main_content {
align-items : start ;
2021-09-10 12:36:03 +02:00
@include media ( $bp-medium-up ) {
2021-09-10 14:08:21 +02:00
. page_article : not ( . article_chronique ) & {
2021-09-10 12:36:03 +02:00
background : white ;
. page_aside {
margin-left : 0 ;
}
}
}
2021-09-09 14:46:52 +02:00
}
2021-07-01 09:09:09 +02:00
. composition_emissions , . composition_emission , . composition_chroniques {
. page_main_content {
flex-direction : column ;
}
. page_content , . page_aside {
2021-09-02 20:04:44 +02:00
2021-07-01 09:09:09 +02:00
}
. page_content {
}
2021-02-06 22:22:13 +01:00
}
2021-09-23 20:24:38 +02:00
2021-09-03 11:29:18 +02:00
. page_content , . page_aside , . page_extra {
2021-09-02 20:04:44 +02:00
> * {
margin : 0 0 ( $spacer * 2 ) ;
padding : $spacer ( $spacer * 4 ) ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
padding : $spacer ( $spacer * 2 ) ;
}
2021-09-02 20:04:44 +02:00
& . page_extra {
padding : 0 ;
}
& . btn {
background : $couleurSecondaire ;
2021-09-13 18:56:00 +02:00
color : white !important ;
2021-09-10 12:36:03 +02:00
& : hover {
background : $couleurPrincipaleOn ;
color : white !important ;
2021-09-02 20:04:44 +02:00
}
}
}
2021-09-10 14:02:12 +02:00
> h1 {
padding : ( $spacer * 4 ) ( $spacer * 4 ) $spacer ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
padding : ( $spacer * 2 ) ( $spacer * 2 ) $spacer ;
}
2021-09-10 14:02:12 +02:00
margin : 0 ;
2021-09-03 11:29:18 +02:00
background-color : white ;
}
. page_article & > article , . composition_emission & > article , > . texte , > . ps , . rubrique_blog & > section , > . periode ,
2021-09-09 14:46:52 +02:00
. prochaine_emission , . derniere_emission , . page_recherche & {
2021-09-03 11:29:18 +02:00
background-color : white ;
2021-09-02 20:04:44 +02:00
}
> . ajaxbloc {
padding-top : 0 ;
2021-09-10 12:36:03 +02:00
margin-top : 8 rem ;
2021-09-02 20:04:44 +02:00
position : relative ;
. emissions > h2 , . emissions > a {
position : absolute ;
margin-top : - 2 .6 rem ;
2021-07-30 00:11:35 +02:00
}
2021-09-06 22:06:58 +02:00
. article_blog & {
margin-top : 0 ;
padding : $spacer ( $spacer * 2 ) ;
background-color : white ;
. pagination . pagination-items a , . pagination . lien_pagination a {
color : $couleurPrincipale ;
}
}
2021-07-30 00:11:35 +02:00
}
2021-09-23 22:49:32 +02:00
. composition_blog & > . content {
margin : 0 ;
}
2021-02-06 22:22:13 +01:00
}
2021-03-07 12:55:04 +01:00
2021-09-13 15:53:29 +02:00
. page_content {
. page_rubrique & {
/* background-color:#fff; */
}
2021-09-23 20:31:26 +02:00
. rubrique_chroniques & . liste . articles {
margin-top : ( $spacer * 3 ) ;
2021-09-23 20:24:38 +02:00
}
2021-09-13 15:53:29 +02:00
@include media ( $bp-medium-up ) {
> * {
/* padding-right:($spacer*2); */
}
}
@include media ( $bp-large-up ) {
}
}
. page_aside {
> ul . article-resume {
padding : 0 ;
}
@include media ( $bp-medium-up ) {
2021-09-14 12:53:29 +02:00
html : not ( . composition_blog ) & {
min-width : 50 % ;
width : em ( 330 px ) ;
margin-left : 0 ;
> * {
/* padding-left:0; */
}
2021-09-13 15:53:29 +02:00
}
}
@include media ( $bp-large-up ) {
2021-09-14 12:53:29 +02:00
html : not ( . composition_blog ) & {
2021-09-13 15:53:29 +02:00
min-width : 50 % ;
width : em ( 430 px ) ;
2021-09-14 12:53:29 +02:00
}
2021-09-13 15:53:29 +02:00
}
}
2021-09-23 20:24:38 +02:00
2021-06-10 18:05:33 +02:00
h2 {
font-weight : 900 ;
}
. fl {
border-top : 2 em solid $couleurPrincipale ;
border-bottom : 2 em solid $couleurPrincipale ;
margin : 0 - 1000 px ;
padding : 2 em 1000 px ;
background : white ;
}
. fb {
padding : 2 em 0 ;
> h2 {
margin-top : 2 em ;
}
}
. photoapril {
margin-bottom : 1 em ;
}
2021-07-11 10:29:14 +02:00
. galeriephotos {
2021-09-14 12:38:39 +02:00
float : right ;
font-size : 1 .2 rem ;
line-height : 1 .8 ;
2021-07-11 10:29:14 +02:00
}
2021-09-09 20:26:33 +02:00
. galerie_photoapril figure {
@include media ( $bp-large-up ) {
& : first-child {
text-align : left ;
}
& : last-child {
text-align : right ;
}
}
}
2021-06-10 18:05:33 +02:00
. licence {
padding : 1 em ;
line-height : 1 .2 ;
margin-top : 2 em ;
background : $couleurBackgroundTexteBleu ;
}
2021-09-23 16:33:03 +02:00
. detail_emission ul , ul . spip , li ul . spip , . sujets > ul {
@include liste-triangle ;
2021-06-10 18:05:33 +02:00
}
2021-09-23 16:33:03 +02:00
2021-06-10 18:05:33 +02:00
. btn . blanc {
color : $couleurPrincipale !important ;
background : white ;
border : 1 px solid rgba ( $couleurPrincipale , 0 .2 ) ;
2021-07-30 00:11:35 +02:00
border-radius : 0 .5 em ;
2021-06-10 18:05:33 +02:00
& : hover {
background : $couleurPrincipaleOn ;
}
2021-07-30 00:11:35 +02:00
& . bold {
border-color : $couleurPrincipale ;
}
2021-06-10 18:05:33 +02:00
}
2021-05-28 10:25:45 +02:00
. article__infos {
position : relative ;
height : auto ;
margin : 0 ;
width : auto ;
white-space : inherit ;
clip : unset ;
clip-path : unset ;
font-size : 1 em ;
margin : - $spacer 0 0 - ( $spacer * 4 ) ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
2021-09-14 13:02:12 +02:00
html : not ( . composition_chroniques ) & {
margin : - $spacer - 200 px 0 - ( $spacer * 2 ) ;
line-height : 1 .2 ;
}
2021-09-14 10:06:42 +02:00
}
@include media ( $bp-small ) {
2021-09-14 13:12:13 +02:00
html : not ( . composition_chroniques ) & {
margin : - $spacer 0 0 - ( $spacer * 2 ) ;
}
2021-09-14 10:06:42 +02:00
}
2021-05-28 10:25:45 +02:00
overflow : visible ;
2021-09-03 11:29:18 +02:00
. composition_blog & {
margin : 0 ;
}
2021-05-28 10:25:45 +02:00
}
. num_emission {
display : inline-block ;
2021-03-11 16:29:35 +01:00
width : 150 px ;
padding : 0 .5 rem ;
2021-05-28 10:25:45 +02:00
margin-right : 1 .5 rem ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-small ) {
margin-right : 0 .5 rem ;
}
2021-03-11 16:29:35 +01:00
font-weight : 700 ;
2021-05-28 10:25:45 +02:00
font-size : 2 .8 rem ;
2021-03-11 16:29:35 +01:00
text-align : center ;
color : $couleurSecondaire ;
background : $couleurBackgroundTexte ;
2021-05-28 10:25:45 +02:00
font-family : $typo-titre ;
}
2021-06-25 07:52:45 +02:00
. article__date {
display : none ; /* provisoire, par simplicite */
}
2021-07-30 00:11:35 +02:00
2021-09-02 20:04:44 +02:00
. composition_emissions , . composition_emission , . emissions , . derniere_emission , . prochaine_emission {
. article__date {
display : inline ;
font-size : 1 .5 rem ;
color : $couleurSecondaire ;
font-weight : 700 ;
font-family : $typo-titre ;
}
}
. composition_blog {
. article__date {
display : inline-block ;
}
2021-03-11 16:29:35 +01:00
}
2021-09-03 11:29:18 +02:00
. liste . articles . blog {
2021-09-06 22:06:58 +02:00
padding : $spacer ( $spacer * 2 ) ;
background-color : white ;
2021-09-03 11:29:18 +02:00
. liste-items {
list-style : none ;
margin : 0 0 ( $spacer * 2 ) ;
. item {
border-top : 1 px solid $couleurPrincipale ;
& : first-child {
border : 0 ;
}
. article-resume {
padding-left : 0 ;
padding-right : 0 ;
}
}
}
}
2021-06-21 10:00:24 +02:00
. lecteur {
@include flex ;
align-items : center ;
2021-09-02 20:04:44 +02:00
margin-bottom : ( $spacer * 3 ) ;
2021-06-21 10:00:24 +02:00
> . podlove_wrapper {
width : 76 % ;
}
2021-09-10 12:36:03 +02:00
@include media ( $bp-medium ) {
flex-direction : column ;
text-align : center ;
2021-09-13 12:45:57 +02:00
margin : 0 - ( $spacer * 4 ) ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
margin : 0 - ( $spacer * 2 ) ;
}
2021-09-10 12:36:03 +02:00
. telecharger {
padding : 0 ;
margin-top : $spacer ;
}
> . podlove_wrapper {
width : 100 % ;
}
}
2021-07-11 11:41:33 +02:00
}
2021-09-23 23:27:35 +02:00
. texte_aside {
2021-07-30 00:11:35 +02:00
width : 200 px ;
2021-09-02 20:04:44 +02:00
padding : 0 0 0 ( $spacer * 2 ) ;
2021-09-23 23:27:35 +02:00
text-align : center ;
}
. telecharger {
list-style : none ;
margin : 0 0 $spacer ;
text-align : left ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-small ) {
2021-09-14 10:11:11 +02:00
padding : 0 0 $spacer ;
margin : 0 auto ;
2021-09-14 10:06:42 +02:00
}
2021-07-11 11:41:33 +02:00
li {
2021-09-02 20:04:44 +02:00
padding : ( $spacer / 2 ) 0 ( $spacer / 2 ) ;
2021-07-11 11:41:33 +02:00
}
. btn . podcast {
width : 100 % ;
padding-left : 2 .2 rem ;
2021-07-30 00:11:35 +02:00
padding-bottom : 0 .3 rem ;
2021-07-11 11:41:33 +02:00
font-size : 1 .15 rem ;
2021-07-30 00:11:35 +02:00
text-transform : none ;
& : before {
left : 0 .8 rem ;
}
2021-07-11 11:41:33 +02:00
}
}
2021-09-24 00:40:12 +02:00
. duree {
font-size : 0 .7 rem ;
}
2021-07-11 11:41:33 +02:00
. btn . podcast {
2021-07-30 00:11:35 +02:00
padding : 0 0 .5 em 0 .1 em 1 rem ;
2021-07-11 11:41:33 +02:00
position : relative ;
text-align : left ;
border-width : 0 .25 em ;
border-color : $couleurSecondaire ;
color : $couleurSecondaire !important ;
font-weight : 900 ;
2021-07-30 00:11:35 +02:00
font-size : 0 .6 rem ;
text-transform : uppercase ;
2021-09-23 15:15:47 +02:00
& : not ( . mini ) : before {
2021-07-11 11:41:33 +02:00
@include triangle ( right , $couleurSecondaire , 0 .5 em ) ;
position : absolute ;
2021-07-30 00:11:35 +02:00
left : 0 .4 rem ;
2021-07-11 11:41:33 +02:00
top : 50 % ;
2021-07-30 00:11:35 +02:00
margin-top : - 0 .45 em ;
2021-07-11 11:41:33 +02:00
}
small {
font-size : 0 .7 em ;
font-weight : 400 ;
}
2021-09-23 15:15:47 +02:00
& . mp3 : not ( . mini ) {
2021-07-11 11:41:33 +02:00
border-color : $couleurPrincipale ;
color : $couleurPrincipale !important ;
& : before {
@include triangle ( right , $couleurPrincipale , 0 .5 em ) ;
}
}
& : hover , & : active , &: focus {
2021-07-30 00:11:35 +02:00
background : $couleurPrincipaleOn !important ;
2021-07-11 11:41:33 +02:00
border-color : $couleurPrincipaleOn !important ;
2021-07-30 00:11:35 +02:00
color : $couleurPrincipale !important ;
& : before {
@include triangle ( right , $couleurPrincipale , 0 .5 em ) ;
}
2021-07-11 11:41:33 +02:00
}
2021-09-23 15:15:47 +02:00
& . mini {
background-color : white ;
2021-09-23 17:50:39 +02:00
background-position : top !important ;
background-size : 100 % !important ;
2021-09-23 15:15:47 +02:00
border : 0 !important ;
2021-09-23 17:50:39 +02:00
transition : none !important ;
2021-09-23 15:15:47 +02:00
height : 10 px ;
width : 33 px ;
padding : 0 ;
& : before {
display : none ;
}
& : hover {
background-color : white !important ;
2021-09-23 17:50:39 +02:00
background-position : bottom !important ;
background-size : 100 % !important ;
2021-09-23 15:15:47 +02:00
}
& . ogg {
background-image : url( 'img/ogg.png' ) ;
2021-09-23 15:45:33 +02:00
margin-left : $spacer ;
2021-09-23 15:15:47 +02:00
& : hover {
2021-09-23 17:50:39 +02:00
background-image : url( 'img/ogg.png' ) !important ;
2021-09-23 15:15:47 +02:00
}
}
& . mp3 {
background-image : url( 'img/mp3.png' ) ;
2021-09-23 17:50:39 +02:00
margin-left : ( $spacer / 2 ) ;
2021-09-23 15:15:47 +02:00
& : hover {
2021-09-23 17:50:39 +02:00
background-image : url( 'img/mp3.png' ) !important ;
2021-09-23 15:15:47 +02:00
}
}
}
2021-07-11 11:41:33 +02:00
}
. sujet_autre {
background : $couleurBackgroundTexte ;
2021-07-12 09:22:15 +02:00
padding : $spacer ( $spacer * 4 ) ;
2021-07-30 00:11:35 +02:00
margin : ( $spacer * 2 ) - ( $spacer * 4 ) - ( $spacer * 2 ) ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
padding : $spacer ( $spacer * 2 ) ;
margin : ( $spacer * 2 ) - ( $spacer * 2 ) - ( $spacer * 2 ) ;
}
2021-09-14 12:31:30 +02:00
& . flex {
width : auto ;
}
2021-07-30 00:11:35 +02:00
. article_emission & > div {
2021-07-12 09:22:15 +02:00
@include flex ;
@include vendor-prefix ( flex - wrap , wrap ) ;
> * {
width : 50 % ;
& : nth-child ( odd ) {
padding-right : $spacer * 2 ;
}
& : nth-child ( even ) {
padding-left : $spacer * 2 ;
}
}
}
2021-07-30 00:11:35 +02:00
// pour insertion dans le texte/chapo avant d'avoir le podcast
. chapo & {
margin-bottom : - ( $spacer ) ;
clear : both ;
font-size : 1 rem ;
> * {
font-size : 1 .2 rem ;
}
}
2021-09-08 11:29:22 +02:00
. derniere_emission & {
margin : 0 - ( $spacer * 4 ) ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
margin : 0 - ( $spacer * 2 ) ;
}
2021-09-13 18:56:00 +02:00
width : auto ;
2021-09-08 11:29:22 +02:00
}
2021-06-21 10:00:24 +02:00
}
2021-03-07 12:55:04 +01:00
2021-07-30 00:11:35 +02:00
/* notation */
. formulaire_jaime_jaimepas {
. note , . reponse_formulaire {
float : left ;
}
}
2021-05-28 10:25:45 +02:00
div . star-rating , div . star-rating a {
background-image : url( 'img/star.png' ) ;
}
div . rating-cancel a {
background-image : url( 'img/delete.png' ) ;
}
2021-07-30 00:11:35 +02:00
/**/
2021-03-07 12:55:04 +01:00
2021-07-30 00:11:35 +02:00
. sociaux {
. socicon {
display : inline-block ;
}
a . spip_out {
border : 0 ;
}
}
2021-09-10 12:36:03 +02:00
a : hover . fab , a : hover . fas {
color : $couleurPrincipaleOn ;
}
2021-07-30 00:11:35 +02:00
/* bloc connex */
. page_connex {
2021-09-02 20:04:44 +02:00
margin : 3 rem 0 0 ;
padding : 0 0 1 rem ;
2021-08-31 21:32:40 +02:00
background : $couleurPrincipale ;
2021-07-30 00:11:35 +02:00
}
. page_connex_content {
color : white ;
2021-09-23 21:29:37 +02:00
. liste h2 {
2021-07-30 00:11:35 +02:00
color : white ;
font-size : 1 rem ;
}
ul {
list-style : none ;
margin-left : 0 ;
li {
margin : 0 0 0 .5 rem ;
}
}
a {
border : 0 ;
}
2021-03-07 12:55:04 +01:00
}
2021-09-23 21:29:37 +02:00
. article_forum {
background : white ;
color : $couleurPrincipale ;
margin : 0 0 ( $spacer * 4 ) ;
padding : $spacer ( $spacer * 4 ) ;
@include media ( $bp-medium ) {
padding : $spacer ( $spacer * 2 ) ;
}
}
2021-07-30 00:11:35 +02:00
/**/
2021-03-11 16:29:35 +01:00
. page_footer {
. article {
@include media ( $bp-small-up ) {
@include flex ;
justify-content : space-between ;
> * {
width : calc ( 50 % - 1 rem ) ;
}
}
. article__texte , . article__chapo {
margin-bottom : 2 rem ;
2021-05-11 22:18:36 +02:00
font-weight : 400 ;
strong , i , . btn {
font-size : 115 % ;
}
2021-03-11 16:29:35 +01:00
}
}
. formulaire_spip . formulaire_recherche {
2021-05-11 22:18:36 +02:00
/* max-width:100%; */
2021-03-11 16:29:35 +01:00
}
}
2021-06-21 10:00:24 +02:00
2021-07-30 00:11:35 +02:00
/* page sommaire */
. body__sommaire . page_main {
h1 {
margin : 1 em 0 0 .8 em ;
}
}
2021-09-03 11:29:18 +02:00
. derniere_emission {
position : relative ;
2021-07-30 00:11:35 +02:00
margin-top : ( $spacer * 6 ) ;
> h2 {
2021-09-02 20:04:44 +02:00
margin-top : - ( $spacer * 3 .6 ) ;
2021-09-14 10:06:42 +02:00
margin-bottom : ( $spacer * 0 .65 ) ;
2021-09-14 13:13:38 +02:00
@include media ( $bp-medium ) {
2021-09-14 13:12:13 +02:00
margin-bottom : 2 .05 rem ;
2021-09-14 13:15:29 +02:00
}
@include media ( $bp-small ) {
margin-bottom : 2 .15 rem ;
2021-09-14 10:06:42 +02:00
}
2021-09-03 11:29:18 +02:00
}
}
. derniere_emission , . liste . emissions {
padding-bottom : 0 ;
> h2 {
2021-07-30 00:11:35 +02:00
color : white ;
}
. texte_content {
flex : 1 ;
padding-bottom : $spacer ;
h1 {
font-size : 1 .6 rem ;
}
h2 {
font-size : 1 .2 rem ;
}
p . flex {
2021-09-08 11:29:22 +02:00
margin : 1 rem 0 ;
2021-07-30 00:11:35 +02:00
padding-right : 2 rem ;
align-items : center ;
. podcast {
font-size : 110 % ;
text-transform : none ;
padding-left : 1 .6 rem ;
}
}
}
. article__infos {
margin-top : 0 ;
. num_emission {
font-size : 2 rem ;
padding : 0 .1 rem 1 rem ;
width : auto ;
}
. article__date {
font-size : 1 rem ;
color : $couleurPrincipale ;
font-weight : 400 ;
}
. btn . blanc {
float : right ;
margin-top : 0 .8 rem ;
margin-left : 0 .5 rem ;
font-weight : 700 ;
}
}
. photo {
margin-right : - 4 rem ;
background : $couleurBackgroundTexte ;
2021-09-14 12:12:19 +02:00
@include media ( $bp-medium ) {
margin : 0 - ( $spacer * 2 ) ;
}
2021-07-30 00:11:35 +02:00
. photoapril {
margin : 0 ;
}
a {
display : inline-block ;
padding : 0 1 rem ;
font-size : 0 .9 rem ;
font-weight : 500 ;
color : $couleurSecondaire ;
2021-09-14 12:12:19 +02:00
@include media ( $bp-medium ) {
float : none ;
padding : 0 ( $spacer * 2 ) ;
}
2021-07-30 00:11:35 +02:00
}
}
}
2021-09-02 20:04:44 +02:00
. liste . emissions {
2021-07-30 00:11:35 +02:00
. cartouche {
margin : 0 ;
}
> h2 {
margin-bottom : ( $spacer * 0 .6 ) ;
}
> ul {
list-style : none ;
padding : 0 ;
margin : 0 - ( $spacer * 4 ) ;
2021-09-14 10:06:42 +02:00
@include media ( $bp-medium ) {
margin : 0 - ( $spacer * 2 ) ;
}
2021-07-30 00:11:35 +02:00
> li {
2021-09-03 11:29:18 +02:00
margin-bottom : 2 px ;
2021-07-30 00:11:35 +02:00
}
}
. emission-resume . article-resume {
align-items : center ;
2021-09-14 10:06:42 +02:00
padding : 0 $spacer ;
2021-07-30 00:11:35 +02:00
margin : 0 ;
. article__infos {
margin-left : - $spacer ;
}
2021-09-13 18:56:00 +02:00
2021-07-30 00:11:35 +02:00
}
2021-09-08 11:29:22 +02:00
. pagination . pagination-items a , . pagination . pagination-items span , . pagination . lien_pagination , . pagination . lien_pagination span {
color : white ;
& . on , & : hover {
background : transparent !important ;
color : $couleurPrincipaleOn !important ;
color : $couleurPrincipale ;
}
}
. sujet_autre {
margin : $spacer - ( $spacer ) - ( $spacer ) ;
padding : $spacer ;
2021-09-13 18:56:00 +02:00
width : auto ;
2021-09-08 11:29:22 +02:00
}
2021-07-30 00:11:35 +02:00
}
2021-09-02 20:04:44 +02:00
. liste . emissions . chroniques {
> ul > li {
2021-09-03 11:29:18 +02:00
background-color : white ;
margin-bottom : $spacer ;
2021-09-02 20:04:44 +02:00
}
. emission-resume . article-resume {
align-items : start ;
}
2021-09-08 11:29:22 +02:00
2021-09-02 20:04:44 +02:00
}
2021-07-30 00:11:35 +02:00
. prochaine_emission {
. article__date {
font-size : 1 rem ;
color : $couleurPrincipale ;
font-weight : 400 ;
}
. chapo {
font-size : 1 .2 rem ;
}
2021-09-14 16:37:13 +02:00
. radiolive {
float : right ;
clear : right ;
text-align : right ;
max-width : 300 px ;
margin : 0 0 $spacer $spacer ;
h4 {
text-align : center ;
}
}
@include media ( $bp-medium ) {
2021-09-14 16:48:41 +02:00
h1 , . chapo , . sujet_principal {
2021-09-14 16:46:33 +02:00
clear : both ;
}
2021-09-14 16:37:13 +02:00
. encart , . radiolive {
2021-09-14 16:46:33 +02:00
clear : both ;
2021-09-14 16:37:13 +02:00
margin : 0 0 $spacer ;
}
}
2021-09-14 16:51:56 +02:00
@include media ( $bp-small ) {
. radiolive {
margin : 0 - 2 rem ;
float : none ;
}
}
2021-07-30 00:11:35 +02:00
}
2021-09-23 15:45:33 +02:00
/* modele radiolive */
. radiolive {
p {
line-height : 1 .1 ;
}
}
2021-06-21 10:00:24 +02:00
2021-07-30 00:11:35 +02:00
. orange {
color : $couleurSecondaire ;
}
2021-06-21 10:00:24 +02:00
2021-09-08 11:29:22 +02:00
. pagination . pagination-items a , . pagination . pagination-items span , . pagination . lien_pagination a / * spip 3 et 4 * / {
2021-09-03 11:29:18 +02:00
color : white ;
2021-09-06 22:06:58 +02:00
. composition_blog & {
color : $couleurPrincipale ;
}
2021-09-03 11:29:18 +02:00
}
2021-09-13 13:09:23 +02:00
. header_initiatives , . header_initiatives . nav , . btn-nav , . header_initiatives . btn-initiatives {
@include gradient-4 ( $couleurPrincipale , $couleurPrincipale , $couleurPrincipale , #004369 ) ;
. inclure_blocs { /* pour un var_mode=inclure sans encombre */
display : none ;
}
}
2021-09-13 13:26:46 +02:00
/* centrer le lecteur audio pour SPIP3 */
. audio-wrapper {
margin : 0 auto ;
}
2021-09-08 11:29:22 +02:00
2021-09-13 15:53:29 +02:00
. formulaire_forum . formulaire_spip {
. boutons {
}
}
2021-09-13 13:09:23 +02:00
/* ajout Antoine - 1 */
2021-06-21 10:00:24 +02:00
/*! Plusieurs typographies sont finalement trop grosses, j'ai réduit. */
h1 , . h1 {
font-size : 2 .6 em ;
2021-09-13 18:56:00 +02:00
a {
border : 0 ;
}
2021-06-21 10:00:24 +02:00
}
h2 {
font-weight : 700 ;
}
. article-resume__titre a {
color : #2E5281 ;
border-bottom : inherit ;
}
/*! certaines graisses sont trop forte en 700.*/
. page_header > . page_container . nav a {
font-weight : 500 ;
}
/ * ! Sur le menu j ' ai augmenté la hauteur du bouton RSS et le champ recherche. Pour le menu avec le hover je propose de modifier le design, car le bouton bleu cyan au rollover est trop prégnant. Je convertis en filets simlple 2pt. Par contre j ' ai basculé le padding sur le " li " sinon le filet sous le " a " débordait de chaque côté ( voir copie-écran de la retouche css de la bannière )
Sur le menu , je vais voir s ' il est possible de faire des filets de rollover composés de tirets et de points avec les fonctions css border-image. Ce qui ferrait un rappel du design.*/
/*! cyan ausurvol*/
. page_header . nav a : hover , . page_header . nav a . on , . page_header . nav a . active {
color : white !important ;
background-color : transparent !important ;
border-bottom : 3 px solid #00c4f5 ;
}
/*! bleu charte ensuite */
. page_header . nav a . on , . page_header . nav a . active {
border-bottom : 3 px solid #2E5281 ;
}
2021-09-02 20:04:44 +02:00
/ * . emission-programme ul : : before {
2021-06-21 10:00:24 +02:00
content : " Sujet Principal : " ;
font-size : 1 .3 em ;
font-weight : 700 ;
font-family : ' Montserrat ' ;
line-height : 2 em ;
margin-left : - 1 em ;
2021-09-02 20:04:44 +02:00
} * /
2021-07-30 00:11:35 +02:00
a . spip_out {
2021-06-21 10:00:24 +02:00
color : #2E5281 ;
2021-09-17 11:57:17 +02:00
border-bottom : 2 px solid #FBC7AD ;
2021-06-21 10:00:24 +02:00
}
. formulaire_spip input [ type = " text " ] {
min-height : 2 .5 em ;
line-height : 1 .875 em ;
border-radius : 3 px ;
}
/*! trop gros, j'ai réduis. */
. num_emission {
font-size : 2 .3 rem ;
}
. nav li {
margin : 0 0 .7 em ;
}
. page_header . nav a {
padding : 0 .3 em 0 em 0 .2 em ;
color : white !important ;
background-color : inherit ;
border-radius : 0 ;
border-bottom : 3 px solid transparent ;
}
/*! couleurs des liens sortants selon la maquette */
. formulaire_spip . abonnement button : : after {
bottom : 0 .8 rem ;
}
/*! fond du cartouche galerie selon la maquette avec ombrages*/
. fl {
background : #EEF1F5 ;
box-shadow : inset 0 px 1 px 20 px rgba ( 0 , 0 , 0 , 0 .5 ) ;
}
/*! Polices du pied de page plus maigre */
. page_footer p {
font-size : 0 .8 rem ;
font-weight : 200 ;
2021-07-30 00:11:35 +02:00
a , a . spip_out {
display : inline ;
font-weight : 400 ;
color : white ;
border-bottom-width : 1 px ;
}
}
2021-09-09 14:46:52 +02:00
/ *
* ajouts Antoine 07 / 09
* /
/ * réduction de corps de titre
* /
h3 , . h3 {
font-size : 1 .2 em ;
}
/ * pas de graissage de corps . Dans le corps de texte , les liens " a " sont soulignés en orange
* /
a . spip_out {
font-weight : 400 ;
}
/ * réduction et degraissages des boutons podcats
* /
. btn . podcast {
padding : 0 em 0 .5 em 0 em 1 rem ;
border-width : 0 .15 rem ;
font-weight : 700 ;
font-size : 0 .5 rem ;
}
. podlove . native , . podlove . info , . podlove . progress {
font-family : $typo-titre ;
color : #005184 ;
font-weight : 300 ;
}
. btn . blanc {
border-radius : 0 .8 em ;
}
. telecharger . btn . blanc {
border-width : 0 .3 rem ;
}
. telecharger . btn . podcast {
font-size : 1 rem ;
font-weight : 600 ;
}
. btn . podcast small {
font-size : 0 .6 em ;
font-weight : 300 ;
}
2021-09-14 12:22:35 +02:00
/* ajout du 14/09 */
/* titres des chroniques en corps moins gras et gros */
. chronique h3 {
font-weight : 400 ;
font-size : 1 em ;
line-height : 1 .6 em ;
font-family : ' lato ' , ' sans-serif ' ;
}
/* uniformisation des liens */
a . spip_out {
color : #2E5281 ;
2021-09-17 11:57:17 +02:00
border-bottom : 1 px solid #FBC7AD ;
2021-09-14 12:22:35 +02:00
}
/* liens du footer */
. page_footer p {
line-height : 1 .8 em ;
}
. page_footer p a , . page_footer p a . spip_out {
border-bottom : none ;
}
. page_footer a : hover , . page_footer p a : hover , . page_footer p a . spip_out : hover {
color : #00c4f5 ;
}
. sociaux . socicon : hover {
color : #00c4f5 ;
}
/* pave dernière émission, calage des boutons à gauche */
. derniere_emission . texte_content p . flex , . liste . emissions . texte_content p . flex {
margin : 1 rem 0 ;
justify-content : start ;
}
. derniere_emission . texte_content p . flex a , . liste . emissions . texte_content p . flex a {
margin-right : 2 rem ;
}
/* repositionnement photo de l'émission (IMCOMPLET:si possible un format carré) */
. derniere_emission . photo , . liste . emissions . photo {
max-width : 250 px ;
}
. derniere_emission . photo . photoapril , . liste . emissions . photo . photoapril {
margin : 1 em ;
}
. derniere_emission . photo , . liste . emissions . photo {
background : inherit ;
}
. derniere_emission . photo a , . liste . emissions . photo a {
color : #2E5281 ;
padding : 0 ;
margin-right : 1 em ;
}
2021-09-09 14:46:52 +02:00
/ *
* fin
* /
2021-07-30 00:11:35 +02:00
@media ( max-width : 940 px ) {
. page_header > . page_container {
. nav {
padding-top : ( $spacer / 2 ) ;
font-size : 0 .95 rem ;
z-index : 7 ;
position : static ;
> ul {
position : absolute ;
background : $couleurPrincipale ;
width : 100 % ;
top : 36 px ;
left : - 100 % ;
padding : $spacer / 2 $spacer ;
text-align : center ;
z-index : 10 ;
& . ouvert {
left : 0 ;
}
a {
color : white ;
border : 0 ;
display : block ;
margin : 0 ;
padding : 0 .5 rem ;
& : hover , & : focus , &. on {
background : $couleurSecondaire ;
}
}
li {
display : block ;
}
. loupe {
. fas {
color : white ;
}
. formulaire_recherche . vu {
right : 50 % ;
margin-right : - 160 px ;
max-width : 320 px ;
form {
padding : 0 .5 rem ;
& : before {
display : none ;
}
}
}
}
}
}
}
. btn-nav {
display : block ;
}
. header_initiatives {
. btn-initiatives {
display : block ;
}
. nav {
position : absolute ;
width : 100 % ;
top : 36 px ;
left : - 100 % ;
@include vendor-prefix ( transition , all 0 .3 s ease-in-out ) ;
& . ouvert {
left : 0 ;
}
ul , . initiatives {
display : inline ;
}
}
}
}
@include media ( min-width : 941 px ) {
. page_header > . page_container . nav {
position : relative ;
}
}
@media ( max-width : 804 px ) {
. page_header . header_menu . liens {
margin-top : 0 ;
}
. page_header . header_menu . liens . sociaux {
margin-top : 0 .8 rem ;
}
}
@media ( max-width : 650 px ) {
. page_header . header_menu . liens . btn {
margin-top : 0 .5 rem ;
}
}
@media ( max-width : 580 px ) {
. page_header > . page_container . nav {
padding-top : 0 ;
}
. page_header . header_menu {
padding : 0 .3 rem 1 rem ;
}
. page_header . header_menu . liens . sociaux {
margin-top : 0 ;
}
. article-resume > : last-child . telecharger {
margin-bottom : 1 rem ;
}
2021-09-02 20:04:44 +02:00
. page_header . header_menu . liens . formulaire_spip . formulaire_abomailman_mini_une_liste {
width : 160 px ;
}
. page_header . header_title {
min-width : 100 px ;
}
2021-06-21 10:00:24 +02:00
}