// News overview #news { .panel-default, .panel-fulltext { font-size: 90%; padding-top: 75%; /* 1:1 Aspect Ratio */ position: relative; /* If you want text inside of it */ overflow: hidden; background: lighten($brand-primary, 10%); .panel-body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; background-color: rgba($brand-primary, .8); h3, p { color: white; } h3 { padding: 15px; font-size: 1.2em; margin: 0; height: 40%; display: table; span { display: table-cell; vertical-align: bottom; } } p, a { font-size: .8em; } p { padding: 0 15px; line-height: 1.2; margin: 0; } a { margin: 10px 0 0 15px; text-align: center; } em { display: block; font-size: 95%; margin: 0.5em 0; font-weight: 500; } } // expand link over the thumbnail a.fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; } } .panel-default { img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .panel-body { transform: translateY(60%); transition: transform .65s; } &:hover .panel-body { transform: rotateY(0); } } .news-entry { // height: 8em; .panel { background: none; box-shadow: none; border: none; } .panel-body { // height: 50%; background-color: #ffffff; border-radius: 4px; border-top: 3px solid $brand-primary; // border: 2px solid rgba(38, 67, 169, 0.8); *,a { color: black !important; } a { margin: 0px; font-size: 15pt; } li { margin-top: 1em; line-height: 20pt; } } } .partner-news { text-align: center; margin-top: 2em; margin-bottom: 1em; } } // News detail article #news-details { background: white; padding-top: 0; .category { margin-top: 2em; display: inline-block; text-transform: uppercase; font-size: 80%; letter-spacing: 2px; span { border-bottom: 1px solid $text-color; } } .date { color: lighten($text-color, 20%); font-size: 90%; text-transform: uppercase; margin-bottom: .5em; } hr { margin-left: 0; width: 100px; } .author { color: lighten($text-color, 20%); font-size: 90%; text-transform: uppercase; font-style: italic; } .backlink { margin-top: 3em; } .img-responsive { width: 100%; } .links { display: inline-block; border-bottom: 1px solid #999; padding: 1em; margin: 0em; list-style-type: none; li:first-child { display: none; } } }