Add css print
This commit is contained in:
parent
c85333586f
commit
4fc9147c7e
354
en/includes/print.css
Normal file
354
en/includes/print.css
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
/**
|
||||
Généralités
|
||||
*/
|
||||
:root {
|
||||
--sans-font:Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||
--text-font: system-ui, sans-serif;
|
||||
--bg:#2e3440;
|
||||
--accent-bg:#434c5e;
|
||||
--text:#eceff4;
|
||||
--text-light:#d8dee9;
|
||||
--accent:#88c0d0;
|
||||
--disabled:#4c566a
|
||||
}
|
||||
@media (prefers-color-scheme:light) {
|
||||
:root {
|
||||
color-scheme:light;
|
||||
--bg:#eceff4;
|
||||
--accent-bg:#e5e9f0;
|
||||
--text:#2e3440;
|
||||
--text-light:#4c566a;
|
||||
--disabled:#d8dee9
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 .5em;
|
||||
font-size: 16px;
|
||||
font-family: var(--text-font);
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--sans-font);
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 80%;
|
||||
margin: 2em auto;
|
||||
border: none;
|
||||
border-top: 1px solid var(--accent-bg);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.featured {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: var(--accent);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
padding: .8em 1em;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.clear:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button.disabled:hover {
|
||||
cursor: default;
|
||||
}
|
||||
.button:visited {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
/**
|
||||
Accueil / Fond
|
||||
*/
|
||||
|
||||
header .name {
|
||||
margin: .5em 0;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--sans-font);
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
line-height: 0.8em;
|
||||
}
|
||||
|
||||
header .name span.light {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
Contenu
|
||||
*/
|
||||
|
||||
section#intro {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/************** intérieur **************/
|
||||
|
||||
|
||||
/* ACCORDÉONS */
|
||||
.accordion {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion .accordion-content {
|
||||
margin: 0 .5em;
|
||||
transition: font-size .1s,
|
||||
margin .1s,
|
||||
padding .1s,
|
||||
opacity .2s .1s;
|
||||
}
|
||||
|
||||
.accordion input.toggle-accordion-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion .accordion-close,
|
||||
.accordion .accordion-close input.clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
|
||||
/* CONTENU */
|
||||
|
||||
|
||||
/* ACCORDEONS PROJETS */
|
||||
|
||||
.projet .project-header {
|
||||
position: relative;
|
||||
background-color: var(--accent-bg);
|
||||
margin: 0 .5em;
|
||||
border: 3px solid var(--disabled);
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: .2em 1em;
|
||||
}
|
||||
|
||||
.projet .project-header .accordion-title {
|
||||
margin: .5em 1em 0 .2em;
|
||||
padding: 0;
|
||||
transition: margin-top .2s;
|
||||
}
|
||||
|
||||
.projet .project-header .subtitle {
|
||||
margin: 0 2.5em calc(300px + 1em) 2em;
|
||||
padding: 0;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
transition: margin-bottom .2s;
|
||||
}
|
||||
|
||||
.projet .project-header .img-fluid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 300px;
|
||||
object-position: top center;
|
||||
top: 4.5em;
|
||||
object-fit: contain;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.projet .accordion-content {
|
||||
padding: .2em 1em;
|
||||
border: 3px solid var(--disabled);
|
||||
border-top: none;
|
||||
border-radius: 0 0 8px 8px;
|
||||
background-color: var(--accent-bg);
|
||||
}
|
||||
|
||||
.projet .accordion-content .project-buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.projet .accordion-content .button {
|
||||
border: 2px solid var(--accent);
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.projet .accordion-content .project-close {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background-color: var(--disabled);
|
||||
font-size: .8em;
|
||||
font-weight: 600;
|
||||
width: 6em;
|
||||
margin: .5em auto;
|
||||
padding: .8em 1em;
|
||||
border: 2px solid var(--disabled);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.projet .accordion-content .project-close .clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* CONTACT */
|
||||
|
||||
|
||||
.contact {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact .button {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: .5em auto 2.5em;
|
||||
padding: .2em .2em;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
text-align: center;
|
||||
background-color: var(--accent-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.contact .button svg {
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
footer .copyright {
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
color: var(--text);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/* --- */
|
||||
|
||||
|
||||
|
||||
/* ---- 404 ------*/
|
||||
|
||||
header.err404 .half {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header.err404 .err404 {
|
||||
/*! padding-left: 5px; */
|
||||
text-transform: uppercase;
|
||||
font-size: 9em;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
header.err404 .white .err404 {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
section.err404 {
|
||||
position: absolute;
|
||||
top: calc((50vh + 5em));
|
||||
color: white;
|
||||
padding: 0 1em;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
width: calc(100% - 2em);
|
||||
|
||||
}
|
||||
|
||||
footer.err404 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer.err404 .copyright {
|
||||
font-size: .5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
|
||||
/* ------- RESPONSIVE DESIGN ----------*/
|
||||
|
||||
|
||||
@media only screen and (min-width : 481px) {
|
||||
|
||||
section#portfolio #portfolio-wrapper {
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
section#portfolio #portfolio-wrapper .projet {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
section#portfolio #portfolio-wrapper .projet input.toggle-accordion-content:checked ~ .project-header,
|
||||
section#portfolio #portfolio-wrapper .projet input.toggle-accordion-content:checked ~ .accordion-content {
|
||||
/*! min-width: calc(481px - 5em); */
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width : 769px) {
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue