Conversation
| "styles": [ | ||
| "styles.styl" | ||
| "../node_modules/bootstrap/dist/css/bootstrap.min.css", | ||
| "../node_modules/font-awesome/css/font-awesome.min.css", |
There was a problem hiding this comment.
I think is fine to use Font Awesome, but the use of Bootstrap should be reviewed. Perhaps it would be better and cleaner not to use a CSS framework.
| color #CDDED2 | ||
| display flex | ||
| flex-direction column | ||
| header.masthead { |
There was a problem hiding this comment.
One of the perks of using a CSS preprocessor is nested selectors, they should, and must be used. I see complex selectors, that could be nested. I see you're keeping a high specificity, that should be avoided.
| font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } | ||
| #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover { | ||
| color: #f05f40; } | ||
| #mainNav .navbar-nav > li.nav-item > a.nav-link, |
There was a problem hiding this comment.
Too specific selector. Avoid using ids for style selection.
There was a problem hiding this comment.
Mmm sí, usar ID en css no es recomendable https://css-tricks.com/how-css-selectors-work/#article-header-id-0
| this.authenticationService.user$.subscribe(user => { | ||
| this.user = user | ||
| }); | ||
| window.addEventListener('scroll', this.scroll, true); |
There was a problem hiding this comment.
Perhaps this could go in a directive, detached from a specific component.
src/styles.styl
Outdated
| &.accent | ||
| color #fafafa | ||
| background-color #A852FE No newline at end of file | ||
| font-family 'Merriweather', 'Helvetica Neue', Arial, sans-serif |
There was a problem hiding this comment.
Font names should go in a variable
src/styles.styl
Outdated
| -moz-transition all 0.2s | ||
| transition all 0.2s | ||
| &:hover | ||
| color #f05f40 |
There was a problem hiding this comment.
Colors should be variables too
src/styles.styl
Outdated
| border-color: #f90000; } | ||
| .btn-primary:hover, .btn-primary:focus, .btn-primary:active { | ||
| color: #fff; | ||
| background-color: #b70000 !important; } |
There was a problem hiding this comment.
Is really necessary to use !important here? I understand that overwriting a property in a framework could bring you here, but perhaps it's due a specificity problem. Worth checking it.
3 participants
#10 build: actualiza versión a 5.0.3, nuevo template con bootstrap 4.