/*======================================*/ /*Dynamically create Goodreads classes*/ $container-list: 1406083933 1421607017 1402318543 1402387978; $tag-list: "gr_custom_container" "gr_custom_header" "gr_custom_each_container" "gr_custom_book_container" "gr_custom_author" "gr_custom_tags" "gr_custom_rating"; @each $container in $container-list { @each $tag in $tag-list { .#{$tag}_#{$container} { @extend %#{$tag}; } } } /*Modify images to make them standard across classes*/ $container-list: 1406083933 1421607017 1402318543 1402387978; $tag-list: "gr_custom_book_container"; @each $container in $container-list { @each $tag in $tag-list { .#{$tag}_#{$container} img{ width:100%; } } } /*======================================*/ /*Placeholder selectors for later use with @extends*/ %gr_custom_container{ /* customize your Goodreads widget container here*/ padding: 10px 5px 10px 5px; background-color: transparent; color: #000000; width: 100%; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; @media only screen and (max-width : 1000px){ -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; } } %gr_custom_header{ /* customize your Goodreads header here*/ border-bottom: 1px solid gray; width: 100%; margin-bottom: 5px; text-align: center; font-size: 120%; display:none; } %gr_custom_each_container{ /* customize each individual book container here */ width: 95%; display: inline-table; clear: both; margin-bottom: 19px; overflow: auto; padding-bottom: 4px; /*border-bottom: 5px solid #aaa;*/ border: 1px solid #aaa; background-color: rgb(242,242,242); @media only screen and (max-width : 1000px){ width: 100%; } } %gr_custom_book_container{ /* customize your book covers here */ overflow: hidden; height: 160px; float: left; margin-right: 4px; width: 98px; float:left; } %gr_custom_author{ /* customize your author names here */ font-size: 10px; } %gr_custom_tags{ /* customize your tags here */ font-size: 10px; color: gray; display:inline; display:none; } %gr_custom_rating{ /* customize your rating stars here */ /*float: right;*/ /*display:inline;*/ } %gr_custom_review{ display:inline; }