Expolibre-3-www/htdocs/css/expolibre-tangram.css

388 lines
8.3 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% #c9efc5 ;
}
.panneau-7 .theme span {
color: #008080;
font-size: 2em;
line-height: 1.2em;
display: block;
}
.panneau-8 {
background: url("../img/fond-008.jpg") no-repeat scroll center top / 100% #fbffff ;
}
.panneau-8 .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;
}
}