Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import styled from 'styled-components'
- import { resetButton, media } from 'src/assets/style-utils'
- export const Card = styled.div`
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 97%;
- height: 400px;
- padding: 24px;
- border-radius: 5px;
- border: solid 2px rgba(177, 187, 195, 0.5);
- background: url('${({ background }) => background}');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- &:after {
- content: "";
- position: absolute;
- z-index: 0;
- width: 100%;
- height: 50%;
- bottom: 0;
- left: 0;
- right: 0;
- background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(225, 225, 225, 0) 6%, rgba(0, 0, 0, 0.45) 54%, #000000, #000000);
- border-radius: 5px;
- }
- ${media.lg`
- width: 100%;
- `}
- ${media.md`
- width: 100%;
- `}
- `
- export const Inner = styled.div`
- position: relative;
- z-index: 5;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- `
- export const Title = styled.h3`
- color: #fff;
- font-size: 1.125rem;
- margin-bottom: 16px;
- `
- export const Social = styled.div`
- display: flex;
- justify-content: space-between;
- `
- export const Likes = styled.button`
- ${resetButton()}
- display: flex;
- align-items: center;
- color: #cccccc;
- font-size: 0.75rem;
- span {
- margin-left: 8px;
- }
- `
- export const Share = styled.button`
- ${resetButton()}
- display: flex;
- align-items: center;
- color: #cccccc;
- font-size: 0.75rem;
- span {
- margin-left: 8px;
- }
- `
- export const Shares = styled.span`
- display: flex;
- align-items: center;
- color: #ccc;
- font-size: 0.75rem;
- span {
- margin-left: 8px;
- }
- `
- export const Header = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- `
- export const Place = styled.div`
- position: relative;
- margin-left: -26px;
- padding-left: 26px;
- height: 26px;
- background-color: #fff;
- display: flex;
- align-items: center;
- span {
- margin-left: 6px;
- color: #666666;
- font-size: 0.75rem;
- }
- &:after {
- position: absolute;
- content: '';
- right: -24px;
- top: 0;
- height: 26px;
- width: 24px;
- background-color: #fff;
- border-top-right-radius: 50%;
- border-bottom-right-radius: 50%;
- }
- `
- export const AuthorWrap = styled.div`
- display: flex;
- justify-content: flex-end;
- &:hover {
- cursor: pointer;
- }
- `
- export const AuthorPhoto = styled.figure`
- margin-bottom: 0;
- background: url('${({ image }) => image}');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- width: 35px;
- height: 35px;
- border: solid 1px rgba(255, 255, 255, 0.75);
- border-radius: 50%;
- `
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement