Skip to content

Commit 781833a

Browse files
adictonatoradictonator
committed
more responsive updates
1 parent af23c7f commit 781833a

File tree

7 files changed

+203
-172
lines changed

7 files changed

+203
-172
lines changed

‎style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1192,6 +1192,14 @@ html {
11921192
margin-top: 1.25rem;
11931193
}
11941194

1195+
.mt-8 {
1196+
margin-top: 2rem;
1197+
}
1198+
1199+
.mb-8 {
1200+
margin-bottom: 2rem;
1201+
}
1202+
11951203
.block {
11961204
display: block;
11971205
}
@@ -3035,6 +3043,20 @@ li li {
30353043
display: none;
30363044
}
30373045

3046+
@media not all and (min-width: 768px) {
3047+
.max-md\:order-1 {
3048+
order: 1;
3049+
}
3050+
3051+
.max-md\:order-last {
3052+
order: 9999;
3053+
}
3054+
3055+
.max-md\:hidden {
3056+
display: none;
3057+
}
3058+
}
3059+
30383060
@media (min-width: 640px) {
30393061
.sm\:mx-0 {
30403062
margin-left: 0px;

‎template-parts/sections/section-cards.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@
2121
</div>
2222
</section>-->
2323

24-
<section class="relative mx-auto max-w-7xl pt-10 pb-10 lg:pb-14 px-4">
24+
<section class="relative mx-auto md:max-w-7xl lg:pb-14 p-4">
2525
<h2
2626
class="text-2xl md:max-w-2xl mx-auto font-bold md:text-5xl font-display text-center md:leading-tight">
2727
CSS & JavaScript Toolbox is <span class="text-brand-blue">used</span>
2828
for
2929
</h2>
3030
<div
31-
class="grid grid-cols-1 gap-5 lg:grid-cols-3 lg:gap-x-10 lg:gap-y-14 lg:px-0 px-5 items-start mt-10 lg:mt-24">
31+
class="grid grid-cols-1 gap-5 lg:grid-cols-3 lg:gap-x-10 lg:gap-y-14 items-start mt-8 lg:mt-24">
3232
<div
3333
class="grid justify-items-center justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
3434
<div class="space-y-5 flex flex-col items-center">

‎template-parts/sections/section-faq.php

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,56 @@
1-
<?php
2-
3-
/**
4-
* Template part for displaying page content in page.php
5-
*
6-
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
7-
*
8-
* @package cjt
9-
*/
10-
11-
$faqData = include get_template_directory() . '/data/faq-data.php';
12-
?>
13-
14-
<section class="md:py-24 py-10 relative overflow-hidden">
15-
<div class="mx-auto max-w-7xl text-center space-y-10 md:px-0 px-5">
16-
<div class="md:space-y-5 space-y-2.5 max-w-3xl mx-auto">
17-
<h2 class="text-2xl font-bold md:text-5xl font-display">
18-
Frequently Asked Queries
19-
</h2>
20-
21-
<p class="md:text-base text-sm font-normal sm:block text-neutral-500">
22-
Efficiently productivate reliable paradigms before ubiquitous models. Continually utilize frictionless expertise whereas tactical relationships. Still have questions? Contact us
23-
</p>
24-
</div>
25-
26-
<div class="md:space-y-3 space-y-2.5 max-w-2xl mx-auto divide-y divide-neutral-100">
27-
<?php
28-
foreach ($faqData as $data) :
29-
?>
30-
<details class="group flex space-y-2.5 md:pt-3 pt-2.5">
31-
<summary class="flex cursor-pointer items-center justify-between gap-1.5">
32-
<h2 class="md:text-base text-sm font-semibold text-gray-900">
33-
<?= $data['question']; ?>
34-
</h2>
35-
36-
<span class="shrink-0 rounded-full p-1.5 text-brand-blue sm:p-3">
37-
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0 transition duration-300 group-open:-rotate-45" viewBox="0 0 20 20" fill="currentColor">
38-
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
39-
</svg>
40-
</span>
41-
</summary>
42-
43-
<p class="text-start text-base leading-relaxed text-neutral-500">
44-
<?= $data['answer']; ?>
45-
</p>
46-
</details>
47-
<?php endforeach; ?>
48-
</div>
49-
</div>
50-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => 'md:-left-64 -left-28 -top-40 bg-cyan-400/30 blur-3xl md:size-[400px] size-[200px] -z-[1]']); ?>
51-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => 'md:-right-64 -right-28 top-2/4 bg-amber-300/30 blur-3xl md:size-[400px] size-[200px] -z-[1]']); ?>
52-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-300/50 rotate-6 left-[20%] bottom-20 animate-small-blob']); ?>
53-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 -rotate-6 left-1/4 bottom-1/2 animate-small-blob-2']); ?>
54-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 rotate-3 right-[20%] bottom-1/3 animate-small-blob-3']); ?>
55-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-green-300/50 -rotate-6 right-[20%] top-40 animate-small-blob-4']); ?>
56-
</section>
1+
<?php
2+
3+
/**
4+
* Template part for displaying page content in page.php
5+
*
6+
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
7+
*
8+
* @package cjt
9+
*/
10+
11+
$faqData = include get_template_directory() . '/data/faq-data.php';
12+
?>
13+
14+
<section class="md:py-24 p-4 relative overflow-hidden">
15+
<div class="mx-auto md:max-w-7xl text-center space-y-10">
16+
<div class="md:space-y-5 space-y-2.5 md:max-w-3xl mx-auto">
17+
<h2 class="text-2xl font-bold md:text-5xl font-display">
18+
Frequently Asked Queries
19+
</h2>
20+
21+
<p class="md:text-base text-sm font-normal sm:block text-neutral-500">
22+
Efficiently productivate reliable paradigms before ubiquitous models. Continually utilize frictionless expertise whereas tactical relationships. Still have questions? Contact us
23+
</p>
24+
</div>
25+
26+
<div class="md:space-y-3 space-y-2.5 max-w-2xl mx-auto divide-y divide-neutral-100">
27+
<?php
28+
foreach ($faqData as $data) :
29+
?>
30+
<details class="group flex space-y-2.5 md:pt-3 pt-2.5">
31+
<summary class="flex cursor-pointer items-center justify-between gap-1.5">
32+
<h2 class="md:text-base text-sm font-semibold text-gray-900">
33+
<?= $data['question']; ?>
34+
</h2>
35+
36+
<span class="shrink-0 rounded-full p-1.5 text-brand-blue sm:p-3">
37+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0 transition duration-300 group-open:-rotate-45" viewBox="0 0 20 20" fill="currentColor">
38+
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
39+
</svg>
40+
</span>
41+
</summary>
42+
43+
<p class="text-start text-base leading-relaxed text-neutral-500">
44+
<?= $data['answer']; ?>
45+
</p>
46+
</details>
47+
<?php endforeach; ?>
48+
</div>
49+
</div>
50+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => 'md:-left-64 -left-28 -top-40 bg-cyan-400/30 blur-3xl md:size-[400px] size-[200px] -z-[1]']); ?>
51+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => 'md:-right-64 -right-28 top-2/4 bg-amber-300/30 blur-3xl md:size-[400px] size-[200px] -z-[1]']); ?>
52+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-300/50 rotate-6 left-[20%] bottom-20 animate-small-blob']); ?>
53+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 -rotate-6 left-1/4 bottom-1/2 animate-small-blob-2']); ?>
54+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 rotate-3 right-[20%] bottom-1/3 animate-small-blob-3']); ?>
55+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-green-300/50 -rotate-6 right-[20%] top-40 animate-small-blob-4']); ?>
56+
</section>

‎template-parts/sections/section-free-reasons.php

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
*/
1010
?>
1111

12-
<section class="md:pt-24 py-10 relative overflow-hidden">
13-
<div class="mx-auto max-w-5xl space-y-5 md:space-y-8 xl:px-0 px-5">
12+
<section class="md:pt-24 p-4 relative overflow-hidden">
13+
<div class="mx-auto md:max-w-5xl space-y-5 md:space-y-8">
1414
<h2
15-
class="text-2xl mb-10 font-bold md:text-5xl font-display md:max-w-4xl max-w-72 mx-auto text-center">
15+
class="text-2xl mb-8 font-bold md:text-5xl font-display md:max-w-4xl mx-auto text-center">
1616
<span class="text-brand-blue">Top reasons</span> why people choose CSS & JavaScript Toolbox
1717
</h2>
1818
<div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
1919
<div class="size-full md:mx-auto relative">
2020
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-1.svg"
2121
loading="lazy" />
22-
<div class="absolute right-0 top-1/4 md:px-0 px-3">
22+
<div class="absolute right-0 top-1/4">
2323
<img class="md:w-3/4 w-full ml-auto"
2424
src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-1.png" />
2525
</div>
@@ -42,7 +42,7 @@ class="font-display font-bold md:text-3xl tracking-[1px] text-xl">
4242
<div class="w-full h-full md:mx-auto relative md:order-1 -order-1">
4343
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-2.svg"
4444
loading="lazy" />
45-
<div class="absolute right-0 md:top-1/4 top-5 md:px-0 px-3">
45+
<div class="absolute right-0 md:top-1/4 top-5">
4646
<img class="md:w-3/4 w-full ml-auto"
4747
src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-2.png" />
4848
</div>
@@ -52,7 +52,7 @@ class="font-display font-bold md:text-3xl tracking-[1px] text-xl">
5252
<div class="w-full h-full mx-auto relative">
5353
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-3.svg"
5454
loading="lazy" />
55-
<div class="absolute left-0 top-1/4 md:px-0 px-3">
55+
<div class="absolute left-0 top-1/4">
5656
<img class="md:w-3/4 w-full ml-auto"
5757
src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-2.png" />
5858
</div>
@@ -74,7 +74,7 @@ class="font-display font-bold md:text-3xl tracking-[1px] text-xl">
7474
<div class="w-full h-full mx-auto relative md:order-1 -order-1">
7575
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-4.svg"
7676
loading="lazy" />
77-
<div class="absolute right-0 md:top-1/3 top-4 md:px-0 px-3">
77+
<div class="absolute right-0 md:top-1/3 top-4">
7878
<img class="md:w-3/4 w-full mx-auto"
7979
src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-2.png" />
8080
</div>
@@ -84,7 +84,7 @@ class="font-display font-bold md:text-3xl tracking-[1px] text-xl">
8484
<div class="w-full h-full mx-auto relative">
8585
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-3.svg"
8686
loading="lazy" />
87-
<div class="absolute left-0 top-1/4 md:px-0 px-3">
87+
<div class="absolute left-0 top-1/4">
8888
<img class="md:w-3/4 w-full ml-auto"
8989
src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/background/vector-2.png" />
9090
</div>

0 commit comments

Comments
 (0)