Updates
This commit is contained in:
51
app/styles/_block_grid.scss
Normal file
51
app/styles/_block_grid.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
// Block Grid
|
||||
// Technique adapted from Foundation 5 for Bootstrap 3.
|
||||
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
|
||||
// Original LESS Version by Christopher Mitchell (https://gist.github.com/ChrisTM)
|
||||
// Converted to SCSS by Rasmus Jürs (https://github.com/Jursdotme)
|
||||
|
||||
[class*="block-grid-"] {
|
||||
display: block;
|
||||
margin: -($grid-gutter-width/2);
|
||||
padding: 0;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.block-grid-item {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: ($grid-gutter-width/2);
|
||||
height: auto;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@mixin block-grid($per-row) {
|
||||
& > .block-grid-item {
|
||||
width: (100%/$per-row);
|
||||
|
||||
$nth-equation: #{$per-row}n+'+'+1;
|
||||
&:nth-of-type(n) { clear: none; }
|
||||
&:nth-of-type(#{$nth-equation}) { clear: both; }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin block-grids($size) {
|
||||
.block-grid-#{$size}-1 { @include block-grid(1); }
|
||||
.block-grid-#{$size}-2 { @include block-grid(2); }
|
||||
.block-grid-#{$size}-3 { @include block-grid(3); }
|
||||
.block-grid-#{$size}-4 { @include block-grid(4); }
|
||||
.block-grid-#{$size}-5 { @include block-grid(5); }
|
||||
.block-grid-#{$size}-6 { @include block-grid(6); }
|
||||
.block-grid-#{$size}-7 { @include block-grid(7); }
|
||||
.block-grid-#{$size}-8 { @include block-grid(8); }
|
||||
.block-grid-#{$size}-9 { @include block-grid(9); }
|
||||
.block-grid-#{$size}-10 { @include block-grid(10); }
|
||||
.block-grid-#{$size}-11 { @include block-grid(11); }
|
||||
.block-grid-#{$size}-12 { @include block-grid(12); }
|
||||
}
|
||||
|
||||
@include block-grids(xs);
|
||||
@media (min-width: $screen-sm-min) { @include block-grids(sm) }
|
||||
@media (min-width: $screen-md-min) { @include block-grids(md) }
|
||||
@media (min-width: $screen-lg-min) { @include block-grids(lg) }
|
@@ -4,19 +4,55 @@ $icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/font
|
||||
@import "../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss";
|
||||
// endbower
|
||||
|
||||
@import "block_grid"; // from foundation 5
|
||||
|
||||
.page-header h1 {
|
||||
line-height: 1;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.edb-brick {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
/* Projects */
|
||||
.block-grid-item {
|
||||
padding-bottom: 0;
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-link {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.join-us-title {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#contact_form {
|
||||
border:0;
|
||||
margin:0;
|
||||
}
|
||||
.browsehappy {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.form-link {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
#contact_form {
|
||||
border:0;
|
||||
margin:0;
|
||||
.love {
|
||||
color: #faafba;
|
||||
}
|
||||
.credits {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
Reference in New Issue
Block a user