Skip to content

Commit a58e8d6

Browse files
Ketan-Karkifarhaanbukhsh
Ketan-Karki
authored and
farhaanbukhsh
committed
fix: use cuboid instead of cube macro and improve styling
1 parent 9db788f commit a58e8d6

File tree

2 files changed

+86
-85
lines changed

2 files changed

+86
-85
lines changed

‎src/_includes/components/cube.njk

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,53 @@
1-
{% macro cube(dimen, bg="lime") %}
1+
{% macro cube(dimen=200, bg="lime") %}
22
{% if bg == "lime" %}
33
{% set resolved_bg = "#D7FF7B" %}
44
{% elseif bg == "purple" %}
55
{% set resolved_bg = "#CD89FF" %}
66
{% else %}
77
{% set resolved_bg = bg %}
88
{% endif %}
9-
<div class="cube-container" style="width: {{ dimen }}px; height: {{ dimen }}px; perspective: 8000px;">
10-
<div
11-
class="cube"
12-
style="width: {{ dimen }}px; height: {{ dimen }}px; position: relative; transform-style: preserve-3d; transform:
13-
rotateX(-20deg) rotateY(0deg);">
14-
<!-- Front Face -->
15-
<div
16-
class="face front"
17-
style="position: absolute; width: 100%; height: 100%; background-color: {{ resolved_bg }}; border: 2px solid black;
18-
transform: translateX(41px) translateZ({{ dimen / 2 }}px) skewX(0deg);">
19-
{% if caller %}
20-
{{ caller() }}
21-
{% endif %}
22-
</div>
23-
<!-- Back Face -->
24-
<div
25-
class="face back"
26-
style="position: absolute; width: 100%; height: 100%; background-color: white; border: 2px solid black; border-bottom:
27-
none; transform: translateX(-41px) translateZ(-{{ dimen / 2 }}px) skewX(-0.5deg);">{# Back face #}
28-
</div>
29-
<!-- Top Face -->
30-
<div
31-
class="face top"
32-
style="position: absolute; width: 100%; height: 100%; background-color: white; border: 3px solid black; transform:
33-
rotateX(90deg) translateZ({{ dimen / 2 }}px) skewX(22deg);">{# Top face #}
34-
</div>
35-
<!-- Bottom Face -->
36-
<div
37-
class="face bottom"
38-
style="position: absolute; width: 100%; height: 100%; background-color: white; border: 3px solid black; border-bottom:
39-
none; transform: rotateX(-90deg) translateZ({{ dimen / 2 }}px) skewX(-23deg);">{# Bottom face #}
40-
</div>
41-
{# <!-- Left Face -->
42-
<div class="face left" style="position: absolute; width: 100%; height: 100%; background-color: white; border: 2px solid black; transform: rotateY(-90deg) translateZ({{ dimen / 2 }}px) translateX(-40px);">
43-
Left face
44-
</div>
45-
46-
<!-- Right Face -->
47-
<div class="face right" style="position: absolute; width: 100%; height: 100%; background-color: white; border: 2px solid black; transform: rotateY(90deg) translateZ({{ dimen / 2 }}px) translateX(40px);">
48-
Right face
49-
</div> #}
9+
10+
<div style="position: relative; width: {{ dimen }}px; height: {{ dimen }}px;">
11+
<!-- Main colored front face -->
12+
<div class="front-face" style="
13+
position: absolute;
14+
width: 100%;
15+
height: 100%;
16+
background-color: {{ resolved_bg }};
17+
border: 1px solid #000;
18+
z-index: 2;
19+
">
20+
{% if caller %}
21+
{{ caller() }}
22+
{% endif %}
5023
</div>
24+
25+
<!-- Top white face -->
26+
<div class="top-face" style="
27+
position: absolute;
28+
width: 100%;
29+
height: 30px;
30+
background-color: white;
31+
border: 1px solid #000;
32+
top: -30px;
33+
left: 0;
34+
transform: skewX(45deg);
35+
transform-origin: bottom left;
36+
z-index: 1;
37+
"></div>
38+
39+
<!-- Left white face (was right face) -->
40+
<div class="left-face" style="
41+
position: absolute;
42+
width: 30px;
43+
height: 100%;
44+
background-color: white;
45+
border: 1px solid #000;
46+
top: 0;
47+
left: -30px;
48+
transform: skewY(45deg);
49+
transform-origin: top right;
50+
z-index: 1;
51+
"></div>
5152
</div>
5253
{% endmacro %}

‎src/_includes/landing/keynotes.njk

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,38 @@
44
<div class="black-han-sans-regular md:justify-center md:text-center pt-28 pb-8 md:pt-24 font-normal text-4xl lg:text-5xl text-[#000000] text-center lg:text-left">
55
Key Note Speakers
66
</div>
7-
<div class="lg:flex xl:flex lg:scale-[0.80] xl:scale-100 pt-36 lg:pl-2 xl:pl-12 space-x-20 hidden md:hidden">
8-
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:translate-y-24 transition duration-700 ease-in-out" data-cube="1">
9-
<p class="-translate-y-8 -translate-x-8">Announcing Soon!</p>
7+
<div class="lg:flex xl:flex lg:scale-[0.80] xl:scale-100 pt-36 lg:pl-2 mb-3 xl:pl-12 hidden md:hidden">
8+
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out" data-cube="1">
109
{% call cube(dimen=200, bg="purple") -%}
11-
<div>
12-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
10+
<div class="flex items-center justify-center w-full h-full">
11+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
1312
</div>
1413
{%- endcall %}
14+
<p>Announcing Soon!</p>
1515
</div>
16-
<div class="group relative motion-safe:transform motion-safe:hover:-translate-y-12 transition duration-700 ease-in-out motion-safe:translate-y-32 translate-x-0 z-10" data-cube="2">
16+
<div class="group relative motion-safe:transform motion-safe:hover:translate-y-44 transition duration-700 ease-in-out motion-safe:translate-y-20 translate-x-0 ml-7 z-10" data-cube="2">
1717
{% call cube(dimen=200, bg="lime") -%}
18-
<div>
19-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
18+
<div class="flex items-center justify-center w-full h-full">
19+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
2020
</div>
2121
{%- endcall %}
22-
<p class="translate-y-8 translate-x-12">Announcing Soon!</p>
22+
<p>Announcing Soon!</p>
2323
</div>
24-
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:translate-y-12 transition duration-700 ease-in-out -translate-x-20" data-cube="3">
25-
<p class="-translate-y-8 -translate-x-8">Announcing Soon!</p>
24+
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-12 transition duration-700 ease-in-out ml-7" data-cube="3">
2625
{% call cube(dimen=200, bg="purple") -%}
27-
<div>
28-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
26+
<div class="flex items-center justify-center w-full h-full">
27+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
2928
</div>
3029
{%- endcall %}
30+
<p>Announcing Soon!</p>
3131
</div>
32-
<div class="group relative motion-safe:transform motion-safe:hover:-translate-y-12 transition duration-700 ease-in-out -translate-x-20 motion-safe:translate-y-32" data-cube="4">
32+
<div class="group relative motion-safe:transform motion-safe:hover:translate-y-44 transition duration-700 ease-in-out motion-safe:translate-y-20 ml-7" data-cube="4">
3333
{% call cube(dimen=200, bg="lime") -%}
34-
<div>
35-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
34+
<div class="flex items-center justify-center w-full h-full">
35+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
3636
</div>
3737
{%- endcall %}
38-
<p class="translate-y-8 translate-x-12">Announcing Soon!</p>
38+
<p>Announcing Soon!</p>
3939
</div>
4040
</div>
4141
<!-- Medium Devices -->
@@ -44,16 +44,16 @@
4444
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out">
4545
<p class="-translate-y-8 -translate-x-8 text-center">Creator, Calibre & Kitty</p>
4646
{% call cube(dimen=200, bg="purple") -%}
47-
<div>
48-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
47+
<div class="flex items-center justify-center w-full h-full">
48+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
4949
</div>
5050
{%- endcall %}
5151
</div>
52-
<div class="group relative motion-safe:transform motion-safe:translate-y-24 motion-safe:hover:translate-y-48 translate-x-20 transition duration-700 ease-in-out">
53-
<p class="-translate-y-8 -translate-x-8 text-center">Creator, Calibre & Kitty</p>
54-
{% call cube(dimen=200, bg="purple") -%}
55-
<div>
56-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
52+
<div class="group relative motion-safe:transform motion-safe:translate-y-24 motion-safe:hover:translate-y-48 -ml-10 transition duration-700 ease-in-out">
53+
<p class="-translate-y-8 -translate-x-8 text-center">AI Developer & Autism Advocate</p>
54+
{% call cube(dimen=200, bg="lime") -%}
55+
<div class="flex items-center justify-center w-full h-full">
56+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
5757
</div>
5858
{%- endcall %}
5959
</div>
@@ -62,16 +62,16 @@
6262
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out">
6363
<p class="-translate-y-8 -translate-x-8 text-center">Creator, Calibre & Kitty</p>
6464
{% call cube(dimen=200, bg="purple") -%}
65-
<div>
66-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
65+
<div class="flex items-center justify-center w-full h-full">
66+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
6767
</div>
6868
{%- endcall %}
6969
</div>
70-
<div class="group relative motion-safe:transform motion-safe:translate-y-24 motion-safe:hover:translate-y-48 translate-x-20 transition duration-700 ease-in-out">
71-
<p class="-translate-y-8 -translate-x-8 text-center">Creator, Calibre & Kitty</p>
72-
{% call cube(dimen=200, bg="purple") -%}
73-
<div>
74-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
70+
<div class="group relative motion-safe:transform motion-safe:translate-y-24 motion-safe:hover:translate-y-48 -ml-10 transition duration-700 ease-in-out">
71+
<p class="-translate-y-8 -translate-x-8 text-center">AI Developer & Autism Advocate</p>
72+
{% call cube(dimen=200, bg="lime") -%}
73+
<div class="flex items-center justify-center w-full h-full">
74+
<img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India Logo" class="w-3/4 h-3/4 object-contain">
7575
</div>
7676
{%- endcall %}
7777
</div>
@@ -81,39 +81,39 @@
8181
<div class="flex flex-col overflow-y-auto h-80 space-y-40 px-4 pt-16 items-center lg:hidden md:hidden scrollbar-hide">
8282
<div class="flex-shrink-0">
8383
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out" data-cube="1">
84-
{% call cube(dimen=200, bg="purple") -%}
85-
<div>
86-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
84+
{% call cube(width=214, height=208, depth=31, bg="purple") -%}
85+
<div class="flex items-center justify-center w-full h-full">
86+
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
8787
</div>
8888
{%- endcall %}
8989
<p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
9090
</div>
9191
</div>
9292
<div class="flex-shrink-0">
9393
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out" data-cube="1">
94-
{% call cube(dimen=200, bg="purple") -%}
95-
<div>
96-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
94+
{% call cube(width=214, height=208, depth=31, bg="purple") -%}
95+
<div class="flex items-center justify-center w-full h-full">
96+
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
9797
</div>
9898
{%- endcall %}
9999
<p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
100100
</div>
101101
</div>
102102
<div class="flex-shrink-0">
103103
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out" data-cube="1">
104-
{% call cube(dimen=200, bg="purple") -%}
105-
<div>
106-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
104+
{% call cube(width=214, height=208, depth=31, bg="purple") -%}
105+
<div class="flex items-center justify-center w-full h-full">
106+
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
107107
</div>
108108
{%- endcall %}
109109
<p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>
110110
</div>
111111
</div>
112112
<div class="flex-shrink-0">
113113
<div class="group relative motion-safe:transform motion-safe:translate-y-0 motion-safe:hover:-translate-y-24 transition duration-700 ease-in-out" data-cube="1">
114-
{% call cube(dimen=200, bg="purple") -%}
115-
<div>
116-
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-full h-full">
114+
{% call cube(width=214, height=208, depth=31, bg="purple") -%}
115+
<div class="flex items-center justify-center w-full h-full">
116+
<img src="{{ env.baseUrl }}img/logo.png" alt="Date background" class="w-3/4 h-3/4 object-contain">
117117
</div>
118118
{%- endcall %}
119119
<p class="translate-y-8 translate-x-8 text-center">Creator, Calibre & Kitty</p>

0 commit comments

Comments
 (0)