From 155d0a1e93d783ee0b5f7af4e95ce0917e122434 Mon Sep 17 00:00:00 2001 From: Anish Neupane Date: Thu, 12 Sep 2024 01:28:49 +0545 Subject: [PATCH 1/3] Added certain degree of responsibility to hero section --- assets/hero/intro.svg | 30 ++---- css/output.css | 215 +++++++++++++++++++++++++++++++++--------- index.html | 41 ++++---- 3 files changed, 198 insertions(+), 88 deletions(-) diff --git a/assets/hero/intro.svg b/assets/hero/intro.svg index 0ab7b63..5f342fc 100644 --- a/assets/hero/intro.svg +++ b/assets/hero/intro.svg @@ -1,27 +1,9 @@ - - - - + + - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/css/output.css b/css/output.css index 2fa966c..7f28d4e 100644 --- a/css/output.css +++ b/css/output.css @@ -622,14 +622,6 @@ video { z-index: 50; } -.col-span-1 { - grid-column: span 1 / span 1; -} - -.col-span-3 { - grid-column: span 3 / span 3; -} - .col-start-6 { grid-column-start: 6; } @@ -807,10 +799,6 @@ video { height: 26rem; } -.h-\[3\.75rem\] { - height: 3.75rem; -} - .h-\[313px\] { height: 313px; } @@ -855,10 +843,6 @@ video { height: 8.5rem; } -.h-auto { - height: auto; -} - .h-full { height: 100%; } @@ -867,6 +851,23 @@ video { height: 100vh; } +.h-fit { + height: -moz-fit-content; + height: fit-content; +} + +.h-1 { + height: 0.25rem; +} + +.h-96 { + height: 24rem; +} + +.h-\[398px\] { + height: 398px; +} + .max-h-0 { max-height: 0px; } @@ -919,12 +920,12 @@ video { width: 11rem; } -.w-6 { - width: 1.5rem; +.w-48 { + width: 12rem; } -.w-\[13\.75rem\] { - width: 13.75rem; +.w-6 { + width: 1.5rem; } .w-\[220px\] { @@ -963,26 +964,31 @@ video { width: 100%; } -.max-w-3xl { - max-width: 48rem; -} - -.max-w-7xl { - max-width: 80rem; +.w-\[100vw\] { + width: 100vw; } -.max-w-full { - max-width: 100%; +.w-fit { + width: -moz-fit-content; + width: fit-content; } -.max-w-5xl { - max-width: 64rem; +.max-w-3xl { + max-width: 48rem; } .max-w-6xl { max-width: 72rem; } +.max-w-\[100vw\] { + max-width: 100vw; +} + +.max-w-full { + max-width: 100%; +} + .-rotate-180 { --tw-rotate: -180deg; 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)); @@ -996,22 +1002,18 @@ video { list-style-type: none; } -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.grid-rows-1 { - grid-template-rows: repeat(1, minmax(0, 1fr)); -} - .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } +.grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); +} + .flex-row { flex-direction: row; } @@ -1052,10 +1054,18 @@ video { justify-content: space-between; } +.justify-around { + justify-content: space-around; +} + .gap-16 { gap: 4rem; } +.gap-2 { + gap: 0.5rem; +} + .gap-4 { gap: 1rem; } @@ -1076,6 +1086,10 @@ video { gap: 2rem; } +.gap-52 { + gap: 13rem; +} + .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -1113,10 +1127,6 @@ video { border-radius: 9999px; } -.rounded-lg { - border-radius: 0.5rem; -} - .rounded-md { border-radius: 0.375rem; } @@ -1246,10 +1256,31 @@ video { background-size: cover; } +.bg-contain { + background-size: contain; +} + +.bg-auto { + background-size: auto; +} + +.bg-center { + background-position: center; +} + .bg-no-repeat { background-repeat: no-repeat; } +.bg-repeat-x { + background-repeat: repeat-x; +} + +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} + .p-0 { padding: 0px; } @@ -1644,16 +1675,37 @@ video { height: 3.5rem; } + .md\:h-\[3\.75rem\] { + height: 3.75rem; + } + .md\:h-\[4\.75rem\] { height: 4.75rem; } + .md\:w-\[13\.75rem\] { + width: 13.75rem; + } + .md\:w-auto { width: auto; } - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); + .md\:w-full { + width: 100%; + } + + .md\:w-screen { + width: 100vw; + } + + .md\:gap-2 { + gap: 0.5rem; + } + + .md\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; } .md\:text-xl { @@ -1700,14 +1752,42 @@ video { height: 4.75rem; } + .lg\:h-full { + height: 100%; + } + + .lg\:h-20 { + height: 5rem; + } + + .lg\:h-16 { + height: 4rem; + } + + .lg\:min-h-96 { + min-height: 24rem; + } + .lg\:w-44 { width: 11rem; } + .lg\:w-\[40vw\] { + width: 40vw; + } + .lg\:w-auto { width: auto; } + .lg\:w-full { + width: 100%; + } + + .lg\:max-w-full { + max-width: 100%; + } + .lg\:flex-row { flex-direction: row; } @@ -1716,6 +1796,18 @@ video { align-items: center; } + .lg\:justify-normal { + justify-content: normal; + } + + .lg\:justify-start { + justify-content: flex-start; + } + + .lg\:gap-6 { + gap: 1.5rem; + } + .lg\:gap-8 { gap: 2rem; } @@ -1764,6 +1856,15 @@ video { padding-right: 1rem; } + .lg\:text-start { + text-align: start; + } + + .lg\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + .lg\:text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -1774,6 +1875,15 @@ video { line-height: 1.75rem; } + .lg\:text-\[16px\] { + font-size: 16px; + } + + .lg\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + .lg\:font-semibold { font-weight: 600; } @@ -1790,6 +1900,10 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + .lg\:\*\:w-\[40\%\] > * { + width: 40%; + } + .lg\:hover\:cursor-pointer:hover { cursor: pointer; } @@ -1831,6 +1945,14 @@ video { } @media (min-width: 1280px) { + .xl\:h-20 { + height: 5rem; + } + + .xl\:w-\[40vw\] { + width: 40vw; + } + .xl\:gap-10 { gap: 2.5rem; } @@ -1839,4 +1961,9 @@ video { padding-left: 10%; padding-right: 10%; } + + .xl\:text-5xl { + font-size: 3rem; + line-height: 1; + } } diff --git a/index.html b/index.html index 31d4c64..125cc01 100644 --- a/index.html +++ b/index.html @@ -10,39 +10,40 @@
-
+
-
-

- Celebrate - Software
Freedom Day - 2024 with -
Nepal Open Source Klub +

+

+ + Celebrate + Software + + + Freedom Day + 2024 with + + Nepal Open Source Klub + "A celebration of innovation and open collaboration!"

-
-

-  "A celebration of innovation and open collaboration!" -

-
-
+
-
- SFD Horizontal - Nosk Logo +
+ SFD Horizontal + Nosk Logo
- Candle Ceremony NOSK + Candle Ceremony NOSK
@@ -59,7 +60,7 @@ Time: 10:00 AM
-
+
From 62a649f9af98a83c09ffb45555f90f2e9f48881c Mon Sep 17 00:00:00 2001 From: Anish Neupane Date: Thu, 12 Sep 2024 11:25:12 +0545 Subject: [PATCH 2/3] Slight problems fixed for devices around 768 width --- css/output.css | 138 +++++++------------------------------------------ index.html | 12 ++--- 2 files changed, 25 insertions(+), 125 deletions(-) diff --git a/css/output.css b/css/output.css index 7f28d4e..e89612c 100644 --- a/css/output.css +++ b/css/output.css @@ -851,23 +851,6 @@ video { height: 100vh; } -.h-fit { - height: -moz-fit-content; - height: fit-content; -} - -.h-1 { - height: 0.25rem; -} - -.h-96 { - height: 24rem; -} - -.h-\[398px\] { - height: 398px; -} - .max-h-0 { max-height: 0px; } @@ -920,10 +903,6 @@ video { width: 11rem; } -.w-48 { - width: 12rem; -} - .w-6 { width: 1.5rem; } @@ -964,15 +943,6 @@ video { width: 100%; } -.w-\[100vw\] { - width: 100vw; -} - -.w-fit { - width: -moz-fit-content; - width: fit-content; -} - .max-w-3xl { max-width: 48rem; } @@ -1002,18 +972,10 @@ video { list-style-type: none; } -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } -.grid-rows-2 { - grid-template-rows: repeat(2, minmax(0, 1fr)); -} - .flex-row { flex-direction: row; } @@ -1054,10 +1016,6 @@ video { justify-content: space-between; } -.justify-around { - justify-content: space-around; -} - .gap-16 { gap: 4rem; } @@ -1086,10 +1044,6 @@ video { gap: 2rem; } -.gap-52 { - gap: 13rem; -} - .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -1256,26 +1210,10 @@ video { background-size: cover; } -.bg-contain { - background-size: contain; -} - -.bg-auto { - background-size: auto; -} - -.bg-center { - background-position: center; -} - .bg-no-repeat { background-repeat: no-repeat; } -.bg-repeat-x { - background-repeat: repeat-x; -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1638,6 +1576,18 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +@media (min-width: 640px) { + .sm\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .sm\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } +} + @media (min-width: 768px) { .md\:top-\[4\.75rem\] { top: 4.75rem; @@ -1691,21 +1641,13 @@ video { width: auto; } - .md\:w-full { - width: 100%; - } - - .md\:w-screen { - width: 100vw; - } - .md\:gap-2 { gap: 0.5rem; } - .md\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; + .md\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; } .md\:text-xl { @@ -1748,22 +1690,14 @@ video { display: none; } - .lg\:h-\[4\.75rem\] { - height: 4.75rem; - } - - .lg\:h-full { - height: 100%; - } - - .lg\:h-20 { - height: 5rem; - } - .lg\:h-16 { height: 4rem; } + .lg\:h-\[4\.75rem\] { + height: 4.75rem; + } + .lg\:min-h-96 { min-height: 24rem; } @@ -1772,22 +1706,10 @@ video { width: 11rem; } - .lg\:w-\[40vw\] { - width: 40vw; - } - .lg\:w-auto { width: auto; } - .lg\:w-full { - width: 100%; - } - - .lg\:max-w-full { - max-width: 100%; - } - .lg\:flex-row { flex-direction: row; } @@ -1796,10 +1718,6 @@ video { align-items: center; } - .lg\:justify-normal { - justify-content: normal; - } - .lg\:justify-start { justify-content: flex-start; } @@ -1860,11 +1778,6 @@ video { text-align: start; } - .lg\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - .lg\:text-sm { font-size: 0.875rem; line-height: 1.25rem; @@ -1875,15 +1788,6 @@ video { line-height: 1.75rem; } - .lg\:text-\[16px\] { - font-size: 16px; - } - - .lg\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - .lg\:font-semibold { font-weight: 600; } @@ -1949,10 +1853,6 @@ video { height: 5rem; } - .xl\:w-\[40vw\] { - width: 40vw; - } - .xl\:gap-10 { gap: 2.5rem; } diff --git a/index.html b/index.html index 125cc01..0f2f28c 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,8 @@
-
-
+
+

Celebrate @@ -23,17 +23,17 @@ 2024 with Nepal Open Source Klub - "A celebration of innovation and open collaboration!" + "A celebration of innovation and open collaboration!"

@@ -42,7 +42,7 @@ Nosk Logo
-
+
Candle Ceremony NOSK
From 789d0b9aff04a56c1b2f846b55e65b0951d084dd Mon Sep 17 00:00:00 2001 From: Anish Neupane Date: Thu, 12 Sep 2024 11:51:18 +0545 Subject: [PATCH 3/3] Added and renamed some items in the navbar --- css/output.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 10 +++++----- js/navbar.js | 11 +++++++++-- 3 files changed, 58 insertions(+), 7 deletions(-) diff --git a/css/output.css b/css/output.css index e89612c..b96f9a9 100644 --- a/css/output.css +++ b/css/output.css @@ -851,6 +851,18 @@ video { height: 100vh; } +.h-72 { + height: 18rem; +} + +.h-56 { + height: 14rem; +} + +.h-40 { + height: 10rem; +} + .max-h-0 { max-height: 0px; } @@ -943,6 +955,10 @@ video { width: 100%; } +.w-40 { + width: 10rem; +} + .max-w-3xl { max-width: 48rem; } @@ -988,6 +1004,10 @@ video { flex-direction: column; } +.flex-col-reverse { + flex-direction: column-reverse; +} + .content-center { align-content: center; } @@ -1276,6 +1296,14 @@ video { padding-top: 1rem; } +.pt-8 { + padding-top: 2rem; +} + +.pt-6 { + padding-top: 1.5rem; +} + .text-left { text-align: left; } @@ -1633,6 +1661,18 @@ video { height: 4.75rem; } + .md\:h-36 { + height: 9rem; + } + + .md\:h-72 { + height: 18rem; + } + + .md\:h-80 { + height: 20rem; + } + .md\:w-\[13\.75rem\] { width: 13.75rem; } @@ -1853,6 +1893,10 @@ video { height: 5rem; } + .xl\:w-\[40vw\] { + width: 40vw; + } + .xl\:gap-10 { gap: 2.5rem; } diff --git a/index.html b/index.html index 0f2f28c..2bc2296 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ -
-
+
+

@@ -28,11 +28,11 @@

@@ -43,7 +43,7 @@
- Candle Ceremony NOSK + Candle Ceremony NOSK
diff --git a/js/navbar.js b/js/navbar.js index e2b34fe..c5c6cb0 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -28,6 +28,9 @@ const navCode = `