From 59e1fed7be6884e0b050f8715678a129c67bb7a6 Mon Sep 17 00:00:00 2001 From: TomasBankauskas Date: Sun, 17 Oct 2021 16:26:22 +0300 Subject: [PATCH 1/3] adjusted styles --- public/models/FeaturedPeopleSection.yaml | 9 +++ public/models/FeaturedPostsSection.yaml | 9 +++ public/models/TestimonialsSection.yaml | 7 +++ styles/default/style.css | 68 +++++++++++------------ styles/default/tailwind.default.config.js | 6 +- styles/retro/style.css | 68 +++++++++++------------ styles/retro/tailwind.retro.config.js | 6 +- 7 files changed, 99 insertions(+), 74 deletions(-) diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml index 3ff89203..d6e392b1 100644 --- a/public/models/FeaturedPeopleSection.yaml +++ b/public/models/FeaturedPeopleSection.yaml @@ -50,3 +50,12 @@ fields: - content/data/team/desmond-eagle.json - content/data/team/dianne-ameter.json - content/data/team/hilary-ouse.json + - type: style + name: styles + styles: + title: + textAlign: ['left', 'center', 'right'] + subtitle: + textAlign: ['left', 'center', 'right'] + actions: + textAlign: ['left', 'center', 'right'] diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml index e6964eda..cccf8e7a 100644 --- a/public/models/FeaturedPostsSection.yaml +++ b/public/models/FeaturedPostsSection.yaml @@ -53,3 +53,12 @@ fields: - content/pages/blog/post-three.md - content/pages/blog/post-two.md - content/pages/blog/post-one.md + - type: style + name: styles + styles: + title: + textAlign: ['left', 'center', 'right'] + subtitle: + textAlign: ['left', 'center', 'right'] + actions: + textAlign: ['left', 'center', 'right'] diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml index a0455dda..f42fc0e3 100644 --- a/public/models/TestimonialsSection.yaml +++ b/public/models/TestimonialsSection.yaml @@ -61,3 +61,10 @@ fields: type: ImageBlock url: /images/dianne-ameter.jpg altText: Product Marketing Manager + - type: style + name: styles + styles: + title: + textAlign: ['left', 'center', 'right'] + subtitle: + textAlign: ['left', 'center', 'right'] diff --git a/styles/default/style.css b/styles/default/style.css index 89bab558..40afd678 100644 --- a/styles/default/style.css +++ b/styles/default/style.css @@ -13,7 +13,7 @@ h4, h5, h6 { - @apply font-heading font-bold text-headline; + @apply font-headlines font-bold text-headlines; } } @@ -143,12 +143,12 @@ /* Buttons */ .sb-component-button { - @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in; + @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in hover:opacity-80; } /* Links */ .sb-component-link { - @apply inline-flex items-center justify-center no-underline hover:underline; + @apply inline-flex items-center justify-center no-underline transition duration-200 ease-in hover:opacity-80; } /* Cards */ @@ -171,7 +171,7 @@ .sb-input, .sb-select, .sb-textarea { - @apply bg-transparent border font-light p-2 text-lg w-full focus:outline-none md:text-xl; + @apply bg-transparent border font-light p-2 text-base w-full focus:outline-none; } .sb-checkbox { @apply align-middle appearance-none bg-origin-border border border-current cursor-pointer flex-shrink-0 inline-block h-5 select-none w-5 checked:bg-center checked:bg-no-repeat checked:bg-current; @@ -196,18 +196,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; @@ -229,13 +229,13 @@ .sb-input, .sb-select, .sb-textarea { - @apply border-primary placeholder-primary; + @apply border-primary placeholder-primary placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-primary; @@ -263,10 +263,10 @@ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-white text-white hover:border-opacity-70 hover:text-white; + @apply border-white text-white; } .sb-divider { @apply before:bg-white; @@ -294,10 +294,10 @@ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-white text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply border-white text-white; } .sb-divider { @apply before:bg-primary; @@ -314,18 +314,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-70; } .sb-component-button-primary { - @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-neutral border-neutral text-white; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-60 hover:text-neutral; + @apply border-neutral text-neutral; } .sb-divider { @apply before:bg-neutral; @@ -342,18 +342,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; @@ -375,13 +375,13 @@ .sb-input, .sb-select, .sb-textarea { - @apply border-primary placeholder-primary; + @apply border-primary placeholder-primary placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-primary; @@ -398,18 +398,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-neutral border-neutral text-white; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; @@ -426,18 +426,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-neutral border-neutral text-white; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; diff --git a/styles/default/tailwind.default.config.js b/styles/default/tailwind.default.config.js index 5e67c32c..3bbbbb16 100644 --- a/styles/default/tailwind.default.config.js +++ b/styles/default/tailwind.default.config.js @@ -13,7 +13,7 @@ module.exports = { extend: { colors: { body: '#414c58', - headline: '#303941', + headlines: '#303941', primary: '#28aaff', secondary: '#dfe3e7', neutral: '#282f36', @@ -24,8 +24,8 @@ module.exports = { warning: '#df1c2e' }, fontFamily: { - heading: ['Myriad Pro', 'Myriad', 'Helvetica Neue', 'Helvetica', 'sans-serif'], - body: ['Myriad Pro', 'Myriad', 'Helvetica Neue', 'Helvetica', 'sans-serif'], + body: defaultTheme.fontFamily.sans, + headlines: defaultTheme.fontFamily.sans }, spacing: { '1/1': '100%', diff --git a/styles/retro/style.css b/styles/retro/style.css index 89bab558..9a12f0bd 100644 --- a/styles/retro/style.css +++ b/styles/retro/style.css @@ -13,7 +13,7 @@ h4, h5, h6 { - @apply font-heading font-bold text-headline; + @apply font-headlines font-bold text-headlines; } } @@ -143,12 +143,12 @@ /* Buttons */ .sb-component-button { - @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in; + @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in hover:opacity-80; } /* Links */ .sb-component-link { - @apply inline-flex items-center justify-center no-underline hover:underline; + @apply inline-flex items-center justify-center no-underline transition duration-200 ease-in hover:opacity-80; } /* Cards */ @@ -171,7 +171,7 @@ .sb-input, .sb-select, .sb-textarea { - @apply bg-transparent border font-light p-2 text-lg w-full focus:outline-none md:text-xl; + @apply bg-transparent border font-light p-2 w-full focus:outline-none; } .sb-checkbox { @apply align-middle appearance-none bg-origin-border border border-current cursor-pointer flex-shrink-0 inline-block h-5 select-none w-5 checked:bg-center checked:bg-no-repeat checked:bg-current; @@ -196,18 +196,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; @@ -229,13 +229,13 @@ .sb-input, .sb-select, .sb-textarea { - @apply border-primary placeholder-primary; + @apply border-primary placeholder-primary placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-primary; @@ -263,10 +263,10 @@ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-white text-white hover:border-opacity-70 hover:text-white; + @apply border-white text-white; } .sb-divider { @apply before:bg-white; @@ -294,10 +294,10 @@ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-white text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply border-white text-white; } .sb-divider { @apply before:bg-primary; @@ -314,18 +314,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-70; } .sb-component-button-primary { - @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-neutral border-neutral text-white; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-60 hover:text-neutral; + @apply border-neutral text-neutral; } .sb-divider { @apply before:bg-neutral; @@ -342,18 +342,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; @@ -375,13 +375,13 @@ .sb-input, .sb-select, .sb-textarea { - @apply border-primary placeholder-primary; + @apply border-primary placeholder-primary placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-primary border-primary text-neutral hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-primary border-primary text-body; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-primary; @@ -398,18 +398,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-neutral border-neutral text-white; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; @@ -426,18 +426,18 @@ h4, h5, h6 { - @apply text-headline; + @apply text-headlines; } .sb-input, .sb-select, .sb-textarea { - @apply border-neutral placeholder-neutral; + @apply border-neutral placeholder-body placeholder-opacity-50; } .sb-component-button-primary { - @apply bg-neutral border-neutral text-white hover:bg-opacity-70 hover:border-opacity-70; + @apply bg-neutral border-neutral text-white; } .sb-component-button-secondary { - @apply border-neutral text-neutral hover:border-opacity-70 hover:text-neutral; + @apply border-neutral text-body; } .sb-divider { @apply before:bg-neutral; diff --git a/styles/retro/tailwind.retro.config.js b/styles/retro/tailwind.retro.config.js index 46651132..8ad67d5c 100644 --- a/styles/retro/tailwind.retro.config.js +++ b/styles/retro/tailwind.retro.config.js @@ -12,7 +12,7 @@ module.exports = { extend: { colors: { body: '#414c58', - headline: '#303941', + headlines: '#303941', primary: '#9bc1bc', secondary: '#f4f1bb', neutral: '#332e40', @@ -23,8 +23,8 @@ module.exports = { warning: '#df1c2e' }, fontFamily: { - heading: ['Myriad Pro', 'Myriad', 'Helvetica Neue', 'Helvetica', 'sans-serif'], - body: ['Constantia', 'Lucida Bright', 'Lucidabright', 'Lucida', 'Liberation Serif', 'Georgia', 'serif'], + body: defaultTheme.fontFamily.serif, + headlines: defaultTheme.fontFamily.sans }, spacing: { '1/1': '100%', From a23adec4334d74ec29509162040b7c7a827b888d Mon Sep 17 00:00:00 2001 From: tomasbankauskas Date: Mon, 18 Oct 2021 14:53:17 +0300 Subject: [PATCH 2/3] removed changes in public/models --- public/models/FeaturedPeopleSection.yaml | 11 +---------- public/models/FeaturedPostsSection.yaml | 9 --------- public/models/TestimonialsSection.yaml | 7 ------- 3 files changed, 1 insertion(+), 26 deletions(-) diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml index d6e392b1..3de186d9 100644 --- a/public/models/FeaturedPeopleSection.yaml +++ b/public/models/FeaturedPeopleSection.yaml @@ -49,13 +49,4 @@ fields: default: - content/data/team/desmond-eagle.json - content/data/team/dianne-ameter.json - - content/data/team/hilary-ouse.json - - type: style - name: styles - styles: - title: - textAlign: ['left', 'center', 'right'] - subtitle: - textAlign: ['left', 'center', 'right'] - actions: - textAlign: ['left', 'center', 'right'] + - content/data/team/hilary-ouse.json \ No newline at end of file diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml index cccf8e7a..e6964eda 100644 --- a/public/models/FeaturedPostsSection.yaml +++ b/public/models/FeaturedPostsSection.yaml @@ -53,12 +53,3 @@ fields: - content/pages/blog/post-three.md - content/pages/blog/post-two.md - content/pages/blog/post-one.md - - type: style - name: styles - styles: - title: - textAlign: ['left', 'center', 'right'] - subtitle: - textAlign: ['left', 'center', 'right'] - actions: - textAlign: ['left', 'center', 'right'] diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml index f42fc0e3..a0455dda 100644 --- a/public/models/TestimonialsSection.yaml +++ b/public/models/TestimonialsSection.yaml @@ -61,10 +61,3 @@ fields: type: ImageBlock url: /images/dianne-ameter.jpg altText: Product Marketing Manager - - type: style - name: styles - styles: - title: - textAlign: ['left', 'center', 'right'] - subtitle: - textAlign: ['left', 'center', 'right'] From 24d6821b1577ac1cf8fd72846109332937b2b83c Mon Sep 17 00:00:00 2001 From: Tomas Bankauskas Date: Mon, 18 Oct 2021 14:58:37 +0300 Subject: [PATCH 3/3] Update FeaturedPeopleSection.yaml --- public/models/FeaturedPeopleSection.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml index 3de186d9..3ff89203 100644 --- a/public/models/FeaturedPeopleSection.yaml +++ b/public/models/FeaturedPeopleSection.yaml @@ -49,4 +49,4 @@ fields: default: - content/data/team/desmond-eagle.json - content/data/team/dianne-ameter.json - - content/data/team/hilary-ouse.json \ No newline at end of file + - content/data/team/hilary-ouse.json