aboutsummaryrefslogtreecommitdiff
path: root/assets/scss/txt.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss/txt.scss')
-rw-r--r--assets/scss/txt.scss584
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;
- }
-}
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-06 07:21:48 +0000