diff options
Diffstat (limited to 'assets/scss/_main.scss')
| -rw-r--r-- | assets/scss/_main.scss | 210 |
1 files changed, 126 insertions, 84 deletions
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 00ee2a7..b7c235a 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -4,119 +4,161 @@ body > main { top: 0rem; right: 0; left: 0; - font-size: 1.6rem; - margin: 0 auto; max-width: 96rem; > article { - background: $bg-txt-ps-on; - - margin: 0 auto; - max-width: 60rem; - min-height: calc(100vh - 24rem); - height: auto; - - padding: 12rem 9rem; + /* background: $bg-txt-ps-on; */ + background-color: $bg-main; + margin: 0 auto; + max-width: 60rem; + min-height: calc(100vh - 24rem); + height: auto; + padding: 12rem 9rem; } } - article { > header { - p { - font-size: 2rem; - line-height: 1.25; - font-family: $serif; - text-variant: italic; - padding: 2rem 4rem; - text-align: justify; - } + p { + font-size: 2rem; + line-height: 1.25; + font-family: $serif; + text-variant: italic; + /* padding: 2rem 4rem; */ + padding: 0rem 4rem; + text-align: justify; + + &:last-child { + padding-bottom: 2rem; + } + } } 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); + 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; - height: 9rem; - background-color: black; - margin: 1rem auto; - } - } + li { + display: table-cell; + text-align: center; + } + + img { + display: block; + background-color: black; + width: 16rem; + height: 9rem; + /* height: 22.55rem; */ + margin: 1rem auto; + } + } } .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; + 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; - } - } + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &:hover { + max-height: 100vh; + p { + white-space: normal; + overflow: auto; + } + } } .outro { - p { - font-size: 2rem; - text-align: justify; - } + p { + font-size: 2rem; + text-align: justify; + } + } + + video, iframe { + max-width: 100%; } .video { - margin: 0 -6rem 0 -4rem; + margin: 0 -6rem 0 -4rem; - video { - width: 30rem; - background: black; - float: left; - margin: 0 2rem 0 -4rem; - } - p { - line-height: 1.25; - } - &:hover { - video { - width: calc(100% + 6rem); - height: auto; - float: none; - } - } + video { + 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; + } +/* video { + width: calc(100% + 6rem); + height: auto; + float: none; + } */ + } + } +} + +section { + h2 + h3 { + font-size: 2.5rem; + font-style: italic; + margin-top: -2rem; + } +} + +article { + #intro h2 { + transform: rotate(270deg) translate(13.6rem, -34rem); } + } + +span.note { + font-size: smaller; + padding-left: 1rem; + display: none; +} +:hover + span.note { + display: inline; +} + +#lang-switch { + background-color: rgba(240, 240, 242, 0.3); +} + |