Skip to content

Commit 851a57f

Browse files
devcoderoaddevcoderoad
committed
Updates
1 parent 7017a0a commit 851a57f

Some content is hidden

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

41 files changed

+1246
-305
lines changed

‎assets/css/tailwind.css

+20-96
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33
@import 'tailwindcss/components';
44
@import 'tailwindcss/utilities';
55

6+
/* themes */
7+
@import './theme/theme.css';
8+
@import './theme/typography.css';
9+
@import './theme/nav.css';
10+
@import './theme/button.css';
11+
@import './theme/form.css';
12+
@import './theme/card.css';
13+
@import './theme/page.css';
14+
615
html {
716
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
817
Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -22,102 +31,17 @@ html {
2231
margin: 0;
2332
}
2433

25-
body {
26-
background-color: #fff;
27-
color: #343a40;
28-
}
29-
30-
.wrapper {
31-
padding-top: -64px;
32-
}
33-
34-
.headlineHero {
35-
background-image: url('https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1440&q=80');
36-
background-repeat: no-repeat;
37-
background-position: top center;
38-
background-size: cover;
39-
@apply min-h-screen flex justify-center items-center text-center mx-auto text-white;
40-
}
41-
42-
.nav-info {
43-
@apply flex my-4 pt-4 pb-4;
44-
}
34+
@layer base {
35+
body {
36+
background-color: #fff;
37+
color: #343a40;
38+
}
4539

46-
.nav-info:first-child {
47-
@apply border-b border-gray-400 pt-0 pb-7 align-middle;
48-
}
49-
50-
.nav-info nav h4 {
51-
@apply font-semibold;
52-
}
53-
54-
.nav-info ul {
55-
@apply font-medium;
56-
}
57-
58-
.nav-info ul li {
59-
@apply pt-3;
60-
}
61-
62-
/* .nav-info ul li a {
63-
@apply text-gray-300 hover:text-gray-400;
64-
} */
65-
66-
footer {
67-
@apply bg-gray-500 text-white;
68-
}
69-
70-
footer a {
71-
@apply text-gray-300 hover:text-gray-400 hover:underline capitalize font-bold text-sm;
72-
}
73-
74-
select.color-mode {
75-
@apply text-gray-700 active:border-0 focus:outline-none outline-none;
76-
}
77-
78-
select.color-mode option {
79-
@apply active:border-transparent focus:border-transparent border-0;
80-
}
81-
82-
select.color-mode option[selected] {
83-
@apply border-transparent;
84-
}
85-
86-
/* dark modes */
87-
88-
.dark-mode footer {
89-
@apply bg-gray-800;
90-
}
91-
92-
/* themes */
93-
94-
.btn {
95-
@apply rounded-full text-sm font-light mt-2 px-3 py-1 capitalize text-gray-400 hover:text-gray-700 focus:to-gray-900 hover:border-gray-700;
96-
}
97-
98-
.btn-xs {
99-
@apply rounded-full text-xs px-2;
100-
}
101-
102-
.btn-lg {
103-
@apply text-lg px-5 uppercase;
104-
}
105-
106-
.btn-outline {
107-
@apply border border-gray-400;
108-
}
109-
110-
/* forms */
111-
112-
form {
113-
@apply my-4;
114-
}
115-
116-
input,
117-
textarea {
118-
@apply text-gray-400 border border-gray-400 px-2 py-1 focus:text-gray-500 hover:border-gray-700;
119-
}
40+
footer {
41+
@apply bg-gray-500 text-white;
42+
}
12043

121-
label {
122-
@apply inline-block my-2;
44+
footer a {
45+
@apply text-gray-300 hover:text-gray-400 hover:underline capitalize font-bold text-sm;
46+
}
12347
}

‎assets/css/theme/button.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* button */
2+
3+
@layer components {
4+
.btn {
5+
@apply text-sm font-light mt-2 px-3 py-1 capitalize text-gray-400 hover:text-gray-700 focus:to-gray-900 hover:border-gray-700;
6+
}
7+
8+
.btn-xs {
9+
@apply text-xs px-2;
10+
}
11+
12+
.btn-lg {
13+
@apply text-lg px-5 uppercase;
14+
}
15+
16+
.btn-outline {
17+
@apply border border-gray-400;
18+
}
19+
20+
.btn-rounded {
21+
@apply rounded-full;
22+
}
23+
24+
.btn-default {
25+
font-size: 1rem;
26+
}
27+
28+
.btn-muted {
29+
@apply bg-gray-100;
30+
}
31+
32+
.btn-hidden .links,
33+
.btn-hidden span {
34+
transition: left 0.2s ease-out;
35+
display: inline;
36+
position: relative;
37+
left: -10px;
38+
margin-left: 0.1rem;
39+
}
40+
41+
.btn-hidden .links i,
42+
.btn-hidden span i {
43+
opacity: 0;
44+
visibility: hidden;
45+
transition: transform 0.25s ease-out, opacity 0.25s ease-out,
46+
visibility 0.25s ease-out;
47+
transform: translateX(-5px);
48+
}
49+
50+
.btn-hidden:hover .links,
51+
.btn-hidden:hover span {
52+
transform: translateX(0);
53+
left: 0;
54+
}
55+
56+
.btn-hidden:hover .links i,
57+
.btn-hidden:hover span i {
58+
opacity: 1;
59+
visibility: visible;
60+
transform: translateX(0);
61+
}
62+
63+
.box-shadow-img {
64+
box-shadow: 5px 5px 0 #d3d3d3;
65+
}
66+
}

‎assets/css/theme/card.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* cards */
2+
3+
@layer components {
4+
/* .boxed */
5+
.boxed {
6+
margin-top: 5rem;
7+
margin-bottom: 5rem;
8+
@apply flex relative;
9+
}
10+
11+
.boxed-bottom {
12+
margin-top: 2rem;
13+
margin-bottom: 2rem;
14+
@apply flex flex-wrap h-auto;
15+
}
16+
17+
.boxed-bottom-content::before {
18+
content: ' ';
19+
position: absolute;
20+
right: -10%;
21+
top: 0;
22+
bottom: 0;
23+
z-index: -1;
24+
width: 640px;
25+
transform: rotate(-50deg);
26+
height: 180px;
27+
opacity: 0.45;
28+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC');
29+
background-position: top center;
30+
background-repeat: repeat;
31+
background-attachment: scroll;
32+
}
33+
34+
.boxed-bottom-content {
35+
/* background-color: rgba(238, 238, 238, 1); */
36+
margin-top: 1rem;
37+
margin-left: 0.5rem;
38+
margin-right: 0.5rem;
39+
padding: 1.75rem;
40+
z-index: 1;
41+
@apply relative bg-gray-100 rounded-xl;
42+
}
43+
44+
.boxed-bottom__left,
45+
.boxed-bottom__right {
46+
margin-bottom: 1rem;
47+
@apply flex xl:w-2/6 lg:w-2/6 md:w-1/2 col-auto h-auto relative overflow-hidden px-4;
48+
}
49+
}

‎assets/css/theme/form.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* forms */
2+
3+
@layer components {
4+
form {
5+
@apply my-4;
6+
}
7+
8+
input,
9+
textarea {
10+
@apply text-gray-400 border border-gray-400 px-2 py-1 focus:text-gray-500 hover:border-gray-700;
11+
}
12+
13+
label {
14+
@apply inline-block my-2;
15+
}
16+
17+
select.color-mode {
18+
@apply text-gray-700 active:border-0 focus:outline-none outline-none;
19+
}
20+
21+
select.color-mode option {
22+
@apply active:border-transparent focus:border-transparent border-0;
23+
}
24+
25+
select.color-mode option[selected] {
26+
@apply border-transparent;
27+
}
28+
29+
.theme-form {
30+
z-index: 1;
31+
@apply relative grid grid-flow-row bg-gray-100 w-1/2 px-6 py-6 overflow-hidden;
32+
}
33+
34+
.theme-form::before {
35+
content: ' ';
36+
position: absolute;
37+
right: -10%;
38+
top: 0;
39+
bottom: 0;
40+
z-index: -1;
41+
width: 640px;
42+
transform: rotate(-50deg);
43+
height: 180px;
44+
opacity: 0.45;
45+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC');
46+
background-position: top center;
47+
background-repeat: repeat;
48+
background-attachment: scroll;
49+
}
50+
}

‎assets/css/theme/nav.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* navs */
2+
3+
@layer components {
4+
.nav-info {
5+
@apply md:flex mt-4 pt-4 pb-4 align-middle first:border-b first:border-gray-400 first:pt-0 first:pb-7;
6+
}
7+
8+
.nav-info nav h4 {
9+
@apply font-semibold;
10+
}
11+
12+
.nav-info ul {
13+
@apply font-medium mt-1;
14+
}
15+
16+
.nav-info ul li {
17+
@apply pt-2;
18+
}
19+
20+
/* .nav-info ul li a {
21+
@apply text-gray-300 hover:text-gray-400;
22+
} */
23+
24+
/* .nav-info ul li a {
25+
@apply block;
26+
} */
27+
}

‎assets/css/theme/page.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* pages */
2+
3+
@layer components {
4+
.page-content {
5+
@apply relative;
6+
}
7+
8+
.page-content::before,
9+
.page-content::after {
10+
content: '';
11+
position: absolute;
12+
z-index: -1;
13+
}
14+
15+
.page-content::after {
16+
bottom: 100px;
17+
left: 20px;
18+
width: 120px;
19+
height: 120px;
20+
opacity: 0.5;
21+
border-radius: 50%;
22+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQoU2NkIBIwEqmOgXyFU6dObQDZkp2dDaZhAMVEmCKYJLJi8hSCTCLKanwhQL6vcZkKAMbtEAuAaq67AAAAAElFTkSuQmCC');
23+
background-position: top center;
24+
background-repeat: repeat;
25+
background-attachment: scroll;
26+
}
27+
28+
.page-content::before {
29+
bottom: 6rem;
30+
right: 25rem;
31+
width: 30px;
32+
height: 30px;
33+
border-radius: 50%;
34+
opacity: 0.25;
35+
border: 4px solid #cdcdcd;
36+
}
37+
}

0 commit comments

Comments
 (0)