From b95ad0b19399a0958ca72fbba3b78e8dd14a5c3a Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 30 Dec 2017 23:43:05 +0100 Subject: Update ps home --- assets/scss/_main.scss | 122 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 assets/scss/_main.scss (limited to 'assets/scss/_main.scss') diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss new file mode 100644 index 0000000..00ee2a7 --- /dev/null +++ b/assets/scss/_main.scss @@ -0,0 +1,122 @@ +body > main { + + position: relative; + 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; + } + +} + + +article { + > header { + p { + font-size: 2rem; + line-height: 1.25; + font-family: $serif; + text-variant: italic; + padding: 2rem 4rem; + text-align: justify; + } + } + + section:after { + 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); + + li { + display: table-cell; + text-align: center; + } + + img { + display: block; + width: 16rem; + height: 9rem; + background-color: black; + 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; + + 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; + } + } + + .video { + 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; + } + } + } +} -- cgit v1.2.3