Skip to content

Commit 2eee2cd

Browse files
ashish10677palnabarun
ashish10677
authored and
palnabarun
committed
feat: create new sponsor page
Signed-off-by: Ashish Kumar Mishra <[email protected]> chore: Add content Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: create window component Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: desktop site done Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: create new sponsor page Signed-off-by: Ashish Kumar Mishra <[email protected]> chore: Add content Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: create window component Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: desktop site done Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: make components responsive feat: fix mobile view Signed-off-by: Ashish Kumar Mishra <[email protected]> chore: refactor code Signed-off-by: Ashish Kumar Mishra <[email protected]> chore: fix border Signed-off-by: Ashish Kumar Mishra <[email protected]> feat: import svgs Signed-off-by: Ashish Kumar Mishra <[email protected]> refactor: change sponsors.njk to why_sponsor.njk Signed-off-by: Ashish Kumar Mishra <[email protected]> chore: add asset Signed-off-by: Ashish Kumar Mishra <[email protected]> fix: update content Signed-off-by: Ashish Kumar Mishra <[email protected]> chore: fix requested changes Signed-off-by: Ashish Kumar Mishra <[email protected]>
1 parent bdc1128 commit 2eee2cd

File tree

9 files changed

+523
-6
lines changed

9 files changed

+523
-6
lines changed

‎src/_includes/components/window.njk‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{% macro window(width=200, height=200, depth=100, frontBg="lime", topBg="", leftBg="", autoHeight=false) %}
2+
{% if frontBg == "lime" %}
3+
{% set resolved_front_bg = "#D7FF7B" %}
4+
{% elseif frontBg == "lavender" %}
5+
{% set resolved_front_bg = "#F0EEFF" %}
6+
{% else %}
7+
{% set resolved_front_bg = frontBg %}
8+
{% endif %}
9+
10+
{% if topBg == "" %}
11+
{% set resolved_top_bg = resolved_front_bg %}
12+
{% elseif topBg == "lime" %}
13+
{% set resolved_top_bg = "#D7FF7B" %}
14+
{% elseif topBg == "lavender" %}
15+
{% set resolved_top_bg = "#F0EEFF" %}
16+
{% else %}
17+
{% set resolved_top_bg = topBg %}
18+
{% endif %}
19+
20+
{% if leftBg == "" %}
21+
{% set resolved_left_bg = resolved_front_bg %}
22+
{% elseif leftBg == "lime" %}
23+
{% set resolved_left_bg = "#D7FF7B" %}
24+
{% elseif leftBg == "lavender" %}
25+
{% set resolved_left_bg = "#F0EEFF" %}
26+
{% else %}
27+
{% set resolved_left_bg = leftBg %}
28+
{% endif %}
29+
30+
<div class="window-container{% if autoHeight %} window-auto-height{% endif %}" style="--w:{{ width }}; --h:{{ height }}; --d:{{ depth }}; --front-bg:{{ resolved_front_bg }}; --top-bg:{{ resolved_top_bg }}; --left-bg:{{ resolved_left_bg }};">
31+
<!-- Top Panel -->
32+
<div class="face top"></div>
33+
<!-- Left Panel -->
34+
<div class="face left"></div>
35+
<!-- Front Face -->
36+
<div class="face front">
37+
<div class="window-titlebar">
38+
<div></div>
39+
<div class="window-titlebar-dots">
40+
<div class="window-titlebar-dot"></div>
41+
<div class="window-titlebar-dot"></div>
42+
<div class="window-titlebar-dot"></div>
43+
</div>
44+
</div>
45+
46+
{% if caller %}
47+
<div class="window-content">{{ caller() }}</div>
48+
{% endif %}
49+
</div>
50+
</div>
51+
{% endmacro %}

‎src/_includes/navbar.njk‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
},
2020
{
2121
"name": "Sponsors",
22-
"link": "#sponsors",
22+
"link": "why-sponsor",
2323
"hasSubmenu": false,
2424
"isExternal": false
2525
},
@@ -76,8 +76,7 @@
7676
</div>
7777
</div>
7878
{% else %}
79-
{# TODO: item.name != 'Sponsors' is a hack till we get the sponsors page up#}
80-
<a href="{% if item.isExternal %}{{ item.link }}{% elif item.link and item.link[0] == '#' and item.name != 'Sponsors' %}{{ item.link }}{% else %}{{ env.baseUrl }}{{ item.link }}{% endif %}"
79+
<a href="{% if item.isExternal %}{{ item.link }}{% elif item.link and item.link[0] == '#' %}{{ item.link }}{% else %}{{ env.baseUrl }}{{ item.link }}{% endif %}"
8180
{% if item.isExternal %}target="_blank" rel="noopener noreferrer"{% endif %}
8281
class="flex items-center gap-1 py-2 px-3 text-white hover:text-[#D7FF7B] text-base font-normal font-['Acid_Grotesk'] leading-tight transition-colors duration-200 no-underline nav-link">
8382
{{ item.name }}
@@ -129,8 +128,7 @@
129128
<div class="flex flex-col space-y-4">
130129
{% for item in menuItems %}
131130
{% if not item.hasSubmenu %}
132-
{# TODO: item.name != 'Sponsors' is a hack till we get the sponsors page up#}
133-
<a href="{% if item.isExternal %}{{ item.link }}{% elif item.link and item.link[0] == '#' and item.name != 'Sponsors' %}{{ item.link }}{% else %}{{ env.baseUrl }}{{ item.link }}{% endif %}"
131+
<a href="{% if item.isExternal %}{{ item.link }}{% elif item.link and item.link[0] == '#' %}{{ item.link }}{% else %}{{ env.baseUrl }}{{ item.link }}{% endif %}"
134132
{% if item.isExternal %}target="_blank" rel="noopener noreferrer"{% endif %}
135133
class="p-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg hover:bg-white/20 flex justify-between items-center transition-all duration-200 text-white text-base font-medium no-underline">
136134
{{ item.name }}

‎src/css/main.css‎

Lines changed: 172 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,18 @@ body {
142142
animation: bounce-slow 3s infinite;
143143
}
144144

145+
.animate-bounce-fast {
146+
animation: bounce 2s infinite;
147+
}
148+
149+
.animate-bounce-slower {
150+
animation: bounce-slow 3.5s infinite;
151+
}
152+
153+
.animate-bounce-slowest {
154+
animation: bounce-slow 5s infinite;
155+
}
156+
145157
/* Hamburger menu styles */
146158
.hamburger {
147159
cursor: pointer;
@@ -427,4 +439,163 @@ body:not(.is-home-page) main {
427439

428440
.bg-lavender {
429441
background-color: #F0EEFF;
430-
}
442+
}
443+
444+
.window-container .face {
445+
position: absolute;
446+
border: 1.5px solid black;
447+
}
448+
449+
.window-container .face.top {
450+
border-bottom-width: 1px;
451+
border-left-width: 0px;
452+
}
453+
454+
.window-container .face.left {
455+
border-right-width: 1.5px;
456+
border-top-width: 1px;
457+
border-left-width: 1.5px;
458+
}
459+
460+
.window-container .face.front {
461+
border-top-width: 0px;
462+
border-left-width: 0px;
463+
overflow: hidden;
464+
}
465+
466+
/* Window title bar */
467+
.window-titlebar {
468+
background-color: #CD89FF;
469+
padding: 10px 16px;
470+
display: flex;
471+
justify-content: space-between;
472+
align-items: center;
473+
border-bottom: 0.5px solid black;
474+
flex-shrink: 0;
475+
}
476+
477+
.window-titlebar-dots {
478+
display: flex;
479+
gap: 8px;
480+
}
481+
482+
.window-titlebar-dot {
483+
width: 12px;
484+
height: 12px;
485+
background-color: #D7FF7B;
486+
border-radius: 50%;
487+
border: 1.5px solid black;
488+
}
489+
490+
/* Window content area */
491+
.window-content {
492+
padding: 20px;
493+
}
494+
495+
/* === core geometry ========================================= */
496+
.window-container{
497+
position:relative;
498+
width : calc( (var(--w) + var(--d)) * 1px );
499+
height: calc( (var(--h) + var(--d)) * 1px );
500+
}
501+
502+
/* faces share a lot ⇒ utility class */
503+
.face{
504+
position:absolute;
505+
display:block;
506+
}
507+
508+
/* ---- top panel ---- */
509+
.face.top{
510+
width : calc(var(--w) * 1px);
511+
height: calc(var(--d) * 1px);
512+
background: var(--top-bg);
513+
transform: skewX(45deg)
514+
translateX(calc(var(--d) / 2 * 1px))
515+
translateY(calc(var(--d) / -2 * 1px));
516+
border: 1.5px solid black;
517+
border-bottom-width: 1px;
518+
border-left-width: 0px;
519+
}
520+
521+
/* ---- left panel ---- */
522+
.face.left{
523+
width : calc(var(--d) * 1px);
524+
height: calc(var(--h) * 1px);
525+
background: var(--left-bg);
526+
transform: skewY(45deg)
527+
translateY(calc(var(--d) / 2 * 1px))
528+
translateX(calc(var(--d) / -2 * 1px));
529+
border: 1.5px solid black;
530+
border-right-width: 1.5px;
531+
border-top-width: 1px;
532+
border-left-width: 1.5px;
533+
}
534+
535+
/* ---- front panel ---- */
536+
.face.front{
537+
width : calc(var(--w) * 1px);
538+
height: calc(var(--h) * 1px);
539+
background: var(--front-bg);
540+
transform: translateX(calc(var(--d) / 2 * 1px))
541+
translateY(calc(var(--d) / 2 * 1px));
542+
overflow:hidden; /* keeps content inside */
543+
border: 1.5px solid black;
544+
border-top-width: 0px;
545+
border-left-width: 0px;
546+
}
547+
548+
/* A. Allow height to be auto for content flow */
549+
.window-container.window-auto-height {
550+
height: auto;
551+
min-height: calc((var(--h) + var(--d)) * 1px);
552+
}
553+
554+
.window-container.window-auto-height .face.left {
555+
height: 100%;
556+
}
557+
558+
.window-container.window-auto-height .face.front {
559+
height: auto;
560+
min-height: calc(var(--h) * 1px);
561+
}
562+
563+
/* B. Responsive scaling for mobile */
564+
@media (max-width: 768px) {
565+
.window-container {
566+
--scale: min(1, calc(90vw / ((var(--w) + var(--d)) * 1px)));
567+
transform: scale(var(--scale));
568+
transform-origin: top left;
569+
margin-bottom: calc((1 - var(--scale)) * -100%);
570+
}
571+
}
572+
573+
@media (max-width: 640px) {
574+
.window-container {
575+
--w: 350; /* Smaller default width for mobile */
576+
--h: auto; /* Allow height to adjust */
577+
--d: 20; /* Smaller depth */
578+
}
579+
580+
/* Adjust font sizes in window content for mobile */
581+
.window-content {
582+
padding: 15px;
583+
font-size: 0.9rem;
584+
}
585+
586+
.window-content .font-semibold {
587+
font-size: 1rem;
588+
}
589+
}
590+
591+
@media (max-width: 480px) {
592+
.window-container {
593+
--w: 300; /* Even smaller for very small screens */
594+
--d: 15;
595+
}
596+
597+
.window-content {
598+
padding: 12px;
599+
font-size: 0.85rem;
600+
}
601+
}

0 commit comments

Comments
 (0)