| /* ========================================================================== |
| Base Elements and Components |
| ========================================================================== */ |
| |
| hr { |
| display: block; |
| margin: 1em 0; |
| padding: 0; |
| height: 1px; |
| border: 0; |
| border-top: 1px solid #ccc; |
| border-bottom: 1px solid #fff; |
| } |
| |
| /* |
| Figures and images |
| ========================================================================== */ |
| |
| figure { |
| margin: 0; |
| padding-top: 10px; |
| padding-bottom: 10px; |
| @include clearfix(); |
| |
| img { |
| margin-bottom: 10px; |
| } |
| |
| a { |
| |
| img { |
| transform: translate(0, 0); |
| transition-duration: 0.25s; |
| |
| &:hover { |
| transform: translate(0, -5px); |
| box-shadow: 0 0 10px rgba($base-color, 0.2); |
| } |
| } |
| } |
| |
| /* 2 columns */ |
| &.half { |
| @media #{$large} { |
| |
| img { |
| width: 310px; |
| float: left; |
| margin-right: 10px; |
| } |
| |
| figcaption { |
| clear: left; |
| } |
| } |
| } |
| |
| /* 3 columns */ |
| &.third { |
| @media #{$large} { |
| |
| img { |
| width: 200px; |
| float: left; |
| margin-right: 10px; |
| } |
| |
| figcaption { |
| clear: left; |
| } |
| } |
| } |
| } |
| |
| svg:not(:root) { |
| overflow: hidden; |
| } |
| |
| /* |
| Buttons |
| ========================================================================== */ |
| |
| .btn { |
| display: inline-block; |
| margin-bottom: 20px; |
| padding: 8px 20px; |
| @include font-rem(14); |
| background-color: $primary; |
| color: #fff; |
| border-width: 2px !important; |
| border-style: solid !important; |
| border-color: $primary; |
| border-radius: 3px; |
| |
| &:visited { |
| color: #fff; |
| } |
| |
| &:hover { |
| background-color: #fff; |
| color: $primary; |
| } |
| } |
| |
| .btn-inverse { |
| background-color: #fff; |
| color: $primary; |
| border-color: #fff; |
| |
| &:visited { |
| color: $primary; |
| } |
| |
| &:hover { |
| background-color: $primary; |
| color: #fff; |
| } |
| } |
| |
| .btn-success { |
| background-color: $success; |
| color: #fff; |
| border-color: $success; |
| |
| &:visited { |
| color: #fff; |
| } |
| |
| &:hover { |
| background-color: #fff; |
| color: $success; |
| } |
| } |
| |
| .btn-warning { |
| background-color: $warning; |
| color: #fff; |
| border-color: $warning; |
| |
| &:visited { |
| color: #fff; |
| } |
| |
| &:hover { |
| background-color: #fff; |
| color: $warning; |
| } |
| } |
| |
| .btn-danger { |
| background-color: $danger; |
| color: #fff; |
| border-color: $danger; |
| |
| &:visited { |
| color: #fff; |
| } |
| |
| &:hover { |
| background-color: #fff; |
| color: $danger; |
| } |
| } |
| |
| .btn-info { |
| background-color: $info; |
| color: #fff; |
| border-color: $info; |
| |
| &:visited { |
| color: #fff; |
| } |
| |
| &:hover { |
| background-color: #fff; |
| color: $info; |
| } |
| } |
| |
| /* |
| Wells |
| ========================================================================== */ |
| |
| .well { |
| padding: 20px; |
| border: 1px solid $comp-color; |
| border-radius: 4px; |
| } |
| |
| /* |
| Code and iframe |
| ========================================================================== */ |
| |
| iframe { |
| border: 1px solid #ddd; |
| } |
| |
| .ec-lazy { |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| |
| .index-post { |
| padding: 20px; |
| border: 1px solid $clr-border-light; |
| box-shadow: rgba(0, 0, 0, 0.05) 0 1px 4px 0; |
| max-width: 800px; |
| margin: 40px auto; |
| margin-top: 10px; |
| border-radius: 4px; |
| |
| h2 { |
| margin-top: 0; |
| margin-bottom: 15px; |
| font-size: 1.5rem; |
| line-height: 35px; |
| |
| a { |
| color: $clr-primary; |
| |
| &:hover { |
| color: $clr-contrast; |
| text-decoration: none; |
| } |
| } |
| } |
| |
| p { |
| font-size: 15px; |
| line-height: 25px; |
| } |
| } |
| |
| .tag-panel { |
| font-size: 0.9em; |
| margin-top: 10px; |
| position: absolute; |
| bottom: 0; |
| color: $clr-secondary; |
| |
| .term { |
| border: 1px solid $clr-secondary; |
| padding: 3px 8px; |
| margin-right: 10px; |
| border-radius: 6px; |
| font-size: 12px; |
| } |
| } |
| |
| pre { |
| background-color: transparent; |
| font-size: 14px; |
| } |