.introduction-page{.author-picture { overflow-x: hidden; img { min-width: 800px; margin-left: 50%; transform: translateX(-50%); } } .introduction-content { max-width: 900px; margin: 0 auto; padding: 1rem; font-size: 1.125rem; }}.site-footer{padding:1rem;font-size:14px;text-align:center;a { text-decoration: none; background: none; }}@font-face{font-family:system;font-style:normal;font-weight:400;src:local("system-ui"),local(".SFNSText-Light"),local("Segoe UI"),local("Roboto"),local("Oxygen-Sans"),local("Ubuntu"),local("Cantarell"),local("Helvetica Neue")}:root{--palette-text-color:#006865;--palette-text-color-alt:#FF0077;--palette-background:#EFEFEF;--palette-shadow:rgba(0, 0, 0, .1);--palette-white:#FFFFFF}*,*:before,*:after{box-sizing:border-box}html,body{width:100%;min-height:100vh;margin:0;padding:0}html{font-family:roboto,system,sans-serif;color:var(--palette-text-color);background-color:var(--palette-background);scroll-behavior:smooth}body{font-size:100%;line-height:1.5}hr{width:100%;height:0;max-width:400px;margin:1rem auto;display:block;border:0;border-top:1px solid var(--palette-text-color)}img{max-width:100%}a{color:var(--palette-text-color);text-decoration:underline;outline:0;&:hover,&:focus,&:visited:hover,&:visited:focus { color:var(--palette-text-color-alt); } &:focus,&:visited:focus { outline:solid var(--palette-text-color-alt) 2px; }}ol,ul{margin:0 0 1rem 1.25rem;padding:0;list-style-position:outside}ol ol,ul ul,ul ol,ol ul{margin-bottom:1rem}li{margin:0}article,section{margin-bottom:1rem}h1{font-weight:900}h2{font-size:1.8rem}h3{font-size:1.6rem}h4{font-size:1.4rem}h5,h6{font-size:1.2rem}h2,h3,h4,h5,h6{margin:1em 0 .5em;line-height:1.2}p{margin:0 0 1rem}blockquote{margin:2rem 0 0;padding:1.5rem 3rem;position:relative;background:var(--palette-white);color:var(--palette-text-color);box-shadow:2px 3px 2px var(--palette-shadow),0 0 1px var(--palette-shadow);font-family:merriweather,serif;font-size:1.1rem;font-style:italic;&::before,&::after { position:absolute; display:block; height:2rem; font-size:4rem; line-height:1; font-family:Arial,"system",sans-serif; font-style:normal; font-weight:bold; } &::before { top:0.5rem; left:0.5rem; content:"“"; } &::after { bottom:0.5rem; right:0.5rem; content:"”"; }}.visually-hidden{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media screen and (min-width:801px){.handheld-only{display:none}}.home-content{.logo { max-width: 270px; width: 100%; height: auto; } padding: 0.5rem;h1 { font-size: 1rem; text-align: center; } aside { margin-bottom: 20px; ul { margin: 0; } li { list-style: none; } } nav, aside { a { flex: 1; font-size: 0.875rem; margin-bottom: 1px; padding: 0.25rem 0.5rem; &:hover, &:focus { background-color: var(--palette-white); } } } nav, aside li { display: flex; align-items: center; span { margin: 0 0.125rem; } } .logo { margin: 0 auto; } .project { width: 100%; margin: 0 0 20px 0; list-style: none; text-align: center; a { width: 100%; height: calc(100vw - 20px); display: flex; flex-direction: column; justify-content: flex-end; background-color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat; &:hover, &:focus { text-decoration: none; article { box-shadow: inset 0 0 0 1rem var(--palette-text-color); } } } article { width: 100%; margin-bottom: 0; transition: box-shadow 0.3s; } .title { margin: 0; padding: 1rem .5rem; background-color: var(--palette-white); color: var(--palette-text-color); text-align: center; text-transform: uppercase; font-size: 1rem; } }}@media only screen and (min-width:540px){.home-content{padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1px;& > * { aspect-ratio: 1 / 1; } header { padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } aside { margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } header, aside { background-color: var(--palette-white); } .project { margin: 0; justify-content: space-between; align-items: center; a { width: 100%; height: 100%; justify-content: center; text-decoration: none; background-size: 100%; transition: background-size .15s ease-out; &:hover, &:focus { outline: 0; background-size: 110%; } &:hover article, &:focus article { background-color: rgba(255, 255, 255, .95); // box-shadow: inset 0 0 0 8px var(--palette-text-color); } &:hover .title, &:focus .title { opacity: 1; transform: scale(1); } } article { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: transparent; transition: background-color .2s ease-out, box-shadow .3s; } .title { display: inline-block; max-width: 210px; padding: .8rem 1rem; background: none; opacity: 0; transform: scale(1.3); transition: opacity .2s ease-out, transform .3s ease-out; } }}.site-header{padding:10px 20px}}@media only screen and (min-width:650px){.home-content{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:878px){.home-content{grid-template-columns:repeat(4,1fr)}}@use 'foundation';@use 'page-navigation';@use 'footer';@use 'home';@use 'contact-page';@use 'single-project';@use 'top-anchor';@use 'handheld';@use 'youtube';h1,.site-title{margin:0 0 1rem;display:block}.author-name{text-decoration:none}.author-name,.logo{display:block}.container{max-width:1400px;margin:0 auto;padding:0 10px}.site-content{margin:2rem auto 0}.site-header{padding:10px}.site-title{font-size:2.8rem;font-weight:400}.site-subtitle{display:block;font-size:.875rem}@media only screen and (min-width:900px){.site-header{display:flex;justify-content:space-between}.site-title{margin:0}}@media screen and (min-width:800px){.author-picture img{margin-left:0;transform:none}}.page-navigation{padding:.5rem 1rem;font-weight:900}.project-page{.project-content { margin: 0 auto; max-width: 900px; } .project-images { padding: 1rem; } .project-image { max-width: 100%; display: block; margin: 0 auto; background-color: var(--palette-background); box-shadow: 2px 3px 2px var(--palette-shadow), 0 0 1px var(--palette-shadow); border: 1rem solid var(--palette-white); } .project-image + .project-image { margin-top: 1.5rem; } .project-title { font-family: "Merriweather", serif; text-align: center; } @media screen and (min-width: 700px) { .project-title { font-size: 2.8rem; } } .project-infos { max-width: 900px; margin: 2rem auto 0; padding: 1rem; } .project-infos .project-title::before, .project-infos .project-title::after { font-size: 1.4rem; } .project-infos > :last-child { margin-bottom: 0; } .project-infos .project-title + hr { margin: 2rem auto; } .campaign-name { font-style: italic; font-weight: normal; font-size: .8em; } .campaign-name::before { content: "« "; } .campaign-name::after { content: " »"; } .project-text { word-break: keep-all; } @media screen and (min-width: 800px) { .project-text { display: flex; } .project-text-content { flex: 0 0 50%; padding-right: 2rem; font-size: 1.2rem; } .project-quote { margin: 0; align-self: flex-start; flex: 0 0 50%; } }}.top-link{display:block;width:2rem;height:2rem;line-height:2rem;margin:0 auto 2rem;padding:0;text-align:center;background:var(--palette-text-color);color:var(--palette-white);text-decoration:none;&:active,&:hover { background:var(--palette-text-color-alt); color:var(--palette-white); }}.youtube-wrapper{margin:1rem auto;max-width:calc(900px - 2rem);position:relative;padding-bottom:56.25%;height:0;overflow:hidden;box-shadow:2px 3px 2px var(--palette-shadow),0 0 1px var(--palette-shadow);border:1rem solid var(--palette-white)}.youtube-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}