.hentry { .divider-bottom; padding: @line-height-computed*2 0; @media @breakpoint2 { padding: @line-height-computed*4 0; } &:first-child { padding-top: @line-height-computed; } .page-single & { padding-bottom: @line-height-computed } } // post title .entry-title { .h1; text-align: center; color: @headings-color; margin-top: 0; margin-bottom: @line-height-computed; .format-link & { .h3; } } // post content .entry-content { h1, h2 { .heading-band; } p:last-child { margin-bottom: 0; } } // post category icons ///////////////////////////////////// .posttype { display: block; width: 20px; margin-left: auto; margin-right: auto; margin-bottom: @line-height-computed/2; margin-top: -@line-height-computed; // icon adjustments &:before { font-size: 20px; color: @text-color-light } &:hover:before { color: @link-color } } // LINK POST ///////////////////////////////////// .hentry.format-link { } .linkurl { display: block; font-family: @font-family-base; font-size: @font-size-mini; color: @text-color-dimmed; padding: @line-height-computed/3 0; margin-left: auto; margin-right: auto; .ellipsis; max-width: 70%; @media @breakpoint2 { max-width: 50%; } } .permalink-link { float: right; font-size: 1.1em } // PHOTO POST ///////////////////////////////////// .hentry.format-image { text-align: center; figure { display: inline-block; margin-left: auto; margin-right: auto; position: relative; padding: .4em; background: #fcfeff; border: 1px solid rgba(158, 170, 178, .6); border-radius: 2px; .box-shadow(0 1px 4px rgba(0, 0, 0, 0.1)); .transition; .page-single & { margin-bottom: @line-height-computed*2; } @media @breakpoint2 { .box-shadow(~"0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff"); } img { .box-shadow(none); border-radius: 2px; margin-left: auto; margin-right: auto; margin-bottom: 1em; } figcaption { text-align: center; margin-bottom: .5em; color: rgba(46, 79, 92, .7); font-family: @headings-font-family; font-weight: @headings-font-weight; font-style: normal; font-size: .9em } } } .photo-link { display: block; &:hover { figure { background: #c4e4df; } } } #exif { font-size: @font-size-small; color: #b9c3c9; text-align: center; margin-bottom: .5em; span { margin-right: 1em; } } // POST META ///////////////////////////////////// .entry-meta { .clearfix; margin-top: @line-height-computed*2; font-size: @font-size-small; text-align: center; } .byline, .time { font-style: italic; color: @text-color-light; } .byline { margin-bottom: 0; a { font-style: normal; } .by { display: block } } .time, .modtime { color: @text-color-dimmed } // // Related posts // .related-title { .h5; color: @text-color-dimmed; text-align: center; margin-top: 0; margin-bottom: @line-height-computed; } .related-posts { &:hover .post-title { color: @text-color; } } .related-post { text-align: center; .post-title { font-size: .8em; color: @text-color-light; line-height: @line-height-base; margin-top: 0; margin-bottom: @line-height-computed; .transition; } a { display: block; &:hover .post-title { color: @link-color-hover } } } // Masonry .masonry { @media @breakpoint2 { width: 125%; margin-left: -12.5%; .clearfix(); } .hentry { @media @breakpoint1 { width: 49%; float: left; clear: none; padding-top: 0; padding-bottom: 0; margin-bottom: .7em; margin-top: 0; margin-left: 0; margin-right: 1%; border: none; &:before { display: none; } &:nth-child(2n+1) { margin-right: 0; } &:last-child { margin-bottom: 3em; } } } } .grid-sizer { width: 100%; @media screen and (min-width: 480px) { width: 50%; } } // TABLES ///////////////////////////////////// table { border-collapse: collapse; border-spacing: 0; width: 100%; max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; margin-bottom: 1.5em; border-bottom: 1px solid #cfd9e1; } td { vertical-align: top; } th, td { padding: .7em .3em; text-align: left; vertical-align: top; border-top: 1px solid #cfd9e1; } th { font-weight: bold; } thead th { vertical-align: bottom; } table tbody + tbody { border-top: 2px solid #cfd9e1; } table tbody tr:nth-child(odd) td, table tbody tr:nth-child(odd) th { background-color: rgba(255,255,255,.2); } table tbody tr:hover td, table tbody tr:hover th { background-color: #f5f5f5; } // // Old Article Fixes // // text-shadow article // fluid examples #post-39 .entry-content > div, #post-39 .entry-content img { max-width: 100%; height: auto !important; margin-left: 0 !important; }