Skip to content

Commit ff21a79

Browse files
author
daffadevhosting
committed
Built in sanity
1 parent 48a10fc commit ff21a79

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+1439
-4033
lines changed

‎_styling/_sass/_3dBox.scss

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
.section_grid {
2+
display: grid;
3+
grid-template-columns: repeat(3, 1fr);
4+
justify-content: center;
5+
justify-items: center;
6+
align-items: center;
7+
transform-style: preserve-3d;
8+
width: 100%;
9+
@include md {
10+
grid-template-columns: 1fr;
11+
justify-content: unset;
12+
}
13+
.card_grid {
14+
position: relative;
15+
width: 320px;
16+
height: 320px;
17+
margin: 20px;
18+
transform-style: preserve-3d;
19+
perspective: 1000px;
20+
&:hover .box {
21+
transform: rotateY(180deg);
22+
}
23+
.box {
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
transform-style: preserve-3d;
30+
transition: 1s ease;
31+
.card_img {
32+
object-fit: cover;
33+
object-position: center;
34+
position: absolute;
35+
pointer-events: none;
36+
top: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
overflow: hidden;
41+
box-shadow: 0 15px 20px rgba($color: #000000, $alpha: 1.0);
42+
img {
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
width: 100%;
47+
height: 320px;
48+
object-fit: cover;
49+
overflow: hidden;
50+
}
51+
span.title {
52+
position: absolute;
53+
transform-style: preserve-3d;
54+
transform: translateZ(50px);
55+
perspective: 1000px;
56+
top: 0;
57+
left: 0;
58+
text-align: left;
59+
font-size: 18px;
60+
width: 180px;
61+
color: #ffc300;
62+
margin: 20px;
63+
text-shadow: 0 0 7px #937000cc;
64+
}
65+
.author {
66+
position: absolute;
67+
padding: 10px;
68+
bottom: 0;
69+
color: #fff;
70+
}
71+
time.entry-time {
72+
position: absolute;
73+
bottom: 0;
74+
right: 0;
75+
font-size: 14px;
76+
text-align: end;
77+
width: 180px;
78+
color: #ff3300;
79+
margin: 20px;
80+
text-shadow: 0 0 7px rgb(147 112 0 / 80%);
81+
}
82+
}
83+
.contentBox {
84+
position: absolute;
85+
pointer-events: none;
86+
top: 0;
87+
left: 0;
88+
width: 100%;
89+
height: 320px;
90+
backface-visibility: hidden;
91+
display: flex;
92+
justify-content: center;
93+
align-items: center;
94+
flex-direction: column;
95+
transform-style: preserve-3d;
96+
transform: rotateY(180deg);
97+
background: #333;
98+
div {
99+
transform-style: preserve-3d;
100+
padding: 20px;
101+
height: 320px;
102+
background: rgba(255, 255, 255, 0.5);
103+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
104+
transform: translateZ(100px);
105+
h3 {
106+
color: azure;
107+
font-size: 20px;
108+
letter-spacing: 1px;
109+
@include md {
110+
font-size: 14px;
111+
}
112+
}
113+
p {
114+
color: azure;
115+
font-size: 18px;
116+
@include md {
117+
font-size: 14px;
118+
}
119+
}
120+
121+
a.button {
122+
position: absolute;
123+
pointer-events: painted;
124+
bottom: 0;
125+
right: 0;
126+
font-size: 1rem;
127+
font-family: inherit;
128+
border: none;
129+
border-radius: 8px;
130+
padding: 0.5rem 0.75rem;
131+
box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.2), 0 1px 2px hsla(0, 0%, 0%, 0.2);
132+
background-color: transparent;
133+
line-height: 1.5;
134+
margin: 20px;
135+
text-decoration: none;
136+
transition: .5s ease;
137+
background-size: 200% auto;
138+
&:hover {
139+
color: #fff;
140+
background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%);
141+
transition: .5s ease;
142+
}
143+
}
144+
}
145+
}
146+
}
147+
}
148+
}
149+
.bottomLink {
150+
width: fit-content;
151+
position: fixed;
152+
bottom: 25px;
153+
}

‎_styling/_sass/_blogging.scss

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.grid_post {
2+
display: grid;
3+
grid-template-columns: repeat(4, 1fr);
4+
grid-template-rows: 1fr;
5+
grid-gap: 10px;
6+
margin-bottom: 50px;
7+
transition: all ease-in-out 0.5s;
8+
@include md {
9+
grid-template-columns: 1fr;
10+
grid-template-rows: auto;
11+
justify-items: center;
12+
height: unset;
13+
grid-gap: 25px;
14+
margin-bottom: 20px;
15+
}
16+
article.postCard {
17+
position: relative;
18+
width: 100%;
19+
max-width: 300px;
20+
height: 300px;
21+
transition: all ease-in-out 0.5s;
22+
@include md {
23+
width: 320px;
24+
max-width: 350px;
25+
}
26+
&:hover .postCard_img {
27+
transform: translateY(0px) scale(0.3);
28+
transition: all ease-in-out 0.5s;
29+
}
30+
&:hover .textBox {
31+
transform: translateY(0) scale(1);
32+
opacity: 1;
33+
transition: all ease-in-out 0.5s;
34+
}
35+
.postCard_img {
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
width: -webkit-fill-available;
40+
object-fit: cover;
41+
object-position: center;
42+
height: 300px;
43+
overflow: hidden;
44+
box-shadow: 0 3px 14px -2px #121111;
45+
transition: all ease-in-out 0.5s;
46+
&::before {
47+
content: '';
48+
width: 100%;
49+
height: 100%;
50+
position: absolute;
51+
inset: 0;
52+
background: inherit;
53+
filter: blur(10px);
54+
top: 0;
55+
left: 0;
56+
background-size: cover;
57+
}
58+
.titleBox {
59+
position: absolute;
60+
color: #e6e6e6;
61+
bottom: 0;
62+
font-size: 18px;
63+
margin: 10px;
64+
text-align: left;
65+
text-shadow: 0 0 12px #292b2c;
66+
pointer-events: none;
67+
}
68+
img {
69+
position: absolute;
70+
top: 0;
71+
left: 0;
72+
width: -webkit-fill-available;
73+
object-fit: cover;
74+
object-position: center;
75+
height: 300px;
76+
overflow: hidden;
77+
transition: all ease-in-out .5s;
78+
}
79+
}
80+
div.textBox {
81+
transform: translateY(0px) translateX(-138px) scale(.01);
82+
background: rgba(255, 255, 255, 0.2);
83+
backdrop-filter: blur(7.5px);
84+
-webkit-backdrop-filter: blur(7.5px);
85+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
86+
text-shadow: 2px 1px 15px #9E9E9E;
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
width: -webkit-fill-available;
91+
height: 300px;
92+
opacity: 0;
93+
transform-origin: top;
94+
transition: all ease-in-out 0.5s;
95+
.textContent {
96+
text-align: left;
97+
position: relative;
98+
height: -webkit-fill-available;
99+
padding: 10px;
100+
pointer-events: none;
101+
a.button {
102+
position: absolute;
103+
pointer-events: painted;
104+
bottom: 0;
105+
right: 0;
106+
font-size: 1rem;
107+
font-family: inherit;
108+
border: none;
109+
border-radius: 8px;
110+
padding: 0.3rem 0.75rem;
111+
box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.2), 0 1px 2px hsla(0, 0%, 0%, 0.2);
112+
background-color: transparent;
113+
line-height: 1.5;
114+
margin: 20px;
115+
text-decoration: none;
116+
transition: .5s ease;
117+
background-size: 200% auto;
118+
&:hover {
119+
color: #fff;
120+
background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%);
121+
transition: .5s ease;
122+
}
123+
124+
}
125+
126+
}
127+
}
128+
}
129+
}

‎_styling/_sass/_blogpost.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.blog_post {
2+
width: 100%;
3+
max-width: 1040px;
4+
margin: auto;
5+
padding-bottom: 65px;
6+
.slider .js-slider {
7+
display: none;
8+
visibility: hidden;
9+
}
10+
.img_post {
11+
width: 100%;
12+
height: 400px;
13+
object-fit: cover;
14+
object-position: center;
15+
box-shadow: 0 0 20px -2px rgb(0 0 0 / 82%);
16+
}
17+
.post_body {
18+
padding: 0 25px;
19+
text-align: left;
20+
background: rgba(255, 255, 255, 0.2);
21+
border-radius: 8px;
22+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
23+
backdrop-filter: blur(10px);
24+
-webkit-backdrop-filter: blur(10px);
25+
border: 1px solid rgba(255, 255, 255, 0.3);
26+
@include md {
27+
padding: 0 10px;
28+
margin: 0 10px;}
29+
}
30+
}

0 commit comments

Comments
 (0)