diff options
Diffstat (limited to 'assets/scss')
-rw-r--r-- | assets/scss/_aside.scss | 2 | ||||
-rw-r--r-- | assets/scss/_variables.scss | 8 | ||||
-rw-r--r-- | assets/scss/_vda.scss | 38 | ||||
-rw-r--r-- | assets/scss/_vdo.scss | 13 | ||||
-rw-r--r-- | assets/scss/home.scss | 12 | ||||
-rw-r--r-- | assets/scss/mobile.scss | 6 | ||||
-rw-r--r-- | assets/scss/screen.scss | 6 | ||||
-rw-r--r-- | assets/scss/txt.scss | 194 |
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; } } |