| /* |
| Created on : 05.08.2016, 17:11:56 |
| Author : Chris |
| */ |
| |
| $default-color: #fff; |
| $primary-color: #4181c1; |
| $secondary-color: #ebebeb; |
| $alternative-color: #272727; |
| |
| $symbolic-color-php: #6c7eb7; // PHP |
| $symbolic-color-html5: #e44d26; // HTML5 |
| $symbolic-color-css3: #016fba; // CSS3 |
| $symbolic-color-less: #2b4e85; // LESS |
| $symbolic-color-sass: #cf649a; // SASS |
| $symbolic-color-markdown: #000; // MarkDown |
| $symbolic-color-ftl: #444; // FTL |
| $symbolic-color-json: #1984a4; // JSON |
| $symbolic-color-jsx: #333; // JSX |
| $symbolic-color-ini: #ff6600; // Ini |
| $symbolic-color-js: #d6ba33; // JS |
| $symbolic-color-java: #e00024; // JAVA |
| $symbolic-color-sql: #444; // SQL |
| $symbolic-color-cpp: #348ab9; // CPP |
| $symbolic-color-xml: #666; // XML |
| $symbolic-color-jade: #47c17b; // JADE |
| $symbolic-color-twig: #899914; // Twig |
| $symbolic-color-groovy: #6398aa; // Groovy |
| $symbolic-color-yaml: #888; // Yaml |
| |
| $symbolic-color-fb: #3b5998; // fb |
| $symbolic-color-twitter: #1da1f2; // twitter |
| $symbolic-color-plus: #db4437; // plus |
| $symbolic-color-slack: #766fba; // slack |
| $symbolic-color-youtube: #e62117; // youtube |
| |
| |
| // Sizes |
| $small: 768px; |
| $medium: 1024px; |
| $large: 1260px; |
| |
| $headerHeight: 50px; |
| |
| @mixin margin-bottom-reset() { |
| margin: 0; |
| padding: 0; |
| } |
| |
| @mixin fullWidth() { |
| width: 100%; |
| margin: 0 auto; |
| box-sizing: border-box; |
| } |
| |
| @mixin box-shadow($rotated: 1) { |
| box-shadow: 0 3px * $rotated 4px 0 rgba(0, 0, 0, .12), 0 1px * $rotated 2px 0 rgba(0, 0, 0, .24); |
| } |
| |
| @mixin box-shadow-active($rotated: 1) { |
| box-shadow: 0 6px * $rotated 7px 0 rgba(0, 0, 0, .2), 0 1px 10px * $rotated 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); |
| } |
| |
| @mixin text-shadow($rotated: 1) { |
| text-shadow: 0 3px 4px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); |
| } |
| |
| @mixin inner-fullwidth() { |
| @include fullWidth(); |
| padding: 35px 15px; |
| max-width: 1200px; |
| } |
| |
| @font-face { |
| font-family: 'PulsIcons'; |
| src: url('../fonts/puls.ttf') format('truetype'), |
| url('../fonts/puls.woff') format('woff'), |
| url('../fonts/puls.svg') format('svg'); |
| } |
| |
| @keyframes show-hide-ripple { |
| from { |
| transform: scale(0); |
| opacity: .5; |
| } |
| to { |
| transform: scale(30); |
| opacity: 0; |
| } |
| } |
| |
| body { |
| @include margin-bottom-reset(); |
| |
| font-family: 'Open Sans', sans-serif; |
| line-height: 24px; |
| size: 16px; |
| color: #333; |
| font-weight: 300; |
| width: 100%; |
| |
| ul, ol, li, h1, h2, h3, p, div, img { |
| @include margin-bottom-reset(); |
| } |
| |
| h1, h2, h3 { |
| margin-bottom: 10px; |
| } |
| |
| a { |
| color: $alternative-color; |
| text-decoration: none; |
| |
| &.external { |
| text-decoration: underline; |
| font-weight: bold; |
| } |
| |
| &.no-deco { |
| color: white; |
| } |
| } |
| |
| .alternative-color { |
| a:not(.next-section) { |
| color: lighten($primary-color, 15%); |
| } |
| } |
| |
| .with-icon { |
| &:after { |
| font-family: 'PulsIcons'; |
| } |
| } |
| |
| img { |
| max-width: 100%; |
| width: 100%; |
| display: block; |
| } |
| |
| ul { |
| list-style: none; |
| margin-left: 0; |
| } |
| |
| header, footer { |
| @include margin-bottom-reset(); |
| @include fullWidth(); |
| } |
| |
| header { |
| position: fixed; |
| height: $headerHeight; |
| color: $secondary-color; |
| background-color: transparent; |
| transition: background-color 500ms ease; |
| z-index: 1; |
| user-select: none; |
| -webkit-user-select: none; |
| |
| .inner { |
| padding-top: 0; |
| padding-bottom: 0; |
| height: 100%; |
| |
| nav { |
| align-items: flex-start; |
| display: flex; |
| flex: 1; |
| |
| #burger-menu { |
| min-width: 30px; |
| max-width: 30px; |
| height: 25px; |
| position: relative; |
| z-index: 1; |
| align-self: center; |
| |
| > div { |
| border: 2px solid $alternative-color; |
| transition: all 300ms ease-out; |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 10px; |
| |
| &:first-child { |
| top: 0px; |
| } |
| |
| &:last-child { |
| top: 20px; |
| } |
| } |
| } |
| |
| ul { |
| background-color: rgba(0, 0, 0, .9); |
| display: block; |
| height: 10000%; |
| left: 0; |
| min-width: 150px; |
| padding-top: $headerHeight + 25; |
| width: 60%; |
| position: absolute; |
| transform: translate3d(-700px, 0, 0); |
| transition: transform 300ms ease-out; |
| |
| li { |
| display: block; |
| margin-bottom: 5px; |
| |
| .nav-link { |
| color: inherit; |
| display: block; |
| padding: 5px 20px; |
| transition: color 200ms ease-in; |
| |
| &.active { |
| color: $primary-color; |
| } |
| } |
| } |
| } |
| } |
| |
| #logo { |
| align-self: center; |
| color: $primary-color; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| |
| img { |
| width: 75px; |
| margin-right: -1em; |
| } |
| |
| div { |
| align-content: center; |
| align-items: center; |
| } |
| } |
| } |
| |
| .search { |
| color: $alternative-color; |
| align-self: center; |
| font-size: 125%; |
| margin: 0 .25em; |
| |
| &:after { |
| content: '\f002'; |
| } |
| |
| &:hover { |
| cursor: pointer; |
| } |
| } |
| |
| .search-field { |
| @include inner-fullwidth(); |
| @include box-shadow(); |
| |
| display: flex; |
| padding: 0; |
| height: 0; |
| overflow: hidden; |
| transition: height 200ms ease-out; |
| position: absolute; |
| right: 0; |
| |
| input[type="text"] { |
| outline: 0; |
| padding: .25em; |
| font-size: 120%; |
| flex: 1 0 80%; |
| } |
| |
| button { |
| margin: 0; |
| flex: 1 0 5%; |
| align-self: auto; |
| background-color: $alternative-color; |
| color: $secondary-color; |
| border: 0; |
| } |
| |
| &.active { |
| height: 40px; |
| } |
| |
| @media (min-width: 600px) { |
| max-width: 600px; |
| margin: 0; |
| } |
| |
| @media (min-width: $small) { |
| right: 8em; |
| } |
| } |
| |
| &.active { |
| background-color: lighten($alternative-color, 75%); |
| box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .12), |
| 0 1px 2px 0 rgba(0, 0, 0, .24); |
| } |
| } |
| |
| main { |
| |
| article { |
| text-align: center; |
| position: relative; |
| padding-top: $headerHeight; |
| max-width: 80%; |
| } |
| |
| section { |
| position: relative; |
| padding-top: $headerHeight; |
| height: 100vh; |
| |
| .next-section { |
| @include box-shadow(-1); |
| |
| position: absolute; |
| bottom: .75em; |
| left: 50%; |
| margin-left: -25px; |
| line-height: 1; |
| color: $secondary-color; |
| font-size: 175%; |
| padding: .5em .7em; |
| line-height: 1; |
| border-radius: 50%; |
| background-color: rgba(0, 0, 0, .3); |
| border: 1px solid $secondary-color; |
| transform: rotate3d(1, 0, 0, 180deg); |
| text-shadow: 0 0 4px rgba(0, 0, 0, 1); |
| transition: text-shadow 500ms ease-out, box-shadow 250ms ease-out; |
| |
| &:after { |
| font-family: 'PulsIcons'; |
| content: '\f102'; |
| } |
| |
| &:hover { |
| cursor: pointer; |
| } |
| |
| &:active { |
| text-shadow: 0 -1px 6px rgba(0, 0, 0, 1); |
| box-shadow: 0 -6px 7px 0 rgba(0, 0, 0, .2), 0 -1px 10px 0 rgba(0, 0, 0, .12), 0 -2px 4px -1px rgba(0, 0, 0, .2); |
| } |
| } |
| |
| .languages, .technologies { |
| display: flex; |
| flex-direction: row; |
| max-width: 640px; |
| margin: 2em auto; |
| overflow-x: scroll; |
| |
| > li { |
| display: flex; |
| } |
| |
| @media(min-width: $small) { |
| flex-wrap: wrap; |
| justify-content: space-between; |
| overflow-x: hidden; |
| } |
| } |
| |
| .languages { |
| align-content: center; |
| |
| > li { |
| .php { |
| background-color: $symbolic-color-php; |
| } |
| |
| .js { |
| background-color: $symbolic-color-js; |
| } |
| |
| .java { |
| background-color: $symbolic-color-java; |
| } |
| |
| .groovy { |
| background-color: $symbolic-color-groovy; |
| } |
| |
| .html5 { |
| background-color: $symbolic-color-html5; |
| } |
| |
| .css3 { |
| background-color: $symbolic-color-css3; |
| } |
| |
| .less { |
| background-color: $symbolic-color-less; |
| } |
| |
| .sass { |
| background-color: $symbolic-color-sass; |
| } |
| |
| .ftl { |
| background-color: $symbolic-color-ftl; |
| } |
| |
| .json { |
| background-color: $symbolic-color-json; |
| } |
| |
| .jsx { |
| background-color: $symbolic-color-jsx; |
| } |
| |
| .ini { |
| background-color: $symbolic-color-ini; |
| } |
| |
| .markdown { |
| background-color: $symbolic-color-markdown; |
| } |
| |
| .jade { |
| background-color: $symbolic-color-jade; |
| } |
| |
| .twig { |
| background-color: $symbolic-color-twig; |
| } |
| |
| .sql { |
| background-color: $symbolic-color-sql; |
| } |
| |
| .yaml { |
| background-color: $symbolic-color-yaml; |
| } |
| |
| .cpp { |
| background-color: $symbolic-color-cpp; |
| } |
| |
| .xml { |
| background-color: $symbolic-color-xml; |
| } |
| } |
| } |
| |
| .technologies { |
| max-width: 795px; |
| |
| > li { |
| max-width: 85px; |
| text-align: center; |
| margin: .5em; |
| font-weight: bold; |
| font-size: 70%; |
| display: inline-table; |
| |
| .name { |
| display: none; |
| } |
| |
| @media(min-width: $small) { |
| .name { |
| display: block; |
| } |
| } |
| } |
| } |
| |
| &:not(.banner) { |
| height: auto; |
| |
| p { |
| text-align: center; |
| } |
| |
| @media(min-width: $small) { |
| height: auto; |
| } |
| } |
| |
| &#languages { |
| height: auto; |
| |
| .inner { |
| height: 100%; |
| padding-bottom: 6em; |
| } |
| } |
| |
| &#plugins { |
| .inner { |
| padding-bottom: 6em; |
| } |
| } |
| } |
| } |
| |
| footer { |
| background: #fff; |
| box-sizing: border-box; |
| |
| .back-to-top { |
| @include box-shadow(); |
| |
| position: fixed; |
| padding: .5em .7em; |
| line-height: 1; |
| bottom: .75em; |
| right: .75em; |
| background-color: $primary-color; |
| border-radius: 50%; |
| transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out; |
| color: $secondary-color; |
| opacity: 0; |
| visibility: hidden; |
| font-size: 150%; |
| |
| &:after { |
| content: '\f102'; |
| } |
| |
| &:hover { |
| cursor: pointer; |
| } |
| |
| &:active { |
| @include box-shadow-active(); |
| } |
| } |
| |
| .social-links { |
| display: flex; |
| |
| > li { |
| display: flex; |
| |
| a { |
| width: 50px; |
| height: 50px; |
| line-height: 50px; |
| color: white; |
| font-size: 130%; |
| margin: .25em; |
| transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out; |
| |
| &:active { |
| @include box-shadow-active(); |
| } |
| } |
| |
| .fb { |
| background-color: $symbolic-color-fb; |
| |
| &:after { |
| content: '\f09a'; |
| } |
| } |
| .twitter { |
| background-color: $symbolic-color-twitter; |
| |
| &:after { |
| content: '\f099'; |
| } |
| } |
| .plus { |
| background-color: $symbolic-color-plus; |
| |
| &:after { |
| content: '\ea8b'; |
| } |
| } |
| .slack { |
| background-color: $symbolic-color-slack; |
| |
| &:after { |
| content: '\f198'; |
| } |
| } |
| .youtube { |
| background-color: $symbolic-color-youtube; |
| |
| &:after { |
| content: '\ea9d'; |
| } |
| } |
| } |
| } |
| |
| .disc { |
| margin: 1em; |
| } |
| } |
| |
| .circle { |
| @include box-shadow(); |
| @include text-shadow(); |
| |
| border-radius: 50%; |
| font-weight: bold; |
| font-size: 100%; |
| background-color: black; |
| width: 75px; |
| height: 75px; |
| line-height: 75px; |
| margin: .5em; |
| text-align: center; |
| flex: 1 0 50%; |
| |
| &.small { |
| font-size: 80%; |
| line-height: 3; |
| } |
| |
| &.tech { |
| max-width: 100%; |
| max-height: 100%; |
| margin: 0; |
| background-color: transparent; |
| box-shadow: none; |
| } |
| } |
| |
| .download-links { |
| margin-top: .5em; |
| font-weight: bold; |
| font-size: 90%; |
| display: flex; |
| justify-content: center; |
| |
| a { |
| @include box-shadow(); |
| |
| padding: 1em; |
| white-space: nowrap; |
| color: white; |
| background-color: orangered; |
| cursor: pointer; |
| border-radius: 2px; |
| transition: box-shadow 250ms ease-out; |
| margin: 0; |
| |
| &:active { |
| @include box-shadow-active(); |
| } |
| } |
| } |
| |
| &.scrolled { |
| footer { |
| .back-to-top { |
| visibility: visible; |
| opacity: 1; |
| } |
| } |
| } |
| |
| &.active { |
| .clickable-background { |
| bottom: 0; |
| display: block; |
| left: 0; |
| opacity: .5; |
| position: absolute; |
| right: 0; |
| top: $headerHeight; |
| background-color: rgba(0, 0, 0, 1); |
| z-index: 1; |
| } |
| |
| header { |
| nav { |
| #burger-menu { |
| > div { |
| border: 2px solid #ccc; |
| |
| &:first-child { |
| transform: rotate3d(0, 0, 1, 45deg); |
| top: 10px; |
| } |
| |
| &:nth-child(2n) { |
| opacity: 0; |
| } |
| |
| &:last-child { |
| transform: rotate3d(0, 0, 1, -45deg); |
| top: 10px; |
| } |
| } |
| } |
| |
| ul { |
| transform: translate3d(0, 0, 0); |
| } |
| } |
| } |
| } |
| |
| .primary-color { |
| background-color: $primary-color; |
| color: #fff; |
| } |
| |
| .secondary-color { |
| background-color: $secondary-color; |
| } |
| |
| .default-color { |
| background-color: $default-color; |
| } |
| |
| .alternative-color { |
| background-color: $alternative-color; |
| color: #ddd; |
| } |
| |
| .ripple-btn { |
| } |
| |
| .inner { |
| @include inner-fullwidth(); |
| padding-bottom: 80px; |
| |
| @media(min-width: $small) { |
| padding-bottom: 50px; |
| } |
| } |
| |
| .flex-container { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| |
| @media(min-width: $medium) { |
| flex-wrap: wrap; |
| |
| > * { |
| flex: 1; |
| } |
| } |
| } |
| |
| .flex-container-small { |
| display: flex; |
| justify-content: space-between; |
| |
| > * { |
| } |
| } |
| |
| .font-light { |
| color: lighten($alternative-color, 2%); |
| } |
| |
| .left { |
| text-align: left; |
| } |
| |
| .center { |
| text-align: center; |
| } |
| |
| .right { |
| text-align: right; |
| } |
| |
| .title-img { |
| width: 100%; |
| height: 107%; |
| position: absolute; |
| z-index: -2; |
| background-color: #eee; |
| |
| .img-wrapper { |
| position: absolute; |
| left: 1em; |
| right: 1em; |
| bottom: 0; |
| |
| img { |
| position: absolute; |
| bottom: -3em; |
| left: 0; |
| right: 0; |
| margin: 0 auto; |
| box-sizing: border-box; |
| display: none; |
| box-shadow: 0px -2px 12px 3px lighten($alternative-color, 60%); |
| |
| @media(min-device-width: 600px) and (max-device-width: 800px) { |
| @media (min-height: 400px) and (orientation: portrait) { |
| max-width: 768px; |
| display: block; |
| bottom: 20em; |
| } |
| } |
| |
| @media(min-width: 650px) { |
| @media (min-height: 425px) { |
| max-width: 768px; |
| display: block; |
| } |
| } |
| |
| @media(min-width: 810px) { |
| @media (min-height: 500px) { |
| max-width: 760px; |
| bottom: -3em; |
| } |
| |
| @media (min-height: 700px) { |
| max-width: 850px; |
| } |
| |
| @media (min-height: 850px) { |
| max-width: 1200px; |
| } |
| } |
| } |
| } |
| } |
| |
| .banner { |
| text-align: center; |
| box-sizing: border-box; |
| |
| .inner { |
| height: auto; |
| padding: 3vh 15px; |
| color: $alternative-color; |
| justify-content: flex-start; |
| |
| &.flex-container-small { |
| flex-direction: column; |
| align-items: center; |
| |
| .desc { |
| max-width: 500px; |
| margin-top: 2em; |
| } |
| |
| .headline-with-downloads { |
| .download-links a { |
| &:last-child { |
| display: none; |
| } |
| } |
| } |
| |
| /* Phone Landscape */ |
| @media screen and (min-width: 500px) |
| and (min-height: 320px) |
| and (orientation: landscape) { |
| flex-direction: row-reverse; |
| align-items: flex-start; |
| justify-content: center; |
| |
| .desc { |
| margin-right: 1em; |
| margin-top: 0; |
| } |
| } |
| } |
| |
| .slogan { |
| color: inherit; |
| display: inline-block; |
| padding: 25px; |
| margin-bottom: 1em; |
| background: rgba(255, 255, 255, .7); |
| |
| h1 { |
| font-weight: 800; |
| box-sizing: border-box; |
| color: $primary-color; |
| text-shadow: 1px 1px 2px lighten($primary-color, 25%); |
| white-space: nowrap; |
| } |
| } |
| |
| p { |
| text-align: justify; |
| |
| &:not(:last-child) { |
| margin-bottom: 1em; |
| } |
| } |
| |
| |
| @media(min-width: $small) { |
| padding: 10vh 15px; |
| |
| &.flex-container-small { |
| flex-direction: row-reverse; |
| justify-content: center; |
| align-items: stretch; |
| |
| .headline-with-downloads { |
| display: flex; |
| flex-direction: column; |
| |
| .download-links a { |
| &:first-child { |
| margin-right: .5em; |
| } |
| |
| &:last-child { |
| display: block; |
| } |
| } |
| } |
| |
| .slogan { |
| max-width: 300px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| .desc { |
| margin-right: 1em; |
| margin-top: 0; |
| } |
| } |
| } |
| } |
| |
| /* Portrait Nexus 7 */ |
| @media only screen |
| and (min-device-width: 600px) |
| and (max-device-width: 960px) |
| and (orientation: portrait) |
| and (-webkit-min-device-pixel-ratio: 1) { |
| height: 70vh; |
| } |
| } |
| |
| @media(min-width: $medium) { |
| header { |
| .inner { |
| nav { |
| flex: 2; |
| |
| #burger-menu { |
| display: none; |
| } |
| |
| ul { |
| @include margin-bottom-reset(); |
| |
| display: flex; |
| background: none; |
| transform: translate3d(0, 0, 0); |
| height: auto; |
| position: static; |
| margin-top: 0; |
| width: auto; |
| |
| li { |
| margin: 0 2.5em 0 0; |
| padding: 0; |
| cursor: pointer; |
| white-space: nowrap; |
| color: $alternative-color; |
| |
| .nav-link { |
| padding: 1em 0; |
| |
| &:hover { |
| color: $primary-color; |
| } |
| } |
| |
| &:last-child { |
| margin-right: 0; |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
