diff options
author | Indrajith K L | 2022-09-03 04:38:12 +0530 |
---|---|---|
committer | Indrajith K L | 2022-09-03 04:38:12 +0530 |
commit | 9c7aa76cf8cf58137b18151aa70f64b4a71811b5 (patch) | |
tree | d875a25cb6860aee9193856f9212f607e664394b /src | |
parent | e2a597a5efcd09f99b6e85620971c3e2fc50db12 (diff) | |
download | indrajith-dev-9c7aa76cf8cf58137b18151aa70f64b4a71811b5.tar.gz indrajith-dev-9c7aa76cf8cf58137b18151aa70f64b4a71811b5.tar.bz2 indrajith-dev-9c7aa76cf8cf58137b18151aa70f64b4a71811b5.zip |
Tailwind Build Process Changes
* Uses npm-run-all to manage build process
* Removed Concurrently
Style Fixes
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/assets/css/styles.css | 343 | ||||
-rw-r--r-- | src/_includes/partials/footer.njk | 8 | ||||
-rw-r--r-- | src/_includes/partials/head.njk | 2 | ||||
-rw-r--r-- | src/_includes/partials/header.njk | 2 | ||||
-rw-r--r-- | src/css/styles.css | 12 |
5 files changed, 246 insertions, 121 deletions
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index e9d5227..1228849 100644 --- a/src/_includes/assets/css/styles.css +++ b/src/_includes/assets/css/styles.css @@ -1,6 +1,8 @@ /* ! 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) */ @@ -8,10 +10,14 @@ *, ::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, @@ -27,12 +33,17 @@ */ 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 */ } /* @@ -41,8 +52,10 @@ html { */ body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ } /* @@ -52,9 +65,12 @@ body { */ hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ } /* @@ -107,8 +123,10 @@ 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 */ } /* @@ -146,9 +164,12 @@ 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 */ } /* @@ -162,13 +183,20 @@ 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 */ } /* @@ -189,9 +217,12 @@ 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 */ } /* @@ -233,8 +264,10 @@ 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 */ } /* @@ -251,8 +284,10 @@ 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 */ } /* @@ -314,14 +349,18 @@ 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 */ } /* @@ -336,6 +375,7 @@ button, /* Make sure disabled buttons don't get the pointer cursor. */ + :disabled { cursor: default; } @@ -354,8 +394,10 @@ audio, iframe, embed, object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ } /* @@ -508,332 +550,426 @@ video { --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } + .container { width: 100%; } -@media (min-width: 640px) { +@media (min-width: 640px) { .container { max-width: 640px; } } -@media (min-width: 768px) { +@media (min-width: 768px) { .container { max-width: 768px; } } -@media (min-width: 1024px) { +@media (min-width: 1024px) { .container { max-width: 1024px; } } -@media (min-width: 1280px) { +@media (min-width: 1280px) { .container { max-width: 1280px; } } -@media (min-width: 1536px) { +@media (min-width: 1536px) { .container { max-width: 1536px; } } + .visible { visibility: visible; } + .absolute { position: absolute; } + .relative { position: relative; } + .right-0 { right: 0px; } + .float-right { float: right; } + .m-4 { margin: 1rem; } + .-my-8 { margin-top: -2rem; margin-bottom: -2rem; } + .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } + .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; } + .mt-10 { margin-top: 2.5rem; } + .ml-5 { margin-left: 1.25rem; } + .mr-5 { margin-right: 1.25rem; } + .mt-3 { margin-top: 0.75rem; } + .mb-10 { margin-bottom: 2.5rem; } + .mr-10 { margin-right: 2.5rem; } + .mb-5 { margin-bottom: 1.25rem; } + .mt-auto { margin-top: auto; } + .ml-auto { margin-left: auto; } + .mt-5 { margin-top: 1.25rem; } + .mt-1 { margin-top: 0.25rem; } + .mt-2 { margin-top: 0.5rem; } + .ml-0 { margin-left: 0px; } + .mr-0 { margin-right: 0px; } + .mt-0 { margin-top: 0px; } + .block { display: block; } + .inline-block { display: inline-block; } + .flex { display: flex; } + .table { display: table; } + .contents { display: contents; } + .hidden { display: none; } + .h-screen { height: 100vh; } + .h-48 { height: 12rem; } + .w-full { width: 100%; } + .max-w-5xl { max-width: 64rem; } + .border-collapse { border-collapse: collapse; } + .transform { 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)); } + .resize { resize: both; } + .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; } + +.gap-5 { + gap: 1.25rem; +} + .gap-4 { gap: 1rem; } + .rounded-full { border-radius: 9999px; } + .border { border-width: 1px; } + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } + .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-sky-700 { --tw-bg-opacity: 1; background-color: rgb(3 105 161 / var(--tw-bg-opacity)); } + .bg-violet-700 { --tw-bg-opacity: 1; background-color: rgb(109 40 217 / var(--tw-bg-opacity)); } + .bg-purple-700 { --tw-bg-opacity: 1; background-color: rgb(126 34 206 / var(--tw-bg-opacity)); } + .object-cover { -o-object-fit: cover; object-fit: cover; } + .p-3 { padding: 0.75rem; } + .p-2 { padding: 0.5rem; } + .p-6 { padding: 1.5rem; } + .p-8 { padding: 2rem; } + .p-10 { padding: 2.5rem; } + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } + .py-4 { padding-top: 1rem; padding-bottom: 1rem; } + .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } + .pl-2 { padding-left: 0.5rem; } + .pt-2 { padding-top: 0.5rem; } + .text-center { text-align: center; } + .text-justify { text-align: justify; } + .font-supply-regular { font-family: supplyRegular, sans-serif; } + .text-lg { font-size: 1.125rem; line-height: 1.75rem; } + .text-2xl { font-size: 1.5rem; line-height: 2rem; } + .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; } + .italic { font-style: italic; } + .text-yellow-500 { --tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity)); } + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } + .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-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)); } + .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; } + .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); } + .outline { outline-style: solid; } + .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -841,97 +977,91 @@ video { -webkit-line-clamp: 1; } -@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); - @font-face { - font-family: supplyRegular; - src: url(./fonts/PPSupplyMono-Regular.otf); -} + font-family: supplyRegular; -@font-face { - font-family: supplyLight; - src: url(./fonts/PPSupplyMono-Ultralight.otf); + src: url(./fonts/PPSupplyMono-Regular.otf); } -* { - margin: 0; - box-sizing: border-box; -} +@font-face { + font-family: supplyLight; -html, -body { - display: flex; - flex-direction: column; - min-height: 100vh; + src: url(./fonts/PPSupplyMono-Ultralight.otf); } 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, @@ -941,7 +1071,8 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #268bd2; /* blue */ + color: #268bd2; + /* blue */ } .token.selector, @@ -951,41 +1082,48 @@ 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-white:hover { @@ -999,7 +1137,6 @@ pre[class*="language-"] { } @media (min-width: 768px) { - .md\:ml-0 { margin-left: 0px; } diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk index 3b88e2a..f3bffae 100644 --- a/src/_includes/partials/footer.njk +++ b/src/_includes/partials/footer.njk @@ -1,13 +1,13 @@ <footer class="items-center px-6 py-2 mt-auto bg-black text-white"> - <ul class="w-full block md:hidden gap-4 font-supply-regular ml-auto text-center mt-5 md:mt-0"> + <ul class="w-full flex md:hidden gap-5 font-supply-regular ml-auto justify-center mt-5 md:mt-0"> <li class="hover:text-white inline-block"><a title="Twitter" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li> <li class="hover:text-white inline-block"><a title="Github" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li> <li class="hover:text-white inline-block"><a title="LinkedIn" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> <li class="hover:text-white inline-block"><a title="RSS" href="/feed.xml" class="links">{% feather "rss" %}</a></li> </ul> <ul class="flex w-full gap-10 font-supply-regular justify-center mt-5 md:mt-auto"> - <li class="mt-1"> - <p>© 2022 Indrajith K L </p> - </li> + <li class="mt-1"> + <p>© 2022 Indrajith K L </p> + </li> </ul> </footer>
\ No newline at end of file diff --git a/src/_includes/partials/head.njk b/src/_includes/partials/head.njk index 7d3d5c1..ed4e5ec 100644 --- a/src/_includes/partials/head.njk +++ b/src/_includes/partials/head.njk @@ -15,6 +15,6 @@ <meta property="og:title" content="Indrajith K L"> <meta property="og:description" content="Frontend Web Developer, Game Dev Hobbyist, Night Owl, Synthwave & Vaporwave Lover"> <meta property="og:image" content="https://indrajith.dev/images/me.png"> -<link rel="stylesheet" href="/styles.css"> +<link rel="stylesheet" href="/global.css"> {% favicon './favicon.svg' %} <title>{{title}} | { indrajith.dev } </title>
\ No newline at end of file diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index 50c1a7f..959260b 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -1,6 +1,6 @@ <header class="w-full bg-black text-yellow-500 flex flex-row md:flex-col justify-between items-center px-6 py-4"> <nav class="w-full"> - <ul class="flex flex-col md:flex-row gap-10 font-supply-regular w-full items-center text-lg md:text-xl"> + <ul class="flex flex-col md:flex-row gap-10 font-supply-regular w-full items-center text-lg md:text-xl"> <li> <a href="/" class="text-lg md:text-3xl">{ indrajith.dev } </a> </li> diff --git a/src/css/styles.css b/src/css/styles.css index de570b1..e1bcf06 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -14,18 +14,6 @@ src: url(./fonts/PPSupplyMono-Ultralight.otf); } -* { - margin: 0; - box-sizing: border-box; -} - -html, -body { - display: flex; - flex-direction: column; - min-height: 100vh; -} - code[class*="language-"], pre[class*="language-"] { color: #657b83; /* base00 */ |