diff options
author | Your Name <you@example.com> | 2017-12-26 15:54:59 +0100 |
---|---|---|
committer | Your Name <you@example.com> | 2017-12-26 15:54:59 +0100 |
commit | fdcb6c8829a460bcc612de68676f822c045bd8b7 (patch) | |
tree | 4fe10e369a4b5b8211fe492cb7fdf679151154ef /assets/css/screen.css | |
parent | cdd0b1e440fcb06b898b2522dd1ad9f28e88d044 (diff) | |
download | lesoiseaux.io-fdcb6c8829a460bcc612de68676f822c045bd8b7.tar.gz |
Update assets
Diffstat (limited to 'assets/css/screen.css')
-rw-r--r-- | assets/css/screen.css | 403 |
1 files changed, 0 insertions, 403 deletions
diff --git a/assets/css/screen.css b/assets/css/screen.css deleted file mode 100644 index d17af98..0000000 --- a/assets/css/screen.css +++ /dev/null @@ -1,403 +0,0 @@ -html[lang='en'] :lang(fr) { - display: none; -} -html[lang='fr'] :lang(en) { - display: none; -} - -:lang(en) { - quotes: '\201C' '\201D' '\2018' '\2019'; -} -:lang(fr) { - quotes: '« ' ' »'; -} - -h1, h2, h3, h4, h5, h6 { - font-family: 'Cormorant Garamond', serif; -} - -body { - background: rgba(173, 151, 56, 0.68); - color: #f3f0e4; - font-family: Abel, 'Open Sans', sans-serif; -} - -body > header { - background-color: rgba(109, 78, 128, 1); - position: fixed; - right: 5vw; - bottom: -2vh; - left: 5vw; - z-index: 999; - font-size: 1.2rem; - color: rgba(255, 255, 255, 0.85); -} - -body > header :link, -body > header :visited, -header > footer :link, -header > footer :visited { -/* color: #DCCD85; */ - color: rgba(220, 201, 133, 1); - text-decoration: none; -} - -body :visited { - text-decoration: underline; -} - -body > header h1 { - text-align: center; - margin: 0; - font-family: 'Cormorant Garamond', serif; -/* font-size: 2.8rem; */ - font-size: 7vh; - transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); -} - -body > header h1 img { - display: none; - vertical-align: -1.6rem; -} - -body > header section { - display: none; - max-width: 42rem; - margin: 0 auto; - padding-bottom: 7rem; -} - -body > header footer { - background-color: rgba(109, 78, 128, 1); - display: none; - font-size: 1rem; -} -body > header footer > p { - text-align: center; - margin: 4rem auto 2rem auto; -} -body > header footer > nav { - max-width: 42rem; - margin: 0 auto -3.5rem auto; - padding: 0; -} -footer > nav ul { - display: inline-block; - margin: 0; - padding: 0; - list-style: none; -} -footer > nav li { - display: inline-block; - margin: 0 0.75rem; - width: 4rem; - height: 3rem; - border: 1px solid; - border-bottom: 3px solid; - border-color: transparent; - border-top-right-radius: 0.5rem; - text-align: center; -} -footer > nav li a { - position: relative; - display: block; - width: 100%; - height: 100%; - line-height: 3rem; - margin: 0; - padding: 0; - background: rgba(0,0,0,0.25); - border-top-right-radius: 0.5rem; -} -footer > nav li:hover { - border-color: rgba(220, 201, 133, 1); -} -footer > nav li:hover a { - font-weight: bold; - background: rgba(0,0,0,0.5); -} - -body > header:hover { - top: 5vh; -} -body > header:hover h1 { - font-size: 2.6rem; -/* transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); - transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); */ - transform: rotate(2.7deg) translate(0, 0) skewX(0); -} - -body > header:hover img { - display: inline-block; -} -body > header:hover section, -body > header:hover footer { - display: block; - width: 80vw; - margin: 0 auto; - padding-bottom: 3rem; -} - -body > main { - background: url(../img/logo-ps.svg) 40% calc(50% - 5vh) / 50vw no-repeat fixed; - position: fixed; - top: 0; - right: 0; - bottom: 50%; - left: 0; - padding: 1rem; - min-height: 80vh; -} - -header > footer { - z-index: 999; - position: fixed; - bottom: 0; - left: 0; - right: 0; - display: none; -} - -header > footer > nav { - display:none; -} - -header > footer h4 { - display: inline-block; -} - -header > footer:hover nav { - display: block; -} -/** - * Copyleft magic - **/ -header > footer:hover > p > span:first-child { - display: inline-block; - color: transparent; - line-height: 0; -} -header > footer:hover > p > span:first-child:before { - content: 'Copyleft'; - display: block; - color: #f3f0e4; - padding-right: 0.4rem; -} -header > footer:hover > p > span + span { - display: inline-block; - transform: rotate(180deg); - padding-bottom: -0.05rem; -} - -@media screen and (min-device-width: 1024px) { - -/** - * Scrollbar - * - * ::-webkit-scrollbar the background of the bar itself. - * ::-webkit-scrollbar-button the directional buttons on the scrollbar. - * ::-webkit-scrollbar-track the empty space “below” the progress bar. - * ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb. - * ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element. - * ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet. - * ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements. - **/ - - body > header::-webkit-scrollbar { - background-color: rgba(109, 78, 128, 1); - box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4) inset; - } - body > header::-webkit-scrollbar-button { - background-color: black; - } - body > header::-webkit-scrollbar-track { - background-color: rgba(0, 0, 0, 0.5); - } - body > header::-webkit-scrollbar-track-piece { - background-color: rgba(255, 255, 255, 0.5); - } - body > header::-webkit-scrollbar-thumb { - background-color: rgba(220, 201, 133, 1); - box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); - } - body > header::-webkit-scrollbar-corner { - background-color: red; - } - body > header { - padding: 1rem; - overflow: auto; - transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); - } - body > header:hover { - min-height: 1000px; - overflow-y: scroll; - } - - - - body > header:hover ~ footer { - position: fixed; - bottom: 0; - display: block; - } - - body > header:hover ~ footer > nav { - display: block; - } - - .media, .libre { - display: block; - position: absolute; - top: 0; - bottom: 5rem; - height: 100vh; -/* overflow: hidden; */ - } - - .media:hover { - width: 70vw; - z-index: 500; - } - .media h2, .libre h2 { - display: none; - } - - .media { - left: 0; - } - - .media section { - float: left; - position: relative; -/* border: 1px solid black; */ - height: 100%; - width: 15vw; - top: -5vh; - left: 0; - padding-top: 5vh; - padding-left: 1rem; - z-index: 400; - overflow: hidden; - } - .media section h3 { - font-size: 5rem; - color: rgba(0,0,0,0.2); - } - .media section:hover { - box-shadow: 0px -2px 4px 2px rgba(0, 0, 0, 0.68) inset; - transform: rotate(0deg); - width: 40vw; -/* max-width: 42rem; */ - z-index: 500; - } - .media section:hover h3 { - color: rgba(0, 0, 0, 1); - } - - .media #gfx { - background: rgba(191, 138, 112,0.7); - transform: rotate(-4deg); - margin: 0 -5vw 0 -2vw; - left: 0; - } - .media #gfx h3 { - transform: rotate(4deg) translateX(1vw); - font-size: 5rem; - } - .media #gfx:hover { - background: rgba(191, 138, 112, 0.9); - transform: rotate(0); - margin: 0; - } - .media #gfx:hover h3 { - transform: rotate(0) translateX(0) translateY(-4rem); - } - .media #gfx:hover + #txt { - margin-left: -3vw; - } - - .media #txt { - background: rgba(166, 191, 112, 0.7); - transform: rotate(6deg); - margin: 0 -3vw 0 0; - } - .media #txt h3 { - transform: rotate(-6deg) translateX(-3vw) translateY(-0.1rem); - } - .media #txt:hover { - background: rgba(166, 191, 112, 0.9); - transform: rotate(0); - margin: 0; - } - .media #txt:hover h3 { - transform: rotate(0) translateX(0) translateY(-4.1rem); - } - - .media #vdo { - left: 0; - background: rgba(112, 166, 191, 0.5); - transform: rotate(-5deg); - margin: 0 0 0 -2vw; - width: 10vw; - } - .media #vdo:hover { - background: rgba(112, 166, 191, 0.9); - margin: 0; - transform: rotate(0); - width: 40vw; - } - .media #vdo h3 { - transform: rotate(5deg) translateX(-2vw); - } - .media #vdo:hover h3 { - transform: rotate(0) translateX(0) translateY(-4rem); - } - - .libre { - right: 0; - width: 32vw; - } - .libre > section h3 { - color: rgba(109, 78, 128, 1); - font-size: 7vh; - margin: 0; - padding: 0; - } - .libre > section p { - color: rgba(0, 0, 0, 0.7); - font-size: 4.9vh; - margin: 0; - } - .libre > section h3 a { - color: rgba(109, 78, 128, 1); - text-decoration: none; - } - - .libre #participation { -/* transform: rotate(-4deg) translateY(4.5rem); */ - transform: rotate(-4deg) translateY(6vh); - } - .libre #engagement { -/* transform: translate(0.5rem, 7rem); */ - transform: translate(0.5vw, 14vh); - } - .libre #cooperation { -/* transform: rotate(2deg) translate(0rem, 9.8rem); */ - transform: rotate(2deg) translate(0rem, 19.5vh); - } - -} - -@media screen and (max-device-width: 1023px) { - - body > header h1 { - font-size: 10rem; - margin: 5rem auto; - width: 80% - } - - body > main { - background: url(../img/logo-ps.svg) center calc(92% - 50vh) / contain no-repeat fixed; - } - -} |