5ed88b6f9dCurrently the opacity of the avatar/logo image is faded to zero on scrolling down, but the element is still clickable. To not make it only invisible, but also completely remove it, we also animate the visibility property. Signed-off-by: Frieder Schrempf <frieder.schrempf@online.de>
817 lines
16 KiB
CSS
817 lines
16 KiB
CSS
/* --- General --- */
|
|
|
|
body {
|
|
font-family: 'Lora', 'Times New Roman', serif;
|
|
font-size: 18px;
|
|
color: #404040;
|
|
position: relative;
|
|
background: #FFF;
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: 100vh;
|
|
}
|
|
.container[role=main] {
|
|
margin-bottom:50px;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.container[role=main] {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
margin: 6px 0;
|
|
}
|
|
p + p {
|
|
margin: 24px 0 6px 0;
|
|
}
|
|
p a {
|
|
/* text-decoration: underline */
|
|
color: #008AFF;
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 800;
|
|
}
|
|
a {
|
|
color: #008AFF;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: #0085a1;
|
|
}
|
|
blockquote {
|
|
color: #808080;
|
|
font-style: italic;
|
|
}
|
|
blockquote p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
hr.small {
|
|
max-width: 100px;
|
|
margin: 15px auto;
|
|
border-width: 4px;
|
|
border-color: inherit;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.main-content {
|
|
padding-top: 80px;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.main-content {
|
|
padding-top: 130px;
|
|
}
|
|
}
|
|
|
|
.main-explain-area {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
padding: 15px inherit;
|
|
}
|
|
|
|
.hideme {
|
|
display: none;
|
|
}
|
|
|
|
div.panel-body a.list-group-item {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 800;
|
|
border-radius: 0;
|
|
border: none;
|
|
font-size: 16px;
|
|
}
|
|
div.panel-group .panel {
|
|
border-radius: 0;
|
|
}
|
|
div.panel-group .panel+.panel {
|
|
margin-top: 0;
|
|
}
|
|
|
|
div.panel-body a.list-group-item.view-all {
|
|
font-weight: 600;
|
|
}
|
|
|
|
::-moz-selection {
|
|
color: white;
|
|
text-shadow: none;
|
|
background: #0085a1;
|
|
}
|
|
::selection {
|
|
color: white;
|
|
text-shadow: none;
|
|
background: #0085a1;
|
|
}
|
|
img::selection {
|
|
color: white;
|
|
background: transparent;
|
|
}
|
|
img::-moz-selection {
|
|
color: white;
|
|
background: transparent;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.img-title {
|
|
width: 100%;
|
|
}
|
|
|
|
.disqus-comments {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.disqus-comments {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
/* --- Navbar --- */
|
|
|
|
.navbar-custom {
|
|
background: #F5F5F5;
|
|
border-bottom: 1px solid #EAEAEA;
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.navbar-custom .nav li a {
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.navbar-custom .navbar-brand,
|
|
.navbar-custom .nav li a {
|
|
font-weight: 800;
|
|
color: #404040;
|
|
}
|
|
|
|
.navbar-custom .navbar-brand:hover,
|
|
.navbar-custom .navbar-brand:focus ,
|
|
.navbar-custom .nav li a:hover,
|
|
.navbar-custom .nav li a:focus {
|
|
color: #0085a1;
|
|
}
|
|
|
|
.navbar-custom .navbar-brand-logo {
|
|
padding-top: 0;
|
|
-webkit-transition: padding .5s ease-in-out;
|
|
-moz-transition: padding .5s ease-in-out;
|
|
transition: padding .5s ease-in-out;
|
|
}
|
|
.navbar-custom .navbar-brand-logo img {
|
|
height: 50px;
|
|
-webkit-transition: height .5s ease-in-out;
|
|
-moz-transition: height .5s ease-in-out;
|
|
transition: height .5s ease-in-out;
|
|
}
|
|
.navbar-custom.top-nav-short .navbar-brand-logo {
|
|
padding-top: 5px;
|
|
}
|
|
.navbar-custom.top-nav-short .navbar-brand-logo img {
|
|
height: 40px;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.navbar-custom {
|
|
padding: 20px 0;
|
|
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
|
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
|
|
transition: background .5s ease-in-out,padding .5s ease-in-out;
|
|
}
|
|
|
|
.navbar-custom.top-nav-short {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.navbar-custom .avatar-container {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
position: absolute;
|
|
-webkit-transition: visibility 0.5s, opacity 0.5s ease-in-out;
|
|
-moz-transition: visibility 0.5s, opacity 0.5s ease-in-out;
|
|
transition: visibility 0.5s, opacity 0.5s ease-in-out;
|
|
left: 50%;
|
|
width: 50px;
|
|
margin-top: -25px;
|
|
}
|
|
.navbar-custom .avatar-container .avatar-img-border {
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
margin-left: -50%;
|
|
display: inline-block;
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
|
|
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
|
|
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
|
|
}
|
|
.navbar-custom .avatar-container .avatar-img {
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
display: block;
|
|
}
|
|
|
|
.navbar-custom.top-nav-short .avatar-container{
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.navbar-custom.top-nav-expanded .avatar-container {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.navbar-custom .avatar-container {
|
|
width: 100px;
|
|
margin-top: -50px;
|
|
}
|
|
|
|
.navbar-custom .avatar-container .avatar-img-border {
|
|
width: 100%;
|
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
|
|
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
|
|
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.navbar-custom .avatar-container .avatar-img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Multi-level navigation links */
|
|
.navbar-custom .nav .navlinks-container {
|
|
position: relative;
|
|
}
|
|
.navbar-custom .nav .navlinks-parent:after {
|
|
content: " \25BC";
|
|
}
|
|
.navbar-custom .nav .navlinks-children {
|
|
width: 100%;
|
|
display: none;
|
|
word-break: break-word;
|
|
}
|
|
.navbar-custom .nav .navlinks-container .navlinks-children a {
|
|
display: block;
|
|
padding: 10px;
|
|
padding-left: 30px;
|
|
background: #f5f5f5;
|
|
text-decoration: none !important;
|
|
border-width: 0 1px 1px 1px;
|
|
font-weight: normal;
|
|
}
|
|
@media only screen and (max-width: 767px) {
|
|
.navbar-custom .nav .navlinks-container.show-children {
|
|
background: #eee;
|
|
}
|
|
.navbar-custom .nav .navlinks-container.show-children .navlinks-children {
|
|
display: block;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.navbar-custom .nav .navlinks-container {
|
|
text-align: center;
|
|
}
|
|
.navbar-custom .nav .navlinks-container:hover {
|
|
background: #eee;
|
|
}
|
|
.navbar-custom .nav .navlinks-container:hover .navlinks-children {
|
|
display: block;
|
|
}
|
|
.navbar-custom .nav .navlinks-children {
|
|
position: absolute;
|
|
}
|
|
.navbar-custom .nav .navlinks-container .navlinks-children a {
|
|
padding-left: 10px;
|
|
border: 1px solid #eaeaea;
|
|
border-width: 0 1px 1px;
|
|
}
|
|
}
|
|
|
|
/* --- Footer --- */
|
|
|
|
footer {
|
|
padding: 30px 0;
|
|
background: #F5F5F5;
|
|
border-top: 1px #EAEAEA solid;
|
|
margin-top: auto;
|
|
font-size: 14px;
|
|
}
|
|
|
|
footer a {
|
|
color: #404040;
|
|
}
|
|
|
|
footer .list-inline {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
footer .copyright {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
footer .theme-by {
|
|
text-align: center;
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
footer {
|
|
padding: 50px 0;
|
|
}
|
|
footer .footer-links {
|
|
font-size: 18px;
|
|
}
|
|
footer .copyright {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* --- Post preview --- */
|
|
|
|
.post-preview {
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.post-preview {
|
|
padding: 35px 0;
|
|
}
|
|
}
|
|
|
|
.post-preview:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.post-preview a {
|
|
text-decoration: none;
|
|
color: #404040;
|
|
}
|
|
|
|
.post-preview a:focus,
|
|
.post-preview a:hover {
|
|
text-decoration: none;
|
|
color: #0085a1;
|
|
}
|
|
|
|
.post-preview .post-title {
|
|
font-size: 30px;
|
|
margin-top: 0;
|
|
}
|
|
.post-preview .post-subtitle {
|
|
margin: 0;
|
|
font-weight: 300;
|
|
margin-bottom: 10px;
|
|
}
|
|
.post-preview .post-meta,
|
|
.post-heading .post-meta,
|
|
.page-meta {
|
|
color: #808080;
|
|
font-size: 18px;
|
|
font-style: italic;
|
|
margin: 0 0 10px;
|
|
}
|
|
.page-meta {
|
|
align-self: center;
|
|
}
|
|
.post-preview .post-meta a,
|
|
.post-heading .post-meta a,
|
|
.page-meta a {
|
|
color: #404040;
|
|
text-decoration: none;
|
|
}
|
|
.post-preview .post-entry {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
.post-entry-container {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.post-entry {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
.post-image {
|
|
float: right;
|
|
height: 192px;
|
|
width: 192px;
|
|
margin-top: -35px;
|
|
filter: grayscale(90%);
|
|
}
|
|
.post-image:hover {
|
|
filter: grayscale(0%);
|
|
}
|
|
.post-image img {
|
|
border-radius: 100px;
|
|
height: 192px;
|
|
width: 192px;
|
|
}
|
|
.post-preview .post-read-more {
|
|
font-weight: 800;
|
|
float: right;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.post-preview .post-title {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
/* --- Tags --- */
|
|
|
|
.blog-tags {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
color: #999;
|
|
font-size: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.blog-tags:before {
|
|
content: "Tags: ";
|
|
}
|
|
|
|
.blog-tags a {
|
|
color: #008AFF;
|
|
text-decoration: none;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.blog-tags a:before {
|
|
content: "#";
|
|
}
|
|
|
|
.blog-tags a:hover {
|
|
border-radius: 2px;
|
|
color: #008AFF;
|
|
background-color: #CCC;
|
|
}
|
|
|
|
.post-preview .blog-tags {
|
|
margin-top: 5px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.post-preview .blog-tags {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.post-image, .post-image img {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.post-image {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 0;
|
|
float: left;
|
|
}
|
|
}
|
|
/* --- Post and page headers --- */
|
|
|
|
.intro-header {
|
|
margin: 80px 0 20px;
|
|
position: relative;
|
|
}
|
|
.intro-header.big-img {
|
|
background: no-repeat center center;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
background-size: cover;
|
|
-o-background-size: cover;
|
|
margin-top: 51px; /* The small navbar is 50px tall + 1px border */
|
|
margin-bottom: 35px;
|
|
}
|
|
.intro-header.big-img .big-img-transition {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
background: no-repeat center center;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
background-size: cover;
|
|
-o-background-size: cover;
|
|
-webkit-transition: opacity 1s linear;
|
|
-moz-transition: opacity 1s linear;
|
|
transition: opacity 1s linear;
|
|
}
|
|
.intro-header .page-heading,
|
|
.intro-header .tags-heading,
|
|
.intro-header .categories-heading {
|
|
text-align: center;
|
|
}
|
|
.intro-header.big-img .page-heading,
|
|
.intro-header.big-img .post-heading {
|
|
padding: 100px 0;
|
|
color: #FFF;
|
|
text-shadow: 1px 1px 3px #000;
|
|
}
|
|
.intro-header .page-heading h1,
|
|
.intro-header .tags-heading h1,
|
|
.intro-header .categories-heading h1 {
|
|
margin-top: 0;
|
|
font-size: 50px;
|
|
}
|
|
.intro-header .post-heading h1 {
|
|
margin-top: 0;
|
|
font-size: 35px;
|
|
}
|
|
.intro-header .page-heading .page-subheading,
|
|
.intro-header .post-heading .post-subheading {
|
|
font-size: 27px;
|
|
line-height: 1.1;
|
|
display: block;
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 300;
|
|
margin: 10px 0 0;
|
|
}
|
|
.intro-header .post-heading .post-subheading {
|
|
margin-bottom: 20px;
|
|
}
|
|
.intro-header.big-img .page-heading .page-subheading,
|
|
.intro-header.big-img .post-heading .post-subheading {
|
|
font-weight: 400;
|
|
}
|
|
.intro-header.big-img .page-heading hr {
|
|
box-shadow: 1px 1px 3px #000;
|
|
-webkit-box-shadow: 1px 1px 3px #000;
|
|
-moz-box-shadow: 1px 1px 3px #000;
|
|
}
|
|
.intro-header.big-img .post-heading .post-meta {
|
|
color: #EEE;
|
|
}
|
|
.intro-header.big-img .img-desc {
|
|
background: rgba(30, 30, 30, 0.6);
|
|
position: absolute;
|
|
padding: 5px 10px;
|
|
font-size: 11px;
|
|
color: #EEE;
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: none;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.intro-header {
|
|
margin-top: 130px;
|
|
}
|
|
.intro-header.big-img {
|
|
margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */
|
|
}
|
|
.intro-header.big-img .page-heading,
|
|
.intro-header.big-img .post-heading {
|
|
padding: 150px 0;
|
|
}
|
|
.intro-header .page-heading h1,
|
|
.intro-header .tags-heading h1,
|
|
.intro-header .categories-heading h1 {
|
|
font-size: 80px;
|
|
}
|
|
.intro-header .post-heading h1 {
|
|
font-size: 50px;
|
|
}
|
|
.intro-header.big-img .img-desc {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.header-section.has-img .no-img {
|
|
margin-top: 0;
|
|
background: #FCFCFC;
|
|
margin: 0 0 40px;
|
|
padding: 20px 0;
|
|
box-shadow: 0 0 5px #AAA;
|
|
}
|
|
/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
|
|
.header-section.has-img .intro-header.no-img {
|
|
display: none;
|
|
}
|
|
@media only screen and (max-width: 365px) {
|
|
.header-section.has-img .intro-header.no-img {
|
|
display: block;
|
|
}
|
|
.intro-header.big-img {
|
|
width: 100%;
|
|
height: 220px;
|
|
}
|
|
.intro-header.big-img .page-heading,
|
|
.intro-header.big-img .post-heading {
|
|
display: none;
|
|
}
|
|
.header-section.has-img .big-img {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 325px) {
|
|
.intro-header.big-img {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.caption {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
font-style: italic;
|
|
margin: 0;
|
|
display: block;
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
|
|
/* --- Pager --- */
|
|
|
|
.pager li a {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
padding: 10px 5px;
|
|
background: #FFF;
|
|
border-radius: 0;
|
|
color: #404040;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.pager li a {
|
|
padding: 15px 25px;
|
|
}
|
|
}
|
|
.pager li a:hover,
|
|
.pager li a:focus {
|
|
color: #FFF;
|
|
background: #0085a1;
|
|
border: 1px solid #0085a1;
|
|
}
|
|
|
|
.pager {
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
.pager.blog-pager {
|
|
margin-top:10px;
|
|
}
|
|
|
|
h4.panel-title > span.badge {
|
|
float: right;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.pager.blog-pager {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
/* --- Tables --- */
|
|
|
|
table {
|
|
padding: 0;
|
|
}
|
|
table tr {
|
|
border-top: 1px solid #cccccc;
|
|
background-color: #ffffff;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
table tr:nth-child(2n) {
|
|
background-color: #f8f8f8;
|
|
}
|
|
table tr th {
|
|
font-weight: bold;
|
|
border: 1px solid #cccccc;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 6px 13px;
|
|
}
|
|
table tr td {
|
|
border: 1px solid #cccccc;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 6px 13px;
|
|
}
|
|
table tr th :first-child,
|
|
table tr td :first-child {
|
|
margin-top: 0;
|
|
}
|
|
table tr th :last-child,
|
|
table tr td :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Social media sharing section --- */
|
|
|
|
#social-share-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* --- Google Custom Search Engine Popup --- */
|
|
#modalSearch table tr, #modalSearch table tr td, #modalSearch table tr th {
|
|
border:none;
|
|
}
|
|
.reset-box-sizing, .reset-box-sizing *, .reset-box-sizing *:before, .reset-box-sizing *:after, .gsc-inline-block {
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button {
|
|
box-sizing: content-box;
|
|
line-height: normal;
|
|
}
|
|
|
|
/* IPython split style */
|
|
div.splitbox {width:100%; overflow:auto;}
|
|
|
|
div.splitbox div.left {
|
|
width:48%;
|
|
float:left;}
|
|
div.splitbox div.right {
|
|
width:48%;
|
|
float:right;}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
div.splitbox div.left {
|
|
width:100%;
|
|
float:left;}
|
|
div.splitbox div.right {
|
|
width:100%;
|
|
float:left;}
|
|
}
|
|
|
|
/* Delayed Disqus */
|
|
.disqus-comments button {
|
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
padding: 10px 5px;
|
|
background: #FFF;
|
|
border-radius: 0;
|
|
color: #404040;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.disqus-comments button {
|
|
padding: 15px 25px;
|
|
}
|
|
}
|
|
.disqus-comments button:hover,
|
|
.disqus-comments button:focus {
|
|
color: #FFF;
|
|
background: #0085a1;
|
|
border: 1px solid #0085a1;
|
|
}
|
|
|
|
/* Related posts */
|
|
h4.see-also {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Sharing */
|
|
ul.share {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul.share li {
|
|
display: inline-flex;
|
|
margin-right: 5px;
|
|
}
|
|
ul.share li:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
ul.share li .fab {
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
transition: all 150ms ease-in-out;
|
|
color: #fff;
|
|
}
|
|
ul.share li a {
|
|
background-color: #b5c6ce;
|
|
display: block;
|
|
border-radius: 50%;
|
|
text-decoration: none !important;
|
|
margin: 0;
|
|
}
|
|
ul.share li:hover .fab {
|
|
transform: scale(1.4)
|
|
}
|