Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

changed css to less

  • Loading branch information...
commit d2dc96f0b9f50b4843814ca38a6b61c7ffbd9740 1 parent 217daea
Alex Delegard authored
View
4 Gemfile
@@ -1,2 +1,4 @@
source 'https://rubygems.org'
-gem 'github-pages'
+gem 'github-pages'
+gem "jekyll-less"
+gem "therubyracer"
View
13 Gemfile.lock
@@ -8,6 +8,7 @@ GEM
colorator (0.1)
commander (4.1.5)
highline (~> 1.6.11)
+ commonjs (0.2.7)
fast-stemmer (1.0.2)
ffi (1.9.3)
github-pages (14)
@@ -30,7 +31,13 @@ GEM
redcarpet (~> 2.3.0)
safe_yaml (~> 0.9.7)
toml (~> 0.1.0)
+ jekyll-less (0.0.4)
+ jekyll (>= 0.10.0)
+ less (>= 2.0.5)
kramdown (1.3.1)
+ less (2.4.0)
+ commonjs (~> 0.2.7)
+ libv8 (3.16.14.3)
liquid (2.5.5)
listen (1.3.1)
rb-fsevent (>= 0.9.3)
@@ -50,7 +57,11 @@ GEM
ffi (>= 0.5.0)
rdiscount (2.1.7)
redcarpet (2.3.0)
+ ref (1.0.5)
safe_yaml (0.9.7)
+ therubyracer (0.12.0)
+ libv8 (~> 3.16.14.0)
+ ref
toml (0.1.0)
parslet (~> 1.5.0)
yajl-ruby (1.1.0)
@@ -60,3 +71,5 @@ PLATFORMS
DEPENDENCIES
github-pages
+ jekyll-less
+ therubyracer
View
4 _plugins/bundler.rb
@@ -0,0 +1,4 @@
+# _plugins/bundler.rb
+require "rubygems"
+require "bundler/setup"
+Bundler.require(:default)
View
954 css/style.css → css/style.less
@@ -137,41 +137,41 @@ h2:before {
display: block;
margin: 0 auto;
}
- #story h2:before {
- background: url(../images/story_icon.png) no-repeat;
- background-size: 31px 31px;
- }
- .lt-ie9 #story h2:before {
- background: url(../images/story_icon_small.png) no-repeat;
- }
- #photos h2:before {
- background: url(../images/photos_icon.png) no-repeat;
- background-size: 31px 31px;
- }
- .lt-ie9 #photos h2:before {
- background: url(../images/photos_icon_small.png) no-repeat;
- }
- #party h2:before {
- background: url(../images/party_icon.png) no-repeat;
- background-size: 31px 31px;
- }
- .lt-ie9 #party h2:before {
- background: url(../images/party_icon_small.png) no-repeat;
- }
- #info h2:before {
- background: url(../images/info_icon.png) no-repeat;
- background-size: 31px 31px;
- }
- .lt-ie9 #info h2:before {
- background: url(../images/info_icon_small.png) no-repeat;
- }
- #instagram h2:before {
- background: url(../images/instagram_icon.png) no-repeat;
- background-size: 31px 31px;
- }
- .lt-ie9 #instagram h2:before {
- background: url(../images/instagram_icon.png) no-repeat;
- }
+#story h2:before {
+ background: url(../images/story_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #story h2:before {
+ background: url(../images/story_icon_small.png) no-repeat;
+}
+#photos h2:before {
+ background: url(../images/photos_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #photos h2:before {
+ background: url(../images/photos_icon_small.png) no-repeat;
+}
+#party h2:before {
+ background: url(../images/party_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #party h2:before {
+ background: url(../images/party_icon_small.png) no-repeat;
+}
+#info h2:before {
+ background: url(../images/info_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #info h2:before {
+ background: url(../images/info_icon_small.png) no-repeat;
+}
+#instagram h2:before {
+ background: url(../images/instagram_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #instagram h2:before {
+ background: url(../images/instagram_icon.png) no-repeat;
+}
h3 {
color: #444;
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
@@ -294,84 +294,84 @@ section {
height: 255px;
text-align: center;
position: relative;
-}
-#rsvp .rsvp_trigger {
- position: absolute;
- top: 20px; right: 37px;
- opacity: .45;
- filter:alpha(opacity=45);
- -webkit-transition: opacity .4s ease;
- -moz-transition: opacity .4s ease;
- -ms-transition: opacity .4s ease;
- -o-transition: opacity .4s ease;
- transition: opacity .4s ease;
-}
-#rsvp .rsvp_trigger:hover {
- opacity: .65;
- filter:alpha(opacity=65);
-}
-#rsvp input[type="text"] {
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: 1.25em;
- color: #666;
- margin: 100px 0 25px;
- outline: 0;
- width: 100%;
- height: 30px;
- text-align: center;
- border: 0;
- background: transparent;
- -webkit-transition: color .7s ease;
- -moz-transition: color .7s ease;
- -ms-transition: color .7s ease;
- -o-transition: color .7s ease;
- transition: color .7s ease;
-}
-#rsvp input[type="text"]:focus {
- color: #999;
-}
-#rsvp .submits {
- display: none;
-}
-#rsvp input[type="submit"] {
- background: rgba(255,255,255,.2);
- border: 0;
- -moz-border-radius: 3px;
- border-radius: 3px;
- color: #fff;
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: .875em;
- font-style: italic;
- padding: 11px 18px;
- -webkit-transition: background .7s ease;
- -moz-transition: background .7s ease;
- -ms-transition: background .7s ease;
- -o-transition: background .7s ease;
- transition: background .7s ease;
-}
-.lt-ie9 #rsvp input[type="submit"] {
- background: #454545;
-}
-#rsvp input[type="submit"]:hover {
- background: rgba(255,255,255,.4);
-}
-.lt-ie9 #rsvp input[type="submit"]:hover {
- background: #747474;
-}
-#rsvp span {
- color: #999;
- display: inline-block;
- margin: 0 5px;
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: .875em;
-}
-#rsvp p.error {
- font-size: 12px;
- color: #999;
- position: absolute;
- font-style: italic;
- top: 15px; left: 30px;
- display: none;
+ .rsvp_trigger {
+ position: absolute;
+ top: 20px; right: 37px;
+ opacity: .45;
+ filter:alpha(opacity=45);
+ -webkit-transition: opacity .4s ease;
+ -moz-transition: opacity .4s ease;
+ -ms-transition: opacity .4s ease;
+ -o-transition: opacity .4s ease;
+ transition: opacity .4s ease;
+ &:hover {
+ opacity: .65;
+ filter:alpha(opacity=65);
+ }
+ }
+ input[type="text"] {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 1.25em;
+ color: #666;
+ margin: 100px 0 25px;
+ outline: 0;
+ width: 100%;
+ height: 30px;
+ text-align: center;
+ border: 0;
+ background: transparent;
+ -webkit-transition: color .7s ease;
+ -moz-transition: color .7s ease;
+ -ms-transition: color .7s ease;
+ -o-transition: color .7s ease;
+ transition: color .7s ease;
+ }
+ input[type="text"]:focus {
+ color: #999;
+ }
+ .submits {
+ display: none;
+ }
+ input[type="submit"] {
+ background: rgba(255,255,255,.2);
+ border: 0;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ color: #fff;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: .875em;
+ font-style: italic;
+ padding: 11px 18px;
+ -webkit-transition: background .7s ease;
+ -moz-transition: background .7s ease;
+ -ms-transition: background .7s ease;
+ -o-transition: background .7s ease;
+ transition: background .7s ease;
+ }
+ .lt-ie9 #rsvp input[type="submit"] {
+ background: #454545;
+ }
+ input[type="submit"]:hover {
+ background: rgba(255,255,255,.4);
+ }
+ .lt-ie9 #rsvp input[type="submit"]:hover {
+ background: #747474;
+ }
+ span {
+ color: #999;
+ display: inline-block;
+ margin: 0 5px;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: .875em;
+ }
+ p.error {
+ font-size: 12px;
+ color: #999;
+ position: absolute;
+ font-style: italic;
+ top: 15px; left: 30px;
+ display: none;
+ }
}
/*NAV
@@ -383,19 +383,18 @@ nav {
width: 100%;
z-index: 5;
zoom: 1;
-}
- nav .container {
+ .container {
position: relative;
}
- nav li {
+ li {
float: left;
font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: 15px;
+ font-size: 15px;
font-style: italic;
font-weight: bold;
overflow: hidden;
}
- nav li a {
+ li a {
background: none;
color: #fff;
display: block;
@@ -403,55 +402,56 @@ nav {
padding: 0 10px;
text-decoration: none;
-webkit-transition: background .3s ease;
- -moz-transition: background .3s ease;
- -ms-transition: background .3s ease;
- -o-transition: background .3s ease;
- transition: background .3s ease;
+ -moz-transition: background .3s ease;
+ -ms-transition: background .3s ease;
+ -o-transition: background .3s ease;
+ transition: background .3s ease;
text-shadow: 1px 1px 2px #000005;
}
- nav li a:hover,
- nav li a.active {
+ li a:hover,
+ li a.active {
background: #000;
}
- a.nav_hash {
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: 15px;
- font-weight: bold;
- font-style: italic;
- overflow: hidden;
- float: right;
- background: none;
- color: #999;
- display: block;
- line-height: 45px;
- text-decoration: none;
- cursor: default;
- }
- a.top {
- background: none;
- border: 0;
- -moz-border-radius: 13px;
- border-radius: 13px;
- display: none;
- position: absolute;
- top: 0;
- left: -10px;
- margin-top: 9px;
- width: 26px;
- height: 26px;
- text-align: center;
- -webkit-transition: background .3s ease;
- -moz-transition: background .3s ease;
- -ms-transition: background .3s ease;
- -o-transition: background .3s ease;
- transition: background .3s ease;
- }
- a.top:hover {
- background: rgba(0,0,0,.85);
- }
- .lt-ie9 a.top:hover {
- background: #050505;
- }
+}
+a.nav_hash {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 15px;
+ font-weight: bold;
+ font-style: italic;
+ overflow: hidden;
+ float: right;
+ background: none;
+ color: #999;
+ display: block;
+ line-height: 45px;
+ text-decoration: none;
+ cursor: default;
+}
+a.top {
+ background: none;
+ border: 0;
+ -moz-border-radius: 13px;
+ border-radius: 13px;
+ display: none;
+ position: absolute;
+ top: 0;
+ left: -10px;
+ margin-top: 9px;
+ width: 26px;
+ height: 26px;
+ text-align: center;
+ -webkit-transition: background .3s ease;
+ -moz-transition: background .3s ease;
+ -ms-transition: background .3s ease;
+ -o-transition: background .3s ease;
+ transition: background .3s ease;
+}
+a.top:hover {
+ background: rgba(0,0,0,.85);
+}
+.lt-ie9 a.top:hover {
+ background: #050505;
+}
/*HEADER
@@ -496,315 +496,329 @@ header span {
/*STORY
**********************************
**********************************/
-#story .bride {
- float: none;
- position: relative;
- width: 100%;
- margin-right: 0;
-}
-#story .groom {
- float: none;
- position: relative;
- width: 100%;
-}
-#story span {
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-weight: bold;
- font-size: 1em;
- letter-spacing: 2px;
- text-transform: uppercase;
-}
-#story p {
- margin-bottom: 40px;
+#story {
+ .bride {
+ float: none;
+ position: relative;
+ width: 100%;
+ margin-right: 0;
+ }
+ .groom {
+ float: none;
+ position: relative;
+ width: 100%;
+ }
+ span {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-weight: bold;
+ font-size: 1em;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ }
+ p {
+ margin-bottom: 40px;
+ }
}
/*PHOTOS
**********************************
**********************************/
-#photos li {
- float: left;
- position: relative;
- width: 32.777778%;
- margin: 0 .555555556% 1px 0;
-}
-#photos li:nth-child(3n+3) {
- margin: 0 0 1px;
-}
-#photos li .thumb {
- width: 100%;
- height: 240px;
- opacity: 1;
- filter:alpha(opacity=100);
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -ms-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
- -webkit-background-size:cover!important;
- -moz-background-size:cover!important;
- -ms-background-size:cover!important;
- -o-background-size:cover!important;
- background-size:cover!important;
- background-position:center center!important;
- box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
-}
-#photos li:hover .thumb {
- opacity: .5;
- filter:alpha(opacity=50);
-}
-#photos li div.expand {
- width: 54px;
- height: 54px;
- position: absolute;
- left: 50%;
- bottom: 0;
- right: 0;
- top: 50%;
- margin: -27px 0 0 -27px;
- -webkit-transition: all 0.6s ease-in-out;
- -moz-transition: all 0.6s ease-in-out;
- -ms-transition: all 0.6s ease-in-out;
- -o-transition: all 0.6s ease-in-out;
- transition: all 0.6s ease-in-out;
- -webkit-transform: rotate(-135deg) translate3d(0, 0, 0);
- -moz-transform: rotate(-135deg) translate3d(0, 0, 0);
- -o-transform: rotate(-135deg) translate3d(0, 0, 0);
- -ms-transform: rotate(-135deg) translate3d(0, 0, 0);
- opacity: 0;
- filter:alpha(opacity=0);
-}
-#photos li:hover div.expand {
- width: 54px;
- height: 54px;
- -webkit-transform: rotate(0) translate3d(0, 0, 0);
- -moz-transform: rotate(0) translate3d(0, 0, 0);
- -o-transform: rotate(0) translate3d(0, 0, 0);
- -ms-transform: rotate(0) translate3d(0, 0, 0);
- opacity: 1;
- filter:alpha(opacity=100);
-}
-#photos li div.expand img {
- width: 54px;
- height: 54px;
-}
-#photos p {
- font-size: .75em;
+#photos {
+ li {
+ float: left;
+ position: relative;
+ width: 32.777778%;
+ margin: 0 .555555556% 1px 0;
+ &:nth-child(3n+3) {
+ margin: 0 0 1px;
+ }
+ .thumb {
+ width: 100%;
+ height: 240px;
+ opacity: 1;
+ filter:alpha(opacity=100);
+ -webkit-transition: all 0.4s ease-in-out;
+ -moz-transition: all 0.4s ease-in-out;
+ -ms-transition: all 0.4s ease-in-out;
+ -o-transition: all 0.4s ease-in-out;
+ transition: all 0.4s ease-in-out;
+ -webkit-background-size:cover!important;
+ -moz-background-size:cover!important;
+ -ms-background-size:cover!important;
+ -o-background-size:cover!important;
+ background-size:cover!important;
+ background-position:center center!important;
+ box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
+ }
+ &:hover .thumb {
+ opacity: .5;
+ filter:alpha(opacity=50);
+ }
+ div.expand {
+ width: 54px;
+ height: 54px;
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ right: 0;
+ top: 50%;
+ margin: -27px 0 0 -27px;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+ -ms-transition: all 0.6s ease-in-out;
+ -o-transition: all 0.6s ease-in-out;
+ transition: all 0.6s ease-in-out;
+ -webkit-transform: rotate(-135deg) translate3d(0, 0, 0);
+ -moz-transform: rotate(-135deg) translate3d(0, 0, 0);
+ -o-transform: rotate(-135deg) translate3d(0, 0, 0);
+ -ms-transform: rotate(-135deg) translate3d(0, 0, 0);
+ opacity: 0;
+ filter:alpha(opacity=0);
+ }
+ &:hover div.expand {
+ width: 54px;
+ height: 54px;
+ -webkit-transform: rotate(0) translate3d(0, 0, 0);
+ -moz-transform: rotate(0) translate3d(0, 0, 0);
+ -o-transform: rotate(0) translate3d(0, 0, 0);
+ -ms-transform: rotate(0) translate3d(0, 0, 0);
+ opacity: 1;
+ filter:alpha(opacity=100);
+ }
+ div.expand img {
+ width: 54px;
+ height: 54px;
+ }
+ }
+ p {
+ font-size: .75em;
+ }
}
/*WEDDING PARTY
**********************************
**********************************/
-#party .bridesmaids {
- float: none;
- position: relative;
- width: 100%;
- margin-right: 0;
-}
-#party .groomsmen {
- float: none;
- position: relative;
- width: 100%;
-}
-#party li {
- clear: both;
- display: block;
- margin-bottom: 25px;
- overflow: hidden;
-}
-#party span {
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: 1em;
- font-weight: bold;
- letter-spacing: 2px;
- text-transform: uppercase;
- display: block;
- margin: 10px 0 20px;
-}
-#party .avatar {
- float: left;
- width: 25%;
- margin-right: 6%;
-}
-#party .background {
- background-repeat: no-repeat;
- height: 110px;
- width: 100%;
- -webkit-background-size:cover!important;
- -moz-background-size:cover!important;
- -ms-background-size:cover!important;
- -o-background-size:cover!important;
- background-size:cover!important;
- background-position:center center!important;
- box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
-}
-#party .info {
- float: left;
- width: 68%;
-}
-#party dl {
- margin: 0;
- padding: 0;
-}
-#party dl dt {
- color: #333;
- font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
- font-size: 26px;
- line-height: 1.1em;
- font-weight: 300;
- margin: 0;
- padding: 0;
-}
-#party dl dd {
- color: #333;
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-style: italic;
- font-size: .875em;
- margin: 0;
- padding: 0;
+#party {
+ .bridesmaids {
+ float: none;
+ position: relative;
+ width: 100%;
+ margin-right: 0;
+ }
+ .groomsmen {
+ float: none;
+ position: relative;
+ width: 100%;
+ }
+ li {
+ clear: both;
+ display: block;
+ margin-bottom: 25px;
+ overflow: hidden;
+ }
+ span {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ display: block;
+ margin: 10px 0 20px;
+ }
+ .avatar {
+ float: left;
+ width: 25%;
+ margin-right: 6%;
+ }
+ .background {
+ background-repeat: no-repeat;
+ height: 110px;
+ width: 100%;
+ -webkit-background-size:cover!important;
+ -moz-background-size:cover!important;
+ -ms-background-size:cover!important;
+ -o-background-size:cover!important;
+ background-size:cover!important;
+ background-position:center center!important;
+ box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
+ }
+ .info {
+ float: left;
+ width: 68%;
+ }
+ dl {
+ margin: 0;
+ padding: 0;
+ dt {
+ color: #333;
+ font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
+ font-size: 26px;
+ line-height: 1.1em;
+ font-weight: 300;
+ margin: 0;
+ padding: 0;
+ }
+ dd {
+ color: #333;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-style: italic;
+ font-size: .875em;
+ margin: 0;
+ padding: 0;
+ }
+ }
}
/*INFORMATION
**********************************
**********************************/
-#info .map {
- clear: both;
- display: block;
- overflow: hidden;
-}
-#info .info {
- position: relative;
- width: 100%;
-}
-#map_canvas {
- height: 215px;
- z-index: 4;
-}
-#info .info li {
- float: none;
- position: relative;
- width: 100%;
- margin-right: 0;
-}
-#info .info li:last-child {
- margin-right: 0;
-}
-#info .info span {
- display: block;
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-size: 1em;
- font-weight: bold;
- letter-spacing: 2px;
- margin-top: 35px;
- text-transform: uppercase;
-}
-#info .info a:link,
-#info .info a:visited {
- color: #86878b;
- text-decoration: none;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -ms-transition: all .3s ease;
- -o-transition: all .3s ease;
- transition: all .3s ease;
-}
-#info .info a:link:hover,
-#info .info a:visited:hover {
- color: #333;
- border-bottom: 1px solid transparent;
-}
-#info .map_description {
- font-size:.75em;
- line-height: 1.2em;
- text-align:center;
-}
+#info {
+ .map {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ }
+ #map_canvas {
+ height: 415px;
+ z-index: 4;
+ }
+ .info {
+ position: relative;
+ width: 100%;
+ li {
+ float: none;
+ position: relative;
+ width: 100%;
+ margin-right: 0;
+ }
+ li:last-child {
+ margin-right: 0;
+ }
+ span {
+ display: block;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ letter-spacing: 2px;
+ margin-top: 35px;
+ text-transform: uppercase;
+ }
+ a:link,
+ a:visited {
+ color: #86878b;
+ text-decoration: none;
+ -webkit-transition: all .3s ease;
+ -moz-transition: all .3s ease;
+ -ms-transition: all .3s ease;
+ -o-transition: all .3s ease;
+ transition: all .3s ease;
+ }
+ a:link:hover,
+ a:visited:hover {
+ color: #333;
+ border-bottom: 1px solid transparent;
+ }
+ }
+ .map_description {
+ font-size:.75em;
+ line-height: 1.2em;
+ text-align:center;
+ }
-/* google map styles */
-#info .gm-style .marker {
- text-align: center;
-}
-#info .gm-style .marker .title {
- font-family: 'Gentium Book Basic', Helvetica, sans-serif;
- font-weight: bold;
- font-style: italic;
-}
-#info .gm-style .marker .subtitle,
-#info .gm-style .marker .subtitle a {
- font-size: 12px;
- color:#666;
- text-decoration: none;
-}
-#info .gm-style img {
- max-width: inherit;
+ /* google map styles */
+ .gm-style {
+ .marker {
+ text-align: center;
+ .title {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-weight: bold;
+ font-style: italic;
+ }
+ .subtitle,
+ .subtitle a {
+ font-size: 12px;
+ color:#666;
+ text-decoration: none;
+ }
+ }
+ img {
+ max-width: inherit;
+ }
+ }
}
/*INSTAGRAM
**********************************
**********************************/
-#instagram h3 {
- width: 100%;
- text-align: center;
- margin-bottom: 25px;
-}
-#instas li {
- float: left;
- width: 49.7%;
- margin: 0 1px 1px 0;
- position: relative;
-}
-#instas li img {
- opacity: 1;
- filter:alpha(opacity=100);
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
-}
-#instas li:hover img {
- opacity: .5;
- filter:alpha(opacity=50);
-}
-#instas li .insta_expand {
- display: block;
- position: absolute;
- top: 50%; left: 50%;
- margin: -27px 0 0 -27px;
- background: rgba(0,0,0,.8);
- text-align: center;
- color: #fff;
- width: 54px;
- height: 54px;
- -moz-border-radius: 27px;
- border-radius: 27px;
- -webkit-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -ms-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
- -moz-transform: rotate(-45deg) translate3d(0, 0, 0);
- -o-transform: rotate(-45deg) translate3d(0, 0, 0);
- -ms-transform: rotate(-45deg) translate3d(0, 0, 0);
- opacity: 0;
- filter:alpha(opacity=0);
-}
-#instas li .insta_expand .likes_count {
- margin-top: 15px;
- display: block;
-}
-#instas li:hover .insta_expand {
- width: 54px;
- height: 54px;
- -webkit-transform: rotate(0) translate3d(0, 0, 0);
- -moz-transform: rotate(0) translate3d(0, 0, 0);
- -o-transform: rotate(0) translate3d(0, 0, 0);
- -ms-transform: rotate(0) translate3d(0, 0, 0);
- opacity: 1;
- filter:alpha(opacity=100);
-}
-#instagram button {
- display:none;
+#instagram {
+ h3 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 25px;
+ }
+ #instas {
+ li {
+ float: left;
+ width: 49.7%;
+ margin: 0 1px 1px 0;
+ position: relative;
+ img {
+ opacity: 1;
+ filter:alpha(opacity=100);
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -ms-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
+ box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
+ }
+ &:hover img {
+ opacity: .5;
+ filter:alpha(opacity=50);
+ }
+ .insta_expand {
+ display: block;
+ position: absolute;
+ top: 50%; left: 50%;
+ margin: -27px 0 0 -27px;
+ background: rgba(0,0,0,.8);
+ text-align: center;
+ color: #fff;
+ width: 54px;
+ height: 54px;
+ -moz-border-radius: 27px;
+ border-radius: 27px;
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -ms-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
+ -moz-transform: rotate(-45deg) translate3d(0, 0, 0);
+ -o-transform: rotate(-45deg) translate3d(0, 0, 0);
+ -ms-transform: rotate(-45deg) translate3d(0, 0, 0);
+ opacity: 0;
+ filter:alpha(opacity=0);
+ .likes_count {
+ margin-top: 15px;
+ display: block;
+ }
+ }
+ &:hover .insta_expand {
+ width: 54px;
+ height: 54px;
+ -webkit-transform: rotate(0) translate3d(0, 0, 0);
+ -moz-transform: rotate(0) translate3d(0, 0, 0);
+ -o-transform: rotate(0) translate3d(0, 0, 0);
+ -ms-transform: rotate(0) translate3d(0, 0, 0);
+ opacity: 1;
+ filter:alpha(opacity=100);
+ }
+ }
+ }
+ button {
+ display:none;
+ }
}
/*FOOTER
@@ -813,25 +827,25 @@ header span {
footer {
padding: 125px 0 140px;
text-align: center;
-}
-footer p {
- color: #333;
- font-size: .75em;
- line-height: 1em;
- margin: 8px 0;
-}
-footer p a {
- color: #86878b;
- text-decoration: none;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- -ms-transition: all .3s ease;
- -o-transition: all .3s ease;
- transition: all .3s ease;
-}
-footer p a:hover {
- color: #333;
- border-bottom: 1px solid transparent;
+ p {
+ color: #333;
+ font-size: .75em;
+ line-height: 1em;
+ margin: 8px 0;
+ a {
+ color: #86878b;
+ text-decoration: none;
+ -webkit-transition: all .3s ease;
+ -moz-transition: all .3s ease;
+ -ms-transition: all .3s ease;
+ -o-transition: all .3s ease;
+ transition: all .3s ease;
+ &:hover {
+ color: #333;
+ border-bottom: 1px solid transparent;
+ }
+ }
+ }
}
/*SHADOWBOX
Please sign in to comment.
Something went wrong with that request. Please try again.