diff options
Diffstat (limited to 'assets/scss/www.scss')
| -rwxr-xr-x | assets/scss/www.scss | 294 |
1 files changed, 294 insertions, 0 deletions
diff --git a/assets/scss/www.scss b/assets/scss/www.scss new file mode 100755 index 0000000..6553fe7 --- /dev/null +++ b/assets/scss/www.scss @@ -0,0 +1,294 @@ +/** + * Dyne:BXL screen stylesheet +**/ + +$header-height: 3rem; +$serif: 'Cormorant Garamond', serif; +$sans-serif: 'Open Sans', sans-serif; + +@import 'normalize'; +@import 'skeleton'; + +h1,h2,h3,h4,h5,h6 { + font-family: $serif; + font-weight: 600; +} + +body { + font-family: $sans-serif; + font-size: 1em; /* No rem here, bug workaround */ + background-color: rgba(240,240,242,1); + color: rgba(9,8,7,1); + + >header { + position: fixed; + z-index: 999; + background-color: rgba(120,120,125,0.85); + width: 100%; + height: $header-height; + overflow: hidden; + box-shadow: 0.1rem 0.2rem 0.3rem rgba(0,0,0,1); + /* Rotate a bit */ + transform: rotate(-1.75deg); + top: -2.5rem; + left: -1rem; + + h1 { + transform: rotate(1.75deg); + font-weight: bold; + font-size: 2rem; + padding: 2.8rem 3rem 2rem 2rem; + } + + p.lead { + display:none; + } + + &:focus, + &:hover { + background-color: rgba(90,90,90,0.95); + overflow: none; + height: auto; + transform: rotate(0); + top: 0; + left: 0; + padding: 1rem; + + h1 { + display: none; + } + + 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); + } + } + } + + :target { + padding-top: $header-height; + } + + >main { + margin: 0 auto; + width: 85%; + max-width: 96rem; + padding-top: $header-height + 1rem; + background-color: inherit; + + >article { + z-index: 20; + + svg { + margin: 0 auto; + padding: 0; + overflow: hidden; + position: fixed; + display: block; + left: 0; + height: 20rem; + top: calc(50% - 100px); + margin-top: calc(- 105px); + } + } + } + + >aside { + position: fixed; + display: block; + left: 0; + width: 92rem; + height: 20rem; + top: 50%; + margin-top: -10rem; + margin-left: -90rem; + background: url(../img/aside-off.png) right center no-repeat,rgba(30, 174, 219, 0.9) ; + + &: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; + border-right: 2rem solid rgba(120, 120, 125, 0.85); + box-shadow: 0.1rem 0.2rem 0.3rem black; + } + + ul { + font-size: 2rem; + list-style: none; + font-family: 'Cormorant Garamond', serif; + font-weight: 700; + margin: 0; + padding: 1rem; + } + } + + >footer { + position: fixed; + bottom: 0; + border-top: 1rem; + } +} + +article { + font-size: 1.6rem; + max-width: 60rem; + margin: 0 auto; + + p { + margin: 0 3% 2.5rem 3%; + max-width: 42rem; + font-size: 105%; + text-align: justify; + } +} + +div.map { + position: fixed; + top: 0; + right: 0; + bottom: 0; + height: 100%; + width: auto; + min-width: 50rem; + max-width: 50%; + z-index: 5; + + &:hover { + max-width: 90%; + } +} + + +@-webkit-keyframes navbar, +@keyframes navbar { + + from { margin-left: -100rem; } + to { margin-lefT: 0; } + +} + + +@media screen and (max-width: 1024px) { + body > header { + width: 110%; + height: $header-height * 1.5; + + &:focus, + &:hover { + width: 100%; + padding-right: 4rem; + } + } + + iframe[src*="openstreetmap."] { + width: auto; + min-width: 2rem; + max-width: 50%; + } +} + +.DB { + font-family: 'Open Sans', sans-serif; + font-weight: bold; +} + +body.article main > article h2 + h3 { + font-size: 3.2rem; + font-style: italic; + font-weight: normal; + margin-top: -3rem; +} + +blockquote { + font-family: $serif; + font-size: 2.4rem; + font-style: italic; +} + +body>header>nav { + + ul { + display: inline-flex; + font-size: 1.8rem; + list-style: none; + margin: 0 auto; + width: 100%; + } + + li { + text-align: center; + width: 11%; + + a { + color: white; + } + + .current { + font-size: 125%; + + } + } + +} + +body.people { + + figure { + display: inline-block; + + img { + max-width: 20rem; + } + + p { + margin: 0; + padding: 0; + } + } +} + +.player path { + opacity: 0.5; +} + +/** + * Copyleft magic + **/ +body > footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: block; + width: 80vw; + margin: 0 auto; + padding-bottom: 3rem; + + &:hover > p { + > span:first-child { + display: inline-block; + color: transparent; + line-height: 0; + } + > span:first-child:before { + content: 'Copyleft'; + display: block; + color: black; + padding-right: 0.4rem; + } + > span + span { + display: inline-block; + transform: rotate(180deg); + padding-bottom: -0.05rem; + } + } +} |