diff options
Diffstat (limited to 'assets/scss/txt.scss')
| -rw-r--r-- | assets/scss/txt.scss | 385 |
1 files changed, 385 insertions, 0 deletions
diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss new file mode 100644 index 0000000..4bc59a9 --- /dev/null +++ b/assets/scss/txt.scss @@ -0,0 +1,385 @@ +@import 'variables'; +@import 'normalize'; +@import 'skeleton'; + +$bg-main: rgba(240, 240, 242, 1); +$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-vdo: rgba(109, 144, 162, 0.7); +$bg-vdo-on: rgba(109, 144, 162, 1); + +h1,h2,h3,h4,h5,h6 { + font-family: $serif; + font-weight: 600; + + a, a:hover, a:focus { + text-decoration: none; + color: inherit; + } +} + + + + +body { + font-family: $sans-serif; + font-size: 1em; /* No rem here, bug workaround */ + background: $bg-main; + color: rgba(0, 0, 0, 1); +} + +body > header { + + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + background: rgba(124, 118, 146, 1); + padding: 0 2rem; + color: rgba(240, 240, 242, 1); + + h1 { + margin: 0 auto; + + &:before { + background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; + display: block; + width: 5rem; + height: 5rem; + } + } + + h2 { + font-weight: 100; + margin-top: -2.6rem; + font-size: 3.7rem; + transform: rotate(180deg); + } + + p { + font-family: $serif; + font-size: 2rem; + font-style: italic; + margin: -3.8rem 0 0 0; + padding: 0 0 0.4rem 0.3rem; + + span { + color: black; + } + } + +} + +body > main { + + position: relative; + top: 0rem; + left: 0; + right: 0; + margin: 0 auto; + max-width: 96rem; + font-size: 1.6rem; + + > article { + margin: 0 auto; + background: $bg-txt; + max-width: 60rem; + min-height: calc(100vh - 24rem); + padding: 12rem 9rem; + } + +} + +body { + + &.gfx { + > main > article { + background: $bg-gfx-on; + } + > aside { + &:hover, &:focus { + background-color: $bg-gfx-on; + nav ul li:first-child { + background: $bg-gfx-on; + } + } + } + } + + &.txt { + > main > article { + background: $bg-txt-on; + } + > aside { + &:hover, &:focus { + background-color: $bg-txt-on; + nav ul li:nth-child(2) { + background: $bg-txt-on; + } + } + } + } + + &.vdo { + > main > article { + background: $bg-vdo-on; + } + > aside { + &:hover, &:focus { + background-color: $bg-vdo-on; + nav ul li:last-child { + background: $bg-vdo-on; + } + } + } + } + + > aside { + + position: fixed; + top: calc(50% - 150px); + height: 300px; + background: black url(../img/aside-off.png) center right no-repeat; + left: -20rem; + width: 20rem; + padding: 1rem; + + &:hover, &:focus { + left: 0; + background: $bg-main url(../img/aside-on.png) center left no-repeat; + box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); + width: auto; + border-right: 2rem solid black; + padding: 0; + + nav { + display: block; + background: $bg-main url(../img/aside-on.png) center left no-repeat; + height: 100%; + } + + ul li:hover { + span { + display: block; + } + &:first-child { + transform: scale(1.4) rotate(4deg) translateX(-0.75vw); + a { + transform: rotate(-4deg); + } + } + &:nth-child(2) { + transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); + a { + transform: rotate(6deg); + } + } + &:last-child { + transform: scale(1.4) rotate(5deg) translateX(-0.5vw); + a { + transform: rotate(-5deg); + } + } + } + } + + nav { + position: relative; + margin-left: 3rem; + display: none; + line-height: 30rem; + + h3 { + display: inline-block; + background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; + width: 10rem; + height: 100%; + vertical-align: top; + color: transparent; + + + a { + display: block; + height: 100%; + width: 100%; + line-height: 30rem; + color: transparent; + &:hover { + color: transparent; + } + } + } + + ul { + list-style: none; + display: inline-block; + height: 100%; + + li { + display: block; + padding: 0 2rem; + font-size: 3rem; + float: left; + padding-left: 1rem; + z-index: 400; + overflow: hidden; + width: 10rem; + height: 100%; + + a { + color: black; + text-decoration: none; + display: block; + height: 100%; + width: 100%; + z-index: 404; + + &:hover { + font-size: 200%; + color: inherit; + z-index: 404; + } + } + + span { + display: none; + z-index: 400; + position: relative; + font-size: 1.25rem; + line-height: 1.6rem; + text-align: center; + margin: -3rem -2rem 0 -1rem; + } + + &:first-child { + background: $bg-gfx; + } + + &:nth-child(2) { + background: $bg-txt; + } + + &:last-child { + background: $bg-vdo; + } + } + } + } + } +} + +body > footer { + + position: relative; + left: 0; + right: 0; + max-width: 60rem; + margin: 5rem auto 2rem auto; + +} + +article > header { + + p { + font-size: 2rem; + line-height: 1.25; + font-family: $serif; + text-variant: italic; + padding: 2rem 4rem; + text-align: justify; + } + +} + +article { + + 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; + } + } + } + + .outro { + 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; + } + } + } + + .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; + } + } + } + +} |