homepage/src/app/components/post/post.component.scss

83 lines
1.2 KiB
SCSS

//do the fonts
@import '../../../globals';
.post {
//font-family: $mainFont !important;
margin-top: 20px;
}
.post-header {
display: flex;
align-items: baseline;
margin: 0px 25px;
}
.post-title {
text-align: center;
flex-grow: 1;
font-size: 200%;
font-style: italic;
a {
color: #212529 !important;
}
}
.post-date {
flex-direction: row;
font-weight: bold;
font-style: italic;
}
.post-tags {
flex-direction: row-reverse;
}
.post-date, .post-tags {
display: flex;
align-items: flex-end;
width: 100px;
//need this to align the bottom of the texts with the bottom of the title text
//margin-bottom: 2px;
}
.post-body {
border-left: 1px solid black;
padding-left: 25px;
border-right: 1px solid black;
padding-right: 25px;
text-align: justify;
}
/**
This is a work-around for the innerHTML. Apparently, angular can style this is :host ::ng-deep is added. Fucked up.
*/
:host ::ng-deep .post-body p:last-child {
margin-bottom: 0px;
}
/**
Custom coloring for the links.
*/
:host ::ng-deep a {
color: darkorange;
}
.post-tag {
color: lightgrey;
.highlight {
color: grey;
}
}
.more {
border-left: 1px solid black;
border-right: 1px solid black;
padding-left: 25px;
padding-top: 10px;
}