@import 'variables'; @import 'normalize'; @import 'skeleton'; $bg-main: rgba(240, 240, 242, 1); $bg-gfx: rgba(191, 138, 112, 0.7); $bg-gfx-on: rgba(205, 168, 150, 1); $bg-txt: rgba(166, 191, 112, 0.9); $bg-txt-on: rgba(187, 205, 150, 1); $bg-vdo: rgba(109, 144, 162, 0.7); $bg-vdo-on: rgba(109, 144, 162, 1); $a-link: rgba(23, 123, 93, 1); $a-hover: black; $a-active: white; $a-visited: rgba(23, 123, 93, 0.8); @charset 'UTF-8'; html[lang='en'] :lang(fr) { display: none !important; } html[lang='fr'] :lang(en) { display: none !important; } :lang(en) { quotes: '\201C' '\201D' '\2018' '\2019'; } :lang(fr) { quotes: '« ' ' »'; } a { text-decoration: none; &:link { color: $a-link; } &:hover { color: $a-hover; text-decoration: underline; } &:active { color: $a-active; } &:visited { color: $a-visited; } } span.ps { background: url(../img/logo-ps.svg) top left / 3rem no-repeat; opacity: 0.75; color: transparent; padding: 0.25rem; } h1,h2,h3,h4,h5,h6 { font-family: $serif; font-weight: 600; a, a:hover, a:focus { text-decoration: none; color: inherit; } } body { font-family: $sans-serif; font-size: 1em; /* No rem here, bug workaround */ background-color: $bg-main; color: rgba(0, 0, 0, 1); } body > header { position: fixed; z-index: 999; top: 0; left: 0; right: 0; background: rgba(124, 118, 146, 1); padding: 0 2rem; color: rgba(240, 240, 242, 1); h1 { margin: 0 auto; &:before { background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; display: block; width: 5rem; height: 5rem; } } h2 { font-weight: 100; margin-top: -2.6rem; font-size: 3.7rem; transform: rotate(180deg); } p { font-family: $serif; font-size: 2rem; font-style: italic; margin: -3.8rem 0 0 0; padding: 0 0 0.4rem 0.3rem; span { color: black; } } } body > main { position: relative; top: 0rem; left: 0; right: 0; margin: 0 auto; max-width: 96rem; font-size: 1.6rem; > article { background-color: $bg-main; margin: 0 auto; max-width: 60rem; min-height: calc(100vh - 24rem); padding: 12rem 9rem; } } body { &.gfx { background-color: $bg-gfx-on; > aside { &:hover, &:focus { background-color: $bg-gfx-on; nav ul li:first-child { background: $bg-gfx-on; } } } } &.txt { background-color: $bg-txt-on; > aside { &:hover, &:focus { background-color: $bg-txt-on; nav ul li:nth-child(2) { background: $bg-txt-on; } } } } &.vdo { background-color: $bg-vdo-on; > aside { &:hover, &:focus { background-color: $bg-vdo-on; nav ul li:last-child { background: $bg-vdo-on; } } } } > aside { position: fixed; top: calc(50% - 150px); height: 300px; background: black url(../img/aside-off.png) center right no-repeat; left: -20rem; width: 20rem; padding: 1rem; &:hover, &:focus { left: 0; background: $bg-main url(../img/aside-on.png) center left no-repeat; box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); width: auto; border-right: 2rem solid black; padding: 0; nav { display: block; background: $bg-main url(../img/aside-on.png) center left no-repeat; height: 100%; h3 { a:link, a:hover, a:active, a:visited { color: transparent; } } } ul li:hover { a:hover { text-decoration: none; } span { display: block; } &:first-child { transform: scale(1.4) rotate(4deg) translateX(-0.75vw); a { transform: rotate(-4deg); } } &:nth-child(2) { transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); a { transform: rotate(6deg); } } &:last-child { transform: scale(1.4) rotate(5deg) translateX(-0.5vw); a { transform: rotate(-5deg); } } } } nav { position: relative; margin-left: 3rem; display: none; line-height: 30rem; h3 { display: inline-block; background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; width: 10rem; height: 100%; vertical-align: top; color: transparent; a { display: block; height: 100%; width: 100%; line-height: 30rem; color: transparent; &:hover { color: transparent; } } } ul { list-style: none; display: inline-block; height: 100%; li { display: block; padding: 0 2rem; font-size: 3rem; float: left; padding-left: 1rem; z-index: 400; overflow: hidden; width: 10rem; height: 100%; a { color: black; text-decoration: none; display: block; height: 100%; width: 100%; z-index: 404; &:link, &:visited { color: inherit; } &:hover { font-size: 200%; color: inherit; z-index: 404; } } span { display: none; z-index: 400; position: relative; font-size: 1.25rem; line-height: 1.6rem; text-align: center; margin: -3rem -2rem 0 -1rem; } &:first-child { background: $bg-gfx; } &:nth-child(2) { background: $bg-txt; } &:last-child { background: $bg-vdo; } } } } } } body > footer { position: relative; left: 0; right: 0; max-width: 60rem; margin: 5rem auto 2rem auto; font-size: 1.25rem; h4 { margin: 0; font-size: 1.6rem; a { text-decoration:none; } } &:hover > p { > span:first-child { display: inline-block; color: transparent; line-height: 0; } > span:first-child:before { content: 'Copyleft'; display: block; color: black; padding-right: 0.4rem; } > span + span { display: inline-block; transform: rotate(180deg) translateY(0.2rem); } } } section { h2 + h3 { font-size: 2.5rem; font-style: italic; margin-top: -2rem; } } article > header { p { font-size: 2rem; line-height: 1.25; font-family: $serif; text-variant: italic; padding: 0 4rem; text-align: justify; &:last-child { padding-bottom: 2rem; } } } article { #intro h2 { transform: rotate(270deg) translate(13.6rem, -34rem); } section:after { display: table; content: ""; clear: both; margin-bottom: 2rem; } aside { ul { display: table; position: relative; list-style: none; margin: 0 -8rem 1rem -8rem; width: calc(100% + 16rem); li { display: table-cell; text-align: center; } img { display: block; width: 16rem; background-color: black; margin: 1rem auto; } } } .outro { p { font-size: 2rem; text-align: justify; } } .intro { background-color: rgba(255, 255, 255, 0.1); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); height: auto; max-height: 2rem; margin: 2rem; padding: 2rem; overflow: hidden; text-overflow: ellipsis; p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &:hover { max-height: 100vh; p { white-space: normal; overflow: auto; } } } video, iframe { max-width: 100%; } .video { margin: 0 -6rem 0 -4rem; video, iframe { width: 30rem; height: 18.875rem; background: black; float: left; margin: 0 2rem 0 -4rem; } p { line-height: 1.25; } &:hover { video, iframe { width: 68rem; height: 38.25rem; float: none; margin: auto; } } } } span.note { font-size: smaller; padding-left: 1rem; display: none; } :hover + span.note { display: inline; } #lang-switch { background-color: rgba(240, 240, 242, 0.3); } body.gfx { #krto img { float: left; padding-right: 2rem; margin-left: -6rem; } #cw { position: relative; z-index: 0; a { z-index: 200; } #gfx { position: absolute; z-index: -1; opacity: 1; margin: 0 auto; width: 72rem; height: 22.5rem; margin-left: -6rem; animation: fade-in 1s linear; svg { position: relative; width: 100%; height: 100%; } } &:hover #gfx { opacity: 0.2; animation: fade-out 1s linear; } } .sinewave{ &.w0 { fill: rgba(240, 40, 142, 0.5); } &.w1 { fill: rgba(140, 140, 42, 0.5); } &.w2 { fill: rgba(240, 142, 1, 0.5); } &.w3 { fill: rgba(0, 110, 12, 0.5); } } } @keyframes fade-in { from { opacity: 0.2; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0.2; } }