aboutsummaryrefslogtreecommitdiff
path: root/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss')
-rw-r--r--assets/scss/_aside.scss221
-rw-r--r--assets/scss/_fonts.scss26
-rw-r--r--assets/scss/_footer.scss113
-rw-r--r--assets/scss/_gfx.scss64
-rw-r--r--assets/scss/_header.scss234
-rw-r--r--assets/scss/_main.scss210
-rw-r--r--assets/scss/_txt.scss27
-rw-r--r--assets/scss/_variables.scss15
-rw-r--r--assets/scss/_vda.scss72
-rw-r--r--assets/scss/_vdo.scss17
-rw-r--r--assets/scss/screen.scss53
-rw-r--r--assets/scss/txt.scss584
12 files changed, 625 insertions, 1011 deletions
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;
- }
-}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 23:42:17 +0000