feat(japanesewithanime.com): init #851

BPplays · 2024-04-29T11:21:48Z

🎉 Theme for japanesewithanime.com 🎉

💬 Additional Comments 💬

i can't seem to get the section for making a comment themed right
sections like 'Poses & Gestures' at the bottom of japanesewithanime.com/2021/03/seiza.html are not themed when hoving over items

🗒 Checklist 🗒

I have read and followed Catppuccin's submission guidelines.
I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
- I have ensured that the new directory is in lower-kebab-case.
- I have followed the template and kept the preprocessor as LESS.
I have made sure to update the
userstyles.yml
file with information about the new userstyle.
I have included the following files:
- catppuccin.user.css - all the CSS for the userstyle, based on the
  template.
- preview.webp - composite image of all four individual flavor screenshots stitched together,
  generated via Catwalk.

scripts/userstyles.yml

uncenter · 2024-04-29T21:59:01Z

styles/japanesewithanime.com/catppuccin.user.css

-		border: 4px solid @surface0 !important;
+		border-color: @surface0 !important;
+		border-width: 4px !important;
+    border-style: solid !important;


Why are we setting anything other than border-color?

@uncenter i've removed some of the size changes i think are unnecessary but here are some reasons for the remaining ones:

for input.gsc-search-button and input.gsc-input i feel like the original border style doesn't work for the theme and it looks odd without the slight rounding to replicate the rounding of the border and the size change to make the search button the same size as the search bar

for #archive-year-select and #archive-month-select i feel like a border looks bad and slight rounding replicates the border look in the original theme

for .megaNav__Particles > a, .megaNav__Symbols > a i also feel like a border looks bad here and it looks weird without slight rounding

for .post-donation-cta same as above

styles/japanesewithanime.com/catppuccin.user.css

isabelroses · 2024-04-30T07:13:47Z

Having taken a look I agree that the website does look wierd when you have the catppuccin colors with those borders, but this is still an opinionated change and i'm unsure wether it should be allowed.

BPplays · 2024-05-25T08:19:45Z

@isabelroses i've added a commit with the option to change some of the formatting changes.

Prefer solid colors with no borders controls all the stuff exept the search bar i mentioned before and is off by default
Original search bar changes the search bar back to the original and is off by default

some things like the search bar button needed a lot of formatting changes to look like the original and i'm not sure why

uncenter · 2024-05-25T16:14:59Z

Can you update this branch with main and resolve the conflicts?

…and Original search bar

BPplays · 2024-05-26T01:37:31Z

@uncenter it's updated now

uncenter

Also please remove commented out styles and format the document.

uncenter · 2024-05-26T02:50:39Z

styles/japanesewithanime.com/catppuccin.user.css

+@preprocessor less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]


See lint annotation.

uncenter · 2024-05-26T02:51:03Z

styles/japanesewithanime.com/catppuccin.user.css

+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+@var select linkColor "Link color" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]


We should use either accent color or blue and lavender as per the style guide.

uncenter · 2024-05-26T02:51:29Z

styles/japanesewithanime.com/catppuccin.user.css

+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+@var select linkColor "Link color" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+@var checkbox solidColors "Prefer solid colors with no borders" 0


Pick one ideally, maybe the one that most matches the original site's appearance.

uncenter · 2024-05-26T02:52:21Z

styles/japanesewithanime.com/catppuccin.user.css

+  & when (@ogBar = 1) {
+    input.gsc-search-button{
+      border-color: @overlay1 !important;
+      border-radius: 2px !important;
+      border-width: 1px !important;
+      padding: 1.8px 6.6px !important;
+      border-style: solid !important;
+      background-color: @surface1 !important;
+    }
+    input.gsc-input{
+      border-color: @surface1 !important;
+    }
+  }
+  & when (@ogBar = 0) {
+    input.gsc-search-button{
+      background-color: @surface1 !important;
+      border-color: @surface1 !important;
+      border-width: 1px !important;
+      border-style: solid !important;
+      border-radius: 1px !important;
+    }
+    input.gsc-input{
+      border-color: @surface0 !important;
+      border-radius: 1px !important;
+    }
+  }


Just go with one search bar styling I think? Again, whichever better fits the website's original appearance.

uncenter reviewed Apr 29, 2024

View reviewed changes

scripts/userstyles.yml Outdated Show resolved Hide resolved

uncenter reviewed Apr 29, 2024

View reviewed changes

styles/japanesewithanime.com/catppuccin.user.css Outdated Show resolved Hide resolved

uncenter added the waiting on author label May 4, 2024

isabelroses approved these changes May 25, 2024

View reviewed changes

isabelroses requested a review from uncenter May 25, 2024 08:40

uncenter self-assigned this May 25, 2024

BPplays added 18 commits May 25, 2024 18:18

added japanesewithanime.com

9da3595

added stuff to japanesewithanime.com

0485039

fixed .readership-survey-notice

7334bdb

fixed .homepage-description

47c07fb

misc fixes

e51e934

misc fixes

018b55e

misc fixes

5425380

updated userstyles.yml

5ed57ba

added preview.webp

7a5c9da

fixed erroneous icon: youtube

93a571e

fixed linting issues

4ce2724

removed body *::-webkit-scrollbar-button and fixed #megaNav__contents

5c1debe

removed unnecessary formatting changes

e08450d

changed theme to add options for Prefer solid colors with no borders …

93020bd

…and Original search bar

added @warn-color

897cb3f

added @warn-color to more places

d8114fc

code formatting changes

ba7c2ba

code formatting changes

0484b87

BPplays force-pushed the feat/japanesewithanime.com branch from 90d8077 to 0484b87 Compare May 26, 2024 01:21

fixed linting errors

43eaac5

uncenter requested changes May 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(japanesewithanime.com): init #851

feat(japanesewithanime.com): init #851

BPplays commented Apr 29, 2024 •

edited

uncenter Apr 29, 2024

BPplays Apr 29, 2024 •

edited

isabelroses commented Apr 30, 2024

BPplays commented May 25, 2024

uncenter commented May 25, 2024

BPplays commented May 26, 2024

uncenter left a comment

uncenter May 26, 2024

uncenter May 26, 2024

uncenter May 26, 2024

uncenter May 26, 2024

feat(japanesewithanime.com): init #851

Are you sure you want to change the base?

feat(japanesewithanime.com): init #851

Conversation

BPplays commented Apr 29, 2024 • edited

🎉 Theme for japanesewithanime.com 🎉

💬 Additional Comments 💬

🗒 Checklist 🗒

uncenter Apr 29, 2024

Choose a reason for hiding this comment

BPplays Apr 29, 2024 • edited

Choose a reason for hiding this comment

isabelroses commented Apr 30, 2024

BPplays commented May 25, 2024

uncenter commented May 25, 2024

BPplays commented May 26, 2024

uncenter left a comment

Choose a reason for hiding this comment

uncenter May 26, 2024

Choose a reason for hiding this comment

uncenter May 26, 2024

Choose a reason for hiding this comment

uncenter May 26, 2024

Choose a reason for hiding this comment

uncenter May 26, 2024

Choose a reason for hiding this comment

BPplays commented Apr 29, 2024 •

edited

BPplays Apr 29, 2024 •

edited