Created
May 3, 2015 08:42
-
-
Save alexadark/37b01f8158079d69ffff to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main class="content" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog"><div class="archives-intro"><h1>Products</h1><p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> | |
| </div><article class="post-1668 products type-products status-publish has-post-thumbnail category-life-science-components category-precision-machining-manufacturing entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/controlled-fluidics-2/"> | |
| <img width="168" height="45" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-CFL.png" class="attachment-full wp-post-image" alt="Logo-CFL"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1667 products type-products status-publish has-post-thumbnail category-displays-lighting category-led-laser-diodes category-life-science-components category-electro-optics entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/omega-optical-2/"> | |
| <img width="139" height="80" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-OME-med1.jpg" class="attachment-full wp-post-image" alt="Logo-OME-med1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1659 products type-products status-publish has-post-thumbnail category-displays-lighting category-led-laser-diodes category-life-science-components category-electro-optics entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/omega-optical/"> | |
| <img width="139" height="80" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-OME-med1.jpg" class="attachment-full wp-post-image" alt="Logo-OME-med1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1658 products type-products status-publish has-post-thumbnail category-life-science-components category-precision-machining-manufacturing entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/controlled-fluidics/"> | |
| <img width="168" height="45" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-CFL.png" class="attachment-full wp-post-image" alt="Logo-CFL"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1657 products type-products status-publish has-post-thumbnail category-led-laser-diodes category-life-science-components category-electro-optics category-power-supplies-power-generation category-thermal-management entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/tellurex/"> | |
| <img width="250" height="70" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-Tellurex-1.png" class="attachment-full wp-post-image" alt="Logo-Tellurex-1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1656 products type-products status-publish has-post-thumbnail category-life-science-components category-precision-machining-manufacturing entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/pep-connecticut-plastics/"> | |
| <img width="196" height="82" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/CTP-logo.png" class="attachment-full wp-post-image" alt="CTP-logo"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1655 products type-products status-publish has-post-thumbnail category-led-laser-diodes category-electro-optics category-test-measurement entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/dataray-inc/"> | |
| <img width="150" height="38" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-DataRay-plain-150x38.png" class="attachment-full wp-post-image" alt="Logo-DataRay-plain-150x38"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1654 products type-products status-publish has-post-thumbnail category-led-laser-diodes category-electro-optics entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/excelitas-technologies/"> | |
| <img width="250" height="70" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-Tellurex-11.png" class="attachment-full wp-post-image" alt="Logo-Tellurex-1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article></main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.13) | |
| // Compass (v1.0.3) | |
| // Bourbon (v4.2.2) | |
| // Susy (v2.2.2) | |
| // ---- | |
| @import "susy"; | |
| @import "bourbon/bourbon"; | |
| $susy: ( | |
| flow: ltr, | |
| math: fluid, | |
| output: float, | |
| gutter-position: after, | |
| container: auto, | |
| container-position: center, | |
| columns: 12, | |
| gutters: 0.25, | |
| column-width: false, | |
| global-box-sizing: border-box, | |
| last-flow: to, | |
| debug: ( | |
| image: hide, | |
| color: rgba(red, 0.25), | |
| output: overlay, | |
| toggle: bottom right, | |
| ), | |
| use-custom: ( | |
| background-image: true, | |
| background-options: true, | |
| box-sizing: true, | |
| clearfix: true, | |
| rem: true, | |
| ) | |
| ); | |
| $mobile: 480px; | |
| $tablet: 768px; | |
| $laptop: 960px; | |
| $desktop:1200px; | |
| .entry { | |
| @include container(80%); | |
| @include susy-media( $mobile) { | |
| @include container(80%); | |
| // @include span(6 of 12 inside); | |
| // &:nth-child(2n) { | |
| // @include last; | |
| // } | |
| @include gallery(6 of 12 inside); | |
| } | |
| @include susy-media( $tablet 960px) { | |
| // @include span(4 of 12 inside); | |
| // &:nth-child(3n) { | |
| // @include last; | |
| // } | |
| @include gallery(4 of 12 inside); | |
| } | |
| @include susy-media( $desktop) { | |
| // @include span(4 of 12 inside); | |
| // &:nth-child(3n) { | |
| // @include last; | |
| // } | |
| @include gallery(4 of 12 inside); | |
| } | |
| margin-bottom: 0; | |
| padding: 10px; | |
| /*.product-image { | |
| min-height: 100px; | |
| img { | |
| @include susy-media( 651px) { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| } | |
| }*/ | |
| .product-summary { | |
| @include susy-media( 650px 800px) { | |
| @include container(50%); | |
| } | |
| } | |
| } | |
| .content { | |
| margin-bottom: 40px; | |
| padding: 40px; | |
| background: #fff; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .entry { | |
| *zoom: 1; | |
| max-width: 80%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-bottom: 0; | |
| padding: 10px; | |
| /*.product-image { | |
| min-height: 100px; | |
| img { | |
| @include susy-media( 651px) { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| } | |
| }*/ | |
| } | |
| .entry:before, .entry:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .entry:after { | |
| clear: both; | |
| } | |
| head { | |
| display: block; | |
| position: fixed; | |
| right: 10px; | |
| bottom: 10px; | |
| z-index: 999; | |
| color: #333; | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| head:before { | |
| content: "|||"; | |
| display: block; | |
| padding: 5px 10px; | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| head:hover { | |
| background: rgba(255, 255, 255, 0.5); | |
| color: red; | |
| } | |
| head:hover ~ .entry, head:hover ~ body .entry { | |
| position: relative; | |
| } | |
| head:hover ~ .entry:before, head:hover ~ body .entry:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| content: " "; | |
| z-index: 998; | |
| } | |
| @media (min-width: 480px) { | |
| .entry { | |
| *zoom: 1; | |
| max-width: 80%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 50%; | |
| float: left; | |
| padding-left: 0.83333%; | |
| padding-right: 0.83333%; | |
| } | |
| .entry:before, .entry:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .entry:after { | |
| clear: both; | |
| } | |
| head:hover ~ .entry, head:hover ~ body .entry { | |
| position: relative; | |
| } | |
| head:hover ~ .entry:before, head:hover ~ body .entry:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| content: " "; | |
| z-index: 998; | |
| } | |
| .entry:nth-child(2n + 1) { | |
| margin-left: 0; | |
| margin-right: -100%; | |
| clear: both; | |
| } | |
| .entry:nth-child(2n + 2) { | |
| margin-left: 50%; | |
| margin-right: -100%; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 768px) and (max-width: 960px) { | |
| .entry { | |
| width: 33.33333%; | |
| float: left; | |
| padding-left: 0.83333%; | |
| padding-right: 0.83333%; | |
| } | |
| .entry:nth-child(3n + 1) { | |
| margin-left: 0; | |
| margin-right: -100%; | |
| clear: both; | |
| } | |
| .entry:nth-child(3n + 2) { | |
| margin-left: 33.33333%; | |
| margin-right: -100%; | |
| clear: none; | |
| } | |
| .entry:nth-child(3n + 3) { | |
| margin-left: 66.66667%; | |
| margin-right: -100%; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .entry { | |
| width: 33.33333%; | |
| float: left; | |
| padding-left: 0.83333%; | |
| padding-right: 0.83333%; | |
| } | |
| .entry:nth-child(3n + 1) { | |
| margin-left: 0; | |
| margin-right: -100%; | |
| clear: both; | |
| } | |
| .entry:nth-child(3n + 2) { | |
| margin-left: 33.33333%; | |
| margin-right: -100%; | |
| clear: none; | |
| } | |
| .entry:nth-child(3n + 3) { | |
| margin-left: 66.66667%; | |
| margin-right: -100%; | |
| clear: none; | |
| } | |
| } | |
| @media (min-width: 650px) and (max-width: 800px) { | |
| .entry .product-summary { | |
| *zoom: 1; | |
| max-width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .entry .product-summary:before, .entry .product-summary:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .entry .product-summary:after { | |
| clear: both; | |
| } | |
| head:hover ~ .entry .product-summary, head:hover ~ body .entry .product-summary { | |
| position: relative; | |
| } | |
| head:hover ~ .entry .product-summary:before, head:hover ~ body .entry .product-summary:before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| content: " "; | |
| z-index: 998; | |
| } | |
| } | |
| .content { | |
| margin-bottom: 40px; | |
| padding: 40px; | |
| background: #fff; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main class="content" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog"><div class="archives-intro"><h1>Products</h1><p>Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> | |
| </div><article class="post-1668 products type-products status-publish has-post-thumbnail category-life-science-components category-precision-machining-manufacturing entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/controlled-fluidics-2/"> | |
| <img width="168" height="45" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-CFL.png" class="attachment-full wp-post-image" alt="Logo-CFL"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1667 products type-products status-publish has-post-thumbnail category-displays-lighting category-led-laser-diodes category-life-science-components category-electro-optics entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/omega-optical-2/"> | |
| <img width="139" height="80" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-OME-med1.jpg" class="attachment-full wp-post-image" alt="Logo-OME-med1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1659 products type-products status-publish has-post-thumbnail category-displays-lighting category-led-laser-diodes category-life-science-components category-electro-optics entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/omega-optical/"> | |
| <img width="139" height="80" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-OME-med1.jpg" class="attachment-full wp-post-image" alt="Logo-OME-med1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1658 products type-products status-publish has-post-thumbnail category-life-science-components category-precision-machining-manufacturing entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/controlled-fluidics/"> | |
| <img width="168" height="45" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-CFL.png" class="attachment-full wp-post-image" alt="Logo-CFL"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1657 products type-products status-publish has-post-thumbnail category-led-laser-diodes category-life-science-components category-electro-optics category-power-supplies-power-generation category-thermal-management entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/tellurex/"> | |
| <img width="250" height="70" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-Tellurex-1.png" class="attachment-full wp-post-image" alt="Logo-Tellurex-1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1656 products type-products status-publish has-post-thumbnail category-life-science-components category-precision-machining-manufacturing entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/pep-connecticut-plastics/"> | |
| <img width="196" height="82" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/CTP-logo.png" class="attachment-full wp-post-image" alt="CTP-logo"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1655 products type-products status-publish has-post-thumbnail category-led-laser-diodes category-electro-optics category-test-measurement entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/dataray-inc/"> | |
| <img width="150" height="38" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-DataRay-plain-150x38.png" class="attachment-full wp-post-image" alt="Logo-DataRay-plain-150x38"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article><article class="post-1654 products type-products status-publish has-post-thumbnail category-led-laser-diodes category-electro-optics entry" itemscope="itemscope" itemtype="http://schema.org/CreativeWork"><header class="entry-header"></header><div class="entry-content" itemprop="text"><div class="product-image"> | |
| <a href=" http://alexandras-imac.local:5757/products/excelitas-technologies/"> | |
| <img width="250" height="70" src="http://alexandras-imac.local:5757/wp-content/uploads/2015/04/Logo-Tellurex-11.png" class="attachment-full wp-post-image" alt="Logo-Tellurex-1"> </a> | |
| </div> | |
| <div class="product-summary"> | |
| <ul> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| <li>Quam Nullam Cursus</li> | |
| </ul> | |
| </div> | |
| </div></article></main> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment