diff options
author | Indrajith K L | 2022-09-03 22:55:04 +0530 |
---|---|---|
committer | Indrajith K L | 2022-09-04 00:23:11 +0530 |
commit | 28195a7632eb1f9a125bd6fe87ffe3a86a9ae246 (patch) | |
tree | 6ea6bc2c881b7b3522427c28a43861982805d4d1 /src | |
parent | 68aa34deb7c6dc014e5026bceede62be785e7c00 (diff) | |
download | indrajith-dev-28195a7632eb1f9a125bd6fe87ffe3a86a9ae246.tar.gz indrajith-dev-28195a7632eb1f9a125bd6fe87ffe3a86a9ae246.tar.bz2 indrajith-dev-28195a7632eb1f9a125bd6fe87ffe3a86a9ae246.zip |
Adds Hire Me Page
Code Cleanup
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/assets/css/styles.css | 314 | ||||
-rw-r--r-- | src/hire-me.njk | 59 | ||||
-rw-r--r-- | src/posts/index.njk | 2 |
3 files changed, 372 insertions, 3 deletions
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index 1228849..9b842e1 100644 --- a/src/_includes/assets/css/styles.css +++ b/src/_includes/assets/css/styles.css @@ -585,6 +585,18 @@ video { } } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + .visible { visibility: visible; } @@ -601,6 +613,14 @@ video { right: 0px; } +.col-span-3 { + grid-column: span 3 / span 3; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + .float-right { float: right; } @@ -694,6 +714,10 @@ video { margin-top: 0px; } +.mt-8 { + margin-top: 2rem; +} + .block { display: block; } @@ -706,10 +730,18 @@ video { display: flex; } +.inline-flex { + display: inline-flex; +} + .table { display: table; } +.grid { + display: grid; +} + .contents { display: contents; } @@ -726,14 +758,46 @@ video { height: 12rem; } +.h-12 { + height: 3rem; +} + +.h-full { + height: 100%; +} + .w-full { width: 100%; } +.w-12 { + width: 3rem; +} + .max-w-5xl { max-width: 64rem; } +.max-w-md { + max-width: 28rem; +} + +.max-w-xl { + max-width: 36rem; +} + +.max-w-4xl { + max-width: 56rem; +} + +.flex-1 { + flex: 1 1 0%; +} + +.flex-shrink { + flex-shrink: 1; +} + .border-collapse { border-collapse: collapse; } @@ -742,10 +806,22 @@ video { 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)); } +.cursor-pointer { + cursor: pointer; +} + .resize { resize: both; } +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + .flex-row { flex-direction: row; } @@ -782,18 +858,83 @@ video { gap: 1.25rem; } +.gap-6 { + gap: 1.5rem; +} + .gap-4 { gap: 1rem; } +.space-y-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.divide-y > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.overflow-hidden { + overflow: hidden; +} + .rounded-full { border-radius: 9999px; } +.rounded-md { + border-radius: 0.375rem; +} + +.rounded-none { + border-radius: 0px; +} + +.rounded-l-md { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} + +.rounded-r-md { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; +} + .border { border-width: 1px; } +.border-2 { + border-width: 2px; +} + +.border-r-0 { + border-right-width: 0px; +} + +.border-dashed { + border-style: dashed; +} + +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.border-transparent { + border-color: transparent; +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -814,6 +955,21 @@ video { background-color: rgb(3 105 161 / var(--tw-bg-opacity)); } +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.bg-indigo-600 { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity)); +} + .bg-violet-700 { --tw-bg-opacity: 1; background-color: rgb(109 40 217 / var(--tw-bg-opacity)); @@ -824,6 +980,11 @@ video { background-color: rgb(126 34 206 / var(--tw-bg-opacity)); } +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -864,11 +1025,31 @@ video { padding-bottom: 0.5rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.py-12 { + padding-top: 3rem; + padding-bottom: 3rem; +} + .pl-2 { padding-left: 0.5rem; } @@ -877,10 +1058,26 @@ video { padding-top: 0.5rem; } +.pt-5 { + padding-top: 1.25rem; +} + +.pb-6 { + padding-bottom: 1.5rem; +} + +.pl-1 { + padding-left: 0.25rem; +} + .text-center { text-align: center; } +.text-right { + text-align: right; +} + .text-justify { text-align: justify; } @@ -899,6 +1096,11 @@ video { line-height: 2rem; } +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + .text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -909,6 +1111,11 @@ video { line-height: 2.25rem; } +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + .font-bold { font-weight: 700; } @@ -925,6 +1132,10 @@ video { font-style: italic; } +.leading-4 { + line-height: 1rem; +} + .text-yellow-500 { --tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity)); @@ -945,9 +1156,9 @@ video { color: rgb(185 28 28 / var(--tw-text-opacity)); } -.text-red-600 { +.text-gray-700 { --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)); } .text-gray-500 { @@ -955,6 +1166,31 @@ video { color: rgb(107 114 128 / var(--tw-text-opacity)); } +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.text-indigo-600 { + --tw-text-opacity: 1; + color: rgb(79 70 229 / var(--tw-text-opacity)); +} + .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; @@ -966,6 +1202,18 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .outline { outline-style: solid; } @@ -1126,6 +1374,11 @@ pre[class*="language-"] { cursor: help; } +.hover\:bg-indigo-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity)); +} + .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1136,7 +1389,64 @@ pre[class*="language-"] { color: rgb(0 0 0 / var(--tw-text-opacity)); } +.focus\:border-indigo-500:focus { + --tw-border-opacity: 1; + border-color: rgb(99 102 241 / var(--tw-border-opacity)); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-indigo-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); +} + +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + +@media (min-width: 640px) { + .sm\:col-span-2 { + grid-column: span 2 / span 2; + } + + .sm\:overflow-hidden { + overflow: hidden; + } + + .sm\:rounded-md { + border-radius: 0.375rem; + } + + .sm\:p-6 { + padding: 1.5rem; + } + + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } +} + @media (min-width: 768px) { + .md\:col-span-2 { + grid-column: span 2 / span 2; + } + .md\:ml-0 { margin-left: 0px; } diff --git a/src/hire-me.njk b/src/hire-me.njk new file mode 100644 index 0000000..0521439 --- /dev/null +++ b/src/hire-me.njk @@ -0,0 +1,59 @@ +--- +layout: base.njk +title: Hire Me +--- +<h2 class="text-2xl font-bold text-black p-2 text-center">Hire Me</h2> +<form action="https://getform.io/f/8fc9e444-7a4f-4f36-98b6-840a8ce7cb94" method="POST"> + <div class="mt-5 md:col-span-2 md:mt-0"> + <form action="https://getform.io/f/8fc9e444-7a4f-4f36-98b6-840a8ce7cb94" method="POST"> + <div class="sm:overflow-hidden sm:rounded-md"> + <div class="space-y-6 bg-white px-4 py-5 sm:p-6"> + <div class="grid grid-cols-3 gap-6"> + <div class="col-span-3 sm:col-span-2"> + <label for="client-name" class="block text-sm font-medium text-gray-700">Your Name*</label> + <div class="mt-1 flex rounded-md shadow-sm"> + <input type="text" name="client-name" id="client-name" required + class="block w-full flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"> + </div> + </div> + </div> + <div class="grid grid-cols-3 gap-6"> + <div class="col-span-3 sm:col-span-2"> + <label for="client-email" class="block text-sm font-medium text-gray-700">Email*</label> + <div class="mt-1 flex rounded-md shadow-sm"> + <input type="email" name="client-email" id="client-email" required + class="block w-full flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"> + </div> + </div> + </div> + <div class="grid grid-cols-3 gap-6"> + <div class="col-span-3 sm:col-span-2"> + <label for="company-website" class="block text-sm font-medium text-gray-700">Website</label> + <div class="mt-1 flex rounded-md shadow-sm"> + <span + class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500">http://</span> + <input type="text" name="company-website" id="company-website" + class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + placeholder="www.yourwebsite.com"> + </div> + </div> + </div> + + <div> + <label for="project-req" class="block text-sm font-medium text-gray-700">Requirement*</label> + <div class="mt-1"> + <textarea id="project-req" name="project-req" rows="3" required + class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea> + </div> + <p class="mt-2 text-sm text-gray-500">A short description of the project and requirements + </p> + </div> + </div> + <div class="bg-gray-50 px-4 py-3 text-right sm:px-6"> + <button type="submit" + class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Submit</button> + </div> + </div> + </form> + </div> +</form>
\ No newline at end of file diff --git a/src/posts/index.njk b/src/posts/index.njk index 7cd0afc..e7fbb97 100644 --- a/src/posts/index.njk +++ b/src/posts/index.njk @@ -11,7 +11,7 @@ title: Posts {{post.date | dateFilter}} </div> <div class="post-title m-4 text-red-600 hover:text-black"> - <a href="{{post.url}}"> {{post.data.title}}</a> + <a href="{{post.url}}"> {{post.data.title}}</a> </div> </div> {% else %} |