app/assets/stylesheets/apologies.scss
@import 'theme';
.show-share-partial { text-align: center; }
$apology-width: 650px;
.apology-wrapper {
width: $apology-width;
margin: 0 auto;
.create-button-wrapper {
float: right;
margin-bottom: 10px;
}
.index-image {
width: 40px;
}
}
.apology-container {
width: $apology-width;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
font-family: $apology-font;
border: 1px solid #A1A1A1;
background-color: #FFF;
height: 400px;
}
.right-column {
width: $apology-width / 2;
padding: 30px 30px 5px 10px;
overflow-wrap: break-word;
.note {
font-family: $apology-font;
font-size: 1.3em;
line-height: 140%;
}
}
/* MEDIA QUERIES */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
.apology-wrapper {
width: 100%;
margin: 0 auto;
}
article {
.note {
padding: 20px 20px 5px 20px;
p {
font-family: $apology-font;
font-size: 130%;
line-height: 150%;
}
}
img {
max-height: 650px;
width: 100%;
margin-bottom: 30px;
}
}
}/* 480px */