From 27c7e5f47b670c51aab581589a6b4c90c12a2c0b Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Mon, 29 Aug 2022 04:14:35 +0530 Subject: * Style Changes * Content Changes --- src/_includes/assets/css/styles.css | 323 +++++++++++------------------------- 1 file changed, 100 insertions(+), 223 deletions(-) (limited to 'src/_includes/assets') 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; } -- cgit v1.2.3