diff options
author | Indrajith K L | 2022-08-29 01:56:31 +0530 |
---|---|---|
committer | Indrajith K L | 2022-08-29 01:56:31 +0530 |
commit | e5fcb404ddb40ae14b8d844dec6d75c5436a6a39 (patch) | |
tree | dc1808c10273589aa3b72cacfef3be3703c402d2 /src | |
parent | 15c400fd10a62b10b5cd937cc45efcf7cf255fe1 (diff) | |
download | indrajith-dev-e5fcb404ddb40ae14b8d844dec6d75c5436a6a39.tar.gz indrajith-dev-e5fcb404ddb40ae14b8d844dec6d75c5436a6a39.tar.bz2 indrajith-dev-e5fcb404ddb40ae14b8d844dec6d75c5436a6a39.zip |
Style & Build script Fixes
Diffstat (limited to 'src')
-rw-r--r-- | src/_includes/assets/css/styles.css | 358 |
1 files changed, 233 insertions, 125 deletions
diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index a82a0f4..0cdb4ce 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,280 +550,345 @@ 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; } } + .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; } -.ml-5 { - margin-left: 1.25rem; -} -.mr-5 { - margin-right: 1.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-10 { - padding: 2.5rem; + +.p-3 { + padding: 0.75rem; } + .p-6 { padding: 1.5rem; } + .p-8 { padding: 2rem; } -.p-0 { - padding: 0px; -} -.p-3 { - padding: 0.75rem; -} + .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; } + .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; @@ -789,97 +896,103 @@ 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; + + 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, @@ -889,7 +1002,8 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #268bd2; /* blue */ + color: #268bd2; + /* blue */ } .token.selector, @@ -899,41 +1013,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-black:hover { @@ -947,23 +1068,14 @@ pre[class*="language-"] { } @media (min-width: 768px) { - - .md\:m-0 { - margin: 0px; - } - - .md\:mt-10 { - margin-top: 2.5rem; + .md\:ml-0 { + margin-left: 0px; } .md\:mr-0 { margin-right: 0px; } - .md\:ml-0 { - margin-left: 0px; - } - .md\:flex { display: flex; } @@ -976,10 +1088,6 @@ pre[class*="language-"] { flex-direction: column; } - .md\:p-0 { - padding: 0px; - } - .md\:p-10 { padding: 2.5rem; } |