librealire/squelettes/scss/styles/_perso.scss

/* les surcharges de chaque site dans un plugin indépendant */
body {
	font-family:$typo-Merriweather;
	font-size:0.9rem;
	font-weight:200;
	line-height:1.7;
}

.page_container {
	max-width:1068px;
}


a {
	
	&.tp {
		background:none !important;
		padding:0;
		color:$couleur-lien !important;
		position:relative;
		border:0 !important;
		font-weight:700;
		text-decoration:none;
		&:before {
			content:'...';
			display:inline-block !important;
			position:absolute;
			bottom:-0.8rem;
			left:0;
			min-width:18px;
			font-size:130%;
/* 			padding-bottom: 10px; */
			color:$couleurSecondaire;
			/*background-image:radial-gradient(circle, $couleurSecondaire 2px, rgba(255,255,255,0) 2px);
			background-position: bottom left;
			background-size: 6px 4px;
			background-repeat: repeat-x;*/
		}
		&:hover, &:focus, &.on {
			color:$couleurSecondaire !important;
			&:before {
				content: '. . . . . .';
				left:0;
				width:80px;
				/*background-image:radial-gradient(circle, $couleurSecondaire 2px, rgba(255,255,255,0) 2px);
				background-position: bottom left;
				background-size: 14px 4px;
				background-repeat: repeat-x;
				min-width:70px;
				left:-4px;*/
			}
		}
	}
	h2 &:hover, h2 &:focus, h3 &:hover, h3 &:focus  {
		text-decoration:none;
	}
}


//
// modele bouton
//
.btn {
	@include bouton();
	&.right {
		float:right;
		margin-left:$spacer;
	}
	&.left {
		float:left;
		margin-right:$spacer;
	}
}

//
// modele themes = liste de mots-clefs
.liste.liste_mots {
	.tri {
		a {
			text-decoration:underline;
		}
	}
	.listes {
		display:flex;
		flex-wrap:wrap;
		> ul {
			width:25%;
			margin:0;
			list-style:none;
			@include media($bp-small) {
				width:50%;
			}
		}
		li {
			margin: 0 1.5em 0.2em 0;
			a {
				line-height:1.1;
				display:block;
				padding:0.3rem 0;
			}
		}
	}
}






/* blocs */
.header_initiatives, .header_initiatives .nav, .btn-nav, .header_initiatives .btn-initiatives {
	@include gradient-4($couleurPrincipale,$couleurPrincipale,$couleurPrincipale,#184f5e);
	opacity:1;
}
.page_header > .page_container .nav > ul a {
	@include media($bp-medium) {
		border-bottom:1px solid #84BEC7BF;
	}
	
}
.nav {
	a {
		padding-bottom: 10px;
		border:0;
		background-position: bottom left;
		background-size: 10px 4px;
		background-repeat: repeat-x;
		position:relative;
	}
	&.principale a {
		&.on, &:hover, &:focus {
			&:before {
				@include media($bp-medium-up) {
					content:'. . . . . .';
					color:$couleurSecondaire;
					left:-0.8rem;
					width:80px;
					display:inline-block !important;
					position:absolute;
					bottom:-0.2rem;
					font-size:130%;
				}
			}
		}
	}
	&.principale .loupe a {
		&.on, &:hover, &:focus {
			&:before {
				content:'';
			}
		}
	}
}
.page_connex {
	@include gradient-4();
	color:#fff;
	padding:($spacer*2) 0;
	h2 {
		margin-bottom:($spacer);
		color: #9ADDE5;
		line-height: inherit;
		font-size: 1.1em;
		font-weight: 200;
	}
	.liste_articles {
		position:relative;
		font-size:120%;
		margin-bottom:($spacer*3);
		&:last-child {
			margin-bottom:0;
		}
		.article-resume.block-link-parent {
			margin-bottom:0;
			border: 0;
			background: none;
			color: white;
			padding:$spacer 0 0;
			@media ($bp-medium) {
				margin-bottom:2rem;
			}
		}
		.article-resume__texte {
			padding-top:($spacer/2);
			color: white;
			border-top:1px solid lighten(desaturate($couleurConnex,50%),30%);
		}
		.article-resume__date {
			top:0;
			left:0;
		}
		.article-resume .article-resume__titre {
			font-size:1.2rem;
			line-height:1.4;
			a {
				color:white;
				&:hover , &:focus{
					color:#ff8900;
				}
			}
			.composition_transcriptions & {
				font-size:1.1rem;
			}
		}
		.article-resume__intro, .article-resume__soustitre {
			color:white;
			font-size:0.9rem;
		}
		.article-resume__logo, .tp {
			@include visuallyhidden;
		}
		.btn {
			position:absolute;
			right:0;
			top:($spacer/3);
			background:none;
			color: #9ADDE5 !important;
			font-size:0.8rem;
			&:focus {
				background:transparent !important;
				color:$couleur-texte  !important;
			}
		}
		@include media($bp-medium-up){
			> div {
				@include flex();
				@include vendor-prefix(flex-direction,raw);
				@include vendor-prefix(justify-content,space-between);
				> * {
					width:30%;
				}
			}
		}
	}
}


.page_footer {
	
	.page_connexplus {
		padding:($spacer*1.5) 0;
		background:$couleurConnexplus;
		color:$couleurConnexplusTexte;
		margin-bottom:($spacer*1.5);
		.liste.liste_mots {
			h2 {
/* 				color:$couleur-lien; */
			}
			.listes {
				> ul {
					font-size:0.85rem;
				}
				li {
					a {
						line-height:1.1;
						color:$couleurConnexplusTexte;
					}
				}
			}
		}
	}
	
	padding-top:0;
	.formulaire_spip.formulaire_recherche  {
		display:none;// pour ne pas surcharger tout le footer
	}
}


// layout
.page_content {
	margin-bottom:$spacer*2;
	.composition_sanscolonne & {
		margin-right:0;
	}
}



// page sommaire
.page_sommaire {
	.page_content {
		margin-right:0;
		.liste_articles {
			.btn.voirtous {
				display: block;
				width: 300px;
				margin:0 auto;
				padding:1.5rem;
				box-shadow:6px 6px 6px #90abb3;
			}
		}
	}
}
.texte_accueil {
	line-height: 1.6;
	margin-bottom:$spacer;
	font-family:$typo-Merriweather;
	font-weight:200;
	color:$couleur-texte-s;
	@include clearfix();
	@include flex();
	.main {
		max-width: 65%;
		font-size: 1.6rem;
		padding:$spacer ($spacer*4) $spacer 0;
		.btn {
			margin-bottom:2rem;
			margin-right:2rem;
		}
	}
	aside {
		max-width:35%;
		padding-top: $spacer;
	}
	@media ($bp-medium) {
		flex-direction:column;
		.main, aside {
			max-width:100%;
			padding:$spacer;
/* 			font-size:1.2rem; */
			.modele_citation .citation_texte {
/* 				font-size:1.2rem; */
			}
		}
		.main {
			font-size:1.2rem;
			padding:0 $spacer;
		}
	}
}
.formulaire_spip.formulaire_recherche {
	font-size:1rem;
    form {
		border:0;
     	box-shadow: inset 0 0 5px 0px rgba(10,115,141, 0.7);
    }
}

/* page blog */
.rubrique-blog {
	
}



.cartouche .publication { 
	@include visuallyhidden;
}
.liste.articles {
	.liste-items {
		margin-left:0;
		list-style:none;
	}
	&.blog {
		
		
		// resume 
		.article-resume {
			border-left:0;
			background-color:transparent;
			padding:1.5rem 0 0;
			margin-bottom:($spacer*2);
			.article-resume__texte {
				border-top:1px solid $couleurBordureBleue;
			}
			.article-resume__titre {
/* 				font-size: 1.4rem; */
/* 				line-height: 1.6; */
			}
			.hero .article-resume__titre {
/* 				font-size:1.8rem; */
			}
			.article-resume__soustitre {
/* 				font-weight:700; */
/* 				margin:0; */
			}
			.article-resume__logo {
			}
			.article-resume__date {
				top:0.2rem;
				left:0;
			}
		}

	}
}


// resume 
.article-resume {
	display:block;
	border-left:solid $couleurConnexplus ($spacer/3);
	background-color:$couleurBkgT;
	padding:($spacer*1.5) $spacer $spacer ($spacer*1.5);
	margin-bottom:($spacer*2);
	
	&, a {
		color:$couleur-lien-resume; 
	}
	&:after {
		content:'';
		display:block;
		clear:both;
	}
	.article-resume__titre {
		font-size: 1.4rem;
		line-height: 1.6;
		@include media($bp-medium) {
			line-height:1.4;
		}
	}
	&.hero .article-resume__titre {
		font-size:1.8rem;
	}
	.article-resume__soustitre {
		font-weight:700;
		margin:0;
	}
	.article-resume__logo {
		float:right;
		margin:-($spacer*0.5) 0 0 ($spacer * 1.5);
		max-width:30%;
		width:auto;
		border:1px solid $couleurBordureBleue;
	}
	.article-resume__date {
		position:absolute;
		top:($spacer/2);
/* 		left:($spacer*1.5); */
		font-size:0.75rem;
		.aside & {
			left:$spacer;
		}
		&:before {
			display:none;
		}
	}
	.article-auteurs {
		font-size:110%;
		font-weight:700;
	}
	.btn {
		margin:0.5rem 0;
	}
}
.article-appel {
	border-left:solid $couleurBordureBleue ($spacer/4);
	padding:0 0 0 ($spacer);
	.soustitre {
		margin:0;
	}
}

// composition 
.composition_transcriptions {
	.page_content {
		margin-right:0;
		> article {
			padding:$spacer ($spacer*2);
			background-color:$couleurBkgT;
			border-radius:0 0 6px 6px;
/* 			font-size:0.8rem; */
			@include media($bp-medium-up) {
				padding:$spacer ($spacer*4);
			}
			.avertissement {
				background:$couleurBkgAvertissement;
				margin-bottom:-$spacer;
				margin-top:0;
				padding-top:$spacer;
				padding-bottom:$spacer;
				border-radius:0 0 6px 6px;
			}
			
			.main {
				.strong_to_dl {
					@include clearfix;
					&:first-of-type:before {
						content:'Média d’origine';
						display:block;
						@extend .h2;
						dt {
							clear:both;
							float:left;
							margin-right:$spacer/2;
						}
						dd {
							margin:0;
						}
					}
				}
			}
			
		}
		.liste_articles article {
/* 			padding:($spacer*2.5) $spacer $spacer ($spacer*2); */
			@include media($bp-medium-up) {
/* 				padding:($spacer*2.5) $spacer $spacer ($spacer*4); */
			}
		}
		.article__texte {
			p > strong, br + b {
				display: block;
				margin-top: 1em;
			}
		}
	}
	.article__infos {
		position:relative;
		height:auto;
		width:auto;
		overflow:visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
	footer {
		.btn {
			margin:($spacer*2) 0;
		}
	}
}
.article__transcription_origine, .avertissement, .import .main .strong_to_dl:first-of-type, .infos_media {
/* 	width:100%; */
	margin:($spacer*2) -($spacer*2) 0;
	padding:($spacer*2);
	background:$couleurBkgTOrigine;
	color:$couleurTDetails;
	@include media($bp-medium-up) {
		margin:($spacer*2) -($spacer*4) 0;
		padding:($spacer*2) ($spacer*4);
	}
	> *:last-child {
		margin-bottom:0;
	}
	dt {
		float:left;
		margin-right:($spacer/2);
	}
	dd {
		margin:0;
		font-size:0.9rem;
		min-height:1.3rem;
		border-bottom:1px solid $couleurBkgT;
		&:last-child {
			border:0;
		}
		&.article__personnes {
			.sep:first-child {
				display:none;
			}
		}
	}
}
.sanssommaire .main .sommaire-back {
	display:none;
}

.fiches_personnes {
	@include flex();
	@include vendor-prefix(justify-content,space-between);
	margin:($spacer*4) 0 0;
	font-family:$typo-Merriweather;
	.fiche {
		width:46%;
	}
	.spip_logo  {
		float: left;
		margin-right: $spacer;
	}
	p {
		margin:0;
	}
	.fiche__titre {
		font-weight:700;
	}
	.fiche__texte {
		font-size:0.8rem;
		clear:both;
	}
}


.cartouche {
	border-left:($spacer/2) solid $couleurBkgTOrigine;
	padding-left:($spacer*1.5);
	.composition_transcriptions & {
		margin-left:-($spacer*2);
	}
	@include clearfix;
	.spip_logo {
		float:right;
		border:1px solid $couleurBordureBleue;
	}
}
.mots {
	font-size:0.8rem;
	@include clearfix;
	&:before {
		border-top:1px solid $couleurBkgTOrigine;
	}
	&:last-child {
		border-bottom:1px solid $couleurBkgTOrigine;
	}
	a {
		display:inline-block;
		background:#fff;
		border-radius:($spacer/3);
		padding:0 ($spacer/1.5);
		border: 1px solid lighten($couleurBkgTOrigine,12);
		font-size:0.9em;
		margin: 0.2em 0.05em;
		line-height: 2em;
		&:hover {
			background:$couleurSecondaire;
			color:#fff;
			text-decoration:none;
		}
	}
}

// article
.article__soustitre {
	display:block;
	font-size:1rem;
}
.nav-sommaire-1 {
	display:block;
}
.nav-sommaire {
	border:0;
	margin:($spacer*2) 0;
	.sommaire_titre {
		font-size:0.8rem;
		@include bouton();
		&.plein {
			border-radius:0;
		}
		&.on .fas {
			&:before {
				content:'\f0d7';
			}
		}
	}
	> ul {
		background-color: $couleurPrincipale;
		margin-left:0;
		padding:1em 2.5em;
		list-style-type: decimal;
		color: #FFF;
		font-size: 0.8em;
		ul {
			margin-left: 2.5em;
		}
		a.spip_ancre {
			color:white;
			display:inline-block;
			width:100%;
			border-bottom: 1px solid $couleurBordureBleue;
			line-height: 2em;
			&:hover {
				text-decoration:none;
			}
		}
	}
}
.article__notes {
	border-top:1px solid $couleurBkgTOrigine;
	padding:$spacer;
	clear:both;
	font-size:0.8rem;
}

.formulaire_signaler {
	
}
.ariaformprop {
	clear:both;
}


// page_mot
.page_mot {
	.page_content {
		margin-right:0;
	}
}




/* modeles */
/* citation */
.modele_citation {
	@include clearfix();
	.citation_texte {
		background:$couleurBkgBleu;
		border-radius:$spacer/2;
		padding:$spacer;
/* 		font-size:1.15rem; */
		color:$couleur-texte-s;
	}
	.citation_image {
		float:right;
		position:relative;
		margin-top:10px;
		padding-left:46px;
		&:after {
				display:block; content:''; width:0; height:0; 
				position:absolute; left:0; top:-32px;
				border-top: 60px solid $couleurBkgBleu;
				border-left: 20px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 0;
				@include rotate(-50deg);
				z-index:0;
		}
	}
}


.fond {
	padding:($spacer*1.5);
	margin:($spacer*2) 0;
	&.lienstp a {
		@extend .tp;
		display:inline-block;
		margin-bottom:1.5em;
		color:#014c54 !important;
	}
	div > &:first-child {
		margin-top:0;
		
	}
	.composition_contact div > &:first-child   {
			padding:$spacer ($spacer*1.5);
		}
}
.fondbleu {
	background:$couleurBkgBleu;
}
.fondbeige {
	background:$couleurBkgBeige;
}


.periode {
	color:$couleurBordureBleue;
	.annees {
		color:$couleur-lien;
	}
}