From c128cfd289fbc25cc6b889086379059b8e47a360 Mon Sep 17 00:00:00 2001 From: natacha Date: Wed, 1 Jun 2022 11:39:10 +0200 Subject: Take over vdo -> vda for Jeux Vide.A --- assets/css/screen.css | 3145 +++++++++++++++++++++++++++--------- assets/css/txt.css | 1207 +++++++++++++- assets/img/bg-vda.png | Bin 0 -> 32408 bytes assets/img/hela-cell-division.webm | Bin 0 -> 47022 bytes assets/img/hela-cells.jpg | Bin 0 -> 108817 bytes assets/img/hela-goal.png | Bin 0 -> 37588 bytes assets/scss/_aside.scss | 2 +- assets/scss/_variables.scss | 8 +- assets/scss/_vda.scss | 38 + assets/scss/_vdo.scss | 13 - assets/scss/home.scss | 12 +- assets/scss/mobile.scss | 6 +- assets/scss/screen.scss | 6 +- assets/scss/txt.scss | 14 +- ps/vda/index.html | 188 +++ 15 files changed, 3881 insertions(+), 758 deletions(-) create mode 100644 assets/img/bg-vda.png create mode 100644 assets/img/hela-cell-division.webm create mode 100644 assets/img/hela-cells.jpg create mode 100644 assets/img/hela-goal.png create mode 100644 assets/scss/_vda.scss delete mode 100644 assets/scss/_vdo.scss create mode 100644 ps/vda/index.html diff --git a/assets/css/screen.css b/assets/css/screen.css index ae7a7da..16ed98b 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -1,305 +1,1151 @@ -:root { - --font-text: Abel, 'Open Sans', sans-serif; - --font-title: 'Cormorant Garamond', serif; - - --alabaster: #f3f0e4; - --black20: rgba(0, 0, 0, 0.2); - --black25: rgba(0, 0, 0, 0.25); - --black40: rgba(0, 0, 0, 0.4); - --black50: rgba(0, 0, 0, 0.5); - --black68: rgba(0, 0, 0, 0.68); - --black70: rgba(0, 0, 0, 0.7); - --cyber-grape: #6d4e80; - --flax: #dcc985; - --misty-moss: rgba(173, 151, 56, 0.68); - --white50: rgba(255, 255, 255, 0.5); - --white85: rgba(255, 255, 255, 0.85); - - --bg-color: var(--misty-moss); - --color: var(--alabaster); - - --gfx-brown70: rgba(191, 138, 112, 0.7); - --gfx-brown90: rgba(191, 138, 112, 0.9); - --txt-green70: rgba(166, 191, 112, 0.7); - --txt-green90: rgba(166, 191, 112, 0.9); - --vdo-blue50: rgba(112, 166, 191, 0.5); - --vdo-blue70: rgba(109, 144, 162, 0.7); - --vdo-blue90: rgba(112, 166, 191, 0.9); - - --sinewave-w0: rgba(240, 40, 142, 0.5); - --sinewave-w1: rgba(140, 140, 42, 0.5); - --sinewave-w2: rgba(240, 142, 1, 0.5); - --sinewave-w3: rgba(0, 110, 12, 0.5); - -} - +@charset "UTF-8"; +/** + * SCSS Variables + **/ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ html { - box-sizing: border-box; - font-size: 1rem; - margin: 0; - padding: 0; -} - - -html[lang='en'] :lang(fr) { - display: none !important -} - -html[lang='fr'] :lang(en) { - display: none !important -} + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +/* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +* +* Adapted for Devuan.org by hellekin, 2016 +*/ +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } + +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } } + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 4%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + .one.column, + .one.columns { + width: 4.66666666667%; } + .two.columns { + width: 13.3333333333%; } + .three.columns { + width: 22%; } + .four.columns { + width: 30.6666666667%; } + .five.columns { + width: 39.3333333333%; } + .six.columns { + width: 48%; } + .seven.columns { + width: 56.6666666667%; } + .eight.columns { + width: 65.3333333333%; } + .nine.columns { + width: 74.0%; } + .ten.columns { + width: 82.6666666667%; } + .eleven.columns { + width: 91.3333333333%; } + .twelve.columns { + width: 100%; + margin-left: 0; } + .one-third.column { + width: 30.6666666667%; } + .two-thirds.column { + width: 65.3333333333%; } + .one-half.column { + width: 48%; } + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { + margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { + margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { + margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { + margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { + margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { + margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { + margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { + margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { + margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { + margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { + margin-left: 95.3333333333%; } + .offset-by-one-third.column, + .offset-by-one-third.columns { + margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { + margin-left: 52%; } } + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } -:lang(en) { - quotes: '\201C''\201D''\2018''\2019' -} +body { + font-size: 1.5em; + /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: 'Open Sans', open-sans, Lato, 'Fira Sans', Helvetica, Arial, sans-serif; + color: #222; } + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } + +h1 { + font-size: 4.0rem; + line-height: 1.2; + letter-spacing: -.1rem; } + +h2 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; } + +h3 { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; } + +h4 { + font-size: 2.4rem; + line-height: 1.35; + letter-spacing: -.08rem; } + +h5 { + font-size: 1.8rem; + line-height: 1.5; + letter-spacing: -.05rem; } -:lang(fr) { - quotes: '« '' »' -} - -h1, -h2, -h3, -h4, -h5, h6 { - font-family: var(--font-title); -} - -body { - background: var(--bg-color); - color: var(--color); - font-family: --var(font-text); - font-size: 1em; - scroll-behavior: smooth -} - -body :visited { - text-decoration: underline -} - -body>header { - background-color: var(--cyber-grape); - position: fixed; - right: 5vw; - bottom: -2vh; -/* left: 5vw; */ - padding: 1rem; - z-index: 999; - font-size: 1.2rem; - color: var(--white85); - overflow: auto; - transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); - max-width: 64rem; - min-width: 50vw; -} - -body>header :link, -body>header :visited, -body>header footer :link, -body>header footer :visited { - color: var(--flax); - text-decoration: none -} - -body>header h1 { - text-align: center; - margin: 0; - font-family: var(--font-title); + font-size: 1.5rem; + line-height: 1.6; + letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { + font-size: 5.0rem; } + h2 { + font-size: 4.2rem; } + h3 { + font-size: 3.6rem; } + h4 { + font-size: 3.0rem; } + h5 { + font-size: 2.4rem; } + h6 { + font-size: 1.5rem; } } + +p { + margin-top: 0; } + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } + +a:hover { + color: #0FA0CE; } + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 3.8rem; + padding: 0 2rem; + color: #555; + text-align: center; + font-size: 1.1rem; + font-weight: 600; + line-height: 3.8rem; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 0.4rem; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } + +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } + +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } + +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } + +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } + +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } + +fieldset { + padding: 0; + border-width: 0; } + +input[type="checkbox"], +input[type="radio"] { + display: inline; } + +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle outside; } + +ol { + list-style: decimal inside; } + +ol, ul { + padding-left: 0; + margin-top: 0; } + +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } + +li { + margin-bottom: 0.25rem; } + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } + +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } + +th:first-child, +td:first-child { + padding-left: 0; } + +th:last-child, +td:last-child { + padding-right: 0; } + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } + +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } + +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } + +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } + +.u-pull-right { + float: right; } + +.u-pull-left { + float: left; } + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ +/* Larger than mobile */ +/* Larger than phablet (also point when grid becomes active) */ +/* Larger than tablet */ +/* Larger than desktop */ +/* Larger than Desktop HD */ +h1, h2, h3, h4, h5, h6 { + font-family: "Cormorant Garamond", serif; + font-weight: 600; } + h1 a, h1 a:hover, h1 a:focus, h1 a:link, h1 a:visited, h2 a, h2 a:hover, h2 a:focus, h2 a:link, h2 a:visited, h3 a, h3 a:hover, h3 a:focus, h3 a:link, h3 a:visited, h4 a, h4 a:hover, h4 a:focus, h4 a:link, h4 a:visited, h5 a, h5 a:hover, h5 a:focus, h5 a:link, h5 a:visited, h6 a, h6 a:hover, h6 a:focus, h6 a:link, h6 a:visited { + text-decoration: none; + color: inherit; } + h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { + text-decoration: underline; + color: #f0f0f2; } + +body.ps > header { + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + background: #7c7692; + padding: 0 2rem; + color: #f0f0f2; } + body.ps > header h1 { + margin: 0 auto; } + body.ps > header h1:before { + background: url(../assets/img/logo-ps.svg) center left/5rem no-repeat; + display: block; + width: 5rem; + height: 5rem; } + body.ps > header h2 { + font-weight: 100; + margin-top: -2.6rem; + font-size: 3.7rem; + transform: rotate(180deg); } + body.ps > header p { + font-family: "Cormorant Garamond", serif; + font-size: 2rem; + font-style: italic; + margin: -3.8rem 0 0 0; + padding: 0 0 0.4rem 0.3rem; } + body.ps > header p span { + color: black; } + +body.ps.home > header { + background-color: #6d4e80; + top: unset; + right: 5vw; + bottom: -2vh; + left: 5vw; + padding: 1rem; + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.85); + overflow: auto; + transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); } + body.ps.home > header h1 { font-size: 7vh; - line-height: 1.2; - transform: rotate(1.5deg) translateX(5vh) translateY(-1vh) -} - -body>header h1 img { - display: none; - vertical-align: -1.6rem; - align: absmiddle; - border: 0 -} - -body>header section { + text-align: center; + transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); } + body.ps.home > header h1 img { + display: none; + vertical-align: -1.6rem; } + body.ps.home > header section { display: none; max-width: 42rem; margin: 0 auto; - padding-bottom: 7rem -} - -body>header footer { + padding-bottom: 7rem; } + body.ps.home > header footer { + background-color: #6d4e80; + display: none; + font-size: 1rem; + z-index: 999; position: fixed; + bottom: 0; left: 0; right: 0; - font-size: smaller; - background-color: var(--cyber-grape); - display: none; - margin: 5rem auto 2rem auto; - width: 80vw -} - -body>header footer>p { - text-align: center; - margin: 4rem auto 2rem auto -} - -body>header footer>nav { - margin: 0 auto -3.5rem auto; - padding: 0; - display: none; - text-align: center; - transform: translateY(-7rem) -} - -body>header footer>nav h4 { - display: inline -} - -body>header footer>nav ul { - display: inline-block; - margin: 0; - padding: 0; - list-style: none -} - -body>header footer>nav li { - display: inline-block; - margin: 0 0.75rem; - width: 4rem; - height: 3rem; - border: 1px solid; - border-bottom: 3px solid; - border-color: transparent; - border-top-right-radius: 0.5rem; - text-align: center -} - -body>header footer>nav li a { - position: relative; + display: none; } + body.ps.home > header footer > h4 { + display: inline-block; } + body.ps.home > header footer > nav { + display: none; } + body.ps.home > header footer > p { + display: none; + max-width: 42rem; + margin: 0 auto; + padding-bottom: 7rem; } + body.ps.home > header:hover { + top: 5vh; } + body.ps.home > header:hover h1 { + font-size: 2.6rem; + transform: rotate(2.7deg) translate(0, 0) skewX(0); } + body.ps.home > header:hover img { + display: inline-block; } + body.ps.home > header:hover section, body.ps.home > header:hover footer { + display: block; + width: 80vw; + margin: 0 auto; + padding-bottom: 3rem; } + +body > main { + position: relative; + top: 0rem; + right: 0; + left: 0; + font-size: 1.6rem; + margin: 0 auto; + max-width: 96rem; } + body > main > article { + background: rgba(166, 191, 112, 0.9); + margin: 0 auto; + max-width: 60rem; + min-height: calc(100vh - 24rem); + height: auto; + padding: 12rem 9rem; } + +article > header p { + font-size: 2rem; + line-height: 1.25; + font-family: "Cormorant Garamond", serif; + text-variant: italic; + padding: 2rem 4rem; + text-align: justify; } + +article section:after { + display: table; + content: ""; + clear: both; + margin-bottom: 2rem; } + +article aside ul { + display: table; + position: relative; + list-style: none; + margin: 0 -8rem 1rem -8rem; + width: calc(100% + 16rem); } + article aside ul li { + display: table-cell; + text-align: center; } + article aside ul img { display: block; - width: 100%; - height: 100%; - line-height: 3rem; - margin: 0; - padding: 0; - background: var(--black25); - border-top-right-radius: 0.5rem -} - -body>header footer>nav li:hover { - border-color: var(--flax) -} - -body>header footer>nav li:hover a { - font-weight: bold; - background: var(--black50) -} - -body>header footer:hover>p>span:first-child { + width: 16rem; + height: 9rem; + background-color: black; + margin: 1rem auto; } + +article .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; } + article .intro p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + article .intro:hover { + max-height: 100vh; } + article .intro:hover p { + white-space: normal; + overflow: auto; } + +article .outro p { + font-size: 2rem; + text-align: justify; } + +article .video { + margin: 0 -6rem 0 -4rem; } + article .video video { + width: 30rem; + background: black; + float: left; + margin: 0 2rem 0 -4rem; } + article .video p { + line-height: 1.25; } + article .video:hover video { + width: calc(100% + 6rem); + height: auto; + float: none; } + +body > 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; } + body > aside:hover, body > aside:focus { + left: 0; + background: #f0f0f2 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; } + body > aside:hover nav, body > aside:focus nav { + display: block; + background: #f0f0f2 url(../img/aside-on.png) center left no-repeat; + height: 100%; } + body > aside:hover ul li:hover span, body > aside:focus ul li:hover span { + display: block; } + body > aside:hover ul li:hover:first-child, body > aside:focus ul li:hover:first-child { + transform: scale(1.4) rotate(4deg) translateX(-0.75vw); } + body > aside:hover ul li:hover:first-child a, body > aside:focus ul li:hover:first-child a { + transform: rotate(-4deg); } + body > aside:hover ul li:hover:nth-child(2), body > aside:focus ul li:hover:nth-child(2) { + transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); } + body > aside:hover ul li:hover:nth-child(2) a, body > aside:focus ul li:hover:nth-child(2) a { + transform: rotate(6deg); } + body > aside:hover ul li:hover:last-child, body > aside:focus ul li:hover:last-child { + transform: scale(1.4) rotate(5deg) translateX(-0.5vw); } + body > aside:hover ul li:hover:last-child a, body > aside:focus ul li:hover:last-child a { + transform: rotate(-5deg); } + body > aside nav { + position: relative; + margin-left: 3rem; + display: none; + line-height: 30rem; } + body > aside nav 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; } + body > aside nav h3 a { + display: block; + height: 100%; + width: 100%; + line-height: 30rem; + color: transparent; } + body > aside nav h3 a:hover { + color: transparent; } + body > aside nav ul { + list-style: none; + display: inline-block; + height: 100%; } + body > aside nav ul li { + display: block; + padding: 0 2rem; + font-size: 3rem; + float: left; + padding-left: 1rem; + z-index: 400; + overflow: hidden; + width: 10rem; + height: 100%; + /* + &:first-child { + background: $bg-gfx; + } + + &:nth-child(2) { + background: $bg-txt; + } + + &:last-child { + background: $bg-vda; + } +*/ } + body > aside nav ul li a { + color: black; + text-decoration: none; + display: block; + height: 100%; + width: 100%; + z-index: 404; } + body > aside nav ul li a:hover { + font-size: 200%; + color: inherit; + z-index: 404; } + body > aside nav ul li span { + display: none; + z-index: 400; + position: relative; + font-size: 1.25rem; + line-height: 1.6rem; + text-align: center; + margin: -3rem -2rem 0 -1rem; } + +body > footer { + position: relative; + left: 0; + right: 0; + font-size: smaller; + margin: 5rem auto 2rem auto; + width: 80vw; } + body > footer a { + white-space: nowrap; } + body > footer:hover > p > span:first-child { display: inline-block; color: transparent; - line-height: 0 -} - -body>header footer:hover>p>span:first-child:before { + line-height: 0; } + body > footer:hover > p > span:first-child:before { content: 'Copyleft'; display: block; - color: var(--color); - padding-right: 0.45rem -} - -body>header footer:hover>p>span:first-child+span { + color: black; + padding-right: 0.4rem; } + body > footer:hover > p > span + span { display: inline-block; transform: rotate(180deg); - padding-bottom: -0.1rem -} - -body>header footer:hover>nav { - display: block -} - -body>header:hover { - top: 5vh -} - -body>header:hover h1 { - font-size: 2.6rem; - transform: rotate(2.7deg) translate(0, 0) skewX(0) -} - -body>header:hover footer { - transform: rotate(2.7deg) translateY(-4.5vh) skewX(5deg) -} - -body>header:hover img { - display: inline-block -} - -body>header:hover section, -body>header:hover footer { - display: block; - width: 80vw; - margin: 0 auto; - padding-bottom: 3rem -} - -body>main { - background: url(../img/logo-ps.svg) 40% calc(50% - 5vh)/25vw no-repeat fixed; - position: fixed; - top: 0; - right: 0; - bottom: 50%; - left: 0; - padding: 1rem; - min-height: 80vh -} - -body>footer { - z-index: 999; - position: fixed; - bottom: 0; - left: 0; - right: 0; - display: none; - background-color: var(--cyber-grape); - display: none; - font-size: 1rem -} - -body>footer h4 { - display: inline-block -} - -body>footer>p { - text-align: center; - margin: 4rem auto 2rem auto -} - -body>footer>nav { - display: none; - max-width: 42rem; - margin: 0 auto -3.5rem auto; - padding: 0 -} - -body>footer>nav ul { - display: inline-block; - margin: 0; - padding: 0; - list-style: none -} - -body>footer>nav li { - display: inline-block; - margin: 0 0.75rem; - width: 4rem; - height: 3rem; - border: 1px solid; - border-bottom: 3px solid; - border-color: transparent; - border-top-right-radius: 0.5rem; - text-align: center -} - -body>footer>nav li a { + padding-bottom: -0.07rem; } + +footer > nav ul { + display: inline-block; + margin: 0; + padding: 0; + list-style: none; } + +footer > nav li { + display: inline-block; + margin: 0 0.75rem; + width: 4rem; + height: 3rem; + border: 1px solid; + border-bottom: 3px solid; + border-color: transparent; + border-top-right-radius: 0.5rem; + text-align: center; } + footer > nav li a { position: relative; display: block; width: 100%; @@ -307,454 +1153,1311 @@ body>footer>nav li a { line-height: 3rem; margin: 0; padding: 0; - background: var(--black25); - border-top-right-radius: 0.5rem -} + background: rgba(0, 0, 0, 0.25); + border-top-right-radius: 0.5rem; } + footer > nav li:hover { + border-color: #dcc985; } + footer > nav li:hover a { + font-weight: bold; + background: rgba(0, 0, 0, 0.5); } + +/** + * Fonts + **/ +/* latin */ +@font-face { + font-family: "Cormorant Garamond"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("Cormorant Garamond Bold"), local("CormorantGaramond-Bold"), url(/assets/fonts/cormorant-garamond.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +/* latin */ +@font-face { + font-family: "Abel"; + src: local("Abel Regular"), local("Abel-Regular"), url(/assets/fonts/abel.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +/** + * Pages + **/ +body.gfx > main > article { + background: #cda896; } + +body.gfx > aside:hover, body.gfx > aside:focus { + background-color: #cda896; } + body.gfx > aside:hover nav ul li:first-child, body.gfx > aside:focus nav ul li:first-child { + background: #cda896; } + +/** + * SCSS Variables + **/ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +/* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +* +* Adapted for Devuan.org by hellekin, 2016 +*/ +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } + +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } } + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 4%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + .one.column, + .one.columns { + width: 4.66666666667%; } + .two.columns { + width: 13.3333333333%; } + .three.columns { + width: 22%; } + .four.columns { + width: 30.6666666667%; } + .five.columns { + width: 39.3333333333%; } + .six.columns { + width: 48%; } + .seven.columns { + width: 56.6666666667%; } + .eight.columns { + width: 65.3333333333%; } + .nine.columns { + width: 74.0%; } + .ten.columns { + width: 82.6666666667%; } + .eleven.columns { + width: 91.3333333333%; } + .twelve.columns { + width: 100%; + margin-left: 0; } + .one-third.column { + width: 30.6666666667%; } + .two-thirds.column { + width: 65.3333333333%; } + .one-half.column { + width: 48%; } + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { + margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { + margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { + margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { + margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { + margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { + margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { + margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { + margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { + margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { + margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { + margin-left: 95.3333333333%; } + .offset-by-one-third.column, + .offset-by-one-third.columns { + margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { + margin-left: 52%; } } + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } -body>footer>nav li:hover { - border-color: var(--flax) -} +body { + font-size: 1.5em; + /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: 'Open Sans', open-sans, Lato, 'Fira Sans', Helvetica, Arial, sans-serif; + color: #222; } + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } + +h1 { + font-size: 4.0rem; + line-height: 1.2; + letter-spacing: -.1rem; } + +h2 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; } + +h3 { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; } + +h4 { + font-size: 2.4rem; + line-height: 1.35; + letter-spacing: -.08rem; } + +h5 { + font-size: 1.8rem; + line-height: 1.5; + letter-spacing: -.05rem; } -body>footer>nav li:hover a { - font-weight: bold; - background: var(--black50) -} +h6 { + font-size: 1.5rem; + line-height: 1.6; + letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { + font-size: 5.0rem; } + h2 { + font-size: 4.2rem; } + h3 { + font-size: 3.6rem; } + h4 { + font-size: 3.0rem; } + h5 { + font-size: 2.4rem; } + h6 { + font-size: 1.5rem; } } + +p { + margin-top: 0; } + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } + +a:hover { + color: #0FA0CE; } + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 3.8rem; + padding: 0 2rem; + color: #555; + text-align: center; + font-size: 1.1rem; + font-weight: 600; + line-height: 3.8rem; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 0.4rem; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } + +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } + +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } + +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } + +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } + +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } + +fieldset { + padding: 0; + border-width: 0; } + +input[type="checkbox"], +input[type="radio"] { + display: inline; } + +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle outside; } + +ol { + list-style: decimal inside; } + +ol, ul { + padding-left: 0; + margin-top: 0; } + +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } + +li { + margin-bottom: 0.25rem; } + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } + +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } + +th:first-child, +td:first-child { + padding-left: 0; } + +th:last-child, +td:last-child { + padding-right: 0; } + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } + +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } + +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } + +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } + +.u-pull-right { + float: right; } + +.u-pull-left { + float: left; } + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ +/* Larger than mobile */ +/* Larger than phablet (also point when grid becomes active) */ +/* Larger than tablet */ +/* Larger than desktop */ +/* Larger than Desktop HD */ +html[lang='en'] :lang(fr) { + display: none !important; } -body>footer:hover>p>span:first-child { - display: inline-block; - color: transparent; - line-height: 0 -} +html[lang='fr'] :lang(en) { + display: none !important; } -body>footer:hover>p>span:first-child:before { - content: 'Copyleft'; - display: block; - color: var(--alabaster); - padding-right: 0.4rem -} +:lang(en) { + quotes: '\201C' '\201D' '\2018' '\2019'; } -body>footer:hover>p>span+span { - display: inline-block; - transform: rotate(180deg); - padding-bottom: -0.05rem -} - -body>footer:hover nav { - display: block -} - -.libre>section h3 a { - color: var(--cyber-grape); - text-decoration: none -} - -.media #gfx { - background: var(--gfx-brown70); -} -.media #gfx:hover { - background: var(--gfx-brown90); -} -.media #txt { - background: var(--txt-green70); -} -.media #txt:hover { - background: var(--txt-green90); -} -.media #vdo { - background: var(--vdo-blue50); -} -.media #vdo:hover { - background: var(--vdo-blue90); -} - -@media screen and (max-width: 959px) { - - body { - width: 100vw; - position: relative; - color: black; - margin: 0; - padding: 0; - } - body>header { - margin-left: -4vw; - padding-right: 4rem; - } - body>header:hover { - padding-right: 1rem; - } - body>header h1 { - font-size: 2em; - } - - body>main { - background: url(../img/logo-ps.svg) center top/50vw no-repeat fixed; - padding-top: 50vw; - position: relative; - margin: 0; - padding: 0; - } - - main>article .libre { - position: absolute; - top: 50vw; - padding: 1rem; - font-size: 1.2em; - } - - main>article .media { - position: relative; - top: 100vh; - } - - .media > h2 { - display: none; - } - - .media section { - position: relative; - box-sizing: border-box; - min-height: 100vh; - padding: 1rem; - } - - .media>section h3 { - font-size: 5rem; - text-align: center; - z-index: 900; - } - .media>section h3 a { - color: var(--cyber-grape) - } - - .media #gfx svg, - .media #vdo video { - position: absolute; - left: 0; - top: 0; - opacity: 0.85; - z-index: -1; - max-width: 100vw; - } - .media #gfx svg { - display: block; - height: 100vh; - } +:lang(fr) { + quotes: '« ' ' »'; } + +a { + text-decoration: none; } + a:link { + color: #177b5d; } + a:hover { + color: black; + text-decoration: underline; } + a:active { + color: white; } + a:visited { + color: rgba(23, 123, 93, 0.8); } + +span.ps { + background: url(../img/logo-ps.svg) top left/5rem no-repeat; + opacity: 0.75; + color: transparent; + padding: 0.25rem 1.25rem; } + +h1, h2, h3, h4, h5, h6 { + font-family: "Cormorant Garamond", serif; + font-weight: 600; } + h1 a, h1 a:hover, h1 a:focus, h2 a, h2 a:hover, h2 a:focus, h3 a, h3 a:hover, h3 a:focus, h4 a, h4 a:hover, h4 a:focus, h5 a, h5 a:hover, h5 a:focus, h6 a, h6 a:hover, h6 a:focus { + text-decoration: none; + color: inherit; } - .media:after { +body { + font-family: Abel, "Open Sans", sans-serif; + font-size: 1em; + /* No rem here, bug workaround */ + background-color: #f0f0f2; + color: black; } + +body > header { + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + background: #7c7692; + padding: 0 2rem; + color: #f0f0f2; } + body > header h1 { + margin: 0 auto; } + body > header h1:before { + background: url(../assets/img/logo-ps.svg) center left/5rem no-repeat; + display: block; + width: 5rem; + height: 5rem; } + body > header h2 { + font-weight: 100; + margin-top: -2.6rem; + font-size: 3.7rem; + transform: rotate(180deg); } + body > header p { + font-family: "Cormorant Garamond", serif; + font-size: 2rem; + font-style: italic; + margin: -3.8rem 0 0 0; + padding: 0 0 0.4rem 0.3rem; } + body > header p span { + color: black; } + +body > main { + position: relative; + top: 0rem; + left: 0; + right: 0; + margin: 0 auto; + max-width: 96rem; + font-size: 1.6rem; } + body > main > article { + background-color: #f0f0f2; + margin: 0 auto; + max-width: 60rem; + min-height: calc(100vh - 24rem); + padding: 12rem 9rem; } + +body.gfx { + background-color: #cda896; } + body.gfx > aside:hover, body.gfx > aside:focus { + background-color: #cda896; } + body.gfx > aside:hover nav ul li:first-child, body.gfx > aside:focus nav ul li:first-child { + background: #cda896; } + +body.txt { + background-color: #bbcd96; } + body.txt > aside:hover, body.txt > aside:focus { + background-color: #bbcd96; } + body.txt > aside:hover nav ul li:nth-child(2), body.txt > aside:focus nav ul li:nth-child(2) { + background: #bbcd96; } + +body.vda { + background-color: #6d90a2; } + body.vda > aside:hover, body.vda > aside:focus { + background-color: #6d90a2; } + body.vda > aside:hover nav ul li:last-child, body.vda > aside:focus nav ul li:last-child { + background: #6d90a2; } + +body > 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; } + body > aside:hover, body > aside:focus { + left: 0; + background: #f0f0f2 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; } + body > aside:hover nav, body > aside:focus nav { + display: block; + background: #f0f0f2 url(../img/aside-on.png) center left no-repeat; + height: 100%; } + body > aside:hover nav h3 a:link, body > aside:hover nav h3 a:hover, body > aside:hover nav h3 a:active, body > aside:hover nav h3 a:visited, body > aside:focus nav h3 a:link, body > aside:focus nav h3 a:hover, body > aside:focus nav h3 a:active, body > aside:focus nav h3 a:visited { + color: transparent; } + body > aside:hover ul li:hover a:hover, body > aside:focus ul li:hover a:hover { + text-decoration: none; } + body > aside:hover ul li:hover span, body > aside:focus ul li:hover span { + display: block; } + body > aside:hover ul li:hover:first-child, body > aside:focus ul li:hover:first-child { + transform: scale(1.4) rotate(4deg) translateX(-0.75vw); } + body > aside:hover ul li:hover:first-child a, body > aside:focus ul li:hover:first-child a { + transform: rotate(-4deg); } + body > aside:hover ul li:hover:nth-child(2), body > aside:focus ul li:hover:nth-child(2) { + transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); } + body > aside:hover ul li:hover:nth-child(2) a, body > aside:focus ul li:hover:nth-child(2) a { + transform: rotate(6deg); } + body > aside:hover ul li:hover:last-child, body > aside:focus ul li:hover:last-child { + transform: scale(1.4) rotate(5deg) translateX(-0.5vw); } + body > aside:hover ul li:hover:last-child a, body > aside:focus ul li:hover:last-child a { + transform: rotate(-5deg); } + body > aside nav { + position: relative; + margin-left: 3rem; + display: none; + line-height: 30rem; } + body > aside nav 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; } + body > aside nav h3 a { display: block; - content: ""; - height: 50vh; - } -} - - -@media screen and (min-width: 960px) { - header>footer { - position: fixed - } - - body>header::-webkit-scrollbar { - background-color: var(--cyber-grape); - box-shadow: 1px 2px 2px 1px var(--black40) inset - } - - body>header::-webkit-scrollbar-button { - background-color: black - } - - body>header::-webkit-scrollbar-track { - background-color: var(--black50) - } - - body>header::-webkit-scrollbar-track-piece { - background-color: --var(white50) - } - - body>header::-webkit-scrollbar-thumb { - background-color: var(--flax); - box-shadow: 1px 2px 2px 1px var(--black40) - } - - body>header::-webkit-scrollbar-corner { - background-color: red - } - - body>header:hover { - overflow-y: auto - } - - body>header:hover~footer { - position: fixed; - bottom: 0; - display: block - } - - body>header:hover~footer>nav { - display: block - } - - .media, - .libre { + height: 100%; + width: 100%; + line-height: 30rem; + color: transparent; } + body > aside nav h3 a:hover { + color: transparent; } + body > aside nav ul { + list-style: none; + display: inline-block; + height: 100%; } + body > aside nav ul li { display: block; - position: absolute; - top: 0; - bottom: 5rem; - height: 110vh - } - - .media:hover { - width: 70vw; - z-index: 500 - } - - .media h2, - .libre h2 { - display: none - } - - .media { - left: 0 - } - - .media section { + padding: 0 2rem; + font-size: 3rem; float: left; - position: relative; - height: 100%; - width: 15vw; - top: -5vh; - left: 0; - padding-top: 5vh; padding-left: 1rem; z-index: 400; - overflow: hidden - } - - .media section h3 { - font-size: 5rem; - color: var(--black20) - } - - .media section h4, - .media section p { - display: none - } - - .media section:hover { - box-shadow: 0px -2px 4px 2px var(--black68) inset; - transform: rotate(0deg); - width: 40vw; - z-index: 500 - } - - .media section:hover h3 { - color: #000 - } - - .media section:hover h4, - .media section:hover p { - display: block; - padding: 1rem; - color: #000 - } - - .media #gfx { - transform: rotate(-4deg) translateY(2vw); - margin: 0 -5vw 0 -2vw; - left: 0 - } - - .media #gfx h3 { - transform: rotate(4deg) translateX(1vw) translateY(-4vh); - margin-left: 2vw; - font-size: 5rem - } - - .media #gfx svg { - position: absolute; - top: 0; - left: 0; - opacity: 0.1 - } - - .media #gfx:hover { - transform: rotate(0) translateY(2rem); - } - .media #gfx:hover h3 { - transform: rotate(0) translateY(4rem); - writing-mode: vertical-lr; - } - .media #gfx:hover svg { - min-height: 120vh; - } - - .media #gfx:hover p, - .media #gfx:hover h4 { - display: none - } - - .media #gfx:hover svg { - opacity: 0.9 - } - - .media #gfx:hover+#txt, - .media #txt:hover+#vdo { - margin-left: -3vw - } - - .media #txt { - transform: rotate(6deg) translateY(4vh); - margin: 0 -3vw 0 0; - color: transparent - } - - .media #txt h3 { - transform: rotate(-6deg) translateX(-3vw) translateY(-2.5rem) - } - - .media #txt:hover { - background: var(--txt-green90); - transform: rotate(0) translateY(2vw); - margin: 0; - color: black; - padding: 1rem - } - - .media #txt:hover h3 { - transform: rotate(0) translateX(0) translateY(-0.5rem) - } - - .media section h3 a { - position: relative; - display: block; - top: 0; - left: 0; - right: 0; - bottom: 0; - text-decoration: none; - color: inherit - } - - .media #txt:hover p.tagline { - position: absolute; - top: 10rem; - font-family: var(--font-title); - font-style: italic; - font-size: 1.6rem; - padding: 1rem 2rem - } - - .media #vdo { - left: 0; - transform: rotate(-5deg) translateY(2rem); - margin: 0 0 0 -2vw; - width: 10vw - } - - .media #vdo p, - .media #vdo h4 { - display: none - } - - .media #vdo video { - position: absolute; - top: 50%; - left: 50%; - min-width: 100%; - min-height: 100%; - width: auto; - height: auto; - transform: translate(-50%, -50%); - z-index: -101; - opacity: 0.1 - } - - .media #vdo:hover video { - opacity: 1 - } - - .media #vdo:hover { - margin: 0; - transform: rotate(0); - width: 40vw - } - - .media #vdo h3 { - transform: rotate(5deg) translateX(-2vw) translateY(-2rem) - } - - .media #vdo:hover h3 { - transform: rotate(0) translateX(0) translateY(-5rem); - color: var(--vdo-blue70); - font-size: 18vw - } - - .media #vdo:hover h3 a { - display: block; - height: 100%; - width: 100% - } - - .libre { - right: 0; - top: 50%; - margin-top: calc(-19rem); - height: 44rem; - width: 42vw; - transform: translateY(-4vh) - } - - .libre>section h3 { - color: var(--cyber-grape); - font-size: 4em; - margin: 0; - padding: 0 - } - - .libre>section p { - color: var(--black70); - font-family: var(--font-text); - font-size: 2em; - margin: 0 - } - - .libre #participation { - transform: rotate(-4deg) translateY(6vh) - } - - .libre #engagement { - transform: translate(0.5vw, 14vh) - } - - .libre #cooperation { - transform: rotate(2deg) translate(0rem, 19.5vh) - } -} - - - -.sinewave.w0 { - fill: var(--sinewave-w0) -} - -.sinewave.w1 { - fill: var(--sinewave-w1) -} - -.sinewave.w2 { - fill: var(--sinewave-w2) -} - -.sinewave.w3 { - fill: var(--sinewave-w3) -} + overflow: hidden; + width: 10rem; + height: 100%; } + body > aside nav ul li a { + color: black; + text-decoration: none; + display: block; + height: 100%; + width: 100%; + z-index: 404; } + body > aside nav ul li a:link, body > aside nav ul li a:visited { + color: inherit; } + body > aside nav ul li a:hover { + font-size: 200%; + color: inherit; + z-index: 404; } + body > aside nav ul li span { + display: none; + z-index: 400; + position: relative; + font-size: 1.25rem; + line-height: 1.6rem; + text-align: center; + margin: -3rem -2rem 0 -1rem; } + body > aside nav ul li:first-child { + background: rgba(191, 138, 112, 0.7); } + body > aside nav ul li:nth-child(2) { + background: rgba(166, 191, 112, 0.9); } + body > aside nav ul li:last-child { + background: rgba(109, 144, 162, 0.7); } + +body > footer { + position: relative; + left: 0; + right: 0; + max-width: 60rem; + margin: 5rem auto 2rem auto; + font-size: 1.25rem; } + body > footer h4 { + margin: 0; + font-size: 1.6rem; } + body > footer h4 a { + text-decoration: none; } + body > footer:hover > p > span:first-child { + display: inline-block; + color: transparent; + line-height: 0; } + body > footer:hover > p > span:first-child:before { + content: 'Copyleft'; + display: block; + color: black; + padding-right: 0.4rem; } + body > footer:hover > p > 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: "Cormorant Garamond", serif; + text-variant: italic; + padding: 0 4rem; + text-align: justify; } + article > header p:last-child { + padding-bottom: 2rem; } + +article #intro h2 { + transform: rotate(270deg) translate(13.6rem, -34rem); } + +article section:after { + display: table; + content: ""; + clear: both; + margin-bottom: 2rem; } + +article aside ul { + display: table; + position: relative; + list-style: none; + margin: 0 -8rem 1rem -8rem; + width: calc(100% + 16rem); } + article aside ul li { + display: table-cell; + text-align: center; } + article aside ul img { + display: block; + width: 16rem; + background-color: black; + margin: 1rem auto; } + +article .outro p { + font-size: 2rem; + text-align: justify; } + +article .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; } + article .intro p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + article .intro:hover { + max-height: 100vh; } + article .intro:hover p { + white-space: normal; + overflow: auto; } + +article video, article iframe { + max-width: 100%; } + +article .video { + margin: 0 -6rem 0 -4rem; } + article .video video, article .video iframe { + width: 30rem; + height: 18.875rem; + background: black; + float: left; + margin: 0 2rem 0 -4rem; } + article .video p { + line-height: 1.25; } + article .video:hover video, article .video:hover 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 { - border: 2px solid var(--bg-color); - border-radius: 1rem; - padding: 0 0.5rem; - background: inherit; + background-color: rgba(240, 240, 242, 0.3); } + +body.gfx #krto img { + float: left; + padding-right: 2rem; + margin-left: -6rem; } + +body.gfx #cw { + position: relative; + z-index: 0; } + body.gfx #cw a { + z-index: 200; } + body.gfx #cw #gfx { position: absolute; - top: 4px; - right: 4px -} + z-index: -1; + opacity: 1; + margin: 0 auto; + width: 72rem; + height: 22.5rem; + margin-left: -6rem; + animation: fade-in 1s linear; } + body.gfx #cw #gfx svg { + position: relative; + width: 100%; + height: 100%; } + body.gfx #cw:hover #gfx { + opacity: 0.2; + animation: fade-out 1s linear; } + +body.gfx .sinewave.w0 { + fill: rgba(240, 40, 142, 0.5); } + +body.gfx .sinewave.w1 { + fill: rgba(140, 140, 42, 0.5); } + +body.gfx .sinewave.w2 { + fill: rgba(240, 142, 1, 0.5); } + +body.gfx .sinewave.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; } } + +body.vda > main > article { + /* background: $bg-vda-on; */ } + +body.vda > aside:hover, body.vda > aside:focus { + background-color: #6d90a2; } + body.vda > aside:hover nav ul li:last-child, body.vda > aside:focus nav ul li:last-child { + background: #6d90a2; } + +body.vda #HeLa p > span { + display: block; + background-color: teal; + color: white; + font-weight: bold; + margin-top: 2rem; + padding: 1rem; + border-top-left-radius: 2rem; } + +body.vda #HeLa button { + border: 1rem solid #ff667f; + height: auto; + background-color: teal; + color: white; + width: 100%; + border-radius: 0; + border-bottom-right-radius: 3rem; + font-size: larger; } + body.vda #HeLa button:hover, body.vda #HeLa button:focus { + border-color: teal; + background-color: #ff667f; } + +/** + * Languages + **/ +html[lang='en'] :lang(fr) { + display: none; } + +html[lang='fr'] :lang(en) { + display: none; } + +:lang(en) { + quotes: '\201C' '\201D' '\2018' '\2019'; } + +:lang(fr) { + quotes: '« ' ' »'; } + +/** + * Defaults + **/ +body { + font-family: Abel, "Open Sans", sans-serif; + font-size: 1em; + /* No rem here, bug workaround */ + background: #f0f0f2; + color: #141414; } + body.ps { + background: rgba(173, 151, 56, 0.68); + color: #f3f0e4; } + body > header :link, body > header :visited, body > footer :link, body > footer :visited { + color: #dcc985; + text-decoration: none; } + body :visited { + text-decoration: underline; } + +img { + max-width: 100%; } diff --git a/assets/css/txt.css b/assets/css/txt.css index c7bb36c..6f212c0 100644 --- a/assets/css/txt.css +++ b/assets/css/txt.css @@ -1,3 +1,1206 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width: 400px){.container{width:85%;padding:0}}@media (min-width: 550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74.0%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78.0%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:'Open Sans', open-sans, Lato, 'Fira Sans', Helvetica, Arial, sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width: 550px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;height:3.8rem;padding:0 2rem;color:#555;text-align:center;font-size:1.1rem;font-weight:600;line-height:3.8rem;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:0.4rem;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type="checkbox"],input[type="radio"]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:normal}ul{list-style:circle outside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ul ul,ul ol,ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:0.25rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}button,.button{margin-bottom:1rem}input,textarea,select,fieldset{margin-bottom:1.5rem}pre,blockquote,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}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}a:link{color:#177b5d}a:hover{color:#000;text-decoration:underline}a:active{color:#fff}a:visited{color:rgba(23,123,93,0.8)}span.ps{background:url(../img/logo-ps.svg) top left/5rem no-repeat;opacity:0.75;color:transparent;padding:0.25rem 1.25rem}h1,h2,h3,h4,h5,h6{font-family:"Cormorant Garamond",serif;font-weight:600}h1 a,h1 a:hover,h1 a:focus,h2 a,h2 a:hover,h2 a:focus,h3 a,h3 a:hover,h3 a:focus,h4 a,h4 a:hover,h4 a:focus,h5 a,h5 a:hover,h5 a:focus,h6 a,h6 a:hover,h6 a:focus{text-decoration:none;color:inherit}body{font-family:Abel,"Open Sans",sans-serif;font-size:1em;background-color:#f0f0f2;color:#000}body>header{position:fixed;z-index:999;top:0;left:0;right:0;background:#7c7692;padding:0 2rem;color:#f0f0f2}body>header h1{margin:0 auto}body>header h1:before{background:url(../assets/img/logo-ps.svg) center left/5rem no-repeat;display:block;width:5rem;height:5rem}body>header h2{font-weight:100;margin-top:-2.6rem;font-size:3.7rem;transform:rotate(180deg)}body>header p{font-family:"Cormorant Garamond",serif;font-size:2rem;font-style:italic;margin:-3.8rem 0 0 0;padding:0 0 0.4rem 0.3rem}body>header p span{color:black}body>main{position:relative;top:0rem;left:0;right:0;margin:0 auto;max-width:96rem;font-size:1.6rem}body>main>article{background-color:#f0f0f2;margin:0 auto;max-width:60rem;min-height:calc(100vh - 24rem);padding:12rem 9rem}body.gfx{background-color:#cda896}body.gfx>aside:hover,body.gfx>aside:focus{background-color:#cda896}body.gfx>aside:hover nav ul li:first-child,body.gfx>aside:focus nav ul li:first-child{background:#cda896}body.txt{background-color:#bbcd96}body.txt>aside:hover,body.txt>aside:focus{background-color:#bbcd96}body.txt>aside:hover nav ul li:nth-child(2),body.txt>aside:focus nav ul li:nth-child(2){background:#bbcd96}body.vdo{background-color:#6d90a2}body.vdo>aside:hover,body.vdo>aside:focus{background-color:#6d90a2}body.vdo>aside:hover nav ul li:last-child,body.vdo>aside:focus nav ul li:last-child{background:#6d90a2}body>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}body>aside:hover,body>aside:focus{left:0;background:#f0f0f2 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}body>aside:hover nav,body>aside:focus nav{display:block;background:#f0f0f2 url(../img/aside-on.png) center left no-repeat;height:100%}body>aside:hover nav h3 a:link,body>aside:hover nav h3 a:hover,body>aside:hover nav h3 a:active,body>aside:hover nav h3 a:visited,body>aside:focus nav h3 a:link,body>aside:focus nav h3 a:hover,body>aside:focus nav h3 a:active,body>aside:focus nav h3 a:visited{color:transparent}body>aside:hover ul li:hover a:hover,body>aside:focus ul li:hover a:hover{text-decoration:none}body>aside:hover ul li:hover span,body>aside:focus ul li:hover span{display:block}body>aside:hover ul li:hover:first-child,body>aside:focus ul li:hover:first-child{transform:scale(1.4) rotate(4deg) translateX(-0.75vw)}body>aside:hover ul li:hover:first-child a,body>aside:focus ul li:hover:first-child a{transform:rotate(-4deg)}body>aside:hover ul li:hover:nth-child(2),body>aside:focus ul li:hover:nth-child(2){transform:scale(1.4) rotate(-6deg) translateX(-0.5vw)}body>aside:hover ul li:hover:nth-child(2) a,body>aside:focus ul li:hover:nth-child(2) a{transform:rotate(6deg)}body>aside:hover ul li:hover:last-child,body>aside:focus ul li:hover:last-child{transform:scale(1.4) rotate(5deg) translateX(-0.5vw)}body>aside:hover ul li:hover:last-child a,body>aside:focus ul li:hover:last-child a{transform:rotate(-5deg)}body>aside nav{position:relative;margin-left:3rem;display:none;line-height:30rem}body>aside nav 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}body>aside nav h3 a{display:block;height:100%;width:100%;line-height:30rem;color:transparent}body>aside nav h3 a:hover{color:transparent}body>aside nav ul{list-style:none;display:inline-block;height:100%}body>aside nav ul li{display:block;padding:0 2rem;font-size:3rem;float:left;padding-left:1rem;z-index:400;overflow:hidden;width:10rem;height:100%}body>aside nav ul li a{color:black;text-decoration:none;display:block;height:100%;width:100%;z-index:404}body>aside nav ul li a:link,body>aside nav ul li a:visited{color:inherit}body>aside nav ul li a:hover{font-size:200%;color:inherit;z-index:404}body>aside nav ul li span{display:none;z-index:400;position:relative;font-size:1.25rem;line-height:1.6rem;text-align:center;margin:-3rem -2rem 0 -1rem}body>aside nav ul li:first-child{background:rgba(191,138,112,0.7)}body>aside nav ul li:nth-child(2){background:rgba(166,191,112,0.9)}body>aside nav ul li:last-child{background:rgba(109,144,162,0.7)}body>footer{position:relative;left:0;right:0;max-width:60rem;margin:5rem auto 2rem auto;font-size:1.25rem}body>footer h4{margin:0;font-size:1.6rem}body>footer h4 a{text-decoration:none}body>footer:hover>p>span:first-child{display:inline-block;color:transparent;line-height:0}body>footer:hover>p>span:first-child:before{content:'Copyleft';display:block;color:black;padding-right:0.4rem}body>footer:hover>p>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:"Cormorant Garamond",serif;text-variant:italic;padding:0 4rem;text-align:justify}article>header p:last-child{padding-bottom:2rem}article #intro h2{transform:rotate(270deg) translate(13.6rem, -34rem)}article section:after{display:table;content:"";clear:both;margin-bottom:2rem}article aside ul{display:table;position:relative;list-style:none;margin:0 -8rem 1rem -8rem;width:calc(100% + 16rem)}article aside ul li{display:table-cell;text-align:center}article aside ul img{display:block;width:16rem;background-color:black;margin:1rem auto}article .outro p{font-size:2rem;text-align:justify}article .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}article .intro p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}article .intro:hover{max-height:100vh}article .intro:hover p{white-space:normal;overflow:auto}article video,article iframe{max-width:100%}article .video{margin:0 -6rem 0 -4rem}article .video video,article .video iframe{width:30rem;height:18.875rem;background:black;float:left;margin:0 2rem 0 -4rem}article .video p{line-height:1.25}article .video:hover video,article .video:hover 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}body.gfx #cw{position:relative;z-index:0}body.gfx #cw a{z-index:200}body.gfx #cw #gfx{position:absolute;z-index:-1;opacity:1;margin:0 auto;width:72rem;height:22.5rem;margin-left:-6rem;animation:fade-in 1s linear}body.gfx #cw #gfx svg{position:relative;width:100%;height:100%}body.gfx #cw:hover #gfx{opacity:0.2;animation:fade-out 1s linear}body.gfx .sinewave.w0{fill:rgba(240,40,142,0.5)}body.gfx .sinewave.w1{fill:rgba(140,140,42,0.5)}body.gfx .sinewave.w2{fill:rgba(240,142,1,0.5)}body.gfx .sinewave.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}} +@charset "UTF-8"; +/** + * SCSS Variables + **/ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } -/*# sourceMappingURL=txt.css.map */ \ No newline at end of file +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +/* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +* +* Adapted for Devuan.org by hellekin, 2016 +*/ +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } + +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } } + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 4%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + .one.column, + .one.columns { + width: 4.66666666667%; } + .two.columns { + width: 13.3333333333%; } + .three.columns { + width: 22%; } + .four.columns { + width: 30.6666666667%; } + .five.columns { + width: 39.3333333333%; } + .six.columns { + width: 48%; } + .seven.columns { + width: 56.6666666667%; } + .eight.columns { + width: 65.3333333333%; } + .nine.columns { + width: 74.0%; } + .ten.columns { + width: 82.6666666667%; } + .eleven.columns { + width: 91.3333333333%; } + .twelve.columns { + width: 100%; + margin-left: 0; } + .one-third.column { + width: 30.6666666667%; } + .two-thirds.column { + width: 65.3333333333%; } + .one-half.column { + width: 48%; } + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { + margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { + margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { + margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { + margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { + margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { + margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { + margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { + margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { + margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { + margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { + margin-left: 95.3333333333%; } + .offset-by-one-third.column, + .offset-by-one-third.columns { + margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; } + .offset-by-one-half.column, + .offset-by-one-half.columns { + margin-left: 52%; } } + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } + +body { + font-size: 1.5em; + /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: 'Open Sans', open-sans, Lato, 'Fira Sans', Helvetica, Arial, sans-serif; + color: #222; } + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } + +h1 { + font-size: 4.0rem; + line-height: 1.2; + letter-spacing: -.1rem; } + +h2 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; } + +h3 { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; } + +h4 { + font-size: 2.4rem; + line-height: 1.35; + letter-spacing: -.08rem; } + +h5 { + font-size: 1.8rem; + line-height: 1.5; + letter-spacing: -.05rem; } + +h6 { + font-size: 1.5rem; + line-height: 1.6; + letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { + font-size: 5.0rem; } + h2 { + font-size: 4.2rem; } + h3 { + font-size: 3.6rem; } + h4 { + font-size: 3.0rem; } + h5 { + font-size: 2.4rem; } + h6 { + font-size: 1.5rem; } } + +p { + margin-top: 0; } + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } + +a:hover { + color: #0FA0CE; } + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 3.8rem; + padding: 0 2rem; + color: #555; + text-align: center; + font-size: 1.1rem; + font-weight: 600; + line-height: 3.8rem; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 0.4rem; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } + +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } + +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } + +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } + +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } + +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } + +fieldset { + padding: 0; + border-width: 0; } + +input[type="checkbox"], +input[type="radio"] { + display: inline; } + +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle outside; } + +ol { + list-style: decimal inside; } + +ol, ul { + padding-left: 0; + margin-top: 0; } + +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } + +li { + margin-bottom: 0.25rem; } + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } + +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } + +th:first-child, +td:first-child { + padding-left: 0; } + +th:last-child, +td:last-child { + padding-right: 0; } + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } + +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } + +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } + +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } + +.u-pull-right { + float: right; } + +.u-pull-left { + float: left; } + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ +/* Larger than mobile */ +/* Larger than phablet (also point when grid becomes active) */ +/* Larger than tablet */ +/* Larger than desktop */ +/* Larger than Desktop HD */ +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; } + a:link { + color: #177b5d; } + a:hover { + color: black; + text-decoration: underline; } + a:active { + color: white; } + a:visited { + color: rgba(23, 123, 93, 0.8); } + +span.ps { + background: url(../img/logo-ps.svg) top left/5rem no-repeat; + opacity: 0.75; + color: transparent; + padding: 0.25rem 1.25rem; } + +h1, h2, h3, h4, h5, h6 { + font-family: "Cormorant Garamond", serif; + font-weight: 600; } + h1 a, h1 a:hover, h1 a:focus, h2 a, h2 a:hover, h2 a:focus, h3 a, h3 a:hover, h3 a:focus, h4 a, h4 a:hover, h4 a:focus, h5 a, h5 a:hover, h5 a:focus, h6 a, h6 a:hover, h6 a:focus { + text-decoration: none; + color: inherit; } + +body { + font-family: Abel, "Open Sans", sans-serif; + font-size: 1em; + /* No rem here, bug workaround */ + background-color: #f0f0f2; + color: black; } + +body > header { + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + background: #7c7692; + padding: 0 2rem; + color: #f0f0f2; } + body > header h1 { + margin: 0 auto; } + body > header h1:before { + background: url(../assets/img/logo-ps.svg) center left/5rem no-repeat; + display: block; + width: 5rem; + height: 5rem; } + body > header h2 { + font-weight: 100; + margin-top: -2.6rem; + font-size: 3.7rem; + transform: rotate(180deg); } + body > header p { + font-family: "Cormorant Garamond", serif; + font-size: 2rem; + font-style: italic; + margin: -3.8rem 0 0 0; + padding: 0 0 0.4rem 0.3rem; } + body > header p span { + color: black; } + +body > main { + position: relative; + top: 0rem; + left: 0; + right: 0; + margin: 0 auto; + max-width: 96rem; + font-size: 1.6rem; } + body > main > article { + background-color: #f0f0f2; + margin: 0 auto; + max-width: 60rem; + min-height: calc(100vh - 24rem); + padding: 12rem 9rem; } + +body.gfx { + background-color: #cda896; } + body.gfx > aside:hover, body.gfx > aside:focus { + background-color: #cda896; } + body.gfx > aside:hover nav ul li:first-child, body.gfx > aside:focus nav ul li:first-child { + background: #cda896; } + +body.txt { + background-color: #bbcd96; } + body.txt > aside:hover, body.txt > aside:focus { + background-color: #bbcd96; } + body.txt > aside:hover nav ul li:nth-child(2), body.txt > aside:focus nav ul li:nth-child(2) { + background: #bbcd96; } + +body.vda { + background-color: #6d90a2; } + body.vda > aside:hover, body.vda > aside:focus { + background-color: #6d90a2; } + body.vda > aside:hover nav ul li:last-child, body.vda > aside:focus nav ul li:last-child { + background: #6d90a2; } + +body > 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; } + body > aside:hover, body > aside:focus { + left: 0; + background: #f0f0f2 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; } + body > aside:hover nav, body > aside:focus nav { + display: block; + background: #f0f0f2 url(../img/aside-on.png) center left no-repeat; + height: 100%; } + body > aside:hover nav h3 a:link, body > aside:hover nav h3 a:hover, body > aside:hover nav h3 a:active, body > aside:hover nav h3 a:visited, body > aside:focus nav h3 a:link, body > aside:focus nav h3 a:hover, body > aside:focus nav h3 a:active, body > aside:focus nav h3 a:visited { + color: transparent; } + body > aside:hover ul li:hover a:hover, body > aside:focus ul li:hover a:hover { + text-decoration: none; } + body > aside:hover ul li:hover span, body > aside:focus ul li:hover span { + display: block; } + body > aside:hover ul li:hover:first-child, body > aside:focus ul li:hover:first-child { + transform: scale(1.4) rotate(4deg) translateX(-0.75vw); } + body > aside:hover ul li:hover:first-child a, body > aside:focus ul li:hover:first-child a { + transform: rotate(-4deg); } + body > aside:hover ul li:hover:nth-child(2), body > aside:focus ul li:hover:nth-child(2) { + transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); } + body > aside:hover ul li:hover:nth-child(2) a, body > aside:focus ul li:hover:nth-child(2) a { + transform: rotate(6deg); } + body > aside:hover ul li:hover:last-child, body > aside:focus ul li:hover:last-child { + transform: scale(1.4) rotate(5deg) translateX(-0.5vw); } + body > aside:hover ul li:hover:last-child a, body > aside:focus ul li:hover:last-child a { + transform: rotate(-5deg); } + body > aside nav { + position: relative; + margin-left: 3rem; + display: none; + line-height: 30rem; } + body > aside nav 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; } + body > aside nav h3 a { + display: block; + height: 100%; + width: 100%; + line-height: 30rem; + color: transparent; } + body > aside nav h3 a:hover { + color: transparent; } + body > aside nav ul { + list-style: none; + display: inline-block; + height: 100%; } + body > aside nav ul li { + display: block; + padding: 0 2rem; + font-size: 3rem; + float: left; + padding-left: 1rem; + z-index: 400; + overflow: hidden; + width: 10rem; + height: 100%; } + body > aside nav ul li a { + color: black; + text-decoration: none; + display: block; + height: 100%; + width: 100%; + z-index: 404; } + body > aside nav ul li a:link, body > aside nav ul li a:visited { + color: inherit; } + body > aside nav ul li a:hover { + font-size: 200%; + color: inherit; + z-index: 404; } + body > aside nav ul li span { + display: none; + z-index: 400; + position: relative; + font-size: 1.25rem; + line-height: 1.6rem; + text-align: center; + margin: -3rem -2rem 0 -1rem; } + body > aside nav ul li:first-child { + background: rgba(191, 138, 112, 0.7); } + body > aside nav ul li:nth-child(2) { + background: rgba(166, 191, 112, 0.9); } + body > aside nav ul li:last-child { + background: rgba(109, 144, 162, 0.7); } + +body > footer { + position: relative; + left: 0; + right: 0; + max-width: 60rem; + margin: 5rem auto 2rem auto; + font-size: 1.25rem; } + body > footer h4 { + margin: 0; + font-size: 1.6rem; } + body > footer h4 a { + text-decoration: none; } + body > footer:hover > p > span:first-child { + display: inline-block; + color: transparent; + line-height: 0; } + body > footer:hover > p > span:first-child:before { + content: 'Copyleft'; + display: block; + color: black; + padding-right: 0.4rem; } + body > footer:hover > p > 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: "Cormorant Garamond", serif; + text-variant: italic; + padding: 0 4rem; + text-align: justify; } + article > header p:last-child { + padding-bottom: 2rem; } + +article #intro h2 { + transform: rotate(270deg) translate(13.6rem, -34rem); } + +article section:after { + display: table; + content: ""; + clear: both; + margin-bottom: 2rem; } + +article aside ul { + display: table; + position: relative; + list-style: none; + margin: 0 -8rem 1rem -8rem; + width: calc(100% + 16rem); } + article aside ul li { + display: table-cell; + text-align: center; } + article aside ul img { + display: block; + width: 16rem; + background-color: black; + margin: 1rem auto; } + +article .outro p { + font-size: 2rem; + text-align: justify; } + +article .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; } + article .intro p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + article .intro:hover { + max-height: 100vh; } + article .intro:hover p { + white-space: normal; + overflow: auto; } + +article video, article iframe { + max-width: 100%; } + +article .video { + margin: 0 -6rem 0 -4rem; } + article .video video, article .video iframe { + width: 30rem; + height: 18.875rem; + background: black; + float: left; + margin: 0 2rem 0 -4rem; } + article .video p { + line-height: 1.25; } + article .video:hover video, article .video:hover 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; } + +body.gfx #cw { + position: relative; + z-index: 0; } + body.gfx #cw a { + z-index: 200; } + body.gfx #cw #gfx { + position: absolute; + z-index: -1; + opacity: 1; + margin: 0 auto; + width: 72rem; + height: 22.5rem; + margin-left: -6rem; + animation: fade-in 1s linear; } + body.gfx #cw #gfx svg { + position: relative; + width: 100%; + height: 100%; } + body.gfx #cw:hover #gfx { + opacity: 0.2; + animation: fade-out 1s linear; } + +body.gfx .sinewave.w0 { + fill: rgba(240, 40, 142, 0.5); } + +body.gfx .sinewave.w1 { + fill: rgba(140, 140, 42, 0.5); } + +body.gfx .sinewave.w2 { + fill: rgba(240, 142, 1, 0.5); } + +body.gfx .sinewave.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; } } diff --git a/assets/img/bg-vda.png b/assets/img/bg-vda.png new file mode 100644 index 0000000..996e36b Binary files /dev/null and b/assets/img/bg-vda.png differ diff --git a/assets/img/hela-cell-division.webm b/assets/img/hela-cell-division.webm new file mode 100644 index 0000000..dc9b7af Binary files /dev/null and b/assets/img/hela-cell-division.webm differ diff --git a/assets/img/hela-cells.jpg b/assets/img/hela-cells.jpg new file mode 100644 index 0000000..88b0ea9 Binary files /dev/null and b/assets/img/hela-cells.jpg differ diff --git a/assets/img/hela-goal.png b/assets/img/hela-goal.png new file mode 100644 index 0000000..6567441 Binary files /dev/null and b/assets/img/hela-goal.png differ diff --git a/assets/scss/_aside.scss b/assets/scss/_aside.scss index 6afe3b6..1cafa25 100644 --- a/assets/scss/_aside.scss +++ b/assets/scss/_aside.scss @@ -124,7 +124,7 @@ body > aside { } &:last-child { - background: $bg-vdo; + background: $bg-vda; } */ } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index e09fcf9..1f99762 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -22,8 +22,8 @@ $fg-ps: rgba(243, 240, 228, 1); $bg-gfx-ps-on: rgba(191, 138, 112, 0.9); $bg-txt-ps-on: rgba(166, 191, 112, 0.9); -$bg-vdo-ps-off: rgba(112, 166, 191, 0.5); -$bg-vdo-ps-on: rgba(112, 166, 191, 0.9); +$bg-vda-ps-off: rgba(112, 166, 191, 0.5); +$bg-vda-ps-on: rgba(112, 166, 191, 0.9); // On other pages: $bg-main: $fg-header; @@ -33,6 +33,6 @@ $bg-gfx-off: rgba(191, 138, 112, 0.7); $bg-gfx-on: rgba(205, 168, 150, 1); $bg-txt-off: rgba(166, 191, 112, 0.7); $bg-txt-on: rgba(187, 205, 150, 1); -$bg-vdo-off: rgba(109, 144, 162, 0.7); -$bg-vdo-on: rgba(109, 144, 162, 1); +$bg-vda-off: rgba(109, 144, 162, 0.7); +$bg-vda-on: rgba(109, 144, 162, 1); diff --git a/assets/scss/_vda.scss b/assets/scss/_vda.scss new file mode 100644 index 0000000..5caa950 --- /dev/null +++ b/assets/scss/_vda.scss @@ -0,0 +1,38 @@ +body.vda { + > main > article { +/* background: $bg-vda-on; */ + } + > aside { + &:hover, &:focus { + background-color: $bg-vda-on; + nav ul li:last-child { + background: $bg-vda-on; + } + } + } + #HeLa { + p > span { + display: block; + background-color: teal; + color: white; + font-weight: bold; + margin-top: 2rem; + padding: 1rem; + border-top-left-radius: 2rem; + } + button { + border: 1rem solid #ff667f; + height: auto; + background-color: teal; + color: white; + width: 100%; + border-radius: 0; + border-bottom-right-radius: 3rem; + font-size: larger; + &:hover, &:focus { + border-color: teal; + background-color: #ff667f; + } + } + } +} diff --git a/assets/scss/_vdo.scss b/assets/scss/_vdo.scss deleted file mode 100644 index 3578b93..0000000 --- a/assets/scss/_vdo.scss +++ /dev/null @@ -1,13 +0,0 @@ -body.vdo { - > main > article { - background: $bg-vdo-on; - } - > aside { - &:hover, &:focus { - background-color: $bg-vdo-on; - nav ul li:last-child { - background: $bg-vdo-on; - } - } - } -} diff --git a/assets/scss/home.scss b/assets/scss/home.scss index 72ec9a9..eec293b 100644 --- a/assets/scss/home.scss +++ b/assets/scss/home.scss @@ -502,7 +502,7 @@ body > footer { padding: 1rem 2rem; } - .media #vdo { + .media #vda { left: 0; background: rgba(112, 166, 191, 0.5); transform: rotate(-5deg); @@ -513,7 +513,7 @@ body > footer { display: none; } } - .media #vdo video { + .media #vda video { position: absolute; top: 50%; left: 50%; @@ -525,19 +525,19 @@ body > footer { z-index: -101; opacity: 0.1; } - .media #vdo:hover video { + .media #vda:hover video { opacity: 1; } - .media #vdo:hover { + .media #vda:hover { background: rgba(112, 166, 191, 0.9); margin: 0; transform: rotate(0); width: 40vw; } - .media #vdo h3 { + .media #vda h3 { transform: rotate(5deg) translateX(-2vw); } - .media #vdo:hover h3 { + .media #vda:hover h3 { transform: rotate(0) translateX(0) translateY(-5rem); color: rgba(109, 144, 162, 0.7); font-size: 18vw; diff --git a/assets/scss/mobile.scss b/assets/scss/mobile.scss index e568feb..38d3605 100644 --- a/assets/scss/mobile.scss +++ b/assets/scss/mobile.scss @@ -101,8 +101,8 @@ body { #txt, #txt h3 { background-color: $bg-txt-off; } -#vdo, #vdo h3 { - background-color: $bg-vdo-off; +#vda, #vda h3 { + background-color: $bg-vda-off; } .fixed.libre { @@ -176,7 +176,7 @@ body { &#txt h3 { right: 18vw; } - &#vdo h3 { + &#vda h3 { right: 2vw; } diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss index 8828c85..4dcda84 100644 --- a/assets/scss/screen.scss +++ b/assets/scss/screen.scss @@ -16,7 +16,7 @@ **/ @import 'gfx'; @import 'txt'; -@import 'vdo'; +@import 'vda'; /** * Languages @@ -62,3 +62,7 @@ body { text-decoration: underline; } } + +img { + max-width: 100%; +} diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss index 1ab8727..3a7d70b 100644 --- a/assets/scss/txt.scss +++ b/assets/scss/txt.scss @@ -7,8 +7,8 @@ $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); +$bg-vda: rgba(109, 144, 162, 0.7); +$bg-vda-on: rgba(109, 144, 162, 1); $a-link: rgba(23, 123, 93, 1); $a-hover: black; @@ -168,13 +168,13 @@ body { } } - &.vdo { - background-color: $bg-vdo-on; + &.vda { + background-color: $bg-vda-on; > aside { &:hover, &:focus { - background-color: $bg-vdo-on; + background-color: $bg-vda-on; nav ul li:last-child { - background: $bg-vdo-on; + background: $bg-vda-on; } } } @@ -319,7 +319,7 @@ body { } &:last-child { - background: $bg-vdo; + background: $bg-vda; } } } diff --git a/ps/vda/index.html b/ps/vda/index.html new file mode 100644 index 0000000..26ad259 --- /dev/null +++ b/ps/vda/index.html @@ -0,0 +1,188 @@ + + + + + + Petites Singularités — Jeu Vide-A + + + + + + + + + + + + + + +
+

petites singularités

+

Jeu Vide-A

+

Principes féministes collaboratifs pour des Jeux Vide-A

+
+
+

petites singularités

+

Vide-A game

+

Collaborative feminist principles for Vide-A game

+
+
+
+
+

Jeu Vide-A est un travail collectif qui se déroule depuis 2016 questionnant la monochromie et la répétition des modèles d'interaction dans les jeux vidéo d'un point de vue féministe. Nous nous associons autour de 2 axes, tout d'abord, une réflexion sur les langages des jeux vidéo contemporains proposant des transfomation précises répondant aux étudesmettant en exergue les modèles existants comme celles menées par Anita Sarkeesian sur son canal feminist frequency et intégrant des apports issus de modèles de participation développés dans les espaces féministe; ensuite, l'organisation d'ateliers et de groupes d'apprentissage de la programmation de jeux vidéo par le logiciel libre Godot Engine. Le choix de l'usage du logiciel et de licences libres répond à notre souhait de construire ensemble un autre espace des possibles pour le jeu vide-a.

+

Jeu Videa était précédé d'un travail féministe sur la quantification personnelle et les données *W ~ +

+ +

Vide-A game is a collective work that has been going on since 2016 questioning the monochromaticity and repetition of + interaction models in video games, from a feminist perspective. We unite around 2 axes, firstly a reflection on contemporary video + game languages proposing specific transformations responding to issues raised in studies of existing models such as those conducted + by Anita Sarkeesian in hewr channel feministfrequency and engaging participation models developed in feminist spaces; secondly the + organization of workshops and groups learning to program video games through the free software Godot Engine. The choice to use free + software and licenses coresponds to our desire to build together another space of possibilities for Vide-A Game +

Jeu Videa was precedded by a feministproposition about self quantification personnelle and data recollection + *W ~ +

+
+ +
+

Principes du Jeu Vide-A

+

Au cours des années nous avons mis en forme collectivement des principes simples que nous souhatons appliquer à la logique des Jeux Vide-A, comme par exemple: +

    +
  • Favoriser la collaboration plutôt que l'attaque.
    • +
  • Proposer des objectifs qui valorisent le soin de soi et des autres.
    • +
  • Penser un modèle de jeu qui ne soit pas basé sur l'identité.
    • +
  • Offrir des perspectives plurielles en permettant de jouer plusieurs personnages.
    • +
  • Offrir une perspective intersectionelle visible dans le choix des personnages de leur capacité et du sujet abordé.
    • +
  • Permettre une relation intime avec environement qui est mobile et transformable tout comme la personnage.
    • +
+

+

Ces perspectives sont discutées sur le forum des petites singularités qui comporte un sujet de conversation associé auquel nous vous invitons à contribuer. Par ailleurs nous organisons régulièrement des ateliers contributifs et de partage de connaissance, les ateliers sont l'endroit où nous souhaitons pratiquer le transfert de connaissance. Date du prochain atelier. Vous pouvez nous contacter sur le forum. +

+
+
+

Vide-A game principles

+

+Over the years we have worked collectively to further principles that we consider pertinent for a feminist video game, such as: +

    +
  • Collaboration rather then attack
    • +
  • Goals that favor self and collective care
    • +
  • Game models not based on identity focus playing
    • +
  • Plural perspectives matyerialed by multiple character playing
    • +
  • Intersectional perspective visible thanks to the choice of characters and topic approached
    • +
  • Allowing the formation of an intimate relation to environement that is as mobile as the character
    • +

+

+Most perspectives are discussed on petites singularités forum:associated, conversation topic We also organise different collaborative and knowledge sharing workshops. Those are the moment +when we wish to practice knowledge transfert Please find here +announces for next workshop Otherwise for feedback or any proposition for workshop organisation Please contact us via the forum. +

+
+ +
+

HeLa

+

hela est la première production issue du travail collectif mené lors des atelier jeu videa. HeLa applique + les principes féministes du groupe de jeu Vide-A. + Le jeu conte l'histoire d'Henrietta Lacks dont les cellules cancéreuses ont éées prélevées à son insue dans les années 50 + et ont servi à la recherche dans le monde entier échangées et monayées par les laboratoires universitaires et privés alors + que sa contribution n'a jamais été reconnue. L'histoire se déroule sur l'astéroïde qui porte son nom et est rendue vivante + par la quantité massive de cellules qu'elle a contribué à la recherche. hela est dévelopé principalement par + Amélie Dumont et + natacha + + + Le jeu est en cours de développement et n'est pas optimisé : en cliquant le bouton ci-dessous vous vous apprêtez à télécharger plus de 300 Mo de données. + + +

+ +

hela is the first production from the collective work in jeu videa. HeLa applying the feminist principles we have developed: + developed in the Vide-A game group. HeLa tells the story of Henrietta Lacks whose cancer cells served research in the whole world, while her contribution was never recognized. The game story takes place on the actual asteroid that bears her name and is brought alive by the massive amount of cells she contributed to research. + + + The game is under development and is not optimised: by clicking the button below you are about to download over 300MB of data. + + +

+ +

Code source

+

Projet en cours, hela inspiré de la vie d'Henrietta Lacks et développé avec Godot Engine sous license Art Libre : le Code Source est disponible. +

+

+

Current project in progress, hela inspired from the life of Henrietta Lacks and developed with Godot Engine, released under Free Art License: Source code is available- +

+ +

+ Captures d'écran du jeu + Game Screenshots +

+
+ + Click here to play +
HeLa read
+
HeLa info
+
+ +
+ + HeLa Game screenshot with goal infos +
HeLa but du jeu
+
HeLa goal
+
+ +
+ + HeLa Game screenshot with cell environment +
HeLa environnement de cellules
+
HeLa cell environment
+
+ + + +
+
+
+ + + + + + -- cgit v1.2.3