zeus.ugent.be/content/assets/stylesheets/includes/blogpost.scss

101 lines
1.5 KiB
SCSS
Raw Normal View History

2017-04-21 18:54:46 +02:00
.blogpost {
position: relative;
#table-of-contents {
2017-04-21 19:04:01 +02:00
@include tablet {
2017-04-21 18:54:46 +02:00
position: absolute;
left: 100%;
}
2017-04-21 19:04:01 +02:00
@include mobile {
2017-04-21 18:54:46 +02:00
text-align: center;
}
2017-04-21 19:04:01 +02:00
#markdown-toc {
@extend .menu-list;
2016-10-31 02:23:28 +01:00
2017-04-21 19:04:01 +02:00
&, ul {
margin: 0;
list-style: none;
}
}
}
2016-10-31 02:23:28 +01:00
}
2017-02-02 15:48:38 +01:00
$sel: '';
@for $i from 1 through 9 {
$sel: if($i == 1, "ul", selector-nest($sel, "ul")) !global;
#markdown-toc.toc-depth-#{$i} #{$sel} {
display: none;
}
}
2017-04-23 15:47:44 +02:00
@keyframes lineAnimation {
2017-04-24 21:11:18 +02:00
to {
2017-04-23 15:47:44 +02:00
width: 80px;
opacity: 1;
}
}
2017-04-20 14:20:32 +02:00
.blog-heading {
display: flex;
flex-direction: column;
.titlewrap {
position: relative;
margin: auto;
.title {
2017-04-21 19:04:01 +02:00
@include tablet {
2017-04-21 18:54:46 +02:00
font-size: 4rem;
}
2017-04-20 14:20:32 +02:00
font-weight: bolder;
}
.subtitle {
position: absolute;
}
.details {
right: 0;
position: absolute;
margin-top: -1.1rem;
line-height: 1;
text-align: right;
}
}
2017-04-24 21:11:18 +02:00
// Under title line
2017-04-20 14:20:32 +02:00
&::after {
content: '';
2017-04-23 15:47:44 +02:00
opacity: 0;
width: 0px;
2017-04-20 14:20:32 +02:00
height: 1px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
display: block;
background: $zeus-orange;
2017-04-23 15:47:44 +02:00
animation: lineAnimation 2s ease-in-out 1 normal forwards;
2017-04-24 21:11:18 +02:00
animation-delay: 0.5s;
2017-04-20 14:20:32 +02:00
}
2016-10-06 14:21:01 +02:00
}
2017-04-20 23:06:45 +02:00
.blog-preview {
position: relative;
2017-04-24 21:11:18 +02:00
// Fadeout
2017-04-20 23:06:45 +02:00
&::after {
content: '';
position: absolute;
bottom: 20px;
left: 0;
background: linear-gradient(to bottom, transparent, white);
height: 100px;
width: 100%;
}
}