simplify grid-template-areas

This commit is contained in:
Nolan Lawson 2018-02-09 20:07:48 -08:00
parent 4f157596eb
commit 8db7d376d4
9 changed files with 16 additions and 16 deletions

View file

@ -6,7 +6,7 @@
</div> </div>
<style> <style>
.status-media { .status-media {
grid-area: status-media; grid-area: media;
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View file

@ -25,13 +25,13 @@
padding: 10px 20px; padding: 10px 20px;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
".............. status-header" "....... header"
"status-sidebar status-author" "sidebar author"
"status-sidebar status-spoiler" "sidebar spoiler"
"status-sidebar status-spoiler-button" "sidebar spoiler-button"
"status-sidebar status-content" "sidebar content"
"status-media status-media" "media media"
".............. status-toolbar"; "....... toolbar";
grid-template-columns: 58px 1fr; grid-template-columns: 58px 1fr;
} }

View file

@ -17,7 +17,7 @@
</div> </div>
<style> <style>
.status-author { .status-author {
grid-area: status-author; grid-area: author;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 10px 0 5px; margin: 0 10px 0 5px;

View file

@ -7,7 +7,7 @@
<style> <style>
.status-content { .status-content {
margin: 10px 10px 10px 5px; margin: 10px 10px 10px 5px;
grid-area: status-content; grid-area: content;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
white-space: pre-wrap; white-space: pre-wrap;

View file

@ -41,7 +41,7 @@
} }
.status-header { .status-header {
grid-area: status-header; grid-area: header;
margin: 5px 10px 5px 5px; margin: 5px 10px 5px 5px;
display: flex; display: flex;
align-items: center; align-items: center;

View file

@ -35,7 +35,7 @@
{{/if}} {{/if}}
<style> <style>
.status-sensitive-media-container { .status-sensitive-media-container {
grid-area: status-media; grid-area: media;
margin: 10px 0; margin: 10px 0;
position: relative; position: relative;
border-radius: 0; border-radius: 0;

View file

@ -3,7 +3,7 @@
size="small" /> size="small" />
<style> <style>
:global(.status-sidebar) { :global(.status-sidebar) {
grid-area: status-sidebar; grid-area: sidebar;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
</style> </style>

View file

@ -8,7 +8,7 @@
</div> </div>
<style> <style>
.status-spoiler { .status-spoiler {
grid-area: status-spoiler; grid-area: spoiler;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
white-space: pre-wrap; white-space: pre-wrap;
@ -17,7 +17,7 @@
} }
.status-spoiler-button { .status-spoiler-button {
grid-area: status-spoiler-button; grid-area: spoiler-button;
margin: 5px; margin: 5px;
} }

View file

@ -22,7 +22,7 @@
</div> </div>
<style> <style>
.status-toolbar { .status-toolbar {
grid-area: status-toolbar; grid-area: toolbar;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }