Skip to content

Commit 0ac46a2

Browse files
committed
DOC-3313: update css varables, refactor content changes and add supported framework icons to landing page.
1 parent e598123 commit 0ac46a2

File tree

6 files changed

+229
-97
lines changed

6 files changed

+229
-97
lines changed

modules/ROOT/pages/installation-cloud.adoc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ Get started with {productname} in your preferred framework:
3131

3232
++++
3333
include::partial$css/installation-cards.css[]
34+
<div class="tiny-installation-cards">
3435
<div class="framework-cards">
3536
<div class="framework-grid">
3637
<a href="https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/" class="framework-card-link">
@@ -118,6 +119,7 @@ include::partial$css/installation-cards.css[]
118119
</a>
119120
</div>
120121
</div>
122+
</div>
121123
++++
122124

123125
== Benefits of the {cloudname}

modules/ROOT/pages/installation-self-hosted.adoc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Get started with {productname} in your preferred framework:
4242

4343
++++
4444
include::partial$css/installation-cards.css[]
45+
<div class="tiny-installation-cards">
4546
<div class="framework-cards">
4647
<div class="framework-group">
4748
<h4 class="framework-group-title">Frontend Frameworks</h4>
@@ -169,6 +170,7 @@ include::partial$css/installation-cards.css[]
169170
</div>
170171
</div>
171172
</div>
173+
</div>
172174
++++
173175

174176
== Package managers

modules/ROOT/pages/installation-zip.adoc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ Get started with {productname} in your preferred framework:
3434

3535
++++
3636
include::partial$css/installation-cards.css[]
37+
<div class="tiny-installation-cards">
3738
<div class="framework-cards">
3839
<div class="framework-group">
3940
<h4 class="framework-group-title">Frontend Frameworks</h4>
@@ -125,6 +126,7 @@ include::partial$css/installation-cards.css[]
125126
</div>
126127
</div>
127128
</div>
129+
</div>
128130
++++
129131

130132
== Installation steps

modules/ROOT/pages/installation.adoc

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ There are multiple ways to install {productname}. Choose your installation metho
99
include::partial$css/installation-cards.css[]
1010
<div class="integration-cards">
1111
<div class="integration-card">
12-
<div class="card-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
12+
<div class="card-icon-wrapper brand-gradient--sunny">
1313
<div class="card-icon">☁️</div>
1414
</div>
1515
<h3 class="card-title">Cloud CDN</h3>
@@ -20,7 +20,7 @@ include::partial$css/installation-cards.css[]
2020
</div>
2121
2222
<div class="integration-card">
23-
<div class="card-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
23+
<div class="card-icon-wrapper brand-gradient--neutral">
2424
<div class="card-icon">📦</div>
2525
</div>
2626
<h3 class="card-title">Package Manager</h3>
@@ -31,7 +31,7 @@ include::partial$css/installation-cards.css[]
3131
</div>
3232
3333
<div class="integration-card">
34-
<div class="card-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
34+
<div class="card-icon-wrapper brand-gradient--marine">
3535
<div class="card-icon">⬇️</div>
3636
</div>
3737
<h3 class="card-title">Direct Download</h3>
@@ -45,64 +45,66 @@ include::partial$css/installation-cards.css[]
4545

4646
++++
4747
include::partial$css/installation-cards.css[]
48-
<h3 style="margin-top: 3rem; font-size: 1.3rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem;">Browse by Framework</h3>
48+
<h3 class="brand-section-title">Browse by Framework</h3>
4949
50+
<div class="tiny-installation-cards">
5051
<div class="framework-cards">
5152
<div class="framework-grid">
5253
<a href="https://www.tiny.cloud/docs/tinymce/latest/react-cloud/" class="framework-card-link">
5354
<div class="framework-card">
54-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/react-color.svg" alt="React"></div>
55+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/react-color.svg" alt="React"></div>
5556
<h3 class="framework-name">React</h3>
5657
</div>
5758
</a>
5859
<a href="https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/" class="framework-card-link">
5960
<div class="framework-card">
60-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/angular-color.svg" alt="Angular"></div>
61+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/angular-color.svg" alt="Angular"></div>
6162
<h3 class="framework-name">Angular</h3>
6263
</div>
6364
</a>
6465
<a href="https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/" class="framework-card-link">
6566
<div class="framework-card">
66-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/vue-color.svg" alt="Vue"></div>
67+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/vue-color.svg" alt="Vue"></div>
6768
<h3 class="framework-name">Vue.js</h3>
6869
</div>
6970
</a>
7071
<a href="https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/" class="framework-card-link">
7172
<div class="framework-card">
72-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/blazor-color.svg" alt="Blazor"></div>
73+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/blazor-color.svg" alt="Blazor"></div>
7374
<h3 class="framework-name">Blazor</h3>
7475
</div>
7576
</a>
7677
<a href="https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/" class="framework-card-link">
7778
<div class="framework-card">
78-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/svelte-color.svg" alt="Svelte"></div>
79+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/svelte-color.svg" alt="Svelte"></div>
7980
<h3 class="framework-name">Svelte</h3>
8081
</div>
8182
</a>
8283
<a href="https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/" class="framework-card-link">
8384
<div class="framework-card">
84-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/web-components-color.svg" alt="Web Components"></div>
85+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/web-components-color.svg" alt="Web Components"></div>
8586
<h3 class="framework-name">Web Component</h3>
8687
</div>
8788
</a>
8889
<a href="https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/" class="framework-card-link">
8990
<div class="framework-card">
90-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/jquery-color.svg" alt="jQuery"></div>
91+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/jquery-color.svg" alt="jQuery"></div>
9192
<h3 class="framework-name">jQuery</h3>
9293
</div>
9394
</a>
9495
<a href="https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/" class="framework-card-link">
9596
<div class="framework-card">
96-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/laravel-color.svg" alt="Laravel"></div>
97+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/laravel-color.svg" alt="Laravel"></div>
9798
<h3 class="framework-name">Laravel</h3>
9899
</div>
99100
</a>
100101
<a href="https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/" class="framework-card-link">
101102
<div class="framework-card">
102-
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/rails-color.svg" alt="Rails"></div>
103+
<div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/rails-color.svg" alt="Rails"></div>
103104
<h3 class="framework-name">Ruby on Rails</h3>
104105
</div>
105106
</a>
106107
</div>
107108
</div>
109+
</div>
108110
++++

0 commit comments

Comments
 (0)