diff options
Diffstat (limited to 'assets/scss/www.scss')
| -rwxr-xr-x | assets/scss/www.scss | 222 |
1 files changed, 210 insertions, 12 deletions
diff --git a/assets/scss/www.scss b/assets/scss/www.scss index f75a975..c290599 100755 --- a/assets/scss/www.scss +++ b/assets/scss/www.scss @@ -5,6 +5,13 @@ $header-height: 3rem; $serif: 'Cormorant Garamond', serif; $sans-serif: 'Open Sans', sans-serif; +$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); @import 'normalize'; @import 'skeleton'; @@ -40,8 +47,46 @@ body { padding: 2.8rem 3rem 2rem 2rem; } - p.lead { + p.lead, nav { display:none; + position: relative; + margin: 0 auto; + padding: 2rem; + max-width: 43rem; + text-align: justify; + font-size: 2rem; + color: rgba(255,255,255,1); + } + + nav ul { + list-style: none; + margin-bottom: 1rem; + padding: 0; + + li { + font-variant: small-caps; + margin: 0 auto; + padding: 0; + text-align: center; + width: 100%; + background: rgba(0, 0, 0, 0.1); + border: 1px solid transparent; + &:hover, &:focus { + background-color: rgba(255,255,255,0.1); + border-color: black; + border-top-right-radius: 1rem; + } + } + + a { + display: block; + height: 100%; + padding: 1rem; + text-decoration: none; + &:hover { + color: white; + } + } } &:focus, @@ -60,13 +105,10 @@ body { p.lead { display: block; - position: relative; - margin: 0 auto; - padding: 2rem 3rem 2rem 2rem; - max-width: 43rem; - text-align: justify; - font-size: 2rem; - color: rgba(255,255,255,1); + } + + nav { + display: block; } } } @@ -99,6 +141,139 @@ body { } } + > 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; + } + } + } + } + } +/* >aside { position: fixed; display: block; @@ -109,14 +284,15 @@ body { margin-top: -10rem; margin-left: -90rem; background: url(../img/aside-off.png) right center no-repeat,rgba(30, 174, 219, 0.9) ; - + animation: aside-off 250ms ease-in; + &:hover, &:focus { background: url(../img/aside-on.png) left center no-repeat, white; margin-left: 0; width: auto; padding: 1rem 2rem; - animation: navbar 1s ease-in; + animation: aside-on 250ms ease-in; border-right: 2rem solid rgba(120, 120, 125, 0.85); box-shadow: 0.1rem 0.2rem 0.3rem black; } @@ -130,11 +306,12 @@ body { padding: 1rem; } } - +*/ >footer { - position: fixed; + position: relative; bottom: 0; border-top: 1rem; + margin-top: 5rem; } } @@ -297,3 +474,24 @@ body > footer { } } } + +@keyframes aside-off { + from { + width: 0; + margin-left: 0; + } + to { + width: 92rem; + margin-left: -90rem; + } +} +@keyframes aside-on { + from { + width: 92rem; + margin-left: -90rem; + } + to { + width: 20rem; + margin-left: 0; + } +} |