Skip to content

Commit eb55c4d

Browse files
taeataea
authored
Merge pull request #256 from ruby/improve-try-ruby-3
Try Ruby カードデザインをシンプルに
2 parents 1b46b55 + c28fdd1 commit eb55c4d

3 files changed

Lines changed: 44 additions & 161 deletions

File tree

‎_includes/home/try_ruby.html‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,25 @@
66
<!-- Code Examples Grid -->
77
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 2xl:gap-16 mb-16">
88
{% for i in (1..3) %}
9-
<div class="try-ruby-card group bg-white dark:bg-stone-900 rounded-2xl overflow-hidden flex flex-col shadow-sm border border-gold-400 dark:border-gold-500 has-[a:hover]:border-gold-500 dark:has-[a:hover]:border-gold-400 transition-colors box-border">
9+
<div class="try-ruby-card group bg-white dark:bg-stone-900 rounded-2xl overflow-hidden flex flex-col shadow-sm border border-gold-400 dark:border-gold-500 has-[a:hover]:border-ruby-600 dark:has-[a:hover]:border-ruby-600 transition-colors box-border">
1010
<!-- Code Area -->
1111
<div class="code-example-wrapper relative flex-grow min-h-[200px]">
1212
<!-- Code Content (will fade in after frame animation) -->
13-
<div id="try-ruby-example-{{ i }}" class="try-ruby-content code-example px-8 py-6 font-mono text-sm overflow-x-auto h-full group-has-[a:hover]:bg-gold-50 dark:group-has-[a:hover]:bg-stone-800 opacity-0 transition-opacity duration-500">
13+
<div id="try-ruby-example-{{ i }}" class="try-ruby-content code-example px-8 py-6 font-mono text-sm overflow-x-auto h-full opacity-0 transition-opacity duration-500">
1414
<!-- Code will be loaded dynamically -->
1515
</div>
1616
</div>
1717

18-
<!-- Bottom Section with Wave Border (will fade in after frame animation) -->
19-
<div id="try-ruby-bottom-{{ i }}" class="try-ruby-content relative opacity-0 transition-opacity duration-500 before:content-[''] before:absolute before:w-[58px] before:h-[58px] before:bg-[url('/images/home/try_ruby/arrow.svg')] dark:before:bg-[url('/images/home/try_ruby/arrow-dark.svg')] before:bg-no-repeat before:bg-contain before:-top-[7px] before:left-[calc(50%+90px)] before:-translate-x-1/2 before:rotate-[40deg] before:z-20">
20-
<!-- Wave Border SVG -->
21-
<div class="absolute -top-3 left-0 right-0 h-4 text-gold-400 dark:text-gold-500 group-has-[a:hover]:text-gold-500 dark:group-has-[a:hover]:text-gold-600 transition-colors overflow-hidden">
22-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 20" preserveAspectRatio="none" class="w-[200%] h-full group-has-[a:hover]:animate-wave-scroll">
23-
<path d="M0,10 C10,0 20,20 30,10 C40,0 50,20 60,10 C70,0 80,20 90,10 C100,0 110,20 120,10 C130,0 140,20 150,10 C160,0 170,20 180,10 C190,0 200,20 210,10 C220,0 230,20 240,10 C250,0 260,20 270,10 C280,0 290,20 300,10 C310,0 320,20 330,10 C340,0 350,20 360,10 C370,0 380,20 390,10 C400,0 410,20 420,10 C430,0 440,20 450,10 C460,0 470,20 480,10 C490,0 500,20 510,10 C520,0 530,20 540,10 C550,0 560,20 570,10 C580,0 590,20 600,10 C610,0 620,20 630,10 C640,0 650,20 660,10 C670,0 680,20 690,10 C700,0 710,20 720,10 C730,0 740,20 750,10 C760,0 770,20 780,10 C790,0 800,20 800,10 L800,20 L0,20 Z" fill="currentColor"/>
24-
</svg>
25-
</div>
26-
27-
<!-- Button Area -->
28-
<div class="bg-gold-400 dark:bg-gold-500 group-has-[a:hover]:bg-gold-500 dark:group-has-[a:hover]:bg-gold-600 pt-4 pb-5 px-6 flex flex-col items-center transition-colors border-t border-gold-400 dark:border-gold-500 group-has-[a:hover]:border-gold-500 dark:group-has-[a:hover]:border-gold-600">
29-
<!-- TRY Button -->
30-
<a id="try-ruby-button-{{ i }}"
31-
href="{{ home.try_ruby.button_url }}"
32-
target="_blank"
33-
rel="noopener noreferrer"
34-
class="inline-flex items-center justify-center gap-2 bg-white text-stone-800 hover:bg-ruby-600 hover:text-white text-lg px-8 py-2.5 rounded-full font-bold tracking-wide transition-all duration-200 shadow-sm hover:scale-105">
35-
TRY!
36-
<span class="icon-external text-xs transition-colors" aria-hidden="true"></span>
37-
</a>
38-
</div>
18+
<!-- TRY Button -->
19+
<div id="try-ruby-bottom-{{ i }}" class="try-ruby-content px-6 pb-5 flex justify-center opacity-0 transition-opacity duration-500">
20+
<a id="try-ruby-button-{{ i }}"
21+
href="{{ home.try_ruby.button_url }}"
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
class="inline-flex items-center justify-center gap-2 bg-gold-500 dark:bg-gold-500 text-stone-800 hover:bg-ruby-600 dark:hover:bg-ruby-600 hover:text-white text-lg px-8 py-2.5 rounded-full font-bold tracking-wide transition-all duration-200 shadow-sm hover:scale-105">
25+
TRY!
26+
<span class="icon-external text-xs transition-colors" aria-hidden="true"></span>
27+
</a>
3928
</div>
4029
</div>
4130
{% endfor %}

‎images/home/hero/sunburst.svg‎

Lines changed: 22 additions & 22 deletions
Loading

‎stylesheets/compiled.css‎

Lines changed: 10 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -2222,10 +2222,6 @@ body:is(.dark *){
22222222
right: -20px;
22232223
}
22242224

2225-
.-top-3{
2226-
top: -0.75rem;
2227-
}
2228-
22292225
.-top-\[15px\]{
22302226
top: -15px;
22312227
}
@@ -2709,10 +2705,6 @@ body:is(.dark *){
27092705
height: 8rem;
27102706
}
27112707

2712-
.h-4{
2713-
height: 1rem;
2714-
}
2715-
27162708
.h-6{
27172709
height: 1.5rem;
27182710
}
@@ -2821,10 +2813,6 @@ body:is(.dark *){
28212813
width: 197px;
28222814
}
28232815

2824-
.w-\[200\%\]{
2825-
width: 200%;
2826-
}
2827-
28282816
.w-\[22\.4rem\]{
28292817
width: 22.4rem;
28302818
}
@@ -3599,8 +3587,8 @@ body:is(.dark *){
35993587
background-color: var(--color-gold-150);
36003588
}
36013589

3602-
.bg-gold-400{
3603-
background-color: var(--color-gold-400);
3590+
.bg-gold-500{
3591+
background-color: var(--color-gold-500);
36043592
}
36053593

36063594
.bg-ruby-100{
@@ -4229,26 +4217,11 @@ body:is(.dark *){
42294217
top: -1.3rem;
42304218
}
42314219

4232-
.before\:-top-\[7px\]::before{
4233-
content: var(--tw-content);
4234-
top: -7px;
4235-
}
4236-
4237-
.before\:left-\[calc\(50\%\+90px\)\]::before{
4238-
content: var(--tw-content);
4239-
left: calc(50% + 90px);
4240-
}
4241-
42424220
.before\:top-\[18\.75rem\]::before{
42434221
content: var(--tw-content);
42444222
top: 18.75rem;
42454223
}
42464224

4247-
.before\:z-20::before{
4248-
content: var(--tw-content);
4249-
z-index: 20;
4250-
}
4251-
42524225
.before\:z-\[-1\]::before{
42534226
content: var(--tw-content);
42544227
z-index: -1;
@@ -4269,38 +4242,16 @@ body:is(.dark *){
42694242
height: 2.3rem;
42704243
}
42714244

4272-
.before\:h-\[58px\]::before{
4273-
content: var(--tw-content);
4274-
height: 58px;
4275-
}
4276-
42774245
.before\:w-\[2\.3rem\]::before{
42784246
content: var(--tw-content);
42794247
width: 2.3rem;
42804248
}
42814249

4282-
.before\:w-\[58px\]::before{
4283-
content: var(--tw-content);
4284-
width: 58px;
4285-
}
4286-
42874250
.before\:w-\[840px\]::before{
42884251
content: var(--tw-content);
42894252
width: 840px;
42904253
}
42914254

4292-
.before\:-translate-x-1\/2::before{
4293-
content: var(--tw-content);
4294-
--tw-translate-x: -50%;
4295-
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4296-
}
4297-
4298-
.before\:rotate-\[40deg\]::before{
4299-
content: var(--tw-content);
4300-
--tw-rotate: 40deg;
4301-
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
4302-
}
4303-
43044255
.before\:bg-\[url\(\'\/images\/home\/hero\/bg\.svg\'\)\]::before{
43054256
content: var(--tw-content);
43064257
background-image: url('/images/home/hero/bg.svg');
@@ -4311,11 +4262,6 @@ body:is(.dark *){
43114262
background-image: url('/images/home/hero/version-arrow.svg');
43124263
}
43134264

4314-
.before\:bg-\[url\(\'\/images\/home\/try_ruby\/arrow\.svg\'\)\]::before{
4315-
content: var(--tw-content);
4316-
background-image: url('/images/home/try_ruby/arrow.svg');
4317-
}
4318-
43194265
.before\:bg-contain::before{
43204266
content: var(--tw-content);
43214267
background-size: contain;
@@ -4483,38 +4429,8 @@ body:is(.dark *){
44834429
opacity: 1;
44844430
}
44854431

4486-
.has-\[a\:hover\]\:border-gold-500:has(a:hover){
4487-
border-color: var(--color-gold-500);
4488-
}
4489-
4490-
@keyframes wave-scroll{
4491-
0%{
4492-
transform: translateX(0);
4493-
}
4494-
4495-
100%{
4496-
transform: translateX(-50%);
4497-
}
4498-
}
4499-
4500-
.group:has(a:hover) .group-has-\[a\:hover\]\:animate-wave-scroll{
4501-
animation: wave-scroll 2s linear infinite;
4502-
}
4503-
4504-
.group:has(a:hover) .group-has-\[a\:hover\]\:border-gold-500{
4505-
border-color: var(--color-gold-500);
4506-
}
4507-
4508-
.group:has(a:hover) .group-has-\[a\:hover\]\:bg-gold-50{
4509-
background-color: var(--color-gold-50);
4510-
}
4511-
4512-
.group:has(a:hover) .group-has-\[a\:hover\]\:bg-gold-500{
4513-
background-color: var(--color-gold-500);
4514-
}
4515-
4516-
.group:has(a:hover) .group-has-\[a\:hover\]\:text-gold-500{
4517-
color: var(--color-gold-500);
4432+
.has-\[a\:hover\]\:border-ruby-600:has(a:hover){
4433+
border-color: var(--color-ruby-600);
45184434
}
45194435

45204436
.dark\:border-gold-500:is(.dark *){
@@ -4572,10 +4488,6 @@ body:is(.dark *){
45724488
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
45734489
}
45744490

4575-
.dark\:text-gold-500:is(.dark *){
4576-
color: var(--color-gold-500);
4577-
}
4578-
45794491
.dark\:text-ruby-200:is(.dark *){
45804492
color: var(--color-ruby-200);
45814493
}
@@ -4642,16 +4554,15 @@ body:is(.dark *){
46424554
background-image: url('/images/home/hero/bg-dark.svg');
46434555
}
46444556

4645-
.dark\:before\:bg-\[url\(\'\/images\/home\/try_ruby\/arrow-dark\.svg\'\)\]:is(.dark *)::before{
4646-
content: var(--tw-content);
4647-
background-image: url('/images/home/try_ruby/arrow-dark.svg');
4648-
}
4649-
46504557
.dark\:after\:bg-\[url\(\'\/images\/home\/hero\/bg-dark\.svg\'\)\]:is(.dark *)::after{
46514558
content: var(--tw-content);
46524559
background-image: url('/images/home/hero/bg-dark.svg');
46534560
}
46544561

4562+
.dark\:hover\:bg-ruby-600:hover:is(.dark *){
4563+
background-color: var(--color-ruby-600);
4564+
}
4565+
46554566
.dark\:hover\:bg-stone-700:hover:is(.dark *){
46564567
--tw-bg-opacity: 1;
46574568
background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
@@ -4679,25 +4590,8 @@ body:is(.dark *){
46794590
color: var(--color-ruby-400);
46804591
}
46814592

4682-
.dark\:has-\[a\:hover\]\:border-gold-400:has(a:hover):is(.dark *){
4683-
border-color: var(--color-gold-400);
4684-
}
4685-
4686-
.group:has(a:hover) .dark\:group-has-\[a\:hover\]\:border-gold-600:is(.dark *){
4687-
border-color: var(--color-gold-600);
4688-
}
4689-
4690-
.group:has(a:hover) .dark\:group-has-\[a\:hover\]\:bg-gold-600:is(.dark *){
4691-
background-color: var(--color-gold-600);
4692-
}
4693-
4694-
.group:has(a:hover) .dark\:group-has-\[a\:hover\]\:bg-stone-800:is(.dark *){
4695-
--tw-bg-opacity: 1;
4696-
background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
4697-
}
4698-
4699-
.group:has(a:hover) .dark\:group-has-\[a\:hover\]\:text-gold-600:is(.dark *){
4700-
color: var(--color-gold-600);
4593+
.dark\:has-\[a\:hover\]\:border-ruby-600:has(a:hover):is(.dark *){
4594+
border-color: var(--color-ruby-600);
47014595
}
47024596

47034597
@media (min-width: 640px){

0 commit comments

Comments
 (0)