From 1664fb9dc8d85a0e3e0dad4895197e1970136f3d Mon Sep 17 00:00:00 2001 From: hellekin Date: Mon, 24 Apr 2023 14:44:27 +0200 Subject: New version of /txt/ --- assets/scss/_main.scss | 176 ++++++++++++++++++++++++------------------------- assets/scss/_txt.scss | 30 ++++++--- 2 files changed, 108 insertions(+), 98 deletions(-) (limited to 'assets/scss') diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 0327543..013ac6c 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -9,141 +9,141 @@ body > main { max-width: 96rem; > article { - /* background: $bg-txt-ps-on; */ + /* 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; + 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; */ + p { + font-size: 2rem; + line-height: 1.25; + font-family: $serif; + text-variant: italic; + /* padding: 2rem 4rem; */ padding: 0rem 4rem; - text-align: justify; + text-align: justify; &:last-child { - padding-bottom: 2rem; - } - } + 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; - } + li { + display: table-cell; + text-align: center; + } - img { - display: block; + img { + display: block; background-color: black; - width: 16rem; /* 16:9 for video */ - height: 9rem; - margin: 1rem auto; - } - } + width: 16rem; /* 16:9 for video */ + height: 9rem; + 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%; + max-width: 100%; } .video { - margin: 0 -6rem 0 -4rem; + margin: 0 -6rem 0 -4rem; - video { - width: 30rem; + 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; + background: black; + float: left; + margin: 0 2rem 0 -4rem; + } + p { + line-height: 1.25; + } + &:hover { + video, iframe { + width: 68rem; height: 38.25rem; - float: none; + float: none; margin: auto; - } -/* video { - width: calc(100% + 6rem); - height: auto; - float: none; - } */ - } + } +/* video { + width: calc(100% + 6rem); + height: auto; + float: none; + } */ + } } } section { h2 + h3 { - font-size: 2.5rem; - font-style: italic; - margin-top: -2rem; + font-size: 2.5rem; + font-style: italic; + margin-top: -2rem; } } article { #intro h2 { - transform: rotate(270deg) translate(13.6rem, -34rem); + transform: rotate(270deg) translate(13.6rem, -34rem); } } diff --git a/assets/scss/_txt.scss b/assets/scss/_txt.scss index 19bf047..e3d9a5a 100644 --- a/assets/scss/_txt.scss +++ b/assets/scss/_txt.scss @@ -1,14 +1,14 @@ body.txt { - background-color: $bg-txt-on; - - > aside { - &:hover, &:focus { - background-color: $bg-txt-on; - nav ul li:nth-child(2) { - background: $bg-txt-on; - } - } - } + background-color: $bg-txt-on; + + > aside { + &:hover, &:focus { + background-color: $bg-txt-on; + nav ul li:nth-child(2) { + background: $bg-txt-on; + } + } + } > header { h1 { min-height: 10rem; @@ -29,4 +29,14 @@ body.txt { height: 22.55rem; /* 1:1.41 for books */ } + #lang-switch { + position: absolute; + top: 0.1rem; + right: 0.1rem; + z-index: 1000; + } +} + +.phonetic { + font-family: "Noto Sans"; } -- cgit v1.2.3