diff options
author | Indrajith K L | 2022-08-29 04:14:35 +0530 |
---|---|---|
committer | Indrajith K L | 2022-08-29 04:14:35 +0530 |
commit | 27c7e5f47b670c51aab581589a6b4c90c12a2c0b (patch) | |
tree | bdc576d663e36846c54a4420423abe99ff8c8a8d /src | |
parent | e5fcb404ddb40ae14b8d844dec6d75c5436a6a39 (diff) | |
download | indrajith-dev-27c7e5f47b670c51aab581589a6b4c90c12a2c0b.tar.gz indrajith-dev-27c7e5f47b670c51aab581589a6b4c90c12a2c0b.tar.bz2 indrajith-dev-27c7e5f47b670c51aab581589a6b4c90c12a2c0b.zip |
* Style Changes
* Content Changes
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/assets/css/styles.css | 323 | ||||
-rw-r--r-- | src/_includes/partials/header.njk | 8 | ||||
-rw-r--r-- | src/index.njk | 5 |
3 files changed, 107 insertions, 229 deletions
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index 0cdb4ce..b700c10 100644 --- a/src/_includes/assets/css/styles.css +++ b/src/_includes/assets/css/styles.css @@ -1,8 +1,6 @@ /* ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com -*/ - -/* +*//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ @@ -10,14 +8,10 @@ *, ::before, ::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #e5e7eb; /* 2 */ } ::before, @@ -33,17 +27,12 @@ */ html { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ + tab-size: 4; /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ } /* @@ -52,10 +41,8 @@ html { */ body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ + margin: 0; /* 1 */ + line-height: inherit; /* 2 */ } /* @@ -65,12 +52,9 @@ body { */ hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ } /* @@ -123,10 +107,8 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-size: 1em; - /* 2 */ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* @@ -164,12 +146,9 @@ sup { */ table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ } /* @@ -183,20 +162,13 @@ input, optgroup, select, textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + font-weight: inherit; /* 1 */ + line-height: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ } /* @@ -217,12 +189,9 @@ button, [type='button'], [type='reset'], [type='submit'] { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ } /* @@ -264,10 +233,8 @@ Correct the cursor style of increment and decrement buttons in Safari. */ [type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /* @@ -284,10 +251,8 @@ Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* @@ -349,18 +314,14 @@ textarea { */ input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ } /* @@ -375,7 +336,6 @@ button, /* Make sure disabled buttons don't get the pointer cursor. */ - :disabled { cursor: default; } @@ -394,10 +354,8 @@ audio, iframe, embed, object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ + display: block; /* 1 */ + vertical-align: middle; /* 2 */ } /* @@ -550,345 +508,277 @@ video { --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } - .container { width: 100%; } - @media (min-width: 640px) { + .container { max-width: 640px; } } - @media (min-width: 768px) { + .container { max-width: 768px; } } - @media (min-width: 1024px) { + .container { max-width: 1024px; } } - @media (min-width: 1280px) { + .container { max-width: 1280px; } } - @media (min-width: 1536px) { + .container { max-width: 1536px; } } - .absolute { position: absolute; } - .right-0 { right: 0px; } - .float-right { float: right; } - .m-4 { margin: 1rem; } - .mx-auto { margin-left: auto; margin-right: auto; } - .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } - .my-4 { margin-top: 1rem; margin-bottom: 1rem; } - .-my-8 { margin-top: -2rem; margin-bottom: -2rem; } - .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } - .mt-2 { margin-top: 0.5rem; } - .mt-3 { margin-top: 0.75rem; } - .mt-10 { margin-top: 2.5rem; } - .ml-5 { margin-left: 1.25rem; } - .mr-5 { margin-right: 1.25rem; } - .mb-10 { margin-bottom: 2.5rem; } - .mr-10 { margin-right: 2.5rem; } - .mb-5 { margin-bottom: 1.25rem; } - .mt-5 { margin-top: 1.25rem; } - .mt-auto { margin-top: auto; } - .mt-1 { margin-top: 0.25rem; } - .flex { display: flex; } - .hidden { display: none; } - .h-48 { height: 12rem; } - .h-screen { height: 100vh; } - .w-full { width: 100%; } - .max-w-5xl { max-width: 64rem; } - .flex-row { flex-direction: row; } - .flex-col { flex-direction: column; } - .items-center { align-items: center; } - .justify-start { justify-content: flex-start; } - .justify-end { justify-content: flex-end; } - .justify-center { justify-content: center; } - .justify-between { justify-content: space-between; } - .gap-10 { gap: 2.5rem; } - .rounded-full { border-radius: 9999px; } - .bg-yellow-500 { --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } - .bg-purple-500 { --tw-bg-opacity: 1; background-color: rgb(168 85 247 / var(--tw-bg-opacity)); } - .bg-violet-700 { --tw-bg-opacity: 1; background-color: rgb(109 40 217 / var(--tw-bg-opacity)); } - .bg-sky-700 { --tw-bg-opacity: 1; background-color: rgb(3 105 161 / var(--tw-bg-opacity)); } - .bg-purple-700 { --tw-bg-opacity: 1; background-color: rgb(126 34 206 / var(--tw-bg-opacity)); } - .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } - .object-cover { -o-object-fit: cover; object-fit: cover; } - .p-2 { padding: 0.5rem; } - .p-3 { padding: 0.75rem; } - .p-6 { padding: 1.5rem; } - .p-8 { padding: 2rem; } - .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } - .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } - .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } - .py-4 { padding-top: 1rem; padding-bottom: 1rem; } - .pl-2 { padding-left: 0.5rem; } - .pt-2 { padding-top: 0.5rem; } - .text-center { text-align: center; } - .text-justify { text-align: justify; } - +.align-middle { + vertical-align: middle; +} .font-supply-regular { font-family: supplyRegular, sans-serif; } - .text-2xl { font-size: 1.5rem; line-height: 2rem; } - .text-lg { font-size: 1.125rem; line-height: 1.75rem; } - .text-xl { font-size: 1.25rem; line-height: 1.75rem; } - .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } - .font-bold { font-weight: 700; } - .font-extrabold { font-weight: 800; } - .font-medium { font-weight: 500; } - .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } - .text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); } - .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } - .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } - .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } - .text-yellow-500 { --tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity)); } - .shadow-\[5px_5px_0px_0px_rgba\(0\2c 0\2c 0\2c 255\)\] { --tw-shadow: 5px 5px 0px 0px rgba(0,0,0,255); --tw-shadow-colored: 5px 5px 0px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -896,103 +786,97 @@ video { -webkit-line-clamp: 1; } -@font-face { - font-family: supplyRegular; +@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); - src: url(./fonts/PPSupplyMono-Regular.otf); +@font-face { + font-family: supplyRegular; + src: url(./fonts/PPSupplyMono-Regular.otf); } @font-face { - font-family: supplyLight; - - src: url(./fonts/PPSupplyMono-Ultralight.otf); + font-family: supplyLight; + src: url(./fonts/PPSupplyMono-Ultralight.otf); } * { - margin: 0; - box-sizing: border-box; + margin: 0; + box-sizing: border-box; } html, body { - display: flex; - flex-direction: column; - min-height: 100vh; + display: flex; + flex-direction: column; + min-height: 100vh; } code[class*="language-"], pre[class*="language-"] { - color: #657b83; - /* base00 */ - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - hyphens: none; + color: #657b83; /* base00 */ + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - background: #073642; - /* base02 */ + background: #073642; /* base02 */ } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - background: #073642; - /* base02 */ + background: #073642; /* base02 */ } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - background: #073642; - /* base02 */ + background: #073642; /* base02 */ } /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background-color: #fdf6e3; - /* base3 */ + background-color: #fdf6e3; /* base3 */ } /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; + padding: .1em; + border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #93a1a1; - /* base1 */ + color: #93a1a1; /* base1 */ } .token.punctuation { - color: #586e75; - /* base01 */ + color: #586e75; /* base01 */ } .token.namespace { - opacity: .7; + opacity: .7; } .token.property, @@ -1002,8 +886,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #268bd2; - /* blue */ + color: #268bd2; /* blue */ } .token.selector, @@ -1013,48 +896,41 @@ pre[class*="language-"] { .token.builtin, .token.url, .token.inserted { - color: #2aa198; - /* cyan */ + color: #2aa198; /* cyan */ } .token.entity { - color: #657b83; - /* base00 */ - background: #eee8d5; - /* base2 */ + color: #657b83; /* base00 */ + background: #eee8d5; /* base2 */ } .token.atrule, .token.attr-value, .token.keyword { - color: #859900; - /* green */ + color: #859900; /* green */ } .token.function, .token.class-name { - color: #b58900; - /* yellow */ + color: #b58900; /* yellow */ } .token.regex, .token.important, .token.variable { - color: #cb4b16; - /* orange */ + color: #cb4b16; /* orange */ } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } - .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } .hover\:text-black:hover { @@ -1068,6 +944,7 @@ pre[class*="language-"] { } @media (min-width: 768px) { + .md\:ml-0 { margin-left: 0px; } diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index da51bba..ab1d424 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -9,9 +9,9 @@ <li class="hover:text-white"><a href="/cv" id="cv" class="links">CV</a></li> </ul> <ul class="hidden md:flex flex-row gap-10 font-supply-regular right-0 -my-8 mx-6 absolute"> - <li><a title="Twitter" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> - <li><a title="Github" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> - <li><a title="LinkedIn" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> + <li class="hover:text-white"><a title="Twitter" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> + <li class="hover:text-white"><a title="Github" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> + <li class="hover:text-white"><a title="LinkedIn" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> </ul> </nav> </header> @@ -22,7 +22,7 @@ const navs = ["about","posts","cv"]; const currentNav = navs.find(nav=>currentLocation.includes(nav)); if (currentNav) { - document.getElementById(currentNav).parentElement.classList.add("text-black-600"); + document.getElementById(currentNav).parentElement.classList.add("text-white"); } })(); </script>
\ No newline at end of file diff --git a/src/index.njk b/src/index.njk index 4aac433..87aba67 100644 --- a/src/index.njk +++ b/src/index.njk @@ -1,10 +1,11 @@ --- layout: intro.njk -title: "Hello Friend!! My name is Indrajith K L." +title: Home +alternatetitle: "Hello Friend!! My name is Indrajith K L." --- <div class="flex w-full"> <div class="bg-yellow-500 text-md md:text-xl text-black font-supply-regular shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] p-3 mt-10 ml-5 mr-5 md:p-10 md:ml-0 md:mr-0"> - <p class="text-lg md:text-2xl font-bold">{{title}}</p> + <p class="text-lg md:text-2xl font-bold">{{alternatetitle}}</p> <p class="mt-3 text-justify"> I'm a web developer, hobbyist game developer from Kerala, India working as a front-end developer. This site is where I write about my fun side projects, R&D's, random thoughts, game development etc. Since you here why don't you read some posts from <a href="/posts" class="text-red-700"> here</a>. |