From 49e632365cd321c4a22bfc8fd9012f0097d34e07 Mon Sep 17 00:00:00 2001 From: Jorge Arias Date: Thu, 17 Sep 2015 16:00:31 -0300 Subject: [PATCH] CSS Style declaration changed to SASS CSS Style declaration in css/ to SASS. Delete less/. Added _sass/. --- .../_mixins.scssc | Bin 0 -> 656 bytes .../_variables.scssc | Bin 0 -> 1410 bytes _sass/_mixins.scss | 1 + _sass/_variables.scss | 5 + css/grayscale.css | 409 ------------------ less/grayscale.less => css/grayscale.scss | 143 +++--- less/mixins.less | 1 - less/variables.less | 5 - 8 files changed, 99 insertions(+), 465 deletions(-) create mode 100644 .sass-cache/bbb2ff065c1819dc36edf3e4a5869054b448989e/_mixins.scssc create mode 100644 .sass-cache/bbb2ff065c1819dc36edf3e4a5869054b448989e/_variables.scssc create mode 100755 _sass/_mixins.scss create mode 100644 _sass/_variables.scss delete mode 100755 css/grayscale.css rename less/grayscale.less => css/grayscale.scss (70%) delete mode 100755 less/mixins.less delete mode 100755 less/variables.less diff --git a/.sass-cache/bbb2ff065c1819dc36edf3e4a5869054b448989e/_mixins.scssc b/.sass-cache/bbb2ff065c1819dc36edf3e4a5869054b448989e/_mixins.scssc new file mode 100644 index 0000000000000000000000000000000000000000..c74bb4481efe1b9adaf9de93014877eadb54a4b5 GIT binary patch literal 656 zcmbtS&u`N(6y5=aF5RdommxSrJ;4rj)^^?ITrBZJ$^nE(Z#_h=^V)bgevzMBsQBk` zvLV3{aj~uM{rJB3JD6uWrT_!V>jNZ(hXcHgZ#T2MbRn;och_mPQJ^+ys??&I zSDV>VZRZOG=`3Ad#ZLyvUlx*x^OXbO{41jWj1>&|Gofm2DhGBQA%Fd6(mQM#uzg<4 zhvFd39@bGldCo4APx^8J6&aGA$KeY_fA3Sq}>7Xiw8YL4+hyCddf$FymY>7k&wUoJLLJDPBH z0qL})sWPmj;3X@Y-h?SBqHcmPoo-rm9vt%IL00|<1m`~nB05qqU=V0s*g!tH`FGl$ uX(Sv-Q~qC*3qi7h(ssvp>8!T9;OC$K-}zEYs>8;{-J|^dM^@Rn82$otOV-{1 literal 0 HcmV?d00001 diff --git a/.sass-cache/bbb2ff065c1819dc36edf3e4a5869054b448989e/_variables.scssc b/.sass-cache/bbb2ff065c1819dc36edf3e4a5869054b448989e/_variables.scssc new file mode 100644 index 0000000000000000000000000000000000000000..37c8d346650bdeb0fd029882f42b629843455250 GIT binary patch literal 1410 zcmbu9T~FIE6ox^XLK9lP#^-=h6{GMkfqOXd&MOyZwOYAeZM7=p zO1XA+abB<2YSB4^YQ0*%sJ2Vdc^RtStBfQ&O{O&=R|X=jl#Nrn!jd>vz7pzKlL5re7GWBU>*`6i<%2eqR!16 zP6-|ZcStUfiQzKV!#PRzr)!M&u`oGIh*=*Rg>0gDpQ#6jx^`puktj*>k9p0u;)xj_ zs4kPH4D;E}u=7L3<?W{|d18tZx zVIs98yR#u*rRKK4Lb_izkWr+;@D&sd;!c`E_tHhW&$m#G2nB8wKKVV_2me;8F8Ily zC3rjRnZEFE;qF1;$1d0=>0(>>p~mL>;r+O4McvjqRd*@i{X{BMaiVZzG=XmUh_&>C zHqg&tWreP36l(uoIjyveiZT)Y-zM9EMu&vfCgFFcVjg!<(o7SKgMdAzd&4>OwAIMQ z1RE%0cfeE!Iwg_~xL6E^dQ)v`C!vFT+*c+U2YWI z4pVoj3sxjuwbr9+)?oDY(535qj&9(yiO&{y=r+b5mP(~5*SOEhy4cvXP*C!(D>T4uL*V(MN`<`Gi(n*mnPVDwDwo*mvW!5 zXLAu7JBXG`1T*OL_rCx1yYalE(Z7M@NB5C>N46n2MwxMt9@VZ!5%p63EcRix(+<)) U6ZXf^sMC0*(MI9;ub5u-KO-fH;s5{u literal 0 HcmV?d00001 diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss new file mode 100755 index 0000000..c570996 --- /dev/null +++ b/_sass/_mixins.scss @@ -0,0 +1 @@ +// Mixins diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..1a1b1e6 --- /dev/null +++ b/_sass/_variables.scss @@ -0,0 +1,5 @@ +// Variables + +$primary: #fed136; +$dark: #000; +$light: #fff; diff --git a/css/grayscale.css b/css/grayscale.css deleted file mode 100755 index f893f68..0000000 --- a/css/grayscale.css +++ /dev/null @@ -1,409 +0,0 @@ ---- ---- -/* YAML block in order to get processed by Jekyll */ - -/*! - * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com) - * Code licensed under the Apache License v2.0. - * For details, see http://www.apache.org/licenses/LICENSE-2.0. - */ - -body { - width: 100%; - height: 100%; - font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; - color: #fff; - background-color: #000; -} - -html { - width: 100%; - height: 100%; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0 0 35px; - text-transform: uppercase; - font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; - font-weight: 700; - letter-spacing: 1px; -} - -p { - margin: 0 0 25px; - font-size: 18px; - line-height: 1.5; -} - -@media(min-width:767px) { - p { - margin: 0 0 35px; - font-size: 20px; - line-height: 1.6; - } -} - -nop { - -} - -a { - color: #fed136; - /* color: #219ab3; */ - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; -} - -a:hover, -a:focus { - text-decoration: none; - color: #fec503; - /* color: #11505d; */ -} - -.light { - font-weight: 400; -} - -.personal-list { - text-align: center; - margin: 0 0 35px; - font-size: 20px; - line-height: 1.5; - list-style-position: inside; -} - - -.navbar-custom { - margin-bottom: 0; - border-bottom: 1px solid rgba(255,255,255,.3); - text-transform: uppercase; - font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; - background-color: #000; -} - -.navbar-custom .navbar-brand { - font-weight: 700; -} - -.navbar-custom .navbar-brand:focus { - outline: 0; -} - -.navbar-custom .navbar-brand .navbar-toggle { - padding: 4px 6px; - font-size: 16px; - color: #fff; -} - -.navbar-custom .navbar-brand .navbar-toggle:focus, -.navbar-custom .navbar-brand .navbar-toggle:active { - outline: 0; -} - -.navbar-custom a { - color: #fff; -} - -.navbar-custom .nav li.active { - outline: nonte; - background-color: rgba(255,255,255,.3); -} - -.navbar-custom .nav li a { - -webkit-transition: background .3s ease-in-out; - -moz-transition: background .3s ease-in-out; - transition: background .3s ease-in-out; -} - -.navbar-custom .nav li a:hover, -.navbar-custom .nav li a:focus, -.navbar-custom .nav li a.active { - outline: 0; - background-color: rgba(255,255,255,.3); -} - -@media(min-width:767px) { - .navbar { - padding: 20px 0; - border-bottom: 0; - letter-spacing: 1px; - background: 0 0; - -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; - -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; - transition: background .5s ease-in-out,padding .5s ease-in-out; - } - - .top-nav-collapse { - padding: 0; - background-color: #000; - } - - .navbar-custom.top-nav-collapse { - border-bottom: 1px solid rgba(255,255,255,.3); - } -} - -.intro { - display: table; - width: 100%; - height: auto; - padding: 100px 0; - text-align: center; - color: #fff; - background: url( {{ site.background-img }} ) no-repeat bottom center scroll; - background-color: #000; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -.intro .intro-body { - display: table-cell; - vertical-align: middle; -} - -.intro .intro-body .brand-heading { - font-size: 40px; -} - -.intro .intro-body .intro-text { - font-size: 18px; -} - -@media(min-width:767px) { - .intro { - height: 100%; - padding: 0; - } - - .intro .intro-body .brand-heading { - font-size: 100px; - } - - .intro .intro-body .intro-text { - font-size: 25px; - } -} - -.btn-circle { - width: 70px; - height: 70px; - margin-top: 15px; - padding: 7px 16px; - border: 2px solid #fff; - border-radius: 35px; - font-size: 40px; - color: #fff; - background: 0 0; - -webkit-transition: background .3s ease-in-out; - -moz-transition: background .3s ease-in-out; - transition: background .3s ease-in-out; -} - -.btn-circle:hover, -.btn-circle:focus { - outline: 0; - color: #fff; - background: rgba(255,255,255,.1); -} - -.btn-circle i.animated { - -webkit-transition-property: -webkit-transform; - -webkit-transition-duration: 1s; - -moz-transition-property: -moz-transform; - -moz-transition-duration: 1s; -} - -.btn-circle:hover i.animated { - -webkit-animation-name: pulse; - -moz-animation-name: pulse; - -webkit-animation-duration: 1.5s; - -moz-animation-duration: 1.5s; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - -webkit-animation-timing-function: linear; - -moz-animation-timing-function: linear; -} - -@-webkit-keyframes pulse { - 0 { - -webkit-transform: scale(1); - transform: scale(1); - } - - 50% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@-moz-keyframes pulse { - 0 { - -moz-transform: scale(1); - transform: scale(1); - } - - 50% { - -moz-transform: scale(1.2); - transform: scale(1.2); - } - - 100% { - -moz-transform: scale(1); - transform: scale(1); - } -} - -.content-section { - padding-top: 100px; -} - -.download-section { - width: 100%; - padding: 50px 0; - color: #fff; - background: url(../img/downloads-bg.jpg) no-repeat center center scroll; - background-color: #000; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -#map { - width: 100%; - height: 200px; - margin-top: 100px; -} - -@media(min-width:767px) { - .content-section { - padding-top: 250px; - } - - .download-section { - padding: 100px 0; - } - - #map { - height: 400px; - margin-top: 250px; - } -} - -.btn { - text-transform: uppercase; - font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; - font-weight: 400; - -webkit-transition: all .3s ease-in-out; - -moz-transition: all .3s ease-in-out; - transition: all .3s ease-in-out; -} - -.btn-default { - border: 1px solid #219ab3; - color: #219ab3; - background-color: transparent; -} - -.btn-default:hover, -.btn-default:focus { - border: 1px solid #219ab3; - outline: 0; - color: #000; - background-color: #219ab3; -} - -ul.banner-social-buttons { - margin-top: 0; -} - -@media(max-width:1199px) { - ul.banner-social-buttons { - margin-top: 15px; - } -} - -@media(max-width:767px) { - ul.banner-social-buttons li { - display: block; - margin-bottom: 20px; - padding: 0; - } - - ul.banner-social-buttons li:last-child { - margin-bottom: 0; - } -} - -ul.social-buttons { - margin-bottom: 0; -} - -ul.social-buttons li a { - display: block; - width: 40px; - height: 40px; - border-radius: 100%; - font-size: 20px; - line-height: 40px; - outline: 0; - /* color: #fff; */ - background-color: #222; - - -webkit-transition: all .3s; - -moz-transition: all .3s; - transition: all .3s; -} - -ul.social-buttons li a:hover, -ul.social-buttons li a:focus, -ul.social-buttons li a:active { - color: #222; - background-color: #fec503; -} - -footer { - padding: 50px 0; -} - -footer p { - margin: 0; -} - -::-moz-selection { - text-shadow: none; - background: #fcfcfc; - background: rgba(255,255,255,.2); -} - -::selection { - text-shadow: none; - background: #fcfcfc; - background: rgba(255,255,255,.2); -} - -img::selection { - background: 0 0; -} - -img::-moz-selection { - background: 0 0; -} - -body { - webkit-tap-highlight-color: rgba(255,255,255,.2); -} diff --git a/less/grayscale.less b/css/grayscale.scss similarity index 70% rename from less/grayscale.less rename to css/grayscale.scss index 1c81d1d..3eb450e 100755 --- a/less/grayscale.less +++ b/css/grayscale.scss @@ -1,12 +1,23 @@ -@import "variables.less"; -@import "mixins.less"; +--- +--- + +/* YAML block in order to get processed by Jekyll */ + +@import "variables"; +@import "mixins"; + +/*! + * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ body { width: 100%; height: 100%; font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif; - color: @light; - background-color: @dark; + color: $light; + background-color: $dark; } html { @@ -22,7 +33,7 @@ h5, h6 { margin: 0 0 35px; text-transform: uppercase; - font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; letter-spacing: 1px; } @@ -42,14 +53,14 @@ p { } a { - color: @primary; + color: $primary; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; &:hover, &:focus { - text-decoration: none; - color: darken(@primary,20%); + text-decoration: none; + color: darken(#fec503,20%); } } @@ -57,36 +68,45 @@ a { font-weight: 400; } +.personal-list { + text-align: center; + margin: 0 0 35px; + font-size: 20px; + line-height: 1.5; + list-style-position: inside; +} + + .navbar-custom { margin-bottom: 0; - border-bottom: 1px solid fade(@light, 30%); + border-bottom: 1px solid rgba($light, 0.3); text-transform: uppercase; - font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; - background-color: @dark; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + background-color: $dark; .navbar-brand { font-weight: 700; - &:focus { - outline: none; - } + &:focus { + outline: none; + } .navbar-toggle { padding: 4px 6px; font-size: 16px; - color: @light; - &:focus, - &:active { - outline: none; - } + color: $light; + &:focus, + &:active { + outline: none; + } } } a { - color: @light; + color: $light; } .nav { li { &.active { - outline: nonte; - background-color: fade(@light, 30%); - } + outline: nonte; + background-color: rgba($light, 0.3); + } a { -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; @@ -95,7 +115,7 @@ a { &:focus, &.active { outline: none; - background-color: fade(@light, 30%); + background-color: rgba($light, 0.3); } } } @@ -115,11 +135,11 @@ a { .top-nav-collapse { padding: 0; - background-color: @dark; + background-color: $dark; } .navbar-custom.top-nav-collapse { - border-bottom: 1px solid fade(@light, 30%); + border-bottom: 1px solid rgba($light, 0.3); } } @@ -129,9 +149,9 @@ a { height: auto; padding: 100px 0; text-align: center; - color: @light; - background: url(../img/intro-bg.jpg) no-repeat bottom center scroll; - background-color: @dark; + color: $light; + background: url( {{ site.background-img }} ) no-repeat bottom center scroll; + background-color: $dark; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; @@ -170,19 +190,19 @@ a { height: 70px; margin-top: 15px; padding: 7px 16px; - border: 2px solid @light; + border: 2px solid $light; border-radius: 35px; font-size: 40px; - color: @light; + color: $light; background: transparent; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; &:hover, &:focus { - outline: none; - color: @light; - background: fade(@light, 10%); + outline: none; + color: $light; + background: rgba($light, 0.1); } i.animated { -webkit-transition-property: -webkit-transform; @@ -204,8 +224,8 @@ a { } } -@-webkit-keyframes pulse { - 0 { +@-webkit-keyframes pulse { + from { -webkit-transform: scale(1); transform: scale(1); } @@ -221,8 +241,8 @@ a { } } -@-moz-keyframes pulse { - 0 { +@-moz-keyframes pulse { + fom { -moz-transform: scale(1); transform: scale(1); } @@ -245,9 +265,9 @@ a { .download-section { width: 100%; padding: 50px 0; - color: @light; + color: $light; background: url(../img/downloads-bg.jpg) no-repeat center center scroll; - background-color: @dark; + background-color: $dark; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; @@ -277,7 +297,7 @@ a { .btn { text-transform: uppercase; - font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; @@ -285,15 +305,15 @@ a { } .btn-default { - border: 1px solid @primary; - color: @primary; + border: 1px solid $primary; + color: $primary; background-color: transparent; &:hover, &:focus { - border: 1px solid @primary; + border: 1px solid $primary; outline: none; - color: @dark; - background-color: @primary; + color: $dark; + background-color: $primary; } } @@ -320,6 +340,29 @@ ul.banner-social-buttons { } } +ul.social-buttons li a { + display: block; + width: 40px; + height: 40px; + border-radius: 100%; + font-size: 20px; + line-height: 40px; + outline: 0; + /* color: #fff; */ + background-color: #222; + + -webkit-transition: all .3s; + -moz-transition: all .3s; + transition: all .3s; + + &:hover, + &:focus, + &:active { + color: #222; + background-color: #fec503; + } +} + footer { padding: 50px 0; p { @@ -330,13 +373,13 @@ footer { ::-moz-selection { text-shadow: none; background: #fcfcfc; - background: fade(@light, 20%); + background: rgba($light, 0.2); } ::selection { text-shadow: none; background: #fcfcfc; - background: fade(@light, 20%); + background: rgba($light, 0.2); } img::selection { @@ -348,5 +391,5 @@ img::-moz-selection { } body { - webkit-tap-highlight-color: fade(@light, 20%); -} \ No newline at end of file + webkit-tap-highlight-color: rgba($light, 0.2); +} diff --git a/less/mixins.less b/less/mixins.less deleted file mode 100755 index 7532b8c..0000000 --- a/less/mixins.less +++ /dev/null @@ -1 +0,0 @@ -// Mixins \ No newline at end of file diff --git a/less/variables.less b/less/variables.less deleted file mode 100755 index e3772e0..0000000 --- a/less/variables.less +++ /dev/null @@ -1,5 +0,0 @@ -// Variables - -@primary: #219AB3; -@dark: #000; -@light: #fff; \ No newline at end of file