ajout style print
This commit is contained in:
parent
1a95e1141b
commit
d0de2d62b3
335
includes/print.css
Normal file
335
includes/print.css
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
/**
|
||||
* GÉNÉRALITÉS
|
||||
**/
|
||||
|
||||
:root {
|
||||
--blue: rgb(0, 79, 135);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: local("Lato Regular"),
|
||||
url('../fonts/lato-regular-webfont.woff2') format('woff2'),
|
||||
url('../fonts/lato-regular-webfont.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: local("Lato Black"),
|
||||
url('../fonts/lato-black-webfont.woff2') format('woff2'),
|
||||
url('../fonts/lato-black-webfont.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--blue);
|
||||
font-family: Lato, Verdana, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width : 600px;
|
||||
min-height: calc(100vh - 192px);
|
||||
margin: auto;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
hr.joli {
|
||||
position: relative;
|
||||
background: url(/images/hr_Serment.png) center center no-repeat;
|
||||
background-size: contain;
|
||||
border: none;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
hr.joli:before,
|
||||
hr.joli:after {
|
||||
content: "";
|
||||
border: 2px solid #f7c748;
|
||||
width: calc(50% - 95px);
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr.joli:before {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
hr.joli:after {
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* ACCORDÉONS */
|
||||
.accordion {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion input.toggle-accordion-content {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.accordion .accordion-content {
|
||||
margin: 0 .5em;
|
||||
transition: font-size .1s,
|
||||
margin .1s,
|
||||
padding .1s,
|
||||
opacity .2s .1s;
|
||||
}
|
||||
|
||||
.accordion input.toggle-accordion-content:checked {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.accordion input.toggle-accordion-content:not(:checked) ~ .accordion-content {
|
||||
opacity: 0;
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordion .accordion-close {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.accordion .accordion-close input.clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.accordion input.toggle-accordion-content:checked ~ .accordion-close input.clear {
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.accordion .accordion-title:before {
|
||||
content: "+";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: -3px;
|
||||
transform-origin: center center;
|
||||
transition: transform .2s;
|
||||
border: 1px solid var(--blue);
|
||||
border-radius: 30px;
|
||||
margin-top: 2px;
|
||||
height: 20px;
|
||||
width: 14px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.accordion .toggle-accordion-content:hover ~ .accordion-title:before,
|
||||
.accordion .accordion-close:hover ~ .accordion-title:before{
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.accordion .accordion-title {
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.accordion input.toggle-accordion-content:checked ~ .accordion-title::before {
|
||||
transform: rotate(.125turn);
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* TITRE & INTRO */
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#intro {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#intro .emphase {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#intro .accordion-title {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* SERMENT */
|
||||
|
||||
#serment .titre-serment + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#serment p.objectifs-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#serment ul.objectifs {
|
||||
padding-left: 0;
|
||||
list-style: circle
|
||||
}
|
||||
|
||||
#serment ul.objectifs li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#serment .accordion .accordion-title {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#serment .fait,
|
||||
#serment .info-fin {
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* SIGNATAIRES */
|
||||
|
||||
#signataires h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#signataires p.subtitle {
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#signataires .signataires .meta-info {
|
||||
margin-top: 0;
|
||||
font-style: italic;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
|
||||
#signataires ul.noms {
|
||||
display: grid;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
||||
font-size: .6em;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
background-color: #518aca;
|
||||
margin: 0 -15px -15px -15px;
|
||||
padding : 0 calc(50% - 285px) 2em calc(50% - 285px);
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
footer p {
|
||||
padding-top: 2em;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .buttons {
|
||||
text-align: center;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
footer .buttons a {
|
||||
margin: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer .buttons svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
footer .menu {
|
||||
font-size: .8em;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
footer .menu a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* --- */
|
||||
|
||||
/* SIGNATURE, PARTAGE */
|
||||
|
||||
#share #je-signe {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: .6em;
|
||||
background-color: #518aca;
|
||||
margin-right: calc(50% - 315px );
|
||||
border-radius: 1em 1em 0 0 ;
|
||||
font-size: 1.4em;
|
||||
transition: font-size .2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#share #je-signe #link {
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
font-weight: 900;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#share #je-signe:hover {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#share #je-signe .sublink {
|
||||
color: #fff;
|
||||
font-size: 0.33em;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
line-height: 0.2;
|
||||
}
|
||||
|
||||
#share #thankyou {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in a new issue