Visual Overhaul using BEM naming convention #39
Conversation
- info_v3.js reword "Synopses" to "Synopsis" - index_v3.js change width 640 to 642
new classes :
+ "main-filesource"
+ "main-footer"
+ "main-footer__warning"
+ "main-footer__extension"
|
Why change width from 640px to 642px? |
|
I thought there will be some conflict on display "aesthetic". Well I don't see any problem, it can stay at 640 I guess.
|
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Add more classes.
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Add more classes.
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Reconstruct html structure Add more classes.
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Reconstruct html structure Add more classes.
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Reconstruct html structure Add more classes.
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Reconstruct html structure Add more classes.
Visual Overhaul for About, Changelog, FAQ's, Terms Will do RWD next. Reconstruct html structure Add more classes.
|
Visual Overhaul Home: About: Changelog: FAQs: Terms: |
ghost
changed the title
- New css variables for fonts, box-shadow, default-color, transition - Changed theme color - #preview width removed (default to 640) - box-shadow rewrite - Clean up css
- New theme color (#60738b) - #preview width from 642 to 640 - Fix classes - Modify notes - Changelog: The latest post will have a colored background on date holder - Additional: Navigation bar responsive on the way, you can already see the effect by adjusting the width using Responsive Design Mode or zooming in. Still working on this one.
|
Some screenshot on new color. Will be working next on dark mode switcher.
|
+ navigation change (new mobile friendly) + index; octocat style moved to style.css
+ navigation change (new mobile friendly) + octocat style has been moved here + some style fixes
|
New mobile navigation v1 |
This new stylesheet is using BEM naming convention. - Lots of style changes. - With different theme color for Home, About, Changelog, FAQ, Terms
Convert all class to BEM as much as possible for organized layout
|
Update: Now using BEM naming convention The new design: Per page: |
ghost
changed the title
|
Have you tried the search results layout? with anilist panel and thumbnail images previews |
Preferably I'd like to use the same color theme for all pages, like youtube is red in all pages, facebook is blue for all its pages. |
|
It seems your css\app.css uses CSS variables which Internet Explorer 11 does not support |
Working on fallback version now. Edit: It should work fine now. |
IE does not support variables. Fallback values (Browser that doesn't support css variables): - Primary color: #3f51b5 - Primary light color: #7986cb - Primary dark color: #303f9f - Border radius: 2px - Transition: 135ms cubic-bezier(.4,0,.2,1) - Font: "Roboto", Helvetica, Arial, "Meiryo", "Microsoft JhengHei", "Microsoft YaHei", sans-serif - Shadow: 0 1px 1px 0 rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.16) - Shadow hover: 0 1px 3px 1px rgba(60,64,67,.2),0 2px 8px 4px rgba(60,64,67,.1)
I can but it will take some time since all elements are in info_v3.js PS: No thumbnail I just copy the source from trace.moe (Its the same after all) |
It seems to me the top nav bar is too thick, taking too many vertical space. And the recent updates notification bar... seems occupying too much space too. But I'm not sure if there're better place to put it. Do you have better ideas? |
working on it |
|
Well I just adjust the thickness after all. |
Add some important updates and notes - Speeding up search on whatanime.ga! - Moving to new domain: trace.moe - Recent updates to trace.moe Source: Patreon
+ Separate fallback style to app_fallback.css - For easy editing and adjustments + Clean up classes - Adjust classes - Removed unnecessary classes Note: Will be working next on index (main, info, results, etc...).
+ 1 theme color for all pages - Indigo (#3f51b5) + Clean up code - For better editing and adjustments Note: Will be working next on index (main, info, results, etc...).
|
Style update for search, results list, info. Search: |
|
Update stylesheet to LESS (Includes non minified and minified version of CSS).
|
|
Ready to merge anytime. If there's any problem or bug you can contact me anytime. Thank you. Closing pull request. |
ghost
closed this
Visual Overhaul using BEM naming convention.
Why BEM (Block, Element, Modifier)? The name of a BEM entity is unique. The same BEM entity always has the same name in all technologies (CSS, JavaScript, and HTML). The primary purpose of the naming convention is to give names meaning so that they are as informative as possible for the developer. Learn more
Redesign some components.index.php new classes"main-filesource""main-footer""main-footer__warning""main-footer__extension"info_v3.js reword "Synopses" to "Synopsis"index_v3.js change width 640 to 642