From 820c4cf098674b4717ae072dcc2f83fed2d33042 Mon Sep 17 00:00:00 2001 From: HusJAW Date: Tue, 22 Jun 2021 17:48:49 +0100 Subject: [PATCH 1/8] H:testing --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 29aac3b..255ab07 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -

Hello, testing

+

, testing

\ No newline at end of file From e64eb407b56596cf72c416b17ee5d3cb4b6e46e4 Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Tue, 22 Jun 2021 20:13:25 +0100 Subject: [PATCH 2/8] Testing commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 255ab07..9aad6fe 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -

, testing

+

Testing again.

\ No newline at end of file From 5edf7ecf316cf1707cdedb30099ded8c77480782 Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Tue, 22 Jun 2021 20:22:09 +0100 Subject: [PATCH 3/8] Tested stage/commit/push in branch --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9aad6fe..c708041 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,9 @@ -

Testing again.

+

Testing + again.

+

Added para in brach (Checked out to it)

\ No newline at end of file From a58a28bfab24558b01c2a178cd5c885b3e29c0d7 Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Wed, 23 Jun 2021 12:11:55 +0100 Subject: [PATCH 4/8] Created custom variant tW --- index.html | 4 +++ styles.css | 8 +++--- tailwind.config.js | 62 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 68 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index c708041..6377887 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,10 @@

Testing again.

Added para in brach (Checked out to it)

+ + + + \ No newline at end of file diff --git a/styles.css b/styles.css index 8bb3f4e..3eb7912 100644 --- a/styles.css +++ b/styles.css @@ -596,10 +596,6 @@ video { --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.text-9xl { - font-size: 8rem; - line-height: 1; -} .text-\[4rem\] { font-size: 4rem; } @@ -610,6 +606,10 @@ video { --tw-text-opacity: 1; color: rgba(96, 165, 250, var(--tw-text-opacity)); } +.nextOnChecked\:bg-green-500:checked + * { + --tw-bg-opacity: 1; + background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); +} @media (min-width: 400px) { .custom\:text-red-500 { diff --git a/tailwind.config.js b/tailwind.config.js index 88a61fd..3a49433 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,15 @@ +const plugin = require('tailwindcss/plugin') + +const nextOnChecked = plugin(function ({ addVariant, e }) { + addVariant('nextOnChecked', ({ modifySelectors, separator }) => { + modifySelectors(({ className }) => { + return `.${e(`nextOnChecked${separator}${className}`)}:checked + *`; + }) + }); +}); + +// :focus, :focus-within, :hover, :checked + module.exports = { mode: 'jit', purge: ['./index.html'], @@ -11,9 +23,55 @@ module.exports = { }, variants: { extend: { - backgroundColor: ['checked'], + backgroundColor: ['checked', 'important', 'nextOnChecked'], borderColor: ['checked'], } }, - plugins: [], + plugins: [ + plugin(function({ addVariant }) { + addVariant('important', ({ container }) => { + container.walkRules(rule => { + rule.selector = `.\\!${rule.selector.slice(1)}` + rule.walkDecls(decl => { + decl.important = true + }) + }) + }) + }) + , nextOnChecked +], } +// module.exports = { +// mode: 'jit', +// purge: ['./index.html'], +// darkMode: 'media', // or 'media' or 'class' +// theme: { +// extend: { +// screens: { +// 'custom': '400px' +// } +// }, +// }, +// variants: { +// extend: { +// backgroundColor: ['checked', 'checkedSibling'], +// borderColor: ['checked', 'checkedSibling'], +// } +// }, +// plugins: [ +// plugin(function ({addVariant, e}) { +// addVariant("checkedSibling", ({ container }) => { +// rule.selector = `:checked + .checkedSibling\\:${rule.selector.slice(1)}` +// }) +// }) +// ], +// } + + +// plugin(function ({ addVariant, e }) { +// addVariant("focused-sibling", ({ container }) => { +// container.walkRules((rule) => { +// rule.selector = `:focus + .focused-sibling\\:${rule.selector.slice(1)}`; +// }); +// }); +// }); \ No newline at end of file From acb7838773af8ab3e3a3aeca90403155b071dd5b Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Wed, 23 Jun 2021 13:38:34 +0100 Subject: [PATCH 5/8] Testing another branch-push --- custom.css | 0 index.html | 9 ++------- styles.css | 34 +++++++++++++++++++++++++++++++--- tailwind.config.js | 12 +++++++----- 4 files changed, 40 insertions(+), 15 deletions(-) create mode 100644 custom.css diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 6377887..ba63052 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,12 @@ + Document -

Testing - again.

-

Added para in brach (Checked out to it)

- - - - + \ No newline at end of file diff --git a/styles.css b/styles.css index 3eb7912..96d57c3 100644 --- a/styles.css +++ b/styles.css @@ -596,6 +596,29 @@ video { --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } +.inline-block { + display: inline-block; +} +.h-8 { + height: 2rem; +} +.h-6 { + height: 1.5rem; +} +.w-96 { + width: 24rem; +} +.w-6 { + width: 1.5rem; +} +.bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); +} +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); +} .text-\[4rem\] { font-size: 4rem; } @@ -606,9 +629,14 @@ video { --tw-text-opacity: 1; color: rgba(96, 165, 250, var(--tw-text-opacity)); } -.nextOnChecked\:bg-green-500:checked + * { - --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.labelChildOnChecked\:translate-x-2:checked + * * { + --tw-translate-x: 0.5rem; + transform: var(--tw-transform); } @media (min-width: 400px) { diff --git a/tailwind.config.js b/tailwind.config.js index 3a49433..37f2bc4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,9 @@ const plugin = require('tailwindcss/plugin') -const nextOnChecked = plugin(function ({ addVariant, e }) { - addVariant('nextOnChecked', ({ modifySelectors, separator }) => { +const labelChildOnChecked = plugin(function ({ addVariant, e }) { + addVariant('labelChildOnChecked', ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { - return `.${e(`nextOnChecked${separator}${className}`)}:checked + *`; + return `.${e(`labelChildOnChecked${separator}${className}`)}:checked + * *`; }) }); }); @@ -23,8 +23,10 @@ module.exports = { }, variants: { extend: { - backgroundColor: ['checked', 'important', 'nextOnChecked'], + backgroundColor: ['checked', 'important', 'labelChildOnChecked'], borderColor: ['checked'], + translate: ['labelChildOnChecked'], + transform: ['labelChildOnChecked'] } }, plugins: [ @@ -38,7 +40,7 @@ module.exports = { }) }) }) - , nextOnChecked + , labelChildOnChecked ], } // module.exports = { From c0c8fcec73fb82dace18e99f350b275e0875adfa Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Wed, 23 Jun 2021 13:51:08 +0100 Subject: [PATCH 6/8] Testing collab merge --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8703e7c..e69e9e2 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,13 @@ - + \ No newline at end of file From 719bd185e62d4c3d7da2bed923c66c931af8575a Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Wed, 23 Jun 2021 15:45:25 +0100 Subject: [PATCH 7/8] Added font-size reset for rem 62.5% --- index.html | 6 ----- styles.css | 76 ++++++++++++++++++++++++---------------------------- tailwind.css | 5 +++- 3 files changed, 39 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index e69e9e2..6c43020 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,7 @@ - \ No newline at end of file diff --git a/styles.css b/styles.css index d9a5f22..f8430a6 100644 --- a/styles.css +++ b/styles.css @@ -596,57 +596,51 @@ video { --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.inline-block { - display: inline-block; +:root { + font-size: 62.5%; } -.h-8 { - height: 2rem; +.h-1 { + height: 0.25rem; } -.h-6 { - height: 1.5rem; +.h-11 { + height: 2.75rem; } -.w-96 { - width: 24rem; +.h-16 { + height: 4rem; } -.w-6 { - width: 1.5rem; +.h-\[\] { + height: ; } -.bg-gray-500 { +.h-\[5\] { + height: 5; +} +.h-\[5re\] { + height: 5re; +} +.h-\[5rem\] { + height: 5rem; +} +.w-1 { + width: 0.25rem; +} +.w-16 { + width: 4rem; +} +.w-\[5rem\] { + width: 5rem; +} +.bg-red-50 { --tw-bg-opacity: 1; - background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); + background-color: rgba(254, 242, 242, var(--tw-bg-opacity)); } .bg-red-500 { --tw-bg-opacity: 1; background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); } -.text-\[4rem\] { - font-size: 4rem; -} -.font-bold { - font-weight: 700; -} -.text-blue-400 { - --tw-text-opacity: 1; - color: rgba(96, 165, 250, var(--tw-text-opacity)); -} -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgba(245, 158, 11, var(--tw-bg-opacity)); } -.labelChildOnChecked\:translate-x-2:checked + * * { - --tw-translate-x: 0.5rem; - transform: var(--tw-transform); +.text-\[5rem\] { + font-size: 5rem; } -@media (min-width: 400px) { - - .custom\:text-red-500 { - --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); - } - - .custom\:text-green-500 { - --tw-text-opacity: 1; - color: rgba(16, 185, 129, var(--tw-text-opacity)); - } -} \ No newline at end of file diff --git a/tailwind.css b/tailwind.css index bd6213e..a0cee2b 100644 --- a/tailwind.css +++ b/tailwind.css @@ -1,3 +1,6 @@ @tailwind base; +:root { + font-size: 62.5%; +} @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; From e79736e5a9ca44ff6bac0ed2a9c0193cde0ba119 Mon Sep 17 00:00:00 2001 From: grizhlieCodes Date: Wed, 23 Jun 2021 16:20:54 +0100 Subject: [PATCH 8/8] testing push into master for huss rebase --- index.html | 2 +- styles.css | 54 ------------------------------------------------------ 2 files changed, 1 insertion(+), 55 deletions(-) diff --git a/index.html b/index.html index 8703e7c..7565f46 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - +
\ No newline at end of file diff --git a/styles.css b/styles.css index d9a5f22..7c69601 100644 --- a/styles.css +++ b/styles.css @@ -595,58 +595,4 @@ video { --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} -.inline-block { - display: inline-block; -} -.h-8 { - height: 2rem; -} -.h-6 { - height: 1.5rem; -} -.w-96 { - width: 24rem; -} -.w-6 { - width: 1.5rem; -} -.bg-gray-500 { - --tw-bg-opacity: 1; - background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); -} -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); -} -.text-\[4rem\] { - font-size: 4rem; -} -.font-bold { - font-weight: 700; -} -.text-blue-400 { - --tw-text-opacity: 1; - color: rgba(96, 165, 250, var(--tw-text-opacity)); -} -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.labelChildOnChecked\:translate-x-2:checked + * * { - --tw-translate-x: 0.5rem; - transform: var(--tw-transform); -} -@media (min-width: 400px) { - - .custom\:text-red-500 { - --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); - } - - .custom\:text-green-500 { - --tw-text-opacity: 1; - color: rgba(16, 185, 129, var(--tw-text-opacity)); - } } \ No newline at end of file