mirror of
https://github.com/vale981/Vulcan
synced 2025-03-10 12:36:39 -04:00
db9d6c5af8
Via CSS, I've showed the share button and hide the discuss icon on the post's page. Basically, the share button replaces the real estate of the discuss icon because we are already on the post's page, and we still have the comment link/count in the post's meta.
For those looking for the share button on the posts list (homepage), don't worry because Sacha is going to make the post title redirect to the page of the post. You can see it here: 285aa810d1 . So your users are still going to see the share button. :)
636 lines
9.9 KiB
SCSS
636 lines
9.9 KiB
SCSS
// ------------------------------------ posts ------------------------------------ //
|
|
|
|
.posts-wrapper{
|
|
padding: 0;
|
|
}
|
|
.single-post .posts{
|
|
margin-bottom: 10px;
|
|
.post {
|
|
border-radius: 3px;
|
|
@extend .has-shadow;
|
|
}
|
|
}
|
|
// ------------------------------------ post ------------------------------------ //
|
|
|
|
.post{
|
|
border-radius: 0px;
|
|
margin-bottom: 0px;
|
|
border-bottom: 1px solid $lightest-grey;
|
|
position: relative;
|
|
width: 100%;
|
|
background: white;
|
|
&:first-child {
|
|
border-radius: 3px 3px 0px 0px;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0px 0px 3px 3px;
|
|
}
|
|
&.animate {
|
|
transition: ease-out, top, 400ms, 0ms;
|
|
}
|
|
&.inactive {
|
|
.post-content {
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIALMnDlTkpGQOpCi9PT053gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQC5OyXvW/4BHwAAAABJRU5ErkJggg==');
|
|
}
|
|
}
|
|
align-items: center;
|
|
}
|
|
|
|
.post-list-title, .page-title{
|
|
text-align: center;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.single-post {
|
|
@include medium-large {
|
|
.post-discuss {
|
|
display: none;
|
|
}
|
|
.post-share {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ------------------------------------ posts views nav ------------------------------------ //
|
|
.posts-views-nav{
|
|
background: white(0.6);
|
|
border-radius: 3px;
|
|
.menu-top-level, .menu-menu, .menu-contents, .menu-item{
|
|
display: inline-block;
|
|
}
|
|
.menu-top-level{
|
|
margin-right: 10px;
|
|
&:after{
|
|
content: ": ";
|
|
}
|
|
}
|
|
.menu-item{
|
|
padding: 0;
|
|
margin-right: 10px;
|
|
&.item-active{
|
|
position: relative;
|
|
&:after{
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
border-bottom: 2px solid currentColor;
|
|
width: 100%;
|
|
height: 0px;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
}
|
|
.menu-description{
|
|
display: none;
|
|
}
|
|
}
|
|
// ------------------------------ posts-list layout ------------------------------ //
|
|
|
|
.posts-list {
|
|
.post{
|
|
padding: 10px 0 10px 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.post-module {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-right: 10px;
|
|
}
|
|
.post-rank {
|
|
@include small {
|
|
display: none;
|
|
}
|
|
.post-rank-inner {
|
|
height: 25px;
|
|
position: relative;
|
|
}
|
|
span {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: -60px;
|
|
display: block;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
width: 30px;
|
|
text-align: right;
|
|
font-size: 18px;
|
|
// font-weight: bold;
|
|
color: black(0.2);
|
|
}
|
|
}
|
|
.post-vote {
|
|
order: 1;
|
|
flex-grow: 0;
|
|
}
|
|
.post-content {
|
|
order: 2;
|
|
width: 100%;
|
|
// can shrink on mobile or desktop
|
|
flex-shrink: 1;
|
|
@include medium-large {
|
|
// but can only grow on desktop
|
|
flex-grow: 1;
|
|
// only be a flex container on desktop
|
|
display: flex;
|
|
}
|
|
align-items: center;
|
|
}
|
|
.post-info {
|
|
flex-grow: 1;
|
|
}
|
|
.post-share {
|
|
order: 3;
|
|
}
|
|
.post-discuss {
|
|
order: 7;
|
|
@include small {
|
|
display: none;
|
|
}
|
|
}
|
|
.post-share,
|
|
.post-discuss {
|
|
// width: 60px;
|
|
text-align: center;
|
|
// height: 60px;
|
|
// position: relative;
|
|
// top: -5px;
|
|
}
|
|
.post-actions {
|
|
order: 8;
|
|
@include small {
|
|
display: block;
|
|
}
|
|
}
|
|
.post-avatars {
|
|
order: 6;
|
|
@include small {
|
|
display: none;
|
|
}
|
|
}
|
|
.show-actions {
|
|
.post-content {
|
|
display: none;
|
|
}
|
|
.post-share,
|
|
.post-discuss {
|
|
display: block;
|
|
}
|
|
}
|
|
.action-label {
|
|
@include small {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
// ------------------------------ posts-grid layout ------------------------------ //
|
|
|
|
@mixin onecol(){
|
|
@media screen and (min-width: 600px) and (max-width: 800px) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin twocol(){
|
|
@media screen and (min-width: 800px) and (max-width: 1000px) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin threecol(){
|
|
@media screen and (min-width: 1000px) and (max-width: 1400px) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin fourcol(){
|
|
@media screen and (min-width: 1400px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
.posts-grid {
|
|
@include medium-large {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.post {
|
|
|
|
@include onecol {
|
|
width: 100%;
|
|
margin-right: 0px;
|
|
}
|
|
@include twocol {
|
|
width: calc((100% - 10px)/2);
|
|
margin-right: 10px;
|
|
&:nth-of-type(2n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
@include threecol {
|
|
width: calc((100% - 20px)/3);
|
|
margin-right: 10px;
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
@include fourcol {
|
|
width: calc((100% - 30px)/4);
|
|
margin-right: 10px;
|
|
&:nth-of-type(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
padding: 0;
|
|
position: relative;
|
|
padding-bottom: 40px;
|
|
&:after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 0px;
|
|
width: 100%;
|
|
border-bottom: 1px solid $lightest-grey;
|
|
}
|
|
}
|
|
.post-rank {
|
|
span {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
z-index: 1;
|
|
background: black(0.4);
|
|
color: white;
|
|
height: 24px;
|
|
width: 24px;
|
|
line-height: 24px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
// border-radius: 100%;
|
|
// box-shadow: 0px 0px 2px white(0.5);
|
|
}
|
|
}
|
|
.post-content {
|
|
display: block;
|
|
}
|
|
.post-thumbnail {
|
|
margin-right: 0px;
|
|
a {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.post-info {
|
|
padding: 10px;
|
|
}
|
|
.no-thumbnail .post-info {
|
|
padding-right: 35px;
|
|
}
|
|
.post-avatars {
|
|
position: absolute;
|
|
right: 48px;
|
|
bottom: 0px;
|
|
padding: 8px 0px;
|
|
}
|
|
.post-discuss {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 0px;
|
|
padding: 8px 0px 2px 0px;
|
|
}
|
|
.post-vote{
|
|
position: absolute;
|
|
left: 7px;
|
|
bottom: 10px;
|
|
.vote-actions{
|
|
display: flex;
|
|
}
|
|
.vote-action{
|
|
flex: 1;
|
|
}
|
|
.downvote-link{
|
|
border-top: none;
|
|
border-left: 1px solid $lighter-text;
|
|
}
|
|
}
|
|
}
|
|
// -------------------------------- post modules --------------------------------- //
|
|
|
|
.post-module.post-rank {
|
|
margin: 0;
|
|
}
|
|
.post{
|
|
.icon{
|
|
}
|
|
}
|
|
.post-vote {
|
|
@include small{
|
|
text-align: center;
|
|
}
|
|
.voted{
|
|
.vote-action{
|
|
color: $lighter-text;
|
|
}
|
|
}
|
|
.upvoted{
|
|
.upvote-link{
|
|
color: $red;
|
|
}
|
|
}
|
|
.downvoted{
|
|
.downvote-link{
|
|
color: $red;
|
|
}
|
|
}
|
|
.vote-actions{
|
|
border: 1px solid $lighter-text;
|
|
border-radius: 100px;
|
|
}
|
|
.downvote-link{
|
|
border-top: 1px solid $lighter-text;
|
|
}
|
|
.vote-action{
|
|
padding: 2px 5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.upvote-link {
|
|
display: block;
|
|
.icon-upvote{
|
|
&:before {
|
|
top: -1px;
|
|
position: relative;
|
|
}
|
|
}
|
|
&.not-voted:hover {
|
|
i{
|
|
// opacity: 1;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
&.voted {
|
|
}
|
|
}
|
|
}
|
|
.post-content {
|
|
min-height: $grid-unit - 30px;
|
|
.post-sticky {
|
|
display: block;
|
|
position: absolute;
|
|
right: -40px;
|
|
top: 16px;
|
|
font-size: 24px;
|
|
i {
|
|
color: $light-text;
|
|
}
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.post-avatars {
|
|
display: inline-block;
|
|
display: flex;
|
|
.author-avatar {
|
|
display: block;
|
|
}
|
|
.post-commenters {
|
|
display: inline-block;
|
|
border-left: 1px solid black(0.2);
|
|
padding-left: 5px;
|
|
}
|
|
.avatar-link {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
.avatar {
|
|
display: inline-block;
|
|
height: 24px;
|
|
width: 24px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.post-author {
|
|
.avatar {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.post-discuss {
|
|
.action {
|
|
position: relative;
|
|
display: block;
|
|
padding: 0;
|
|
text-align: center;
|
|
color: $light-text;
|
|
margin-top: -4px;
|
|
}
|
|
.action-count {
|
|
position: absolute;
|
|
top: 13px;
|
|
display: block;
|
|
width: 100%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 13px;
|
|
}
|
|
.icon-comment{
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.post-actions {
|
|
display: none;
|
|
text-align: right;
|
|
a {
|
|
display: block;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
.post-share {
|
|
display: none;
|
|
}
|
|
// -------------------------------- post content --------------------------------- //
|
|
|
|
|
|
|
|
.post-heading {
|
|
margin-bottom: 3px;
|
|
line-height: 1.2;
|
|
.post-title {
|
|
display: inline-block;
|
|
margin-bottom: 0px;
|
|
@include small {
|
|
font-size: 15px;
|
|
}
|
|
@include medium-large {
|
|
font-size: 18px;
|
|
}
|
|
font-weight: normal;
|
|
&:visited {
|
|
color: $grey;
|
|
}
|
|
}
|
|
.post-domain {
|
|
color: $light-text;
|
|
margin-left: 5px;
|
|
@include small {
|
|
font-size: 13px;
|
|
}
|
|
@include medium-large {
|
|
font-size: 14px;
|
|
}
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.post-meta {
|
|
font-size: 13px;
|
|
color: $light-text;
|
|
line-height: 1.5;
|
|
@include small {
|
|
font-size: 11px;
|
|
line-height: 1.7;
|
|
}
|
|
a {
|
|
&:link,
|
|
&:visited,
|
|
&:active {
|
|
color: $medium-text;
|
|
}
|
|
&:hover {
|
|
color: $red;
|
|
}
|
|
}
|
|
}
|
|
.post-meta-item {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
.post-body, .page-body {
|
|
@extend .has-shadow;
|
|
border-radius: 3px;
|
|
margin-bottom: 10px;
|
|
background: white;
|
|
padding: 20px;
|
|
font-size: 16px;
|
|
.list & {
|
|
display: none;
|
|
}
|
|
}
|
|
.post.sticky {
|
|
background: $light-yellow;
|
|
}
|
|
// -------------------------------- mobile view --------------------------------- //
|
|
|
|
|
|
@include small {
|
|
.posts {
|
|
padding: 0;
|
|
.post-rank {
|
|
display: none;
|
|
}
|
|
}
|
|
.post {
|
|
.post-content {
|
|
margin-right: 50px;
|
|
margin-right: 0px;
|
|
// min-height: 90px;
|
|
.upvote-link {
|
|
width: 30px;
|
|
}
|
|
.post-heading {
|
|
.post-title {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
.post-domain {
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.post-meta {
|
|
font-size: 11px;
|
|
.unit {
|
|
font-size: 0;
|
|
&:after {
|
|
font-size: 12px;
|
|
content: "pts ";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// -------------------------------- other --------------------------------- //
|
|
|
|
.no-posts {
|
|
padding: 20px;
|
|
border: 1px solid black(0.1);
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
// @extend .has-shadow;
|
|
margin-bottom: 10px;
|
|
color: black(0.5);
|
|
}
|
|
.empty-notice {
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
&.edit-link {
|
|
color: $red;
|
|
}
|
|
&.share-link {
|
|
color: $light-text;
|
|
}
|
|
&.discuss-link {
|
|
color: $light-text;
|
|
}
|
|
&.more-link {
|
|
color: $blue;
|
|
}
|
|
&:hover {
|
|
&,
|
|
.action {
|
|
color: $red;
|
|
}
|
|
}
|
|
&.voted {
|
|
color: white;
|
|
cursor: default;
|
|
}
|
|
.points {
|
|
display: block;
|
|
font-size: 30px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
.more-button {
|
|
display: block;
|
|
width: 100%;
|
|
height: $grid-unit;
|
|
background: black(0.05);
|
|
text-align: center;
|
|
color: white;
|
|
line-height: $grid-unit;
|
|
font-size: 18px;
|
|
border-radius: 0px 0px 3px 3px;
|
|
text-shadow: 0px 1px 1px 0px black(0.25);
|
|
padding: 0px;
|
|
&:hover {
|
|
background: black(0.15);
|
|
}
|
|
}
|
|
.module {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
|