From 435bc825f01798379e8eb33152ee9592dd54bf94 Mon Sep 17 00:00:00 2001 From: hellekin Date: Thu, 2 Jun 2022 18:07:18 +0200 Subject: Remove unused files and correct existing ones. --- assets/scss/_aside.scss | 221 +++++++++-------- assets/scss/_fonts.scss | 26 +- assets/scss/_footer.scss | 113 +++++---- assets/scss/_gfx.scss | 64 ++++- assets/scss/_header.scss | 234 +++++++++--------- assets/scss/_main.scss | 210 +++++++++------- assets/scss/_txt.scss | 27 ++ assets/scss/_variables.scss | 15 +- assets/scss/_vda.scss | 72 +++--- assets/scss/_vdo.scss | 17 +- assets/scss/screen.scss | 53 +++- assets/scss/txt.scss | 584 -------------------------------------------- 12 files changed, 625 insertions(+), 1011 deletions(-) create mode 100644 assets/scss/_txt.scss delete mode 100644 assets/scss/txt.scss (limited to 'assets/scss') diff --git a/assets/scss/_aside.scss b/assets/scss/_aside.scss index 1cafa25..77ef35f 100644 --- a/assets/scss/_aside.scss +++ b/assets/scss/_aside.scss @@ -9,125 +9,136 @@ body > aside { padding: 1rem; &:hover, &:focus { - left: 0; - background: $bg-main url(../img/aside-on.png) center left no-repeat; - box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); - width: auto; - border-right: 2rem solid black; - padding: 0; + left: 0; + background: $bg-main url(../img/aside-on.png) center left no-repeat; + box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); + width: auto; + border-right: 2rem solid black; + padding: 0; - nav { - display: block; - background: $bg-main url(../img/aside-on.png) center left no-repeat; - height: 100%; - } + nav { + display: block; + background: $bg-main url(../img/aside-on.png) center left no-repeat; + height: 100%; - ul li:hover { - span { - display: block; - } - &:first-child { - transform: scale(1.4) rotate(4deg) translateX(-0.75vw); - a { - transform: rotate(-4deg); - } - } - &:nth-child(2) { - transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); - a { - transform: rotate(6deg); - } - } - &:last-child { - transform: scale(1.4) rotate(5deg) translateX(-0.5vw); - a { - transform: rotate(-5deg); - } - } - } + h3 { + a:link, a:hover, a:active, a:visited { + color: transparent; + } + } + } + + ul li:hover { + a:hover { + text-decoration: none; + } + span { + display: block; + } + &:first-child { + transform: scale(1.4) rotate(4deg) translateX(-0.75vw); + a { + transform: rotate(-4deg); + } + } + &:nth-child(2) { + transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); + a { + transform: rotate(6deg); + } + } + &:last-child { + transform: scale(1.4) rotate(5deg) translateX(-0.5vw); + a { + transform: rotate(-5deg); + } + } + } } nav { - position: relative; - margin-left: 3rem; - display: none; - line-height: 30rem; + position: relative; + margin-left: 3rem; + display: none; + line-height: 30rem; - h3 { - display: inline-block; - background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; - width: 10rem; - height: 100%; - vertical-align: top; - color: transparent; + h3 { + display: inline-block; + background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; + width: 10rem; + height: 100%; + vertical-align: top; + color: transparent; - a { - display: block; - height: 100%; - width: 100%; - line-height: 30rem; - color: transparent; - &:hover { - color: transparent; - } - } - } + a { + display: block; + height: 100%; + width: 100%; + line-height: 30rem; + color: transparent; + &:hover { + color: transparent; + } + } + } - ul { - list-style: none; - display: inline-block; - height: 100%; + ul { + list-style: none; + display: inline-block; + height: 100%; - li { - display: block; - padding: 0 2rem; - font-size: 3rem; - float: left; - padding-left: 1rem; - z-index: 400; - overflow: hidden; - width: 10rem; - height: 100%; + li { + display: block; + padding: 0 2rem; + font-size: 3rem; + float: left; + padding-left: 1rem; + z-index: 400; + overflow: hidden; + width: 10rem; + height: 100%; - a { - color: black; - text-decoration: none; - display: block; - height: 100%; - width: 100%; - z-index: 404; + a { + color: black; + text-decoration: none; + display: block; + height: 100%; + width: 100%; + z-index: 404; - &:hover { - font-size: 200%; - color: inherit; - z-index: 404; - } - } + &:link, &:visited { + color: inherit; + } - span { - display: none; - z-index: 400; - position: relative; - font-size: 1.25rem; - line-height: 1.6rem; - text-align: center; - margin: -3rem -2rem 0 -1rem; - } + &:hover { + font-size: 200%; + color: inherit; + z-index: 404; + } + } -/* - &:first-child { - background: $bg-gfx; - } + span { + display: none; + z-index: 400; + position: relative; + font-size: 1.25rem; + line-height: 1.6rem; + text-align: center; + margin: -3rem -2rem 0 -1rem; + } - &:nth-child(2) { - background: $bg-txt; - } + &:first-child { + background: $bg-gfx; + } - &:last-child { - background: $bg-vda; - } -*/ - } - } + &:nth-child(2) { + background: $bg-txt; + } + + &:last-child { + background: $bg-vda; + } + } + } } } diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index 5996c3f..700ebdb 100644 --- a/assets/scss/_fonts.scss +++ b/assets/scss/_fonts.scss @@ -1,20 +1,20 @@ /* 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; + 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; + 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; } diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index 39d474a..8d944ff 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -3,75 +3,88 @@ body > footer { position: relative; left: 0; right: 0; - font-size: smaller; - margin: 5rem auto 2rem auto; width: 80vw; + max-width: 60rem; + font-size: 1.15rem; + + h4 { + margin: 0; + font-size: 1.6rem; + + a { + text-decoration:none; + } + } a { - white-space: nowrap; + white-space: nowrap; } &:hover > p { - > span:first-child { - display: inline-block; - color: transparent; - line-height: 0; - } - > span:first-child:before { - content: 'Copyleft'; - display: block; - color: black; - padding-right: 0.4rem; - } - > span + span { - display: inline-block; - transform: rotate(180deg); - padding-bottom: -0.07rem; - } + > span:first-child { + display: inline-block; + color: transparent; + line-height: 0; + } + > span:first-child:before { + content: 'Copyleft'; + display: block; + color: black; + padding-right: 0.4rem; + } + > span + span { + display: inline-block; + transform: rotate(180deg); + padding-bottom: -0.07rem; + } + > span:first-child + span { + display: inline-block; + transform: rotate(180deg) translateY(0.1rem); + } } } footer > nav { ul { - display: inline-block; - margin: 0; - padding: 0; - list-style: none; + display: inline-block; + margin: 0; + padding: 0; + list-style: none; } 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; + 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; - a { - position: relative; - display: block; - width: 100%; - height: 100%; - line-height: 3rem; - margin: 0; - padding: 0; - background: rgba(0,0,0,0.25); - border-top-right-radius: 0.5rem; - } + a { + position: relative; + display: block; + width: 100%; + height: 100%; + line-height: 3rem; + margin: 0; + padding: 0; + background: rgba(0,0,0,0.25); + border-top-right-radius: 0.5rem; + } - &:hover { - border-color: rgba(220, 201, 133, 1); + &:hover { + border-color: rgba(220, 201, 133, 1); - a { - font-weight: bold; - background: rgba(0,0,0,0.5); - } - } + a { + font-weight: bold; + background: rgba(0,0,0,0.5); + } + } } } diff --git a/assets/scss/_gfx.scss b/assets/scss/_gfx.scss index 43003f9..e344d5a 100644 --- a/assets/scss/_gfx.scss +++ b/assets/scss/_gfx.scss @@ -1,13 +1,63 @@ body.gfx { > main > article { - background: $bg-gfx-on; + background: $bg-gfx-on; } > aside { - &:hover, &:focus { - background-color: $bg-gfx-on; - nav ul li:first-child { - background: $bg-gfx-on; - } - } + &:hover, &:focus { + background-color: $bg-gfx-on; + nav ul li:first-child { + background: $bg-gfx-on; + } + } + } + + #krto img { + float: left; + padding-right: 2rem; + margin-left: -6rem; + } + + #cw { + clear: both; + position: relative; + z-index: 0; + a { + z-index: 200; + } + #gfx { + position: absolute; + margin-top: -1.5rem; + z-index: -1; + opacity: 1; + height: 22.5rem; + width: 72rem; + animation: fade-in 1s linear; + + svg { + position: relative; + margin-left: -7rem; /* Something is wrong with sine.js and reload */ + height: 100%; + } + } + + &:hover #gfx { + opacity: 0.2; + animation: fade-out 1s linear; + } + } + + .sinewave{ + &.w0 { + fill: rgba(240, 40, 142, 0.5); + } + &.w1 { + fill: rgba(140, 140, 42, 0.5); + } + &.w2 { + fill: rgba(240, 142, 1, 0.5); + } + &.w3 { + fill: rgba(0, 110, 12, 0.5); + } } } diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 96fc802..331bce7 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -3,133 +3,133 @@ h1,h2,h3,h4,h5,h6 { font-weight: 600; a, a:hover, a:focus, a:link, a:visited { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } a:active { - text-decoration: underline; - color: $bg-main; + text-decoration: underline; + color: $bg-main; } } body.ps { > header { - position: fixed; - z-index: 999; - top: 0; - left: 0; - right: 0; - background: $bg-header; - padding: 0 2rem; - color: $fg-header; - - h1 { - margin: 0 auto; - - &:before { - background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; - display: block; - width: 5rem; - height: 5rem; - } - } - - h2 { - font-weight: 100; - margin-top: -2.6rem; - font-size: 3.7rem; - transform: rotate(180deg); - } - - p { - font-family: $serif; - font-size: 2rem; - font-style: italic; - margin: -3.8rem 0 0 0; - padding: 0 0 0.4rem 0.3rem; - - span { - color: black; - } - } + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + background: $bg-header; + padding: 0 2rem; + color: $fg-header; + + h1 { + margin: 0 auto; + + &:before { + background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; + display: block; + width: 5rem; + height: 5rem; + } + } + + h2 { + font-weight: 100; + margin-top: -2.6rem; + font-size: 3.7rem; + transform: rotate(180deg); + } + + p { + font-family: $serif; + font-size: 2rem; + font-style: italic; + margin: -3.8rem 0 0 0; + padding: 0 0 0.4rem 0.3rem; + + span { + color: black; + } + } } &.home > header { - background-color: $bg-dark; - top: unset; - right: 5vw; - bottom: -2vh; - left: 5vw; - padding: 1rem; - font-size: 1.2rem; - color: $fg-white-85; - overflow: auto; - transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); - - h1 { - font-size: 7vh; - text-align: center; - transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); - - img { - display: none; - vertical-align: -1.6rem; - } - } - - section { - display: none; - max-width: 42rem; - margin: 0 auto; - padding-bottom: 7rem; - } - - footer { - background-color: rgba(109, 78, 128, 1); - display: none; - font-size: 1rem; - z-index: 999; - position: fixed; - bottom: 0; - left: 0; - right: 0; - display: none; - - > h4 { - display: inline-block; - } - - > nav { - display: none; - } - - > p { - display: none; - max-width: 42rem; - margin: 0 auto; - padding-bottom: 7rem; - } - } - - &:hover { - top: 5vh; - - h1 { - font-size: 2.6rem; - transform: rotate(2.7deg) translate(0, 0) skewX(0); - } - - img { - display: inline-block; - } - - section, footer { - display: block; - width: 80vw; - margin: 0 auto; - padding-bottom: 3rem; - } - } + background-color: $bg-dark; + top: unset; + right: 5vw; + bottom: -2vh; + left: 5vw; + padding: 1rem; + font-size: 1.2rem; + color: $fg-white-85; + overflow: auto; + transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); + + h1 { + font-size: 7vh; + text-align: center; + transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); + + img { + display: none; + vertical-align: -1.6rem; + } + } + + section { + display: none; + max-width: 42rem; + margin: 0 auto; + padding-bottom: 7rem; + } + + footer { + background-color: rgba(109, 78, 128, 1); + display: none; + font-size: 1rem; + z-index: 999; + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: none; + + > h4 { + display: inline-block; + } + + > nav { + display: none; + } + + > p { + display: none; + max-width: 42rem; + margin: 0 auto; + padding-bottom: 7rem; + } + } + + &:hover { + top: 5vh; + + h1 { + font-size: 2.6rem; + transform: rotate(2.7deg) translate(0, 0) skewX(0); + } + + img { + display: inline-block; + } + + section, footer { + display: block; + width: 80vw; + margin: 0 auto; + padding-bottom: 3rem; + } + } } } diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 00ee2a7..b7c235a 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -4,119 +4,161 @@ body > main { top: 0rem; right: 0; left: 0; - font-size: 1.6rem; - margin: 0 auto; max-width: 96rem; > article { - background: $bg-txt-ps-on; - - margin: 0 auto; - max-width: 60rem; - min-height: calc(100vh - 24rem); - height: auto; - - padding: 12rem 9rem; + /* background: $bg-txt-ps-on; */ + background-color: $bg-main; + 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: $serif; - text-variant: italic; - padding: 2rem 4rem; - text-align: justify; - } + p { + font-size: 2rem; + line-height: 1.25; + font-family: $serif; + text-variant: italic; + /* padding: 2rem 4rem; */ + padding: 0rem 4rem; + text-align: justify; + + &:last-child { + padding-bottom: 2rem; + } + } } section:after { - display: table; - content: ""; - clear: both; - margin-bottom: 2rem; + display: table; + content: ""; + clear: both; + margin-bottom: 2rem; } aside { - ul { - display: table; - position: relative; - list-style: none; - margin: 0 -8rem 1rem -8rem; - width: calc(100% + 16rem); + ul { + display: table; + position: relative; + list-style: none; + margin: 0 -8rem 1rem -8rem; + width: calc(100% + 16rem); - li { - display: table-cell; - text-align: center; - } - - img { - display: block; - width: 16rem; - height: 9rem; - background-color: black; - margin: 1rem auto; - } - } + li { + display: table-cell; + text-align: center; + } + + img { + display: block; + background-color: black; + width: 16rem; + height: 9rem; + /* height: 22.55rem; */ + margin: 1rem auto; + } + } } .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; + background-color: rgba(255, 255, 255, 0.1); + box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); + height: auto; + max-height: 2rem; + margin: 2rem; + padding: 2rem; + overflow: hidden; + text-overflow: ellipsis; - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &:hover { - max-height: 100vh; - p { - white-space: normal; - overflow: auto; - } - } + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &:hover { + max-height: 100vh; + p { + white-space: normal; + overflow: auto; + } + } } .outro { - p { - font-size: 2rem; - text-align: justify; - } + p { + font-size: 2rem; + text-align: justify; + } + } + + video, iframe { + max-width: 100%; } .video { - margin: 0 -6rem 0 -4rem; + margin: 0 -6rem 0 -4rem; - video { - width: 30rem; - background: black; - float: left; - margin: 0 2rem 0 -4rem; - } - p { - line-height: 1.25; - } - &:hover { - video { - width: calc(100% + 6rem); - height: auto; - float: none; - } - } + video { + width: 30rem; + height: 18.875rem; + background: black; + float: left; + margin: 0 2rem 0 -4rem; + } + p { + line-height: 1.25; + } + &:hover { + video, iframe { + width: 68rem; + height: 38.25rem; + float: none; + margin: auto; + } +/* video { + width: calc(100% + 6rem); + height: auto; + float: none; + } */ + } + } +} + +section { + h2 + h3 { + font-size: 2.5rem; + font-style: italic; + margin-top: -2rem; + } +} + +article { + #intro h2 { + transform: rotate(270deg) translate(13.6rem, -34rem); } + } + +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); +} + diff --git a/assets/scss/_txt.scss b/assets/scss/_txt.scss new file mode 100644 index 0000000..d4cf968 --- /dev/null +++ b/assets/scss/_txt.scss @@ -0,0 +1,27 @@ +body.txt { + background-color: $bg-txt-on; + > aside { + &:hover, &:focus { + background-color: $bg-txt-on; + nav ul li:nth-child(2) { + background: $bg-txt-on; + } + } + } + > header { + h1 { + min-height: 10rem; + } + h2 { + position: absolute; + font-size: 4.8rem; + font-weight: 100; + transform-origin: top-left; + width: 90rem; + left: 50%; + transform: rotate(90deg) translate(0, -4.5rem); + text-align: left; + margin-left: 39rem; + } + } +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 1f99762..b959d3b 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -24,15 +24,28 @@ $bg-gfx-ps-on: rgba(191, 138, 112, 0.9); $bg-txt-ps-on: rgba(166, 191, 112, 0.9); $bg-vda-ps-off: rgba(112, 166, 191, 0.5); $bg-vda-ps-on: rgba(112, 166, 191, 0.9); +$bg-vdo-ps-off: rgba(112, 166, 191, 0.5); +$bg-vdo-ps-on: rgba(112, 166, 191, 0.9); + // On other pages: $bg-main: $fg-header; $fg-main: rgba(20, 20, 20, 1); +$bg-gfx: rgba(191, 138, 112, 0.7); $bg-gfx-off: rgba(191, 138, 112, 0.7); $bg-gfx-on: rgba(205, 168, 150, 1); +$bg-txt: rgba(166, 191, 112, 0.9); $bg-txt-off: rgba(166, 191, 112, 0.7); $bg-txt-on: rgba(187, 205, 150, 1); +$bg-vda: rgba(109, 144, 162, 0.7); $bg-vda-off: rgba(109, 144, 162, 0.7); $bg-vda-on: rgba(109, 144, 162, 1); - +$bg-vdo: rgba(109, 144, 162, 0.7); +$bg-vdo-off: rgba(109, 144, 162, 0.7); +$bg-vdo-on: rgba(109, 144, 162, 1); + +$a-link: rgba(23, 123, 93, 1); +$a-hover: black; +$a-active: white; +$a-visited: rgba(23, 123, 93, 0.8); diff --git a/assets/scss/_vda.scss b/assets/scss/_vda.scss index 5caa950..ede9a53 100644 --- a/assets/scss/_vda.scss +++ b/assets/scss/_vda.scss @@ -1,38 +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; - } - } - } + 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 index 3578b93..b7228ec 100644 --- a/assets/scss/_vdo.scss +++ b/assets/scss/_vdo.scss @@ -1,13 +1,12 @@ body.vdo { - > main > article { - background: $bg-vdo-on; - } + background: $bg-vdo-on; + > aside { - &:hover, &:focus { - background-color: $bg-vdo-on; - nav ul li:last-child { - background: $bg-vdo-on; - } - } + &:hover, &:focus { + background-color: $bg-vdo-on; + nav ul li:last-child { + background: $bg-vdo-on; + } + } } } diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss index 2394625..0387a3a 100644 --- a/assets/scss/screen.scss +++ b/assets/scss/screen.scss @@ -23,11 +23,13 @@ * Languages **/ +@charset 'UTF-8'; + html[lang='en'] :lang(fr) { - display: none; + display: none !important; } html[lang='fr'] :lang(en) { - display: none; + display: none !important; } :lang(en) { @@ -41,15 +43,41 @@ html[lang='fr'] :lang(en) { * Defaults **/ +a { + text-decoration: none; + + &:link { + color: $a-link; + } + &:hover { + color: $a-hover; + text-decoration: underline; + } + &:active { + color: $a-active; + } + &:visited { + color: $a-visited; + } +} + +span.ps { + background: url(../img/logo-ps.svg) top left / 3rem no-repeat; + opacity: 0.75; + color: transparent; + padding: 0.25rem; +} + body { font-family: $sans-serif; font-size: 1em; /* No rem here, bug workaround */ background: $bg-main; - color: $fg-main; + /* color: $fg-main; */ + color: black; &.ps { - background: $bg-ps; - color: $fg-ps; + background: $bg-ps; + color: $fg-ps; } > header, > footer { @@ -67,3 +95,18 @@ body { img { max-width: 100%; } + +@keyframes fade-in { + from { + opacity: 0.2; + } to { + opacity: 1; + } +} +@keyframes fade-out { + from { + opacity: 1; + } to { + opacity: 0.2; + } +} diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss deleted file mode 100644 index b6136bc..0000000 --- a/assets/scss/txt.scss +++ /dev/null @@ -1,584 +0,0 @@ -@import 'variables'; -@import 'normalize'; -@import 'skeleton'; - -$bg-main: rgba(240, 240, 242, 1); -$bg-gfx: rgba(191, 138, 112, 0.7); -$bg-gfx-on: rgba(205, 168, 150, 1); -$bg-txt: rgba(166, 191, 112, 0.9); -$bg-txt-on: rgba(187, 205, 150, 1); -$bg-vda: rgba(109, 144, 162, 0.7); -$bg-vda-on: rgba(109, 144, 162, 1); -$bg-vdo: rgba(109, 144, 162, 0.7); -$bg-vdo-on: rgba(109, 144, 162, 1); - -$a-link: rgba(23, 123, 93, 1); -$a-hover: black; -$a-active: white; -$a-visited: rgba(23, 123, 93, 0.8); - - -@charset 'UTF-8'; - - -html[lang='en'] :lang(fr) { - display: none !important; -} -html[lang='fr'] :lang(en) { - display: none !important; -} - -:lang(en) { - quotes: '\201C' '\201D' '\2018' '\2019'; -} -:lang(fr) { - quotes: '« ' ' »'; -} - - -a { - text-decoration: none; - - &:link { - color: $a-link; - } - &:hover { - color: $a-hover; - text-decoration: underline; - } - &:active { - color: $a-active; - } - &:visited { - color: $a-visited; - } -} - -span.ps { - background: url(../img/logo-ps.svg) top left / 3rem no-repeat; - opacity: 0.75; - color: transparent; - padding: 0.25rem; -} - -h1,h2,h3,h4,h5,h6 { - font-family: $serif; - font-weight: 600; - - a, a:hover, a:focus { - text-decoration: none; - color: inherit; - } -} - - -body { - font-family: $sans-serif; - font-size: 1em; /* No rem here, bug workaround */ - background-color: $bg-main; - color: rgba(0, 0, 0, 1); -} - -body > header { - - position: fixed; - z-index: 999; - top: 0; - left: 0; - right: 0; - background: rgba(124, 118, 146, 1); - padding: 0 2rem; - color: rgba(240, 240, 242, 1); - - h1 { - margin: 0 auto; - min-height: 10rem; - - &:before { - background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; - display: block; - width: 5rem; - height: 5rem; - } - } - - h2 { - position: absolute; - font-weight: 100; - font-size: 4.8rem; - transform-origin: top left; - width: 90rem; - left: 50%; - transform: rotate(90deg) translate(0, -4.5rem); - text-align: left; - margin-left: 39rem; - } - - p { - font-family: $serif; - font-size: 2rem; - font-style: italic; - margin: -3.8rem 0 0 0; - padding: 0 0 0.4rem 0.3rem; - - span { - color: black; - } - } - -} - -body > main { - - position: relative; - top: 0rem; - left: 0; - right: 0; - margin: 0 auto; - max-width: 96rem; - font-size: 1.6rem; - - > article { - background-color: $bg-main; - margin: 0 auto; - max-width: 60rem; - min-height: calc(100vh - 24rem); - padding: 12rem 9rem; - } - -} - -body { - - &.gfx { - background-color: $bg-gfx-on; - > aside { - &:hover, &:focus { - background-color: $bg-gfx-on; - nav ul li:first-child { - background: $bg-gfx-on; - } - } - } - } - - &.txt { - background-color: $bg-txt-on; - > aside { - &:hover, &:focus { - background-color: $bg-txt-on; - nav ul li:nth-child(2) { - background: $bg-txt-on; - } - } - } - } - - &.vda { - background-color: $bg-vda-on; - > aside { - &:hover, &:focus { - background-color: $bg-vda-on; - nav ul li:last-child { - background: $bg-vda-on; - } - } - } - } - - &.vdo { - background-color: $bg-vdo-on; - > aside { - &:hover, &:focus { - background-color: $bg-vdo-on; - nav ul li:last-child { - background: $bg-vdo-on; - } - } - } - } - - > aside { - position: fixed; - top: calc(50% - 150px); - height: 300px; - background: black url(../img/aside-off.png) center right no-repeat; - left: -20rem; - width: 20rem; - padding: 1rem; - - &:hover, &:focus { - left: 0; - background: $bg-main url(../img/aside-on.png) center left no-repeat; - box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); - width: auto; - border-right: 2rem solid black; - padding: 0; - - nav { - display: block; - background: $bg-main url(../img/aside-on.png) center left no-repeat; - height: 100%; - - h3 { - a:link, a:hover, a:active, a:visited { - color: transparent; - } - } - } - - ul li:hover { - a:hover { - text-decoration: none; - } - span { - display: block; - } - &:first-child { - transform: scale(1.4) rotate(4deg) translateX(-0.75vw); - a { - transform: rotate(-4deg); - } - } - &:nth-child(2) { - transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); - a { - transform: rotate(6deg); - } - } - &:last-child { - transform: scale(1.4) rotate(5deg) translateX(-0.5vw); - a { - transform: rotate(-5deg); - } - } - } - } - - nav { - position: relative; - margin-left: 3rem; - display: none; - line-height: 30rem; - - h3 { - display: inline-block; - background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; - width: 10rem; - height: 100%; - vertical-align: top; - color: transparent; - - - a { - display: block; - height: 100%; - width: 100%; - line-height: 30rem; - color: transparent; - &:hover { - color: transparent; - } - } - } - - ul { - list-style: none; - display: inline-block; - height: 100%; - - li { - display: block; - padding: 0 2rem; - font-size: 3rem; - float: left; - padding-left: 1rem; - z-index: 400; - overflow: hidden; - width: 10rem; - height: 100%; - - a { - color: black; - text-decoration: none; - display: block; - height: 100%; - width: 100%; - z-index: 404; - - &:link, &:visited { - color: inherit; - } - - &:hover { - font-size: 200%; - color: inherit; - z-index: 404; - } - } - - span { - display: none; - z-index: 400; - position: relative; - font-size: 1.25rem; - line-height: 1.6rem; - text-align: center; - margin: -3rem -2rem 0 -1rem; - } - - &:first-child { - background: $bg-gfx; - } - - &:nth-child(2) { - background: $bg-txt; - } - - &:last-child { - background: $bg-vdo; - } - } - } - } - } -} - -body > footer { - - position: relative; - left: 0; - right: 0; - max-width: 60rem; - margin: 5rem auto 2rem auto; - font-size: 1.15rem; - - h4 { - margin: 0; - font-size: 1.6rem; - - a { - text-decoration:none; - } - } - - &:hover > p { - > span:first-child { - display: inline-block; - color: transparent; - line-height: 0; - } - > span:first-child:before { - content: 'Copyleft'; - display: block; - color: black; - padding-right: 0.4rem; - } - > span:first-child + span { - display: inline-block; - transform: rotate(180deg) translateY(0.1rem); - } - } -} - -section { - h2 + h3 { - font-size: 2.5rem; - font-style: italic; - margin-top: -2rem; - } -} - -article > header { - p { - font-size: 2rem; - line-height: 1.25; - font-family: $serif; - text-variant: italic; - padding: 0 4rem; - text-align: justify; - - &:last-child { - padding-bottom: 2rem; - } - } -} - -article { - #intro h2 { - transform: rotate(270deg) translate(13.6rem, -34rem); - } - - section:after { - display: table; - content: ""; - clear: both; - margin-bottom: 2rem; - } - - aside { - - ul { - display: table; - position: relative; - list-style: none; - margin: 0 -8rem 1rem -8rem; - width: calc(100% + 16rem); - - - li { - display: table-cell; - text-align: center; - } - - img { - display: block; - width: 16rem; - background-color: black; - margin: 1rem auto; - height: 22.55rem; - } - } - } - - .outro { - p { - font-size: 2rem; - text-align: justify; - } - } - - .intro { - background-color: rgba(255, 255, 255, 0.1); - box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); - height: auto; - max-height: 2rem; - margin: 2rem; - padding: 2rem; - overflow: hidden; - text-overflow: ellipsis; - - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &:hover { - max-height: 100vh; - p { - white-space: normal; - overflow: auto; - } - } - } - - video, iframe { - max-width: 100%; - } - - .video { - margin: 0 -6rem 0 -4rem; - - video, iframe { - width: 30rem; - height: 18.875rem; - background: black; - float: left; - margin: 0 2rem 0 -4rem; - } - p { - line-height: 1.25; - } - &:hover { - video, iframe { - width: 68rem; - height: 38.25rem; - float: none; - margin: auto; - } - } - } - -} - -span.note { - font-size: smaller; - padding-left: 1rem; - display: none; -} -:hover + span.note { - display: inline; -} - -#lang-switch { - background-color: rgba(240, 240, 242, 0.3); -} - -body.gfx { - - #krto img { - float: left; - padding-right: 2rem; - margin-left: -6rem; - } - - #cw { - clear: both; - position: relative; - z-index: 0; - a { - z-index: 200; - } - #gfx { - position: absolute; - margin-top: -1.5rem; - z-index: -1; - opacity: 1; - height: 22.5rem; - width: 72rem; - animation: fade-in 1s linear; - - svg { - position: relative; - margin-left: -7rem; /* Something is wrong with sine.js and reload */ - height: 100%; - } - } - - &:hover #gfx { - opacity: 0.2; - animation: fade-out 1s linear; - } - } - - .sinewave{ - &.w0 { - fill: rgba(240, 40, 142, 0.5); - } - &.w1 { - fill: rgba(140, 140, 42, 0.5); - } - &.w2 { - fill: rgba(240, 142, 1, 0.5); - } - &.w3 { - fill: rgba(0, 110, 12, 0.5); - } - } -} - -@keyframes fade-in { - from { - opacity: 0.2; - } to { - opacity: 1; - } -} -@keyframes fade-out { - from { - opacity: 1; - } to { - opacity: 0.2; - } -} -- cgit v1.2.3