diff options
author | hellekin <hellekin@cepheide.org> | 2022-06-02 16:07:07 +0200 |
---|---|---|
committer | hellekin <hellekin@cepheide.org> | 2022-06-02 16:07:07 +0200 |
commit | 2825d95d9f7248d8511d59ab750e9dfaeefd7b4e (patch) | |
tree | 9353889b38fe8e63f513f354ee519adc1d6eef2d /assets/scss | |
parent | 931c5efce9cd62cd7e8ee994093c5aca6e187de8 (diff) | |
parent | 0dc2d6d69287565e3d2d21b0af23905ef905a3ca (diff) | |
download | lesoiseaux.io-2825d95d9f7248d8511d59ab750e9dfaeefd7b4e.tar.gz |
Merge branch 'thx'
Diffstat (limited to 'assets/scss')
-rw-r--r-- | assets/scss/txt.scss | 730 |
1 files changed, 372 insertions, 358 deletions
diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss index 3a7d70b..b6136bc 100644 --- a/assets/scss/txt.scss +++ b/assets/scss/txt.scss @@ -9,6 +9,8 @@ $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; @@ -38,25 +40,25 @@ a { text-decoration: none; &:link { - color: $a-link; + color: $a-link; } &:hover { - color: $a-hover; - text-decoration: underline; + color: $a-hover; + text-decoration: underline; } &:active { - color: $a-active; + color: $a-active; } &:visited { - color: $a-visited; + color: $a-visited; } } span.ps { - background: url(../img/logo-ps.svg) top left / 5rem no-repeat; + background: url(../img/logo-ps.svg) top left / 3rem no-repeat; opacity: 0.75; color: transparent; - padding: 0.25rem 1.25rem; + padding: 0.25rem; } h1,h2,h3,h4,h5,h6 { @@ -64,14 +66,12 @@ h1,h2,h3,h4,h5,h6 { font-weight: 600; a, a:hover, a:focus { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } } - - body { font-family: $sans-serif; font-size: 1em; /* No rem here, bug workaround */ @@ -91,33 +91,39 @@ body > header { color: rgba(240, 240, 242, 1); h1 { - margin: 0 auto; - - &:before { - background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; - display: block; - width: 5rem; - height: 5rem; - } + 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 { - font-weight: 100; - margin-top: -2.6rem; - font-size: 3.7rem; - transform: rotate(180deg); + 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; - } + 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; + } } } @@ -133,11 +139,11 @@ body > main { font-size: 1.6rem; > article { - background-color: $bg-main; - margin: 0 auto; - max-width: 60rem; - min-height: calc(100vh - 24rem); - padding: 12rem 9rem; + background-color: $bg-main; + margin: 0 auto; + max-width: 60rem; + min-height: calc(100vh - 24rem); + padding: 12rem 9rem; } } @@ -145,185 +151,196 @@ body > main { body { &.gfx { - background-color: $bg-gfx-on; - > aside { - &:hover, &:focus { - background-color: $bg-gfx-on; - nav ul li:first-child { - background: $bg-gfx-on; - } - } - } + 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; - } - } - } + 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; - } - } - } + background-color: $bg-vda-on; + > aside { + &:hover, &:focus { + background-color: $bg-vda-on; + nav ul li:last-child { + background: $bg-vda-on; + } + } + } } - > aside { + &.vdo { + background-color: $bg-vdo-on; + > aside { + &:hover, &:focus { + background-color: $bg-vdo-on; + nav ul li:last-child { + background: $bg-vdo-on; + } + } + } + } - 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-vda; - } - } - } - } + > 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; + } + } + } + } } } @@ -334,156 +351,153 @@ body > footer { right: 0; max-width: 60rem; margin: 5rem auto 2rem auto; - font-size: 1.25rem; + font-size: 1.15rem; h4 { - margin: 0; - font-size: 1.6rem; + margin: 0; + font-size: 1.6rem; - a { - text-decoration:none; - } + a { + text-decoration:none; + } } &:hover > p { - > span:first-child { - display: inline-block; - color: transparent; - line-height: 0; - } - > span:first-child:before { - content: 'Copyleft'; - display: block; - color: black; - padding-right: 0.4rem; - } - > span + span { - display: inline-block; - transform: rotate(180deg) translateY(0.2rem); - } + > 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; + 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; - } + 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); + transform: rotate(270deg) translate(13.6rem, -34rem); } 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); - - - li { - display: table-cell; - text-align: center; - } - - img { - display: block; - width: 16rem; - background-color: black; - margin: 1rem auto; - } - } + 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; - } + 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; - } - } + 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%; + 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; - } - } + 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; + } + } } } @@ -504,67 +518,67 @@ span.note { body.gfx { #krto img { - float: left; - padding-right: 2rem; - margin-left: -6rem; + float: left; + padding-right: 2rem; + margin-left: -6rem; } #cw { - position: relative; - z-index: 0; - a { - z-index: 200; - } - #gfx { - position: absolute; - z-index: -1; - opacity: 1; - margin: 0 auto; - width: 72rem; - height: 22.5rem; - margin-left: -6rem; - animation: fade-in 1s linear; - - svg { - position: relative; - width: 100%; - height: 100%; - } - } - &:hover #gfx { - opacity: 0.2; - animation: fade-out 1s linear; - } + 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 { + &.w0 { fill: rgba(240, 40, 142, 0.5); - } - &.w1 { + } + &.w1 { fill: rgba(140, 140, 42, 0.5); - } - &.w2 { + } + &.w2 { fill: rgba(240, 142, 1, 0.5); - } - &.w3 { + } + &.w3 { fill: rgba(0, 110, 12, 0.5); - } + } } - } @keyframes fade-in { from { - opacity: 0.2; + opacity: 0.2; } to { - opacity: 1; + opacity: 1; } } @keyframes fade-out { from { - opacity: 1; + opacity: 1; } to { - opacity: 0.2; + opacity: 0.2; } } |