Skip to content

Commit fbe6162

Browse files
leecalcoteleecalcote
committed
three bug fixes
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 135ca34 commit fbe6162

3 files changed

Lines changed: 196 additions & 181 deletions

File tree

‎src/components/Card/Card.style.js‎

Lines changed: 151 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -3,181 +3,175 @@ import styled from "styled-components";
33
import cursor from "../Features/images/cursor.svg";
44

55
export const CardWrapper = styled.div`
6-
.post-block{
7-
cursor: url(${cursor}), auto;
8-
margin-bottom: 2rem;
9-
border-radius: 0.5rem;
10-
background-Color:${props => props.theme.grey212121ToWhite};
11-
box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};
12-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
13-
14-
&:hover{
15-
box-shadow: 0px 2px 15px 4px ${props => props.theme.whiteNineToBlackOne};
16-
.post-thumb-block{
17-
.gatsby-image-wrapper, .old-gatsby-image-wrapper{
18-
transform: scale3d(1.1,1.1,1);
19-
}
20-
}
21-
.readmore-btn{
22-
color: ${props => props.theme.secondaryColor};
23-
svg{
24-
margin-left: 0.25rem;
25-
transform: scale(1.2);
26-
}
27-
}
28-
}
6+
.post-block {
7+
cursor: url(${cursor}), auto;
8+
margin-bottom: 2rem;
9+
border-radius: 0.5rem;
10+
background-color: ${(props) => props.theme.grey212121ToWhite};
11+
box-shadow: 0px 2px 6px 0px ${(props) => props.theme.green00D3A9ToBlackTwo};
12+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
13+
14+
&:hover {
15+
box-shadow: 0px 2px 15px 4px ${(props) => props.theme.whiteNineToBlackOne};
16+
.post-thumb-block {
17+
.gatsby-image-wrapper,
18+
.old-gatsby-image-wrapper {
19+
transform: scale3d(1.1, 1.1, 1);
20+
}
21+
}
22+
.readmore-btn {
23+
color: ${(props) => props.theme.secondaryColor};
24+
svg {
25+
margin-left: 0.25rem;
26+
transform: scale(1.2);
27+
}
28+
}
2929
}
30-
31-
.readmore-btn,
32-
.external-link-btn,
33-
.post-title,
34-
.post-meta-block,
35-
.post-content-block,
36-
.post-thumb-block,
37-
img,
38-
h2,
39-
p {
40-
cursor: inherit;
30+
}
31+
32+
.readmore-btn,
33+
.external-link-btn,
34+
.post-title,
35+
.post-meta-block,
36+
.post-content-block,
37+
.post-thumb-block,
38+
img,
39+
h2,
40+
p {
41+
cursor: inherit;
42+
}
43+
44+
.readmore-btn {
45+
color: ${(props) => props.theme.secondaryColor};
46+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
47+
}
48+
@media screen and (max-width: 776px) {
49+
.post-block {
50+
width: auto;
51+
margin: auto auto 2rem;
4152
}
42-
43-
.readmore-btn{
44-
color: ${props => props.theme.secondaryColor};
45-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
53+
}
54+
55+
.post-thumb-block {
56+
overflow: hidden;
57+
height: 11.5rem;
58+
border-top-right-radius: 0.5rem;
59+
border-top-left-radius: 0.5rem;
60+
61+
.gatsby-image-wrapper,
62+
.old-gatsby-image-wrapper {
63+
height: 100%;
64+
margin-top: 0.2rem;
65+
transition: all 0.3s ease-in;
4666
}
47-
@media screen and (max-width:776px){
48-
.post-block{
49-
width: auto;
50-
margin: auto auto 2rem;
51-
}
52-
}
53-
54-
.post-thumb-block{
55-
overflow: hidden;
56-
height: 11.5rem;
57-
border-top-right-radius: 0.5rem;
58-
border-top-left-radius: 0.5rem;
59-
60-
.gatsby-image-wrapper, .old-gatsby-image-wrapper{
61-
height:100%;
62-
margin-top: 0.2rem;
63-
transition: all 0.3s ease-in;
67+
img {
68+
height: inherit;
69+
max-height: 180px;
70+
display: block;
71+
text-align: center;
72+
margin: auto;
6473
}
65-
img{
66-
height: inherit;
67-
max-height: 180px;
68-
display: block;
69-
text-align: center;
70-
margin: auto;
71-
}
74+
}
7275
73-
}
74-
76+
.post-content-block {
77+
padding: 1rem 2rem;
78+
height: 8rem;
79+
}
7580
76-
.post-content-block{
77-
padding: 1rem 2rem;
78-
height: 8rem;
81+
@media screen and (max-width: 1200px) and (min-width: 992px) {
82+
.post-thumb-block {
83+
height: 12rem;
7984
}
8085
81-
@media screen and (max-width: 1200px) and (min-width: 992px){
82-
.post-thumb-block{
83-
height: 12rem;
84-
85-
}
86-
87-
.post-content-block{
88-
height: 10rem;
89-
}
90-
91-
86+
.post-content-block {
87+
height: 10rem;
9288
}
93-
89+
}
9490
95-
@media screen and (max-width: 670px) and (min-width: 560px){
96-
.post-content-block{
97-
height: 10rem;
98-
99-
}
91+
@media screen and (max-width: 670px) and (min-width: 560px) {
92+
.post-content-block {
93+
height: 10rem;
10094
}
95+
}
10196
102-
@media screen and (max-width: 350px){
103-
.post-content-block{
104-
height: 10rem;
105-
}
97+
@media screen and (max-width: 350px) {
98+
.post-content-block {
99+
height: 10rem;
106100
}
107-
108-
.post-title{
109-
font-size: 1.4rem;
110-
font-weight: 400;
111-
white-space: nowrap;
112-
overflow: hidden;
113-
text-overflow: ellipsis;
101+
}
102+
103+
.post-title {
104+
font-size: 1.4rem;
105+
font-weight: 400;
106+
white-space: nowrap;
107+
overflow: hidden;
108+
text-overflow: ellipsis;
109+
}
110+
111+
.post-meta-block {
112+
height: auto;
113+
display: flex;
114+
margin-bottom: 0.5rem;
115+
116+
.author {
117+
text-align: end;
114118
}
115-
116-
.post-meta-block{
117-
height: auto;
118-
display: flex;
119-
margin-buttom: 0.5rem;
120-
121-
122-
.author{
123-
text-align: end;
124-
}
125-
.author, p{
126-
color: ${props => props.theme.whiteSixToBlackSix};
127-
font-size: 0.9rem;
128-
font-weight: 400;
129-
flex: auto;
130-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
131-
}
132-
.type{
133-
text-align: end;
134-
font-size: 1rem;
135-
font-weight: 400;
136-
}
119+
.author,
120+
p {
121+
color: ${(props) => props.theme.whiteSixToBlackSix};
122+
font-size: 0.9rem;
123+
font-weight: 400;
124+
flex: auto;
125+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
137126
}
138-
139-
.readmore-btn-wrapper{
140-
display:flex;
141-
justify-content: flex-start;
142-
127+
.type {
128+
text-align: end;
129+
font-size: 1rem;
130+
font-weight: 400;
143131
}
144-
145-
.readmore-btn::after{
146-
content: '';
147-
position: absolute;
148-
margin: 0 1rem 2rem;
149-
top: 0;
150-
left: 0;
151-
right: 0;
152-
bottom: 0;
132+
}
133+
134+
.readmore-btn-wrapper {
135+
display: flex;
136+
justify-content: flex-start;
137+
}
138+
139+
.readmore-btn::after {
140+
content: "";
141+
position: absolute;
142+
margin: 0 1rem 2rem;
143+
top: 0;
144+
left: 0;
145+
right: 0;
146+
bottom: 0;
147+
}
148+
.readmore-btn,
149+
.external-link-btn {
150+
color: ${(props) => props.theme.whiteFourToBlackFour};
151+
display: flex;
152+
flex: auto;
153+
align-items: center;
154+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
155+
156+
svg {
157+
font-size: 1.5rem;
158+
transition: all 0.3s;
153159
}
154-
.readmore-btn, .external-link-btn{
155-
color: ${props => props.theme.whiteFourToBlackFour};
156-
display: flex;
157-
flex: auto;
158-
align-items: center;
159-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
160-
161-
162-
svg{
163-
font-size: 1.5rem;
164-
transition: all 0.3s;
165-
}
160+
}
161+
162+
.external-link-btn {
163+
justify-content: flex-end;
164+
svg {
165+
font-size: 2rem;
166+
padding: 0.25rem;
167+
position: relative;
166168
}
167169
168-
.external-link-btn{
169-
justify-content: flex-end;
170-
svg{
171-
font-size: 2rem;
172-
padding: 0.25rem;
173-
position: relative;
174-
}
175-
176-
&:hover{
177-
color: ${props => props.theme.secondaryColor};
178-
svg{
179-
transform: scale(1.25);
180-
}
181-
}
170+
&:hover {
171+
color: ${(props) => props.theme.secondaryColor};
172+
svg {
173+
transform: scale(1.25);
174+
}
182175
}
176+
}
183177
`;

0 commit comments

Comments
 (0)