aboutsummaryrefslogtreecommitdiff
path: root/assets/scss/txt.scss
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2022-06-02 16:07:07 +0200
committerhellekin <hellekin@cepheide.org>2022-06-02 16:07:07 +0200
commit2825d95d9f7248d8511d59ab750e9dfaeefd7b4e (patch)
tree9353889b38fe8e63f513f354ee519adc1d6eef2d /assets/scss/txt.scss
parent931c5efce9cd62cd7e8ee994093c5aca6e187de8 (diff)
parent0dc2d6d69287565e3d2d21b0af23905ef905a3ca (diff)
downloadlesoiseaux.io-2825d95d9f7248d8511d59ab750e9dfaeefd7b4e.tar.gz
Merge branch 'thx'
Diffstat (limited to 'assets/scss/txt.scss')
-rw-r--r--assets/scss/txt.scss730
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;
}
}