/* * Proměnné */ @greyText: #eee; @black: #000; @white: #fff; @red: #ff0000; @leftSideForm: #272727; @bottomSideForm: #161616; /* Velikost fontu */ @defaultFontSize: 16; @em: @defaultFontSize * 1em; .font-size(@pxValue) { @remValue: @pxValue / @defaultFontSize; font-size: ~"@{pxValue}px"; font-size: ~"@{remValue}rem"; } .px-rem(@property; @sizeValue) { @pxValue: @sizeValue; @remValue: (@sizeValue / @defaultFontSize); @{property}: ~"@{pxValue}px"; @{property}: ~"@{remValue}rem"; } /* * Základní struktura */ html, body { height: 100%; font-family: 'Oswald', sans-serif; font-weight: 300; line-height: 1.8; word-wrap: break-word; overflow: hidden; font-size: 100%; } body { background: #fff url('/images/bg.jpg') fixed center center; color: #fff; -webkit-font-smoothing: subpixel-antialiased; font-size: 1rem; text-align: center; text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); background-size: cover; } .content-scrollbar { overflow-y: scroll; //width: 100%; height: 100%; height: 100vh; .px-rem(margin-right,-17); } /* Odkazy */ a, a:focus, a:hover { color: #fff; } /* České uvozovky */ h1 + blockquote, .cover-heading blockquote { quotes: '\201E' '\201C'; &:before { content: open-quote; .px-rem(padding-right,1); } &:after { content: close-quote; .px-rem(padding-left,1); } } .site-wrapper-inner { vertical-align: top; position: relative; z-index: 4; } .cover-container { margin-right: auto; margin-left: auto; overflow: visible; } /* * Vnitřní obal obsahu */ .cover { padding: 15px; position: relative; overflow: visible; .btn-lg { padding: .75rem 1.25rem; } @media (max-width: (991/@em)) { .px-rem(padding-right,15); .px-rem(padding-left,15); } } /* * Footer */ .footer { color: rgba(255, 255, 255, .5); font-weight: lighter; font-style: italic; color: #fff; .font-size(14); float: left; margin: 0; width: 100%; .px-rem(padding-bottom,35); &.fixed { position: fixed; left: 0; padding-bottom: 0; padding-top: 0; .px-rem(bottom,35); } p { margin-bottom: 0; text-align: center; } } @media (min-width: 40em) { .site-wrapper-inner { vertical-align: top; //.px-rem(padding-top,60); &.loaded .cover { .px-rem(padding-top,60); } } .masthead, .footer, .cover-container { width: 100%; } } @media (min-width: 48em) { .masthead-brand { float: left; } .nav-masthead { float: right; } } @media (min-width: 62em) { .bottom, .masthead, .cover-container { width: 50rem; } .extra-big { width: 120%; margin-left: -10%; } } @media (min-width: 72em) { .bottom, .masthead, .cover-container { width: 50rem; } .extra-big { width: 144%; margin-left: -22%; } } @media only screen and (max-height: (800/@em)) and (min-width: 72em) { .extra-big { width: 130%; margin-left: -15%; } } .header-wrapper { .px-rem(padding-bottom, 40); h1 { .font-size(60); padding-bottom: 0; text-decoration: underline; } } .blockquote { &.img { border: none; font-weight: lighter; color: @greyText; font-style: italic; line-height: 1.8; .px-rem(min-height, 92); padding-left: 10rem; text-align: left; background: url("/images/blockquote.png") no-repeat left 40%; } &.souteze { .px-rem(margin-top, 8); } &.img-small { border: none; color: #eee; font-weight: lighter; font-style: italic; .px-rem(min-height, 92); .px-rem(padding-left, 60); background-size: 40px !important; background-size: 2.5rem !important; .font-size(16); text-align: left; background: url('/images/blockquote.png') left 0.6875rem no-repeat; line-height: 1.3; &.one-line { .px-rem(line-height, 38); } p { .font-size(14); color: #a7a7a7; letter-spacing: 0.0625rem; padding-top: 0.1875rem; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; &:hover { color: #fff; } } &.gold > p:hover { color: #e6b528; } } @media(max-width: (991/@em)) { &.img { .px-rem(background-position-x,20); } } } .btn{ &.btn-grey { background-color: @greyText; border: none; border-radius: 0; position: relative; .font-size(24); padding: 8px 28px; padding: 0.5rem 1.75rem; .px-rem(margin-bottom,10); .px-rem(margin-left,30); .px-rem(margin-right,30); text-transform: uppercase; color: #000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-animation: none; -o-animation: none; animation: none; &:before, &::after { .px-rem(width,30); content: ''; position: absolute; top: 0; } &::before { .px-rem(left,-29); border-left: 16px solid transparent; border-left: 1rem solid transparent; border-top: 46px solid @greyText; border-top: 2.875rem solid @greyText; } &::after { .px-rem(right,-29); border-right: 16px solid transparent; border-right: 1rem solid transparent; border-bottom: 46px solid @greyText; border-bottom: 2.875rem solid @greyText; } &:hover { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); background-color: @greyText; border-color: @greyText; } &.full { width: 100%; .px-rem(max-width,215); } } } .max { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); background-color: @greyText; border-color: @greyText; } .txt-grey { color: @greyText; } @media (max-width: (767/@em)) { .blockquote.img { padding-left: 0; padding-right: 0; background: none !important; } .blockquote.img-small p { .px-rem(margin-top, 10); } .site-wrapper { padding-top: 0; } #zaliby-content { padding: 0 !important; } } @keyframes RotateY { 0%,10% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 90%,100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes RotateY { 0%,10% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 90%,100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } @-moz-keyframes RotateY { 0%,10% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 90%,100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } .relative { position: relative; } .pohar.rotateY { animation: none; } .rotateY:hover, .rotateY.hovered { animation: RotateY 800ms ease; -moz-animation: RotateY 800ms ease; -o-animation: RotateY 800ms ease; -webkit-animation: RotateY 800ms ease; } // Shine effect .shine-effect { position: absolute; overflow: hidden; width: 100%; top: 0; left: 0; height: 100%; display: inline-block; color: #fff; text-decoration: none; text-align: center; z-index: 999; } .shine-effect:after { content: ""; transition-property: left,top,opacity; transition-duration: .7s,.7s,.15s; transition-timing-function: ease; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; opacity: 0; transform: rotate(30deg); background: rgba(255, 255, 255, 0.13); background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%); } .shine-effect.active:after, .shine-effect:hover:after { opacity: 1; top: -30%; left: -30%; } // Interactive codes #code-left, #code-right { white-space: pre; unicode-bidi: embed; color: #a3a39e; width: 35%; .px-rem(top,10); position: fixed; text-align: left; opacity: 0.6; line-height: 1.7; .font-size(20); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; span { display: block; &.line { .px-rem(margin-right,15); } } span.red { color: #a42130 !important; } span.comment { color: #6f6f6f !important; } @media(max-width: (1199/@em)) { opacity: .25; .font-size(16); color: #7d7d79; } @media(max-width: (991/@em)) { width: 100%; opacity: 0.18 !important; } } #code-left { .px-rem(left,10); } #code-right { .px-rem(right,10); text-align: right; span.red { padding-right: 0; } span.comment { padding-right: 0; } } #code-right { .px-rem(right,10); } .loaded h1.heading-b { .font-size(76); .px-rem(padding-top,10); text-decoration: underline; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; @media (max-width: (530/@em)) { .font-size(66); .px-rem(line-height,90); } } .loaded .cover-container { padding-top: 0; } #cover { position: relative; z-index: 2; float: left; width: 100%; .px-rem(padding-right, 32); .content { float: left; width: 100%; overflow: visible; } } #site-wrapper { .cover-heading { text-decoration: none; height: auto; top: 30%; h1, .heading-big { text-decoration: none; padding-bottom: 0; font-size: 6rem; position: relative; display: inline; margin: 0; font-weight: 500; line-height: 1.1; &:after { display: block; position: absolute; .px-rem(left,3); .px-rem(bottom,13); width: 0; .px-rem(height,10); background-color: #fff; content: ""; -webkit-animation-delay: 3500ms; -moz-animation-delay: 3500ms; -o-animation-delay: 3500ms; animation-delay: 2500ms; animation: widthFull 5s forwards; -webkit-animation: widthFull 5s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } } @media(max-width: (767/@em)) { top: 50%; left: 25%; max-width: 50%; .px-rem(margin-top, -190); //.px-rem(margin-top, -100); .px-rem(line-height, 135); h1:after { .px-rem(left,-16); .px-rem(bottom,10); content: none; } } } .cover-heading-small { height: auto; .px-rem(margin-top, 142); @media(max-width: (767/@em)) { display: none; } } } @keyframes widthFull { to { width: 100%; } } @-webkit-keyframes widthFull { to { width: 100%; } } @-moz-keyframes widthFull { to { width: 100%; } } .noise-btn, .noise-hover { transform: translateZ(0); outline: 90px solid transparent !important; -webkit-font-smoothing: antialiased; -webkit-transition: background-color 0.1s ease-out; -moz-transition: background-color 0.1s ease-out; transition: background-color 0.1s ease-out; } .text-me { padding-top: 10px; text-align: justify; line-height: 1.8; color: #dadada; .font-size(19); } .img-desc { color: #dadada; .px-rem(padding-top,5); display: block; text-align: center; } .zal-small { color: #dadada; display: block; .font-size(18); } .cover-container-inner { height: 100%; overflow: hidden; width: 100%; } #reference { position: relative; img, a, div { -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } } .reference-desc { z-index: 9; padding: 20px 15px; background-color: rgba(45, 45, 45, 0.46); h3 { text-transform: uppercase; text-align: center; } } .me-wrap, .reference-wrap { position: relative; padding: 10px 0; padding: 0.625rem 0; img { padding: 0 16px; padding: 0 1rem; max-width: 100%; -webkit-animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; z-index: 2; position: relative; @media (max-width: (767/@em)) { padding: 0; } } &:before { background: url('/images/ram.png') no-repeat center top; background-size: contain; transition: transform .2s ease; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } &:hover { img { transform: scale(1.03); } &:before { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: "FlipH"; -ms-filter: "FlipH"; } } @media (min-width: (420/@em)) and (max-width: (991/@em)) { &:before { content: none; } } } .me-wrap { padding: 16px 10px; } .reference-wrap { -moz-animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; -webkit-animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; overflow: hidden; .px-rem(margin-top,20); padding: 50px 15px; padding: 3.125rem 0.9375rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; &:before { background: none; content: ""; position: absolute; .px-rem(top,2); .px-rem(left,-15); width: 0; z-index: 1; border-left: 4000px solid #fcfcfc; border-left: 250rem solid #fcfcfc; border-top: 300px solid transparent; border-top: 18.75rem solid transparent; border-bottom: 300px solid transparent; border-bottom: 18.75rem solid transparent; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } img { padding: 0; transform: scale(1) !important; } &:hover { &:before { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .shine-effect { .px-rem(max-width,1028); .px-rem(max-height,642); .px-rem(margin-top,50); .px-rem(margin-left,48); } } @media (min-width: (992/@em)) { .reference-wrap img { padding: 0 32px; padding: 0 2rem; } .reference-desc { position: absolute; width: calc(~"100% - 5.875rem"); bottom: 19px; padding: 20px 15px; .px-rem(margin,032); z-index: 9; background-color: rgba(34, 34, 36, 0.85); display: block; h3 { text-align: left; } } } .btn-grey { position: relative; border: none !important; text-decoration: none !important; span.txt { position: relative; z-index: 2; } .pohar, .www, .kontakt { position: absolute; content: ""; background: url('/images/pohar.png') no-repeat; .px-rem(top,-31); .px-rem(left,-10); .px-rem(width,55); .px-rem(height,55); z-index: 1; background-size: contain; } .www { background: url('/images/www.png') no-repeat; background-size: contain; } .kontakt { background: url('/images/phone.png') no-repeat; background-size: contain; z-index: 0; } .pohar:nth-child(1) { .px-rem(left,66); .px-rem(height,65); .px-rem(width,65); .px-rem(top,-37); } .pohar:nth-child(2) { .px-rem(left,150); .px-rem(height,75); .px-rem(width,75); .px-rem(top,-43); } .pohar:nth-child(1) { .px-rem(left,66); .px-rem(height,65); .px-rem(width,65); .px-rem(top,-37); } .pohar:nth-child(2) { .px-rem(left,150); .px-rem(height,75); .px-rem(width,75); .px-rem(top,-43); } .www:nth-child(1), .kontakt:nth-child(1) { .px-rem(left,66); .px-rem(height,65); .px-rem(width,65); .px-rem(top,-37); } .www:nth-child(2), .kontakt:nth-child(2) { .px-rem(left,150); .px-rem(height,75); .px-rem(width,75); .px-rem(top,-43); } .kontakt:nth-child(1) { .px-rem(top,-40); } .kontakt:nth-child(2) { .px-rem(top,-43); } } .full-width { display: block; max-width: 80% !important; margin: 0 auto !important; } .btn-prev, .btn-next { display: block; position: absolute; .px-rem(left,-70); .font-size(30); z-index: 9999; color: white; opacity: 0.7; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; &:hover { opacity: 1; } img { .px-rem(max-width,50); width: auto; height: auto; } top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .btn-next { .px-rem(right,-70); left: inherit; } .hidden { display: none; } @media (max-width: (1360/@em)) { #code-left, #code-right { .font-size(17); opacity: .3; color: #7d7d79; } .reference-wrap:before { content: none; } .btn-prev { .px-rem(left,-8); } .btn-next { .px-rem(right,-8); } } @media(max-width: (991/@em)) { .shine-effect { display: none; } .btn-prev { .px-rem(left,45); } .btn-next { .px-rem(right,45); } .reference-desc { padding: 20px 90px; } #code-left { left: 0; } #code-right { right: 0; } } @media (max-width: (650/@em)) { #code-left, #code-right { opacity: .1 !important; } .reference-wrap { padding: 10px 0; padding: 0.625rem 0; } .btn-next, .btn-prev { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; .px-rem(top,12); img { .px-rem(max-width,14); } } .reference-desc { padding: 20px 10px; padding: 1.25rem 0.625rem; } #site-wrapper .cover-heading { max-width: 100% !important; left: 0 !important; } } @media (max-width: (480/@em)) { .site-wrapper-inner.loaded, .site-wrapper { display: block; } .reference-desc h3 { .font-size(23); } .btn-next, .btn-prev { .px-rem(top, 10); } .btn-prev { .px-rem(left, 35); } .btn-next { .px-rem(right, 35); } } .slider-info { display: block; float: left; position: absolute; .px-rem(bottom,20); .px-rem(left,61); color: #0e0e10; font-style: initial; -moz-animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; -webkit-animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; animation: animLoadedContent 1s cubic-bezier(.7,0,.3,1) both; @media (max-width: (1360/@em)) { color: #fff; float: right; right: 0; text-align: right; .px-rem(padding-right, 60); } @media (max-width: (991/@em)) { .px-rem(padding-right, 30); } } #form_wrap.hide:after, #form_wrap.hide:before { display:none; } #kontakt-form { background: @bottomSideForm; .px-rem(min-height, 350); .px-rem(width, 700); position: relative; margin: 0 auto; -webkit-transition: all 0.4s ease; outline: 0 !important; * { outline: 0 !important; } &:after { content: ''; display: block; position: absolute; background: url(/images/znamka.png) center center no-repeat; width: 100%; .px-rem(height, 120); visibility: hidden; opacity: 0; z-index: -1; bottom: 0; margin: 0; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .bot { bottom: 0; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 350px 176px 350px; border-width: 0 21.88rem 11rem 21.88rem; border-color: transparent transparent @bottomSideForm transparent; } .top { top: 175px; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 350px 175px 350px; border-width: 0 21.88rem 10.94rem 21.88rem; border-color: transparent transparent @bottomSideForm transparent; z-index: -1; -webkit-transition: all 0.5s ease; } .left { bottom: 0; position: absolute; width: 0; height: 0; border-style: solid; border-width: 175px 0 175px 350px; border-width: 10.94rem 0 10.94rem 21.88rem; border-color: transparent transparent transparent @leftSideForm; } .right { bottom: 0; position: absolute; width: 0; height: 0; right: 0; border-style: solid; border-width: 175px 350px 175px 0; border-width: 10.94rem 21.88rem 10.94rem 0; border-color: transparent @leftSideForm transparent transparent; } .inside { color: #7c7873; position: relative; margin: 0 auto; .px-rem(top, 175); width: 80%; height: 0; -webkit-transition: all 0.4s ease; overflow: auto; background: #f7f2ec url('/images/kontakt_bg.png'); .px-rem(max-height, 500); .px-rem(max-width, 350); .px-rem(padding, 20); border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 0 3px #9d9d9d, inset 0 0 27px #fff; -moz-box-shadow: 0 0 3px #9d9d9d, inset 0 0 14px #fff; -webkit-box-shadow: 0 0 3px #9d9d9d, inset 0 0 27px #fff; input[type=text], input[type=email], textarea { color: #7c7873; width: 100%; max-width: 100%; min-width: 100%; .px-rem(height, 42); padding: 0 10px; padding: 0 0.625rem; margin: 0 0 10px 0; margin: 0 0 0.625rem 0; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; -ms-transition: border 0.3s ease; -o-transition: border 0.3s ease; transition: border 0.3s ease; background: #fffcf7; border: 1px solid #b9b5ae; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; &:focus, &:active { -webkit-box-shadow: 0 0 4px #969696; -moz-box-shadow: 0 0 4px #969696; box-shadow: 0 0 4px #969696; } } button { .font-size(20); color: @bottomSideForm; background: transparent !important; &:before, &:after { content: none; } } textarea { .px-rem(height, 60); max-height: 60px !important; max-height: 3.75rem !important; .px-rem(padding-top, 5); } textarea:focus, input[type="text"]:focus, input[type="email"]:focus { background: rgba(255, 255, 255, .35); } input[type="submit"] { position: relative; font-family: 'YanoneKaffeesatzRegular', sans-serif; .font-size(24); color: #7c7873; text-shadow: 0 1px 0 #fff; width: 100%; text-align: center; opacity: 1; background: none; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } input:hover[type=submit] { color: #435c70; } &.highlighted { input, button { z-index: 9; position: relative; } } } @media (min-width: (768/@em)) { &.hovered { .px-rem(margin-top, 165); .inside { .px-rem(height, 410); .px-rem(top, -165); overflow: hidden; } .top { .px-rem(top, -175); } } &.closed { * { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } cursor: progress; margin: 0 auto; .inside { cursor: progress; height: 0; .px-rem(top, 175); input, button { z-index: -1; position: static; } } .top { cursor: progress; .px-rem(top, 175); } &:after { z-index: 12; visibility: visible; opacity: 1; } } &.done { cursor: auto !important; .inside, .top { cursor: auto !important; } } } @media (max-width: (767/@em)) { width: auto !important; height: auto !important; background-color: transparent; .top, .bot, .left, .right { display: none; } .inside { max-width: 100%; width: 100%; height: auto !important; position: static; } } }
Tomáš Dvořák
Tomáš Dvořák
Programátor srdcem i duší

Tomáš Dvořák

Programátor srdcem i duší

Programátor, designér, milovník koček a velký konzument kávy, možná tak by se dal krátce popsat autor tohoto webu. Jeho život se momentálně točí kolem školy, programování a fitka. Věří ve svobodu internetu a v lepší zítřky. Na internetových fórech se vyskytuje pod přezdívkou Tomas2D. Je dvojnásobným vítězem celostátního kola v “Návrhu a tvorbě webových stránek” určená pro studenty středních škol.

Vypni tu nádhernou písničku, která hraje v pozadí.

Řekni mi víc
(Informací je mnoho)