diff --git a/css/grid.css b/css/grid.css index ea73197..bb9a20b 100644 --- a/css/grid.css +++ b/css/grid.css @@ -1,54 +1,48 @@ +/** + * grid.less + * + * @project cool-kitten + * @author Jalxob, @Jalxob + * @contributor Jorge Garrido Oval, firezenk@gmail.com + * @copyright 2013 + */ /* Computer */ -.grid_1 { width: 6.5%; } -.grid_2 { width: 15%; } -.grid_3 { width: 23.5%; } -.grid_4 { width: 32%; } -.grid_5 { width: 40.5%; } -.grid_6 { width: 49%; } -.grid_7 { width: 57.5%; } -.grid_8 { width: 66%; } -.grid_9 { width: 74.5%; } -.grid_10 { width: 83%; } -.grid_11 { width: 91.5%; } -.grid_12 { width: 100%; } - -.grid_1, -.grid_2, -.grid_3, -.grid_4, -.grid_5, -.grid_6, -.grid_7, -.grid_8, -.grid_9, -.grid_10, -.grid_11, +.grid_1 { + width: 6.5%; +} +.grid_2 { + width: 15%; +} +.grid_3 { + width: 23.5%; +} +.grid_4 { + width: 32%; +} +.grid_5 { + width: 40.5%; +} +.grid_6 { + width: 49%; +} +.grid_7 { + width: 57.5%; +} +.grid_8 { + width: 66%; +} +.grid_9 { + width: 74.5%; +} +.grid_10 { + width: 83%; +} +.grid_11 { + width: 91.5%; +} .grid_12 { - margin: 0 2% 1% 0; - float: left; - display: block; -} - -.alpha{margin-left:0;} -.omega{margin-right:0;} - -.container{ - width: 90%; /*width: 1000px;*/ - max-width: 1000px; - margin: auto; - -} - - - -.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1} - - - - -/* Mobile */ -@media screen and (max-width : 480px) { - + width: 100%; +} .grid_1, .grid_2, .grid_3, @@ -61,7 +55,57 @@ .grid_10, .grid_11, .grid_12 { - width:100%; + margin: 0 2% 1% 0; + float: left; + display: block; +} +.alpha { + margin-left: 0; +} +.omega { + margin-right: 0; +} +.container { + width: 90%; + max-width: 1000px; + margin: auto; +} +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} +.clearfix:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} +* html .clearfix, +*:first-child + html .clearfix { + zoom: 1; +} +/* Mobile */ +@media screen and (max-width: 480px) { + .grid_1, + .grid_2, + .grid_3, + .grid_4, + .grid_5, + .grid_6, + .grid_7, + .grid_8, + .grid_9, + .grid_10, + .grid_11, + .grid_12 { + width: 100%; + } } - -} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 76d56c7..9b05168 100755 --- a/css/style.css +++ b/css/style.css @@ -1,325 +1,297 @@ -/* Global */ - -body { - font-family: 'Open Sans', sans-serif; - font-weight: 400; - font-size: 1em; - color: #8a8683; - background-color:#ffffff; -} -img { - max-width: 100%; -} -a:link { - color: #f68f67; - text-decoration: none; -} -a:hover { - color: #bde2df; - text-decoration: none; -} -a:visited { - color: #f68f67; - text-decoration: none; -} - - - - - -/* Navigation */ - -.menu { - position:fixed; - top:0px; - width:100%; - height:auto; - background-color:#ffffff; - z-index:100; -} -#logo { - text-align: center; - margin: 10px 0; -} -#nav { - text-align: right; - margin: 30px 0 0 0; -} -.navigation{ - float: right; - list-style: none; - margin: 0; -} -.navigation li{ - float: left; - padding:0 0 0 50px; -} -.navigation li:hover{ - cursor:pointer; - color: #a9d3d0; -} - -.navigation .active{ - cursor:pointer; - color: #f68f67; - font-weight:bold; -} - - - - -/* General Slides */ - -.slide{ - background-attachment: fixed; - width:100%; - height:auto; - position: relative; - padding:140px 0; -} - - - -/* Slide 1 */ - -#slide1{ - background-color:#ffffff; -} -#slide1 h1 { - font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#8a8683; - font-weight: 700; -} -#slide1 h2 { - font-size: 2em; - color: #8a8683; - line-height: 0px; - padding-bottom:20px; - font-weight: 400; -} - - - - -/* Slide 2 */ - -#slide2{ - background-image:url('../images/footprints.png'); - background-color:#f68f67; - color:#ffffff; -} -#slide2 h1 { - font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#ffffff; - font-weight: 700; -} -#slide2 h2 { - font-size: 2em; - color: #ffffff; - line-height: 0px; - padding-bottom:20px; - font-weight: 400; -} - - - - -/* Slide 3 */ - -#slide3{ - background-color:#ffffff; -} -#slide3 h1 { - font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#8a8683; - font-weight: 700; -} -#slide3 h2 { - font-size: 2em; - color: #8a8683; - line-height: 0px; - padding-bottom:20px; - font-weight: 400; -} -#test{ - background-color:#bde2df; - color:#ffffff; - text-align:center; - font-size: 2em; - font-weight: 400; -} - - - - -/* Slide 4 */ - -#slide4{ - background-image:url('../images/sunglasses.png'); - background-color:#8a8683; - color:#ffffff; -} -#slide4 h1 { - font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#ffffff; - font-weight: 700; -} -#slide4 h2 { - font-size: 2em; - color: #ffffff; - line-height: 0px; - padding-bottom:20px; - font-weight: 400; -} - - - - - -/* Tablet */ -@media screen and (max-width: 1024px) { - -#logo { - width: 100%; - text-align: center; -} - -#nav { - width:100%; - text-align:center; - margin:10px 0; -} - -.navigation{ - width: 100%; - float: center; - list-style: none; - margin: 0; - padding:0; -} - -.navigation li{ - float: left; - width:25%; - padding:0; -} - -.slide{ - background-attachment: fixed; - width:100%; - position: relative; - padding:150px 0; -} - -#decorative { - display:none; -} - -#content { - text-align:center; - width:100%; -} - -#slide1 h1 { - line-height: 1em; -} -#slide1 h2 { - line-height: 1em; -} -#slide2 h1 { - line-height: 1em; -} -#slide2 h2 { - line-height: 1em; -} -#slide3 h1 { - line-height: 1em; -} -#slide3 h2 { - line-height: 1em; -} -#slide4 h1 { - line-height: 1em; -} -#slide4 h2 { - line-height: 1em; -} - -} - - - - -/* Mobile */ -@media screen and (max-width: 480px) { - -#logo { - width: 100%; - text-align: center; -} - -#nav { - width:100%; - margin:5px 0; -} - -.navigation{ - width: 100%; - float: left; - list-style: none; - margin: 0; - padding:0; -} - -.navigation li{ - float: left; - width:25%; -} - -.slide{ - background-attachment: fixed; - width:100%; - position: relative; - padding:150px 0; -} - - -#slide1 h1 { - line-height: 1em; -} -#slide1 h2 { - line-height: 1em; -} -#slide2 h1 { - line-height: 1em; -} -#slide2 h2 { - line-height: 1em; -} -#slide3 h1 { - line-height: 1em; -} -#slide3 h2 { - line-height: 1em; -} -#slide4 h1 { - line-height: 1em; -} -#slide4 h2 { - line-height: 1em; -} - - -} - - - - +/** + * style.less + * + * @project cool-kitten + * @author Jalxob, @Jalxob + * @contributor Jorge Garrido Oval, firezenk@gmail.com + * @copyright 2013 + */ +.slide-h1 { + font-size: 3.8em; + letter-spacing: -3px; + line-height: 0px; + color: #ffffff; + font-weight: 700; +} +.slide-h2 { + font-size: 2em; + color: #8a8683; + line-height: 0px; + padding-bottom: 20px; + font-weight: 400; +} +.logo-responsive { + width: 100%; + text-align: center; +} +.slide-responsive { + background-attachment: fixed; + width: 100%; + position: relative; + padding: 150px 0; +} +.slide-h1-responsive { + line-height: 1em; +} +.slide-h2-responsive { + line-height: 1em; +} +/* Global */ +body { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 1em; + color: #8a8683; + background-color: #ffffff; +} +img { + max-width: 100%; +} +a:link { + color: #f68f67; + text-decoration: none; +} +a:hover { + color: #bde2df; + text-decoration: none; +} +a:visited { + color: #f68f67; + text-decoration: none; +} +/* Navigation */ +.menu { + position: fixed; + top: 0px; + width: 100%; + height: auto; + background-color: #ffffff; + z-index: 100; +} +#logo { + text-align: center; + margin: 10px 0; +} +#nav { + text-align: right; + margin: 30px 0 0 0; +} +.navigation { + float: right; + list-style: none; + margin: 0; +} +.navigation li { + float: left; + padding: 0 0 0 50px; +} +.navigation li:hover { + cursor: pointer; + color: #a9d3d0; +} +.navigation .active { + cursor: pointer; + color: #f68f67; + font-weight: bold; +} +/* General Slides */.slide { + background-attachment: fixed; + width: 100%; + height: auto; + position: relative; + padding: 140px 0; +} +/* Slide 1 */#slide1 { + background-color: #ffffff; +} +#slide1 h1 { + font-size: 3.8em; + letter-spacing: -3px; + line-height: 0px; + color: #ffffff; + font-weight: 700; +} +#slide1 h2 { + font-size: 2em; + color: #8a8683; + line-height: 0px; + padding-bottom: 20px; + font-weight: 400; +} +/* Slide 2 */#slide2 { + background-image: url('../images/footprints.png'); + background-color: #f68f67; + color: #ffffff; +} +#slide2 h1 { + font-size: 3.8em; + letter-spacing: -3px; + line-height: 0px; + color: #ffffff; + font-weight: 700; +} +#slide2 h2 { + font-size: 2em; + color: #8a8683; + line-height: 0px; + padding-bottom: 20px; + font-weight: 400; +} +/* Slide 3 */#slide3 { + background-color: #ffffff; +} +#slide3 h1 { + font-size: 3.8em; + letter-spacing: -3px; + line-height: 0px; + color: #ffffff; + font-weight: 700; +} +#slide3 h2 { + font-size: 2em; + color: #8a8683; + line-height: 0px; + padding-bottom: 20px; + font-weight: 400; +} +/* Slide 4 */ +#slide4 { + background-image: url('../images/sunglasses.png'); + background-color: #8a8683; + color: #ffffff; +} +#slide4 h1 { + font-size: 3.8em; + letter-spacing: -3px; + line-height: 0px; + color: #ffffff; + font-weight: 700; +} +#slide4 h2 { + font-size: 2em; + color: #8a8683; + line-height: 0px; + padding-bottom: 20px; + font-weight: 400; +} +#test { + background-color: #bde2df; + color: #ffffff; + text-align: center; + font-size: 2em; + font-weight: 400; +} +/* Tablet */ +@media screen and (max-width: 1024px) { + #logo { + width: 100%; + text-align: center; + } + #nav { + width: 100%; + text-align: center; + margin: 10 0; + } + .navigation { + width: 100%; + float: center; + list-style: none; + margin: 0; + padding: 0; + } + .navigation li { + float: left; + width: 25%; + padding: 0; + } + .slide { + background-attachment: fixed; + width: 100%; + position: relative; + padding: 150px 0; + } + #decorative { + display: none; + } + #content { + text-align: center; + width: 100%; + } + #slide1 h1 { + line-height: 1em; + } + #slide1 h2 { + line-height: 1em; + } + #slide2 h1 { + line-height: 1em; + } + #slide2 h2 { + line-height: 1em; + } + #slide3 h1 { + line-height: 1em; + } + #slide3 h2 { + line-height: 1em; + } + #slide4 h1 { + line-height: 1em; + } + #slide4 h2 { + line-height: 1em; + } +} +/* Mobile */ +@media screen and (max-width: 480px) { + #logo { + width: 100%; + text-align: center; + } + #nav { + width: 100%; + text-align: center; + margin: 5px 0; + } + .navigation { + width: 100%; + float: left; + list-style: none; + margin: 0; + padding: 0; + } + .navigation li { + float: left; + width: 25%; + } + .slide { + background-attachment: fixed; + width: 100%; + position: relative; + padding: 150px 0; + } + #slide1 h1 { + line-height: 1em; + } + #slide1 h2 { + line-height: 1em; + } + #slide2 h1 { + line-height: 1em; + } + #slide2 h2 { + line-height: 1em; + } + #slide3 h1 { + line-height: 1em; + } + #slide3 h2 { + line-height: 1em; + } + #slide4 h1 { + line-height: 1em; + } + #slide4 h2 { + line-height: 1em; + } +} diff --git a/less/grid.less b/less/grid.less new file mode 100644 index 0000000..e113cf1 --- /dev/null +++ b/less/grid.less @@ -0,0 +1,95 @@ +/** + * grid.less + * + * @project cool-kitten + * @author Jalxob, @Jalxob + * @contributor Jorge Garrido Oval, firezenk@gmail.com + * @copyright 2013 + */ + +/* Computer */ +.grid_1 { width: 6.5%; } +.grid_2 { width: 15%; } +.grid_3 { width: 23.5%; } +.grid_4 { width: 32%; } +.grid_5 { width: 40.5%; } +.grid_6 { width: 49%; } +.grid_7 { width: 57.5%; } +.grid_8 { width: 66%; } +.grid_9 { width: 74.5%; } +.grid_10 { width: 83%; } +.grid_11 { width: 91.5%; } +.grid_12 { width: 100%; } + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + margin: 0 2% 1% 0; + float: left; + display: block; +} + +.alpha{ + margin-left: 0; +} + +.omega{ + margin-right: 0; +} + +.container{ + width: 90%; /*width: 1000px;*/ + max-width: 1000px; + margin: auto; +} + +.clear{ + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0 +} +.clearfix:after{ + clear: both; + content:' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0 +} + +* html .clearfix,*:first-child+html .clearfix{ + zoom:1 +} + +/* Mobile */ +@media screen and (max-width : 480px) { + + .grid_1, + .grid_2, + .grid_3, + .grid_4, + .grid_5, + .grid_6, + .grid_7, + .grid_8, + .grid_9, + .grid_10, + .grid_11, + .grid_12 { + width:100%; + } +} \ No newline at end of file diff --git a/less/style.less b/less/style.less new file mode 100755 index 0000000..0630d18 --- /dev/null +++ b/less/style.less @@ -0,0 +1,268 @@ +/** + * style.less + * + * @project cool-kitten + * @author Jalxob, @Jalxob + * @contributor Jorge Garrido Oval, firezenk@gmail.com + * @copyright 2013 + */ + +// Variables +@default-font-family: 'Open Sans', sans-serif; +@default-font-weight: 400; +@default-font-size: 1em; + +// Functions +.slide-h1 { + font-size: 3.8em; + letter-spacing: -3px; + line-height: 0px; + color:#ffffff; + font-weight: 700; +} +.slide-h2 { + font-size: 2em; + color: #8a8683; + line-height: 0px; + padding-bottom: 20px; + font-weight: @default-font-weight; +} +.logo-responsive { + width: 100%; + text-align: center; +} +.nav-responsive(@margin:5px) { + width: 100%; + text-align: center; + margin: @margin 0; +} +.navigation-responsive(@float:left) { + width: 100%; + float: @float; + list-style: none; + margin: 0; + padding: 0; +} +.slide-responsive { + background-attachment: fixed; + width: 100%; + position: relative; + padding: 150px 0; +} +.slide-h1-responsive { + line-height: 1em; +} +.slide-h2-responsive { + line-height: 1em; +} + +// Main + +/* Global */ +body { + font-family: @default-font-family; + font-weight: @default-font-weight; + font-size: @default-font-size; + color: #8a8683; + background-color: #ffffff; +} + +img { + max-width: 100%; +} + +a { + &:link { + color: #f68f67; + text-decoration: none; + } + + &:hover { + color: #bde2df; + text-decoration: none; + } + + &:visited { + color: #f68f67; + text-decoration: none; + } +} + +/* Navigation */ +.menu { + position:fixed; + top:0px; + width:100%; + height:auto; + background-color:#ffffff; + z-index:100; +} + +#logo { + text-align: center; + margin: 10px 0; +} + +#nav { + text-align: right; + margin: 30px 0 0 0; +} + +.navigation { + float: right; + list-style: none; + margin: 0; + + li { + float: left; + padding:0 0 0 50px; + + &:hover { + cursor: pointer; + color: #a9d3d0; + } + } + + .active { + cursor: pointer; + color: #f68f67; + font-weight: bold; + } +} + + +/* General Slides */ +.slide { + background-attachment: fixed; + width: 100%; + height: auto; + position: relative; + padding: 140px 0; +} + +/* Slide 1 */ +#slide1 { + background-color: #ffffff; + + h1 {.slide-h1} + h2 {.slide-h2} +} + +/* Slide 2 */ +#slide2 { + background-image: url('../images/footprints.png'); + background-color: #f68f67; + color: #ffffff; + + h1 {.slide-h1} + h2 {.slide-h2} +} + +/* Slide 3 */ +#slide3 { + background-color: #ffffff; + + h1 {.slide-h1} + h2 {.slide-h2} +} + +/* Slide 4 */ +#slide4 { + background-image: url('../images/sunglasses.png'); + background-color: #8a8683; + color: #ffffff; + + h1 {.slide-h1} + h2 {.slide-h2} +} + +#test { + background-color: #bde2df; + color: #ffffff; + text-align: center; + font-size: 2em; + font-weight: 400; +} + +/* Tablet */ +@media screen and (max-width: 1024px) { + + #logo {.logo-responsive} + + #nav {.nav-responsive(10)} + + .navigation { + .navigation-responsive(center); + + li{ + float: left; + width: 25%; + padding: 0; + } + } + + .slide {.slide-responsive} + + #decorative { + display: none; + } + + #content { + text-align: center; + width: 100%; + } + + #slide1 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + #slide2 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + #slide3 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + #slide4 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } +} + +/* Mobile */ +@media screen and (max-width: 480px) { + + #logo {.logo-responsive} + + #nav {.nav-responsive} + + .navigation { + .navigation-responsive; + + li { + float: left; + width: 25%; + } + } + + .slide {.slide-responsive} + + #slide1 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + #slide2 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + #slide3 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + #slide4 { + h1 {.slide-h1-responsive} + h2 {.slide-h2-responsive} + } + +} \ No newline at end of file