aboutsummaryrefslogtreecommitdiff
path: root/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss')
-rw-r--r--assets/scss/_aside.scss2
-rw-r--r--assets/scss/_variables.scss8
-rw-r--r--assets/scss/_vda.scss38
-rw-r--r--assets/scss/_vdo.scss13
-rw-r--r--assets/scss/home.scss12
-rw-r--r--assets/scss/mobile.scss6
-rw-r--r--assets/scss/screen.scss6
-rw-r--r--assets/scss/txt.scss194
8 files changed, 158 insertions, 121 deletions
diff --git a/assets/scss/_aside.scss b/assets/scss/_aside.scss
index 6afe3b6..1cafa25 100644
--- a/assets/scss/_aside.scss
+++ b/assets/scss/_aside.scss
@@ -124,7 +124,7 @@ body > aside {
}
&:last-child {
- background: $bg-vdo;
+ background: $bg-vda;
}
*/
}
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index e09fcf9..1f99762 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -22,8 +22,8 @@ $fg-ps: rgba(243, 240, 228, 1);
$bg-gfx-ps-on: rgba(191, 138, 112, 0.9);
$bg-txt-ps-on: rgba(166, 191, 112, 0.9);
-$bg-vdo-ps-off: rgba(112, 166, 191, 0.5);
-$bg-vdo-ps-on: rgba(112, 166, 191, 0.9);
+$bg-vda-ps-off: rgba(112, 166, 191, 0.5);
+$bg-vda-ps-on: rgba(112, 166, 191, 0.9);
// On other pages:
$bg-main: $fg-header;
@@ -33,6 +33,6 @@ $bg-gfx-off: rgba(191, 138, 112, 0.7);
$bg-gfx-on: rgba(205, 168, 150, 1);
$bg-txt-off: rgba(166, 191, 112, 0.7);
$bg-txt-on: rgba(187, 205, 150, 1);
-$bg-vdo-off: rgba(109, 144, 162, 0.7);
-$bg-vdo-on: rgba(109, 144, 162, 1);
+$bg-vda-off: rgba(109, 144, 162, 0.7);
+$bg-vda-on: rgba(109, 144, 162, 1);
diff --git a/assets/scss/_vda.scss b/assets/scss/_vda.scss
new file mode 100644
index 0000000..5caa950
--- /dev/null
+++ b/assets/scss/_vda.scss
@@ -0,0 +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;
+ }
+ }
+ }
+}
diff --git a/assets/scss/_vdo.scss b/assets/scss/_vdo.scss
deleted file mode 100644
index 3578b93..0000000
--- a/assets/scss/_vdo.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-body.vdo {
- > main > article {
- background: $bg-vdo-on;
- }
- > aside {
- &:hover, &:focus {
- background-color: $bg-vdo-on;
- nav ul li:last-child {
- background: $bg-vdo-on;
- }
- }
- }
-}
diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 72ec9a9..eec293b 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -502,7 +502,7 @@ body > footer {
padding: 1rem 2rem;
}
- .media #vdo {
+ .media #vda {
left: 0;
background: rgba(112, 166, 191, 0.5);
transform: rotate(-5deg);
@@ -513,7 +513,7 @@ body > footer {
display: none;
}
}
- .media #vdo video {
+ .media #vda video {
position: absolute;
top: 50%;
left: 50%;
@@ -525,19 +525,19 @@ body > footer {
z-index: -101;
opacity: 0.1;
}
- .media #vdo:hover video {
+ .media #vda:hover video {
opacity: 1;
}
- .media #vdo:hover {
+ .media #vda:hover {
background: rgba(112, 166, 191, 0.9);
margin: 0;
transform: rotate(0);
width: 40vw;
}
- .media #vdo h3 {
+ .media #vda h3 {
transform: rotate(5deg) translateX(-2vw);
}
- .media #vdo:hover h3 {
+ .media #vda:hover h3 {
transform: rotate(0) translateX(0) translateY(-5rem);
color: rgba(109, 144, 162, 0.7);
font-size: 18vw;
diff --git a/assets/scss/mobile.scss b/assets/scss/mobile.scss
index e568feb..38d3605 100644
--- a/assets/scss/mobile.scss
+++ b/assets/scss/mobile.scss
@@ -101,8 +101,8 @@ body {
#txt, #txt h3 {
background-color: $bg-txt-off;
}
-#vdo, #vdo h3 {
- background-color: $bg-vdo-off;
+#vda, #vda h3 {
+ background-color: $bg-vda-off;
}
.fixed.libre {
@@ -176,7 +176,7 @@ body {
&#txt h3 {
right: 18vw;
}
- &#vdo h3 {
+ &#vda h3 {
right: 2vw;
}
diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss
index 8828c85..4dcda84 100644
--- a/assets/scss/screen.scss
+++ b/assets/scss/screen.scss
@@ -16,7 +16,7 @@
**/
@import 'gfx';
@import 'txt';
-@import 'vdo';
+@import 'vda';
/**
* Languages
@@ -62,3 +62,7 @@ body {
text-decoration: underline;
}
}
+
+img {
+ max-width: 100%;
+}
diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss
index fa89fee..b6136bc 100644
--- a/assets/scss/txt.scss
+++ b/assets/scss/txt.scss
@@ -7,6 +7,8 @@ $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);
@@ -38,17 +40,17 @@ 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;
}
}
@@ -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 */
@@ -121,9 +121,9 @@ body > header {
margin: -3.8rem 0 0 0;
padding: 0 0 0.4rem 0.3rem;
- span {
- color: black;
- }
+ span {
+ color: black;
+ }
}
}
@@ -174,6 +174,18 @@ body {
}
}
+ &.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 {
@@ -371,40 +383,37 @@ body > footer {
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 {
@@ -433,62 +442,62 @@ article {
}
.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;
+ }
+ }
}
}
@@ -544,33 +553,32 @@ body.gfx {
}
.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;
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 11:07:22 +0000