diff options
author | hellekin <hellekin@cepheide.org> | 2022-06-02 18:07:18 +0200 |
---|---|---|
committer | hellekin <hellekin@cepheide.org> | 2022-06-02 18:07:18 +0200 |
commit | 435bc825f01798379e8eb33152ee9592dd54bf94 (patch) | |
tree | fabc5aaa3b2ea9ed88a2fa9e210be787d8260735 /assets/scss/txt.scss | |
parent | bb4584cdf1f629ecf056633528e249cd9aef1451 (diff) | |
download | lesoiseaux.io-435bc825f01798379e8eb33152ee9592dd54bf94.tar.gz |
Remove unused files and correct existing ones.
Diffstat (limited to 'assets/scss/txt.scss')
-rw-r--r-- | assets/scss/txt.scss | 584 |
1 files changed, 0 insertions, 584 deletions
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; - } -} |