Repository: incubator-netbeans-website Updated Branches: refs/heads/develop [created] 70185ed9a
http://git-wip-us.apache.org/repos/asf/incubator-netbeans-website/blob/70185ed9/styles/onepager.scss ---------------------------------------------------------------------- diff --git a/styles/onepager.scss b/styles/onepager.scss new file mode 100644 index 0000000..9faaac9 --- /dev/null +++ b/styles/onepager.scss @@ -0,0 +1,991 @@ +/* + 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 { + 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'; + } + } + } + } + } + + .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; + } + } + } + } + } + } + + body { + .nav-link:hover { + color: #222; + border-bottom: 2px solid; + } + } + } +} \ No newline at end of file
