diff options
Diffstat (limited to 'assets/scss/txt.scss')
| -rw-r--r-- | assets/scss/txt.scss | 194 |
1 files changed, 101 insertions, 93 deletions
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; } } |