libreavous/squelettes/scss/styles/_perso.scss

// perso
// les différences
.page_wrapper {
	background:$couleurPrincipale url('../images/egalizer.png') repeat-x center -150px;
/* 	background-attachment:fixed; */
	@media ($bp-small) {
		background:$couleurPrincipale url('../images/egalizer-480.png') repeat-x center -150px;
	}
}
.page_header {
	padding:0;
	> .page_container {
		background-color:$couleurSecondaire;
		.nav {
			padding-top:2rem;
		}
	}
	.header_menu {
		flex-grow: 2;
		padding:0 $spacer;
		.liens {
			text-align:right;
			margin-top:0.7rem;
			.btn {
				float:right;
				margin-top:1.55rem;
				.fas:before {
					font-size:1rem;
				}
				&:hover, &:focus {
					background:$couleurPrincipaleOn;
					color:$couleurPrincipale !important;
					.fas:before {
						color:$couleurPrincipale !important;
					}
				}
			}
			
			.sociaux {
				float:right;
				display:inline-block;
				font-size:0.8rem;
				margin:1.5rem 1.5rem 0 0;
				.socicon {
					background:none !important;
					color:$blancTransparent;
					&:hover, &:focus {
						color:$couleurPrincipaleOn;
					}
				}
			}
			.formulaire_spip.formulaire_abomailman_mini_une_liste {
				width:230px;
				float:right;
				position:relative;
				margin:0 0 0 $spacer;
				text-align:left;
				.reponse_formulaire {
					position: absolute;
					top: 100%;
					margin: 0;
				}
			}
		}
	}
	.nav a {
		border:0;
		color:white;
		padding:0.3em 0.7em 0.2em;
		margin-right:0;
		margin-left:0;
		border-radius:4px;
/* 		background-color:$couleurSecondaire; */
		.on &,
		&.on,
		&:focus,
		&:hover,
		&:active {
			background-color:$couleurPrincipaleOn;
			color:$couleurPrincipale;
		}
	}
	> .page_container .nav > ul .loupe a {
		i.fa-search {
			background-color:$blancTransparent;
			font-size:0.8rem;
			color:$couleurSecondaire;
			&:hover {
				background-color:$couleurPrincipaleOn;
				color:$couleurPrincipale;
			}
		}
	}
}

.page_header_container {
    align-items: flex-start;
}
.arbo {
	@include visuallyhidden;
}

.texte_accueil {
	background-color:white;
}


.article-resume {
	background-color:white;
	padding:$spacer;
}

.page_main {
	overflow:hidden;
}
.composition_emissions, .composition_emission, .composition_chroniques {
	
	.page_main_content {
		flex-direction: column;
	}
	.page_content, .page_aside {
		width:100%;
		margin:0 0 ($spacer*2);
		padding:$spacer ($spacer*4);
		background-color:white;
	}
	.page_content {
		
	}
}

.page_content, .page_aside {
	margin:0 0 ($spacer*2);
	padding:$spacer ($spacer*4);
	background-color:white;
}

h2 {
	font-weight:900;
}

.fl {
	border-top:2em solid $couleurPrincipale;
	border-bottom:2em solid $couleurPrincipale;
	margin:0 -1000px;
	padding:2em 1000px;
	background:white;
}
.fb {
	padding:2em 0;
	> h2 {
		margin-top:2em;
	}
}

.photoapril {
	margin-bottom:1em;
}
.licence {
	padding:1em;
	line-height:1.2;
	margin-top:2em;
	background:$couleurBackgroundTexteBleu;
}

.detail_emission {
	ul { list-style:none;
		> li {
			padding-left:1em;
			position:relative;
			&:before {
				position:absolute;
				left:0;
				top:0.6em;
				@include triangle(right,$couleurSecondaire,0.35em,1.8);
			}
		}
	}
}

.btn.blanc {
	color:$couleurPrincipale !important;
	background:white;
	border:1px solid rgba($couleurPrincipale,0.2);
	border-radius:1em;
	&:hover {
		background:$couleurPrincipaleOn;
	}
}


.article__infos {
	position:relative;
	height:auto;
	margin:0;
	width: auto;
	white-space: inherit;
	clip: unset;
	clip-path: unset;
	font-size:1em;
	margin:-$spacer 0 0 -($spacer*4);
	overflow:visible;
}
.num_emission {
	display:inline-block;
	width:150px;
	padding:0.5rem;
	margin-right:1.5rem;
	font-weight:700;
	font-size:2.8rem;
	text-align:center;
	color:$couleurSecondaire;
	background:$couleurBackgroundTexte;
	font-family:$typo-titre;
	
}
.article__date {
	display:none; /* provisoire, par simplicite */
}
.article_emission {
	.article__date {
		display:inline;
		font-size:1.5rem;
		color:$couleurSecondaire;
		font-weight:700;
		font-family:$typo-titre;
	}
}
.lecteur {
	@include flex;
	align-items:center;
	 margin-bottom:2em;
	> .podlove_wrapper {
/* 		flex-grow:2; */
		width:76%;
	}
	.telecharger {
		list-style:none;
		width:24%;
		padding:0 0 0 2em;
		margin:0;
		li {
			margin-bottom:1em;
			&:last-child {
				margin:0;
			}
		}
		.btn {
			width:100%;
			padding:0 0.5em 0.3em 40px;
			position:relative;
			text-align:left;
			border-width:0.25em;
			border-color:$couleurSecondaire;
			color:$couleurSecondaire !important;
			font-weight:900;
			font-size:1.15rem;
			&:before {
				@include triangle(right, $couleurSecondaire, 0.5em);
				position: absolute;
				left: 15px;
				top: 50%;
				margin-top:-0.5em;
			}
			small {
				font-size:0.7em;
				font-weight:400;
			}
			&.mp3 {
				border-color:$couleurPrincipale;
				color:$couleurPrincipale !important;
				&:before {
					@include triangle(right, $couleurPrincipale, 0.5em);
				}
			}
			&:hover, &:active {
				background:none !important;
				border-color:$couleurPrincipaleOn !important;
			}
		}
	}
}

div.star-rating, div.star-rating a {
	background-image:url('img/star.png');
}
div.rating-cancel a {
	background-image:url('img/delete.png');
}

.sociaux .socicon {
    display: inline-block;
}
.page_footer {
	.article {
		@include media($bp-small-up) {
			@include flex;
			justify-content:space-between;
			> * {
				width: calc(50% - 1rem);
			}
		}
		.article__texte, .article__chapo {
			margin-bottom:2rem;
			font-weight:400;
			strong, i, .btn {
				font-size:115%;
			}
		}
	}
	.formulaire_spip.formulaire_recherche {
/* 		max-width:100%; */
	}
}







 /*!    Plusieurs typographies sont finalement trop grosses, j'ai réduit. */
h1, .h1 {
    font-size: 2.6em;
}
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:3px solid #00c4f5;
}

 /*!  bleu charte ensuite */
.page_header .nav a.on, .page_header .nav a.active {
    border-bottom:3px solid #2E5281;
}

.btn {
    padding: 0.5em 1em;
    font-weight: 500;
}

/*!   Boutons trop hauts*/


.liens .btn{
    padding: 0.7em 1em;
    }
.btn.blanc {
    border-radius: 0.7em;
}


.emission-Programme ul::before {
    content: "Sujet Principal :";
    font-size: 1.3em;
    font-weight: 700;
    font-family: 'Montserrat';
    line-height: 2em;
    margin-left: -1em;
}
p a.spip_out, li a.spip_out {
    color: #2E5281;
    border-bottom: 2px solid #FDC;
}
.formulaire_spip input[type="text"]{
    min-height: 2.5em;
    line-height: 1.875em;
    border-radius: 3px;
}

 /*!    trop gros, j'ai réduis. */

.num_emission {
    font-size: 2.3rem;
}
.nav li {
    margin: 0 0.7em;
}
.page_header .nav a {
    padding: 0.3em 0em 0.2em;
    color: white !important;
    background-color: inherit;
    border-radius:0;
    border-bottom:3px solid transparent;
}

 /*!    couleurs des liens sortants selon la maquette */


.formulaire_spip .abonnement button::after {
    bottom: 0.8rem;
}
 
/*!    fond du cartouche galerie selon la maquette avec ombrages*/

.fl {
    background: #EEF1F5;
    box-shadow: inset 0px 1px 20px rgba(0, 0, 0, 0.5);
}


/*!    Polices du pied de page plus maigre  */

.page_footer p {
    font-size: 0.8rem;
    font-weight: 200;
}