aboutsummaryrefslogtreecommitdiff
path: root/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss')
-rw-r--r--assets/scss/_aside.scss246
-rw-r--r--assets/scss/_footer.scss112
-rw-r--r--assets/scss/_header.scss234
-rw-r--r--assets/scss/_variables.scss1
-rw-r--r--assets/scss/home.scss23
5 files changed, 309 insertions, 307 deletions
diff --git a/assets/scss/_aside.scss b/assets/scss/_aside.scss
index 77ef35f..6ec573f 100644
--- a/assets/scss/_aside.scss
+++ b/assets/scss/_aside.scss
@@ -9,136 +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;
-
- nav {
- display: block;
- background: $bg-main url(../img/aside-on.png) center left no-repeat;
- height: 100%;
+ 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;
- }
+ 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);
- }
- }
- }
+ 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;
+ 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;
- }
- }
- }
+ 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;
+ }
+ }
+ }
}
}
diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
index 8d944ff..6119a00 100644
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@@ -10,81 +10,81 @@ body > footer {
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;
+ }
}
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);
- }
+ 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/_header.scss b/assets/scss/_header.scss
index 331bce7..bee374f 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/_variables.scss b/assets/scss/_variables.scss
index b959d3b..8cb9dc4 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -27,7 +27,6 @@ $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);
diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 7009d26..a80e473 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -40,7 +40,7 @@ body > header {
left: 5vw;
padding: 1rem;
z-index: 999;
- font-size: 1.2rem;
+ font-size: 1.4rem;
color: rgba(255, 255, 255, 0.85);
overflow: auto;
transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg);
@@ -438,24 +438,23 @@ body > footer {
position: absolute;
top: 0;
left: 0;
- opacity: 0.1;
+ opacity: 0.9;
}
&:hover {
background: rgba(191, 138, 112, 0.9);
transform: rotate(0);
margin: 0;
-
- p, h4 {
- display: none;
- }
+ color: black;
+ padding: 1rem;
h3 {
transform: rotate(0) translateX(0) translateY(-4rem);
}
svg {
- opacity: 0.9;
+ opacity: 0.3;
+ width: calc(100% + 4rem);
}
+ #txt {
@@ -575,15 +574,18 @@ body > footer {
text-decoration: none;
}
- .libre #participation {
+ .libre #participation,
+ .libre #share {
/* transform: rotate(-4deg) translateY(4.5rem); */
transform: rotate(-4deg) translateY(6vh);
}
- .libre #engagement {
+ .libre #engagement,
+ .libre #engage {
/* transform: translate(0.5rem, 7rem); */
transform: translate(0.5vw, 14vh);
}
- .libre #cooperation {
+ .libre #cooperation,
+ .libre #care {
/* transform: rotate(2deg) translate(0rem, 9.8rem); */
transform: rotate(2deg) translate(0rem, 19.5vh);
}
@@ -605,6 +607,7 @@ body > footer {
}
.sinewave{
+ z-index: 0;
&.w0 {
fill: rgba(240, 40, 142, 0.5);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 22:11:07 +0000