12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- // Hero
- //-------------------------------
- // Hero heading colors
- .hero-heading {
- &-blog h1 {
- font-size: 3.25rem;
- margin: auto 5rem;
- }
- &-post h1 {
- font-size: 4.5rem;
- margin: auto 5rem;
- }
- h1 {
- color: $hero-heading-color!important;
- }
- span {
- color: $hero-date-color!important;
- }
- a {
- color: $hero-heading-color!important;
- }
- }
- @media (max-width: 48rem) {
- .hero-heading
- h1 {
- font-size: 2rem;
- margin: initial;
- }
- }
- // Hero hover dummy class, used only in blog layout
- .hero-hov {
- background: transparent;
- transition: background .25s ease;
- &:hover {
- background: rgba(0,0,0,.5);
- }
- }
- // Oversized hero in post layout
- .bleed-hero-container {
- width: 130%;
- height: 130%;
- margin: 0 -15% 0 -15%;
- }
- @media (max-width: 48rem) {
- .bleed-hero-container {
- width: 110%;
- margin: 0 -5% 0- 5%;
- }
- }
- // Container for hero image source link
- .post-source-img {
- background-color: rgba(0,0,0,.5);
- position: absolute;
- visibility: hidden;
- bottom: 0;
- left: 0;
- span {
- font-size: .85em;
- padding: .5rem;
- }
- .source {
- color: #fff;
- padding: .5rem;
- }
- .source-text {
- color: #ccc;
- margin-left: 3rem;
- }
- &:hover {
- visibility: visible;
- transition: all 0.5s ease;
- }
- &:before {
- position: absolute;
- font-family: 'icomoon';
- content: '\e894';
- bottom: 0;
- left: 0;
- padding: .5rem .75rem;
- visibility: visible;
- }
- &:hover:before {
- color: #fff;
- }
- }
|