395 lines
8.5 KiB
CSS
395 lines
8.5 KiB
CSS
|
/* feuille de style réalisé par Antoine Bardelli sous licence Artlibre 3.0.
|
||
|
|
-----------------------------*/
|
||
|
|
|
||
|
|
/* fonts-----------------------------*/
|
||
|
|
@font-face {
|
||
|
|
font-family: 'League Spartan';
|
||
|
|
src: url('../webfonts/leaguespartan-bold.eot');
|
||
|
|
src: url('../webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
|
||
|
|
url('../webfonts/leaguespartan-bold.woff2') format('woff2'),
|
||
|
|
url('../webfonts/leaguespartan-bold.woff') format('woff'),
|
||
|
|
url('../webfonts/leaguespartan-bold.ttf') format('truetype'),
|
||
|
|
url('../webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
/* generiques----------------------------*/
|
||
|
|
.top-bar, .top-bar-section li:not(.has-form) a:not(.button) {
|
||
|
|
background-color: #332B2B;
|
||
|
|
}
|
||
|
|
h1, h2, h3, h3, h5, h6 {
|
||
|
|
color: #332B2B;
|
||
|
|
font-family:League Spartan, arial, sans-serif;
|
||
|
|
}
|
||
|
|
h2{
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
.accueil h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
h3{
|
||
|
|
font-size: 1.3em;
|
||
|
|
padding-top: 2rem;
|
||
|
|
}
|
||
|
|
.theme {
|
||
|
|
font-family: League Spartan, arial, sans-serif;
|
||
|
|
}
|
||
|
|
p{
|
||
|
|
font-family:Cambria, georgia, serif;
|
||
|
|
line-height: 1.8em;
|
||
|
|
}
|
||
|
|
p span{
|
||
|
|
font-weight: bold;
|
||
|
|
padding-bottom: 2em;
|
||
|
|
}
|
||
|
|
p a{
|
||
|
|
font-size: 0.9em;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
ul{
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
li{
|
||
|
|
font-family:Cambria, georgia, serif;
|
||
|
|
}
|
||
|
|
.inline-list {
|
||
|
|
font-size: 0.7em;
|
||
|
|
}
|
||
|
|
.columns li {
|
||
|
|
list-style: outside none square;
|
||
|
|
line-height: 1.8em;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: #332B2B;
|
||
|
|
}
|
||
|
|
a:hover{
|
||
|
|
color: #ff4d00;
|
||
|
|
}
|
||
|
|
a:visited {
|
||
|
|
color: #332B2B;
|
||
|
|
}
|
||
|
|
a.button{
|
||
|
|
color: #fff;
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
button, .button {
|
||
|
|
background: #332B2B url("../img/bouton-or.png") no-repeat scroll 0 0em;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
button:hover, .button:hover, button:focus, .button:focus{
|
||
|
|
color:#fff;
|
||
|
|
background-color: #ff4d00;
|
||
|
|
background-position: -2em -25em;
|
||
|
|
}
|
||
|
|
button:visited, .button:visited{
|
||
|
|
}
|
||
|
|
a.button:visited{
|
||
|
|
}
|
||
|
|
.column, .columns {
|
||
|
|
padding: 2rem 0.9375rem 0rem;
|
||
|
|
}
|
||
|
|
.scroll-container {
|
||
|
|
padding-top: 3em;
|
||
|
|
}
|
||
|
|
.lien-texte, ul.fichier li a{
|
||
|
|
background: rgba(0, 0, 0, 0) url("../img/rayures.png") no-repeat scroll 0 0.2em;
|
||
|
|
font-size: 0.9em;
|
||
|
|
font-style: italic;
|
||
|
|
padding: 0 0 0 3em;
|
||
|
|
}
|
||
|
|
a span{
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* menu import----------------------*/
|
||
|
|
.top-bar-section ul li > a {
|
||
|
|
background: #332B2B none !important ; }
|
||
|
|
.top-bar-section ul li > a:hover {
|
||
|
|
background: #ff4d00 none !important ; }
|
||
|
|
/* menu-----------------------------*/
|
||
|
|
.top-bar .toggle-topbar a {
|
||
|
|
font-family: Arial, verdana, sans-serif;
|
||
|
|
}
|
||
|
|
/* footer---------------------------*/
|
||
|
|
.footer{
|
||
|
|
padding-top: 0rem;
|
||
|
|
}
|
||
|
|
.footer ul li{
|
||
|
|
font-family: Arial, verdana, sans-serif;
|
||
|
|
}
|
||
|
|
.footer ul li a{
|
||
|
|
padding: 0 0.7em;
|
||
|
|
}
|
||
|
|
.footer ul li a:hover {
|
||
|
|
background: #ff4d00 none repeat scroll 0 0;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.footer .row {
|
||
|
|
padding-bottom: 3em;
|
||
|
|
}
|
||
|
|
img[src="img/april_logo.svg"] {
|
||
|
|
display: block;
|
||
|
|
float: right;
|
||
|
|
margin: 0.2em 1em 0;
|
||
|
|
padding: 0;
|
||
|
|
width: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* page d'accueil--------------------------*/
|
||
|
|
.accueil .panel {
|
||
|
|
background: transparent none repeat scroll 0 0;
|
||
|
|
border: medium none;
|
||
|
|
text-align: center;
|
||
|
|
min-height: 15em;
|
||
|
|
}
|
||
|
|
.panel > p {
|
||
|
|
font-size: 0.9em;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
/* pages generiques-----------------------------*/
|
||
|
|
.exposer .row, .telecharger .row, .credits .row, .a-propos .row, .exposition .row .accueil.row .exposition .row {
|
||
|
|
padding-bottom: 3rem;
|
||
|
|
}
|
||
|
|
.adresse > li {
|
||
|
|
list-style: outside none none;
|
||
|
|
}
|
||
|
|
ul.adresse {
|
||
|
|
margin-left: 0rem;
|
||
|
|
}
|
||
|
|
.fichier > li {
|
||
|
|
list-style: outside none none;
|
||
|
|
}
|
||
|
|
.icon-bar > a:hover {
|
||
|
|
background: #ff4d00 none repeat scroll 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* fond pages generiques-----------------------------*/
|
||
|
|
.scroll-container {
|
||
|
|
background:url("../img/fond-blanc.png") repeat scroll 0 0 rgba(0, 0, 0, 0) ;
|
||
|
|
}
|
||
|
|
.telecharger{
|
||
|
|
background-color: #E7D08B;
|
||
|
|
background-position: -6em 3em;
|
||
|
|
}
|
||
|
|
.exposer{
|
||
|
|
background-color: #C1DCBE;
|
||
|
|
background-position: -2em -4em;
|
||
|
|
}
|
||
|
|
.credit{
|
||
|
|
background-color: #EBC2DB;
|
||
|
|
background-position: -2em -8em;
|
||
|
|
}
|
||
|
|
.contact{
|
||
|
|
background-color: #FBE3DF;
|
||
|
|
background-position: 1em 7em;
|
||
|
|
}
|
||
|
|
.exposition{
|
||
|
|
background-color: #C6EAFA;
|
||
|
|
background-position: 3em -5em;
|
||
|
|
}
|
||
|
|
.a-propos{
|
||
|
|
background-color: #FFEBA7;
|
||
|
|
background-position: -8em -5em;
|
||
|
|
}
|
||
|
|
.scroll-container.accueil{
|
||
|
|
background:
|
||
|
|
/*
|
||
|
|
url("../img/arbre.png") no-repeat -13em top / 70%,
|
||
|
|
*/
|
||
|
|
url("../img/city.png") no-repeat -0.3em bottom / 101%,
|
||
|
|
url("../img/fond-blanc-50.png") no-repeat scroll 0 0
|
||
|
|
;
|
||
|
|
background-color: #E1A3C9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.accueil .large-8 {
|
||
|
|
background: url("../img/fond-crenele.svg") repeat-y scroll center top / 100% transparent ;
|
||
|
|
padding: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.accueil p.intro {
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* pages panneaux x 8-----------------------------*/
|
||
|
|
.collection p{
|
||
|
|
background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
|
||
|
|
font-size: 0.9em;
|
||
|
|
font-style: italic;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
/* fin pages generique-----------------------------*/
|
||
|
|
/* pages panneaux-----------------------------*/
|
||
|
|
.panneau-1 {
|
||
|
|
background: url("../img/fond-001.jpg") no-repeat scroll center top / 100% #c7e9fb ;
|
||
|
|
}
|
||
|
|
.panneau-1 .large-8{
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
.theme span{
|
||
|
|
font-size: 1.4em;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.panneau-1 .theme span{
|
||
|
|
color:#9C4D00;
|
||
|
|
font-size: 1.7em;
|
||
|
|
}
|
||
|
|
.panneau-2 {
|
||
|
|
background: url("../img/fond-002.jpg") no-repeat scroll center top / 100% #ffebeb ;
|
||
|
|
}
|
||
|
|
.panneau-2 .theme span {
|
||
|
|
color: #800000;
|
||
|
|
display: block;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
.panneau-3 {
|
||
|
|
background: url("../img/fond-003.jpg") no-repeat scroll center top / 100% #441650 ;
|
||
|
|
}
|
||
|
|
.panneau-3 .theme span {
|
||
|
|
color: #4e1452;
|
||
|
|
font-size: 2em;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.panneau-4 {
|
||
|
|
background: url("../img/fond-004.jpg") no-repeat scroll center top / 100% #f6ecbe ;
|
||
|
|
}
|
||
|
|
.panneau-4 .theme span {
|
||
|
|
color: #aa4400;
|
||
|
|
font-size: 2em;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.panneau-5 {
|
||
|
|
background: url("../img/fond-005.jpg") no-repeat scroll center top / 100% #c9eef7 ;
|
||
|
|
}
|
||
|
|
.panneau-5 .theme span {
|
||
|
|
color: #0044aa;
|
||
|
|
font-size: 1.8em;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.panneau-6 {
|
||
|
|
background: url("../img/fond-006.jpg") no-repeat scroll center top / 100% #feeae4 ;
|
||
|
|
}
|
||
|
|
.panneau-6 .theme span {
|
||
|
|
color: #e25050;
|
||
|
|
font-size: 2em;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.panneau-7 {
|
||
|
|
background: url("../img/fond-007.jpg") no-repeat scroll center top / 100% #fff ;
|
||
|
|
}
|
||
|
|
.panneau-7 .theme span {
|
||
|
|
color: #4e1452;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
.panneau-8 {
|
||
|
|
background: url("../img/fond-008.jpg") no-repeat scroll center top / 100% #c9efc5 ;
|
||
|
|
}
|
||
|
|
.panneau-8 .theme span {
|
||
|
|
color: #008080;
|
||
|
|
font-size: 2em;
|
||
|
|
line-height: 1.2em;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.panneau-9 {
|
||
|
|
background: url("../img/fond-009.jpg") no-repeat scroll center top / 100% #fbffff ;
|
||
|
|
}
|
||
|
|
.panneau-9 .theme span {
|
||
|
|
color: #005184;
|
||
|
|
font-size: 2em;
|
||
|
|
line-height: 1.2em;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.contenu-texte {
|
||
|
|
background-color: rgba(255,255,255,0.5);
|
||
|
|
background: url("../img/fond-crenele.svg") repeat-y scroll center top / 100% transparent ;
|
||
|
|
padding: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-bar {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-bar a{
|
||
|
|
}
|
||
|
|
a.right {
|
||
|
|
background-position :3em top ;
|
||
|
|
}
|
||
|
|
.navigation a{
|
||
|
|
font-size: 0.7em;
|
||
|
|
padding: 0.7rem 1.4rem 0.5rem;
|
||
|
|
}
|
||
|
|
.aller {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
/* pages a propos-----------------------------*/
|
||
|
|
|
||
|
|
.accueil img[src="img/april_logo.svg"] {
|
||
|
|
display: block;
|
||
|
|
margin: 3em 0 7em;
|
||
|
|
width: 6em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Screen */
|
||
|
|
@media screen and (max-width: 1140px){
|
||
|
|
|
||
|
|
.contenu-texte {
|
||
|
|
padding: 5em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 1020px){
|
||
|
|
.accueil .panel {
|
||
|
|
min-height: inherit;
|
||
|
|
}
|
||
|
|
.accueil .large-2.columns, .panneau-1 .large-2.columns, .panneau-2 .large-2.columns, .panneau-3 .large-2.columns, .panneau-4 .large-2.columns, .panneau-5 .large-2.columns, .panneau-6 .large-2.columns, .panneau-7 .large-2.columns, .panneau-8 .large-2.columns {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.panel {
|
||
|
|
margin-bottom: -1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 970px){
|
||
|
|
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 630px){
|
||
|
|
.contenu-texte {
|
||
|
|
padding: 4em;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
margin-bottom: 0.4rem;
|
||
|
|
}
|
||
|
|
.small-block-grid-2.collection {
|
||
|
|
margin-top: 2em;
|
||
|
|
}
|
||
|
|
.small-block-grid-2 > li {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 580px){
|
||
|
|
.theme span{
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
.panneau-1 .theme span, .panneau-2 .theme span, .panneau-3 .theme span, .panneau-4 .theme span, .panneau-5 .theme span, .panneau-6 .theme span, .panneau-7 .theme span, .panneau-8 .theme span {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
.accueil .large-8 {
|
||
|
|
padding: 3em 2em 2em;
|
||
|
|
}
|
||
|
|
.contenu-texte {
|
||
|
|
padding: 3em 2em;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
line-height: 1em;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
font-size: 1.2em;
|
||
|
|
line-height: 1em;
|
||
|
|
padding-top: 1rem;
|
||
|
|
}
|
||
|
|
}
|