html {
font-size: 62.5%; /* 1em = 10px */
box-sizing:border-box;
}
body {
/**/
--background-color:#d4e9d0; /* Main background */
--text-color-link:#000; /* Links */
--text-color-link-border:#92a6ff; /* Links & Borders: Pale blue*/
/**/
/* Main font */
font-family:sans-serif;
color:var(--text-color-main);
line-height:1.5;
font-weight:450;
font-variation-settings:"wdth" 100;
/**/
/* OpenType features: kerning, ligatures & contextual alternates */
font-kerning:normal; /* CSS3 */
/**/
/* Make rendering look more consistent across platforms */
overflow-x:hidden;
}
body,
header {
background-color:var(--background-color);
}
/*///////////////////////////////////////////////////////////////// */
/* **************************** HEADER **************************** */
/*///////////////////////////////////////////////////////////////// */
header {
position:fixed;
left:0;
right:0;
z-index:3000;
transform: translateY(-10px)
}
h1 a,
h5 a,
header div.bannerIcones a {
text-decoration:none;
border:none;
}
header nav.menu {
margin-top:0.5vw;
/* border:1px solid pink; */
border-bottom:7px solid;
border-color:var(--text-color-link);
}
header nav.menu ul,
header nav.menu li {
margin:0;
padding:0;
}
header nav.menu li {
display:inline-block;
margin-right:0.8em;
}
header nav.menu li:last-child{
margin-right:0;
}
header nav.menu a {
margin-right: 20px;
font-weight:700;
/* border:none; */
}
nav.menu ul,
nav.menu li {
max-width:100%;
}
a.fill-div {
font-size:0.8em;
margin-bottom:5px;
color:var(--text-color-link-border);
}
#menu_burger {
display:none;
right:145px;
top:38px;
}
#menu_burger svg {
width:25px;
height:25px;
}
header,
#list,
#prev-next,
footer {
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
column-gap:3vw;
padding-left:3vw;
padding-right:3vw;
}
header nav.menu,
footer .wrapper,
h2,
h3,
section article {
grid-column-start:2;
grid-column-end:5;
}
/*bloc dans header*/
ul, ol, li {
list-style:none;
padding:0;
margin:0;
}
ul li {
margin-bottom:8px;
text-indent:0;
list-style-type:none;
}
aside ul li a {
line-height:160%;
}
article li {
list-style-type:none;
margin-left:0;
padding-left:0;
}
article li p:before {
content:'– ';
display:inline;
}
ul, ol, li {
list-style:none;
padding:0;
margin:0;
}
ul li {
margin-bottom:8px;
text-indent:0;
list-style-type:none;
}
aside ul li a {
line-height:160%;
}
article li {
list-style-type:none;
margin-left:0;
padding-left:0;
}
article li p:before {
content:'– ';
display:inline;
}
/* **************************** style whatif **************************** */
#whatif{
padding-top: 150px;
}
/* **************************** boutton dans header pour lecture livre **************************** */
#button-print-preview{
grid-column-start: 4;
position: absolute;
margin-top: 8%;
width: 25%;
align-items: center;
justify-content: flex-start;
cursor: pointer;
background-color: transparent;
border: 2px solid rgb(7, 7, 7);
border-radius: 5px;
}
/*//////////////////////////////// ACCORDION LECTURE MEMOIRE ///////////////////////////////// */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
font-size:20px;
font-family: sans-serif;
line-height:1.15;
color: #000000;
background-color: transparent;
cursor: pointer;
padding: 18px;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #000;
color: #d4e9d0;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
max-height: 0;
/* display: none; */
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #d4e9d0;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/*//////////////////////////////// IMAGES & LOGO ///////////////////////////////// */
img {
max-width:100%;
height:auto;
}
.logotype{
padding-top: 40px;
}
figure.border img {
border:1px solid #dbdbdb;
}
article .figcall {
/* Figure call in the current text */
font-weight:700;
}
article .fignumber {
/* Figures number in pictures legend */
font-weight:700;
}
article figure {
line-height:1;
}
article figure img {
max-width:100%;
height:auto;
margin-top:15px;
margin-bottom:0;
padding:0;
line-height:1;
border:1px solid;
border-color:var(--text-color-link-border);
}
article figure.full img {
max-height:100%;
}
article .slides .figcaption {
margin-bottom:10px;
}
figcaption,
.figcaption {
padding:0;
line-height:1.5;
margin-top:7px;
}
article .format {
/* [.pdf], [Google doc], etc */
opacity:0.7;
font-weight:300;
}
/*///////////////////////////////////////////////////////////////// */
p {
margin-top:10px;
font-size: 15px;
}
blockquote {
font-size:0.9em;
font-weight:400;
margin-left:2em;
margin-top:1.5em;
margin-bottom:1.5em;
}
strong,
.summary,
article cite,
h4,
h5,
.item p.meta.date {
font-weight:700;
}
/*---------------------------FONT and PARAMETRES------------------------*/
/*.grid-item p,*/
button,
aside,
input,
textarea,
code,
kbd,
pre,
samp,
.meta,
figcaption,
.figcaption {
font-family: monospace;
}
input,
textarea {
font-weight:500;
}
sup {
font-size:65%;
line-height:1;
}
.small-caps,
abbr {
/* Small Caps */
/* http://usabilitypost.com/2014/05/10/using-small-caps-and-text-figures-on-the-web/ */
/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
font-kerning:normal;
font-variant-ligatures:common-ligatures, contextual;
font-variant-numeric: lining-nums, tabular-nums;
font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum", "smcp", "c2sc";
text-transform:uppercase;
font-variant-caps:all-small-caps;
font-variant:small-caps;
}
abbr,
abbr[title] {
border:none;
text-decoration:none;
}
code,
kbd,
pre,
samp {
/* background: linear-gradient( rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) ); */
font-size:0.8em;
line-height:1.2;
padding:0;
/* padding:3px 4px; */
}
/*---------------------------TITLES------------------------------*/
h1 {
font-size: 25px;
line-height:1;
font-family: gulax-regular;
margin-bottom: 0px;;
}
@font-face {
font-family: face;
src: url(Gulax-Regular.woff);
}
h2 {
font-size:40px;
line-height:1.15;
margin-top:10px;
margin-bottom:10px;
}
h3 {
font-size:30px;
letter-spacing:0.01em;
line-height:1.25;
margin-bottom:15px;
}
h4 {
font-size:25px;
line-height:1.15;
margin-bottom:0.7em;
}
h5 {
font-size:18px;
margin-top:20px;
margin-bottom:0px;
line-height: 1.3;
}
h6 {
font-size:15px;
color: #92a6ff;
margin-top:15px;
margin-left: 20px;
margin-bottom:0px;
}
body#archives #list h3,
body#home #list.tag h3 /* Tags */ {
font-size:6rem;
margin-bottom:30px;
}
/*--------------------------------------------------------*/
#sommaire{
position:absolute;
padding-top:150px;
margin-bottom:30px;
width: 22%;
margin-left: 2%;
}
#mémoire{
padding-top: 160px;
margin-bottom:30px;
width: 50%;
margin-left: 27%;
position:inherit;
}
#list {
padding-top:50px;
margin-bottom: 0px;
}
#ASCII{
font-size: 1.5px;
font-family: monospace;
text-align:left;
}
/*---------------------------LINKS------------------------------*/
a {
text-decoration:none;
border-bottom:2px dotted;
border-color:var(--text-color-link-border);
color:var(--text-color-link);
}
a:hover {
color:var(--text-color-main);
border-color:var(--text-color-link);
}
a:focus {
outline:0;
}
.resources a,
aside p.quote a,
pre a,
code a {
overflow-wrap:break-word;
word-wrap:break-word;
word-break:break-all;
word-break:break-word;
hyphens:auto;
}
figure.no-border img,
a.no-border,
aside .quote a {
border:0;
}
/*---------------------------LINK TITLES------------------------------*/
section.main {
padding-top:150px;
}
h1,
h2,
h3,
h4,
p,
ul,
figure,
figcaption,
#form_,
iframe,
audio,
.juxtapose {
max-width:55vw; /*taille des contenus dans le centre du header*/
}
blockquote {
max-width:calc(55vw - 2em);
}
article iframe,
.archiveorg, /* Container */
audio,
.juxtapose {
width:54vw;
}
.archiveorg,
article iframe {
border:1px solid;
border-bottom:2px solid;
border-color:var(--text-color-link-border);
background:white;
}
article iframe {
height:40vw;
margin-bottom:0;
padding-bottom:0;
}
article iframe,
.juxtapose,
.archiveorg {
margin-top:2em;
}
.slides iframe {
margin-top:0;
}
figcaption {
margin-bottom:2.5em;
}
audio::-webkit-media-controls-panel {
background-color:white;
}
audio {
width:100%;
}
.archiveorg {
/* Container */
overflow:hidden;
height:37vw;
}
.archiveorg iframe {
width:73.15vw;
max-width:73.15vw;
height:50vw;
transform:scale(0.75);
transform-origin:0 0;
border:0;
margin:0;
padding:0;
overflow-x:hidden;
overflow-y:scroll !important;
}
iframe.pdf {
height:55vw;
}
/* lecteur du pad */
#pad {
width: 100%;
}
iframe {
overflow-clip-margin: content-box !important;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
overflow: clip !important;
}
/*/////////////////////////////////////////////////////////// */
/* **************************** ASIDE **************************** */
/*/////////////////////////////////////////////////////////// */
aside.fixe strong {
font-size:1.1em;
}
aside h5 {
font-size:1.1em;
margin-bottom:2px;
}
/* aside .sections-cv h5 {
margin-bottom:8px;
} */
aside,
aside a {
color:var(--text-color-main);
}
aside a {
text-decoration:none;
border-bottom:1px dotted;
}
aside ul {
margin-bottom:1em;
}
aside li {
/* display:inline; */
margin-bottom:4px;
}
.tags li,
.team li {
display:inline;
margin:0;
}
aside ul li:last-child .separator {
display:none;
}
aside .meta:last-child {
border-bottom:none;
}
article cite {
font-style:normal;
}
/*/////////////////////////////////////////////////////////// */
/* ********************** FOOTER ********************** */
/*/////////////////////////////////////////////////////////// */
footer .wrapper {
padding-top:15px;
padding-bottom:15px;
border-top:7px solid;
border-color:var(--text-color-link);
margin-top:60px;
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:4%;
}
footer h5 {
padding-bottom:10px;
}
footer h5 a {
color:var(--text-color-main);
}
footer .newsletter,
footer .search {
padding-top:20px;
padding-bottom:40px;
}
footer input[type="submit"] {
display:block;
width:auto;
margin-top:15px;
}
button,
input,
textarea {
padding:10px;
outline:none;
border:2px solid;
border-color:var(--text-color-link);
font-size:0.7em;
font-weight:400;
width:100%;
color:var(--text-color-main);
}
footer input[type=search] {
width:calc(100% - 25px);
}
button,
input[type="submit"],
a.button {
font-weight:bold;
background-color:var(--text-color-link);
color:var(--background-color);
}
/* button,
input[type="submit"] {
background:var(--text-color-link);
border-color:var(--text-color-link);
color:white;
} */
button:hover,
input[type="submit"]:hover,
a.button {
background-color:var(--text-color-main);
}
button {
background-color:var(--text-color-link);
padding-left:13px;
padding-right:13px;
padding-top:11px;
padding-bottom:12px;
}
button a {
background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
background-position:0 1.15em;
background-repeat:repeat-x;
background-size:2px 0.1em;
text-decoration:none;
}
button:hover a,
a.button {
color:#eee;
text-decoration:none;
}
body#search #list form {
margin-top:40px;
}
body#search #list input.search {
/* Search page */
border:2px solid;
border-color:var(--text-color-link);
font-size:1.5em;
width:98%;
}
body#search #list input.button {
margin-top:20px;
margin-left:0px;
width:auto;
}
body#search section.results {
border-bottom:2px solid;
border-bottom-color:var(--text-color-link-border);
}
body#search section.results h3 {
margin-top:50px;
margin-bottom:50px;
}
body#search section.tags {
margin-top:20px;
}
body#search section.tags h2 {
margin-top:40px;
margin-bottom:40px;
padding:0;
}
body#search section.tags h5 {
margin-bottom:5px;
}
/*/////////////////////////////////////////////////////////// */
/* **************************** ARTICLES **************************** */
/*/////////////////////////////////////////////////////////// */
.summary {
margin-top:20px;
}
.plan ul li:before {
/* http://jsfiddle.net/ericrasch/NUJJk/ */
content:"â¡ ";
position:relative;
color:var(--text-color-link);
font-size:0.9em;
}
.biblio li {
font-size:0.9em;
margin-bottom:8px;
font-weight:300;
}
/*/////////////////////////////////////////////////////////// */
/* ********************** TEXT NOTES ********************* */
/*/////////////////////////////////////////////////////////// */
.footnote_call,
.footnotes strong {
font-weight:700;
line-height:inherit;
font-size: 10px;
vertical-align: baseline;
top:0;
cursor: pointer;
user-select:none;
color:var(--text-color-link);
margin-left:-0.1em;
}
.footnote_call::before { content: "["}
.footnote_call::after { content: "]"}
.footnotes strong::before { content: "["}
.footnotes strong::after { content: "]"}
.footnote_content,
.footnote_content a {
/* Inline footnotes */
color:var(--text-color-link);
}
.footnotes p {
font-size:10px;
margin-bottom:15px;
}
/*/////////////////////////////////////////////////////////// */
/* ****************** GALERY ********************** */
/*/////////////////////////////////////////////////////////// */
span.kirby-date {
display:inline-block;
}
#list section {
padding-top:2em;
padding-bottom:1.5em;
border-bottom:2px solid;
border-color:var(--text-color-link-border);
}
body#cv #list section,
body#contact #list section {
border:none;
}
#list section.item,
body#home #list.tag section.item {
padding-top:1.2em;
padding-bottom:1.2em;
border-bottom:2px solid;
border-color:var(--text-color-link-border);
}
body#archives #list section.item:first-of-type,
body#home #list.tag section.item:first-of-type,
body#search section.tags section.item:first-of-type {
border-top:2px solid;
border-color:var(--text-color-link-border);
}
body#contact #infos-perso {
padding-bottom:50px;
}
body#home #list section.item {
border-bottom:none;
padding:0;
}
#list section.item.small .meta a {
border-bottom:none;
}
#list .infos {
display:grid;
grid-column-gap:4%;
grid-template-columns:1fr 1fr 1fr 1fr;
}
#list .label {
font-weight:bold;
margin-bottom:0;
}
#list .meta {
padding-top:10px;
}
#list .avatar .meta {
padding:0;
}
#list h4 {
/* font-weight:700; */
line-height:1.3;
margin-top:0;
margin-bottom:0;
}
aside .meta {
border-bottom:2px solid;
border-color:var(--text-color-link-border);
}
.meta,
figcaption,
.figcaption {
font-size:1.5rem;
font-weight:300;
}
.figcaption,
figcaption,
figcaption a,
.meta,
.meta a {
color:#777;
}
.meta a,
.figcaption a,
figcaption a {
text-decoration:none;
border-bottom:1px dotted;
color:#777;
border-color:#777;
}
.meta a:hover,
.figcaption a:hover,
figcaption a:hover {
color:var(--text-color-link);
border-color:var(--text-color-link);
}
.item p.meta.date {
margin-bottom:0.6em;
}
.kirby-date::first-letter {
text-transform:capitalize;
}
#list .item .meta ul {
margin-bottom:1em;
}
#list .item .meta li {
display:inline;
margin:0;
}
#list .item .meta li:last-child .separator {
display:none;
}
aside h5 {
color:#777;
}