diff --git a/css/main.css b/css/main.css index febdcd6..388d09f 100644 --- a/css/main.css +++ b/css/main.css @@ -39,7 +39,7 @@ html,body,div,span,button,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pr header { position: relative; width: 100vw; - height: calc(10vh + 50px); + /*height: calc(10vh + 50px);*/ } #banner { @@ -187,12 +187,11 @@ footer { min-height: 100vh; z-index: 1; background-color: #616161; - /*background-image: url('../images/bg3-min.jpg'); + background-image: url('../img/bg.jpg'); background-size: cover; background-position-x: center; background-position-y: center; background-repeat: no-repeat; - */ } /*#wrapper:before { @@ -303,10 +302,9 @@ button.menu-item:active { } #desc { - position: absolute; - top: 30vh; + position: relative; width: 100vw; - min-height: 60vh; /*calc(10.6em + 50px);*/ + min-height: 100%; /*calc(10.6em + 50px);*/ text-align: center; vertical-align: middle; color: #000; @@ -316,8 +314,6 @@ button.menu-item:active { @media screen and (max-width: 900px) { #desc { - top: 10vh; - height: 80vh; } } diff --git a/img/bg.jpg b/img/bg.jpg new file mode 100644 index 0000000..70c7e11 Binary files /dev/null and b/img/bg.jpg differ diff --git a/main.css b/main.css deleted file mode 100644 index 994aeae..0000000 --- a/main.css +++ /dev/null @@ -1,332 +0,0 @@ -@font-face { - font-family: OpenSans; - src: url('../fonts/OpenSans/OpenSans-Regular.ttf') -} - -@font-face { - font-family: OpenSans; - font-weight: bold; - src: url('../fonts/OpenSans/OpenSans-Bold.ttf') -} - -/*http://meyerweb.com/eric/tools/css/reset/*/ -html,body,div,span,button,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { - font: inherit; - font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; - font-size: 100%; - margin: 0; - padding: 0; - vertical-align: baseline; - border: 0 -} - -.fluid { - -webkit-transition: all .2s ease; - -moz-transition: all .2s ease; - -ms-transition: all .2s ease; - -o-transition: all .2s ease; - transition: all .2s ease; -} - -.fluid-slow { - -webkit-transition: all .5s ease; - -moz-transition: all .5s ease; - -ms-transition: all .5s ease; - -o-transition: all .5s ease; - transition: all .5s ease; -} - -#banner h1 { - font-size: 36px; - font-weight: bold; -} - -a { - color: #1976D2; - text-decoration: none; -} - -button.social { - cursor: pointer; - outline: none; - border-radius: 50%; - width: 36px; - height: 36px; - margin: 0 6px; - background-color: transparent; -} - -button.social#github { - background: url('../icons/github.png'); - background-size: cover; -} - -button.social#keybase { - background: url('../icons/keybase.png'); - background-size: cover; -} - -button.social#flickr { - background: url('../icons/flickr.png'); - background-size: cover; -} - -button.flip > i { - height: 3vh; - width: 3vh; - display: block; - background-size: cover; -} - -button.expand > i { -} - -i.left { - background-image: url(../icons/ic_keyboard_arrow_left_black_48px.svg); -} - -i.right { - background-image: url(../icons/ic_keyboard_arrow_right_black_48px.svg); -} - -i.expand { - background-image: url(../icons/ic_expand_less_white_48px.svg); -} - -button.flip { - cursor: pointer; - position: absolute; - height: 6vh; - width: 3vh; - outline: none; - background-color: rgba(255, 255, 255, 0.5); -} - -button.flip.left { - top: calc(50% - 3vh); - left: 0; -} - -button.flip.right { - top: calc(50% - 3vh); - right: 0; -} - -button.flip:hover { - background-color: rgba(255, 255, 255, 0.7); -} - -button.flip:active { - background-color: rgba(255, 255, 255, 0.9); -} - -button.expand { - cursor: pointer; - position: absolute; - height: 6vh; - width: 4vh; - outline: none; - background-color: rgba(255, 255, 255, 0.5); -} - -span > a:hover { - color: #616161; -} - -span > a:active { - color: #212121; -} - -body { - overflow: hidden; - /*IMPORTANT TO CHANGE IF EXPANDING*/ - width: 100%; - height: 100vh; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-touch-callout: none -} - -footer { - position: absolute; - width: 100vw; - height: 25px; - top: calc(100vh - 25px); - bottom: 0; - left: 0; - right: 0; - text-align: center; - color: #fff; - background-color: #212121; - z-index: 10; - opacity: 0.9; -} - -#wrapper { - position: absolute; - width: 100vw; - min-height: 100vh; - z-index: 1; - background-color: #616161; - /*background-image: url('../images/bg3-min.jpg'); - background-size: cover; - background-position-x: center; - background-position-y: center; - background-repeat: no-repeat; - */ -} - -/*#wrapper:before { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - content: ''; - display: block; - background-image: url('../images/bg3-min.jpg'); - background-size: cover; - background-position-x: center; - background-position-y: center; - background-repeat: no-repeat; - z-index: -1; -}*/ -section { - width: 100vw; - height: 100vh; -} - -#desc > h1 { - font-size: 3.5em; - margin-top: 0.5em; -} - -#desc > h2 { - width: calc(100% - 1em); - font-size: 1.2em; - padding: 0.5em 0; - display: inline-block; -} - -#desc > span { - width: calc(100% - 1em); - padding: 0 0.5em; - font-size: 1.2em; - display: inline-block; - margin: 0.5em 0; - clear: both; -} - -/*@media (max-height: 300px) { - #desc > span { - width: calc(100% - 1em); - padding: 0 0.05em; - font-size: 0.7em; - display: inline-block; - margin: 0.5em 0; - clear: both; - } - #desc > h1 { - font-size: 1.5em; - } - #desc > h2 { - font-size: 0.7em; - } -}*/ -#contact { - margin: 1em 0 0 0; -} - -#resume a { - text-decoration: none; - color: #000; - font-size: 1em; - z-index: 10; -} - -#resume button { - cursor: pointer; - font-size: 1.2em; - width: 150px; - height: 50px; - outline: none; - color: #fff; - background-color: #1976D2; - border: none; - display: inline-block; -} - -#resume:hover button { - background-color: #1565C0; -} - -#resume:active button { - font-size: 1.1em; -} - -#desc:before { - position: absolute; - top: 0vh; - bottom: 0vh; - left: 0vw; - right: 0vw; - width: 100%; - height: 100%; - content: ; - display: block; - background-color: rgba(255, 255, 255, 0.1); - -webkit-filter: blur(10px); - filter : blur(10px); - z-index: -1; -} - -#desc { - position: absolute; - overflow-y: hidden; - top: 20vh; - left: 15vw; - width: 70vw; - min-height: 60vh; - /*calc(10.6em + 50px);*/ - text-align: center; - vertical-align: middle; - color: #000; - background-color: rgba(255, 255, 255, 0.9); - box-shadow: 0 28px 79px 0 rgba(66,129,121,.27); -} - -@media screen and (max-width: 900px) { - #desc { - left: 5vw; - top: 10vh; - width: 90vw; - height: 80vh; - } -} - -@media screen and (max-width: 480px), screen and (max-height: 420px) { - button.flip { - display: none; - } - - section { - height: 100vh; - } - - #desc > h1 { - font-size: 2em; - } - - #desc { - top: 0; - left: 0; - width: 100vw; - height: 100vh; - } -} - -@media screen and (max-width: 225px), screen and (max-height: 420px) { - #desc { - overflow-y: auto; - } -} -