diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html index 14eebb4..214f9c5 100644 --- a/src/app/pages/programas/programa.html +++ b/src/app/pages/programas/programa.html @@ -23,89 +23,98 @@
- -
-

{{::pagePrograma.article.title}}

-
- -
-
-
-
-
- -
-
-

{{::stripHtml(pagePrograma.article.abstract)}}

-
-
-

Lorem ipsum dolor sit amet, ea veniam mucius ocurreret vix, ius ex nisl vidisse partiendo. Blandit nominavi cum ei, paulo quaestio his ei, eum minim salutandi in. Civibus albucius in quo, et eam posse facilisis. Debet suavitate sea ut, his ei feugiat fastidii eleifend. Quo ex quando maiestatis voluptatum, mel te perpetua maiestatis, sit ceteros legendos deserunt ea. Enim dolores moderatius eu pro, ad quo ignota aliquid meliore.

-
-
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss index 0a39875..5cff315 100644 --- a/src/app/pages/programas/programas.scss +++ b/src/app/pages/programas/programas.scss @@ -7,81 +7,121 @@ } } -.program-preview { +.page--program { - .program-preview--box { - position: relative; - background-color: #f1f1f1; - } + .program-preview { - .program-preview--banner { - width: 100%; - height: 400px; + .program-preview--box { + position: relative; + background-color: #f1f1f1; + } - background-position: center; - background-size: cover; - background-repeat: no-repeat; + .program-preview--banner { + width: 100%; + height: 400px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; - @media screen and (max-width: $screen-xs) { - // height: 15px; - // .video { - // height: 290px; - // } - } - } + @media screen and (max-width: $screen-xs) { + // height: 15px; - .program-preview--icon { - $icon-size: 98px; - $icon-scale: 0.7; - position: absolute; - top: (-1) * ($icon-size / 2); - left: 40px; + // .video { + // height: 290px; + // } + } + } - width: $icon-size * $icon-scale + 20px; - height: $icon-size * $icon-scale + 20px; + .program-preview--icon { + $icon-size: 80px; + $icon-scale: 0.7; + position: absolute; + top: (-1) * ($icon-size / 2); + left: 40px; + + width: $icon-size * $icon-scale + 25px; + height: $icon-size * $icon-scale + 25px; + + .icon { + display: block; + position: relative; + top: -2px; + left: -2px; + } + + .contraste & { + border: 1px solid #fff; + } + } - .icon { - display: block; + .program-preview--box--content-wrapper { + padding: 48px; position: relative; - top: -8px; - left: -8px; - // transform: scale($icon-scale); } - .contraste & { - border: 1px solid #fff; + .program-preview--abstract { + h2 { + margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px; + margin-bottom: 32px; + } } - } - .program-preview--box--content-wrapper { - padding: 40px; - position: relative; - } + .program-preview--abstract-details { + p { + color: #484848; + font-size: 14px; + line-height: 18px; + margin-bottom: 25px; + } + } - .program-preview--share-label, - .program-preview--share-directive { - display: inline-block; - vertical-align: middle; - } + .program-preview--share { + margin-bottom: 20px; + position: relative; + .dropdown { + display: inline-block; + position: relative; + } + + .dropdown-menu { + padding: 0; + margin: 0; + } + + .social-share { + background-color: #fff; + } + + .social-share--arrow { + border-bottom-color: #fff; + } + } - .program-preview--abstract h2 { - font-size: 40px; - } + .program-preview--share-label, + .program-preview--share-directive { + display: inline-block; + vertical-align: middle; + } - h2, - h3{ - font-weight: bold; - } + h1 { + font-size: 38px; + line-height: 40px; + font-weight: 900; + } - h3 { - margin-top: 0; - } -} + h2 { + font-size: 32px; + line-height: 36px; + font-weight: bold; + } -.page--program { + h3 { + margin-top: 0; + } + } .btn-close { position: absolute; -- libgit2 0.21.2