New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Book detail: title and shadow #5
Conversation
maquetado/scss/styles.scss
Outdated
position: relative; | ||
margin-bottom: 40px; | ||
&::after { | ||
content:""; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would write content: '';
maquetado/scss/colors.scss
Outdated
@@ -1 +1,3 @@ | |||
$gray: #828282; | |||
$earls-green: #BED23C; | |||
$shadow-background: rgba(0,0,0,0.5); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this is black with some opacity I would change this name to $black-05
maquetado/scss/styles.scss
Outdated
padding: 10px; | ||
padding: 20px; | ||
background-color: #FFF; | ||
box-shadow: 4px 4px 10px 0 $shadow-background; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same
maquetado/scss/styles.scss
Outdated
@@ -3,7 +3,10 @@ | |||
} | |||
|
|||
.book-container { | |||
padding: 10px; | |||
padding: 20px; | |||
background-color: #FFF; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use $white
instead
maquetado/scss/styles.scss
Outdated
padding: 20px; | ||
background-color: #FFF; | ||
box-shadow: 4px 4px 10px 0 $shadow-background; | ||
width: 1000px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remember to read our CSS style guide. There it says that elements with a width higher than 250px have to use following structure for responsive purposes:
width: 1000px; | |
max-width: 1000px; | |
width: 100%; |
maquetado/scss/styles.scss
Outdated
margin-right: 40px; | ||
width: 261px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remember the style guide here, this is greater than 250px:
width: 261px; | |
width: 100%; | |
max-width: 261px; |
maquetado/scss/styles.scss
Outdated
@@ -11,9 +11,11 @@ | |||
} | |||
|
|||
.book-cover { | |||
height: 368px; | |||
height: 100%; | |||
max-width: 380px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not necessary when it comes to height. You can just leave height: 380px
.
Summary
Added title border and shadow
Screenshots
Trello Card
https://trello.com/c/qCqZRvZE/33-detalle-de-libro-iii-estructura