src/app/page/detail/word-detail.component.scss
@use '../../style/colour' as colour;
@use '../../style/font' as font;
@use '../../style/mixin' as mxn;
article {
span {
color: #ffffff;
}
#main-detail {
padding: 1rem;
// heading + actions
#top {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
// heading + heart icon
> div {
display: flex;
align-items: flex-start;
h2 {
font-size: 1.75rem;
}
}
#actions {
display: flex;
align-items: center;
justify-content: flex-end;
> img {
width: 35%;
@include mxn.opacity-hover;
}
}
}
// pronunciation
> span {
font-size: .8rem;
color: #907f7f;
}
#definition {
padding-top: 10px;
}
#part-of-speech {
color: colour.$secondary;
padding-bottom: 4px;
}
.pair {
display: flex;
padding-top: 10px;
width: 100%;
> span {
font-size: .9rem;
}
> p {
overflow: hidden;
word-wrap: break-word;
max-width: 80%;
}
}
#tags,
#synonyms,
#note {
padding-top: 10px;
> span {
font-size: .9rem;
}
}
#note {
padding-bottom: 2rem;
padding-top: 1rem;
p {
white-space: pre-wrap;
}
}
}
#meta-data {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: .5rem 1rem 3rem 1rem;
.column {
.pair {
display: flex;
margin-top: 1rem;
span {
font-size: .9rem;
}
p {
font-family: 'roboto-light', font.$default-font;
}
&.creation-date {
cursor: pointer;
@include mxn.transition;
> span {
cursor: pointer;
}
&:hover {
opacity: .8;
}
}
}
}
}
}
@media screen and (min-width: 360px) {
article#word > #main-detail > #top {
justify-content: space-between;
}
}
@media screen and (min-width: 1120px) {
#word {
margin-left: 25%;
margin-right: 25%;
padding: 1.5rem 1.5rem 3rem;
#main-detail {
#top {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
}
#definition, #part-of-speech {
font-size: 1rem;
}
.pair, #tags {
padding-top: 24px;
}
}
.meta {
display: flex;
.column {
width: 48%;
}
}
}
}