Download raw (8.4 KB)

/* réinitialisations de base, ne pas toucher */

* {
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  page-break-inside: avoid;
}

/* liens vers la typo */

@font-face {
  font-family: 'herschey-complex';
  src: url('fonts/hershey-webfont/avhersheycomplexmedium-webfont.woff2') format('woff2'), url('hershey-webfont/avhersheycomplexmedium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'herschey-noaille-futura';
  src: url('fonts/webfonts/hershey-noailles-futuram-webfont.woff2') format('woff2'), url('fonts/webfonts/hershey-noailles-futuram-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'armata';
  src: url('fonts/webfonts/armata-regular-webfont.woff2') format('woff2'), url('fonts/webfonts/armata-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'hershey futura light';
  src: url('fonts/futuraLightAngled.ttf');
  font-weight: normal;
  font-style: normal;
}

:root {
  --background-color: #9F5881;
  --blocking-background-color: white;
  --chelodonium: #E1A800;
  /*--pluvialis: #ED7B3C;*/
  --pluvialis: #ed9f3c;
  /*--spiruline:#43905a;*/
  --spiruline:#00b386;
  --murex:#9F5881;
  /*--salina: #CC6052;*/
  --salina: #f96245;
  --header-shadow-distance: .13ex;
  --bleu: #0039e1;
  --header-shadow-distance: .13ex;
}

body {
  font-family: 'herschey-noaille-futura';
}

h1, h2, h3 {
  font-weight: normal;
}

h1 {
  margin-bottom: 1em;
  color: transparent;
  font-family: 'hershey futura light';
  text-shadow: calc(-1 * var(--header-shadow-distance)) 0px 0px black, 0px calc(-1 * var(--header-shadow-distance)) 0px black, var(--header-shadow-distance) 0px 0px black, 0px var(--header-shadow-distance) 0px black;
  letter-spacing: .5ex;
  font-weight: normal;
  font-size: 125%;
  margin-top: -1.75em;
  margin-bottom: 1em;
}

h2 {
  font-size: 100%;
  margin-top: 24px;
  margin-bottom: 2px;
}
#projects h2 {
  text-shadow: calc(-1 * var(--header-shadow-distance)) 0px 0px black, 0px calc(-1 * var(--header-shadow-distance)) 0px var(--spiruline), var(--header-shadow-distance) 0px 0px var(--spiruline), 0px var(--header-shadow-distance) 0px black;

}
#calendar h2 {
  text-shadow: calc(-1 * var(--header-shadow-distance)) 0px 0px black, 0px calc(-1 * var(--header-shadow-distance)) 0px var(--salina), var(--header-shadow-distance) 0px 0px var(--salina), 0px var(--header-shadow-distance) 0px black;

}
#projects h2, #calendar h2 {
  font-size: 9.5pt;
  line-height: 1.8em;
  font-family: 'hershey futura light';
  letter-spacing: .35ex;
  font-weight: normal;
  margin-top: -1em;
  text-align: center;
  text-transform: uppercase;
}


h3 {
  font-size: 11pt;
  text-decoration: underline;
  margin: 10px 0px 5px 0px;
}

p {
  font-size: 15pt;
  line-height: 1.25em;
  letter-spacing: -0.03em;
}

.section {
  display: inline-block;
  width: 33%;
  /* min-height: 100vh; */
  vertical-align: top;
  padding: 3.5em 20px 0 20px;
  position: relative;
}

#about {
  /* padding: 0px 20px; */
  /*margin-top: 50px;*/
  /* width: 40%; */
  /* float: left; */
  /* position: sticky; */
  /* height: 98vh; */
  /*padding-top: 2.5em;*/
  /* overflow: hidden; */
  /* overflow-y: scroll; */
  /* margin-left: 33%; */
  /* background-image: repeating-linear-gradient(30deg, var(--spiruline), var(--spiruline) 1px, transparent 1px, transparent 4px); */
  --background-color: var(--murex);
}

h1 {
  margin-top: 0px;
}

h2 {
  margin-top: 0px;
  padding-top: 6px;
  text-align: center;
}

#projects {
  --background-color: var(--spiruline);
}

#calendar {
  --background-color: var(--salina);
}

#projects .background, #calendar .background {
  --background-color: var(--spiruline);
}

#main .background25, #right-menu .background25 {
  --background-color: var(--spiruline);
  /* background-image: repeating-linear-gradient(150deg, var(--spiruline), var(--spiruline) 1px, transparent 1px, transparent 4px); */
  width: 25%;
  position: relative;
  float: left;
  padding: 20px;
}

#main .background {
  margin-top: 86px;
}

#main .background25 {
  margin-top: 135px;
}

#main div.intro, #right-menu div.intro {
  /*background-image: repeating-linear-gradient(70deg, var(--spiruline), var(--spiruline) 1px, transparent 1px,transparent 4px);*/
  /* background: white; */
  /*position: fixed;*/
  padding: 10px 20px;
}

#main li {
  /* background-color: white; */
  padding: 2px 0px 0px 0px;
  margin: 0px 20px;
  margin-bottom: 11px;
}

#main ul {
  /*margin-top: 210px;*/
  margin-right: 0px;
  /*padding-top: 95px;*/
  /* background-color: white; */
}

#main figure {
  margin-top: 4px;
}

div#menu {
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  font-size: 14pt;
  /*color:white;*/
  padding: 20px 20px 0px 20px;
  width: 100%;
  height: 60px;
  /* background: repeating-linear-gradient(17deg, var(--chelodonium), var(--chelodonium) 1px, transparent 1px, transparent 4px); */
  /* --background-color: var(--chelodonium); */
  /*animation-name: menu;
animation-duration: 300s;
    animation-iteration-count: infinite;*/
}

#menu li {
  display: inline-block;
  margin-right: 20px;
  font-family: 'herschey-noaille-futura';
  text-transform: lowercase;
  /* font-weight: bold; */
  /* background: white; */
}

a {
  text-decoration: none;
    color: var(--bleu);
  }

#menu a, .menu a:hover, .menu a:visited {
  text-decoration: none;
  border-bottom: 0px solid;
}

#menu a:hover {
  color: white;
  text-shadow: calc(-1 * var(--header-shadow-distance)) 0px 0px black, 0px calc(-1 * var(--header-shadow-distance)) 0px black, var(--header-shadow-distance) 0px 0px black, 0px var(--header-shadow-distance) 0px black;
}
#index a h2, #index a:hover, #index a h2:hover {
  color: initial;
  text-decoration: none;
  font-weight: initial;
}
em {
  font-family: 'herschey-noaille-futura';
  font-style: normal;
  font-size: 11.5pt;
  vertical-align: 0.05em;
}

p.header {
  margin-top: 12pt;
  /*font-size: 12pt;*/
}

p.footer {
  font-size: 12pt;
}

p.footer-more {
  font-size: 12pt;
  font-weight: bold;
  font-family: 'herschey-noaille-futura';
  line-height: 2.25em;
}

a:hover {
  text-decoration: underline;
  /*font-size: 0.5em*/
}

p.header+h2 {
  margin-top: 24pt;
}

p.header+p, p+p {
  margin-top: 0pt;
  text-indent: 42px;
}

#index img:hover {
  width: 200%;
  margin-left: -50%;
  object-fit: contain;
  z-index: 100;
}
#index figure:hover {
overflow: visible;
}
#index figure {
  width: 100%;
  /*height: 200px;*/
  overflow: hidden;
  margin-top: 12px;
}

#index figure img {
  width: 100%;
  object-fit: none;
}

ul {
  margin-right: 15px;
}

ul li {
  list-style: none;
  line-height: 1.05em;
  font-size: 11.5pt;
}
#menu ul li {
    font-size: 12pt;
    display: inline-block;
    margin-right: 30px;
    font-family: 'herschey-noaille-futura';
    text-transform: lowercase;
    font-weight: bold !important;
    background: white;
    padding: 4px 2px 2px 2px;
}

.patterned, .patterned-border {
  background: repeating-linear-gradient(var(--background-rotation), var(--background-color),  var(--background-color) 1px, transparent 1px, transparent 4px);
}

.patterned-background {
  background: repeating-linear-gradient(calc(var(--background-rotation) + 90deg), var(--blocking-background-color),  var(--blocking-background-color) 3px, transparent 3px, transparent 4px);
}

.bordered, .patterned-border {
  padding: 30px;
}

.patterned-background {
  padding: 20px;
}

.section .intro {
  position: sticky;
  top: 3.5em;
  z-index: -1;
}

.columns {
  display: flex;
}

.columns .section {
  flex-grow: 1;
  flex-direction: column;
  display: flex;
}

.columns .section .fill {
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  top: 60vh;
  bottom: 0;
}

#projects ul {
  margin-top: 1em;
}

#projects ul, #calendar ul {
  position: relative;
  padding-bottom: 15vh;
}

#projects li, #calendar li {
  max-width: 80%;
  margin: 3em;
}

#projects ul li {
  margin-left: 0%;
}

#projects ul li:nth-of-type(even) {
  margin-left: 26%;
  margin-right: -30%;
}

#projects ul li:nth-of-type(3n) {
  margin-left: -7.5%;
}

#projects .fill {
  margin-right: -10%;
  margin-left: -10%;
}

#calendar .fill {
  margin-left: -10%;
}

#calendar ul li:nth-of-type(even) {
  margin-left: 40%;
  margin-right: -20%;
}

#calendar ul li:nth-of-type(4n-2) {
  margin-right: -7.5%;
}

.section#about {
  padding-top: calc(3.5em + 50px);
}

#about .intro {
  top: calc(3.5em + 50px);
}