diff --git a/client/scss/_asset-display.scss b/client/scss/_asset-display.scss index cc338237..b6d8dae0 100644 --- a/client/scss/_asset-display.scss +++ b/client/scss/_asset-display.scss @@ -5,19 +5,10 @@ } .asset-document { - $asset-info-width: 1000px; - max-width: $asset-info-width; width: 100%; padding: $thin-padding; height: fit-content; - - @media (max-width: $break-point-tablet) { - margin: $primary-padding $secondary-padding; - } - - @media (max-width: $break-point-mobile) { - margin: $primary-padding 0; - } + box-sizing: border-box; } .asset-display { height: fit-content; diff --git a/client/scss/_label.scss b/client/scss/_label.scss index 2e92784a..41957add 100644 --- a/client/scss/_label.scss +++ b/client/scss/_label.scss @@ -2,13 +2,17 @@ padding-top: $thin-padding; padding-bottom: $thin-padding; display: inline-block; - font-size: 12px; + font-weight: bold; + font-size: $text-medium; + width: 100%; + box-sizing: border-box; } .label-radio { padding-left: $thin-padding; padding-right: $thin-padding; cursor: pointer; + font-weight: bold; } @media (max-width: $break-point-tablet ) { diff --git a/client/scss/_markdown.scss b/client/scss/_markdown.scss index 05b10c3c..ed972f03 100644 --- a/client/scss/_markdown.scss +++ b/client/scss/_markdown.scss @@ -8,14 +8,14 @@ h6 { font-size: inherit; font-weight: 600; - margin-bottom: var(--spacing-vertical-medium); - padding-top: var(--spacing-vertical-medium); + margin-bottom: $tertiary-padding; + padding-top: $tertiary-padding; } // Paragraphs p { font-size: 1.15rem; - margin-bottom: var(--spacing-vertical-medium); + margin-bottom: $tertiary-padding; white-space: pre-line; svg { @@ -28,15 +28,24 @@ } } + blockquote { + border-radius: 8px; + background: $blockquote-background; + padding: $tertiary-padding; + min-width: 60%; + } + // Strikethrough text del { } // Tables table { + width: 100%; margin-bottom: 1.2rem; - padding: var(--spacing-vertical-medium); background-color: $base-color; + border-spacing: 0; + border: .5px solid $chrome-color; tr { td, @@ -45,15 +54,32 @@ th:first-of-type, td:last-of-type, th:last-of-type { - padding: var(--spacing-vertical-medium); + padding: $thin-padding $tertiary-padding; + text-overflow: ellipsis; } + td:last-of-type { + text-align: right; + } + + th { + background: $chrome-color; + } + + } + tr:nth-child(even){ + background: $chrome-color; } } // Image img { - margin-bottom: var(--spacing-vertical-medium); - padding-top: var(--spacing-vertical-medium); + margin-bottom: $tertiary-padding; + margin-top: $tertiary-padding; + padding: $secondary-padding; + object-fit: scale-down; + max-width: 100%; + border: $subtle-border; + box-sizing: border-box; } // Horizontal Rule @@ -77,8 +103,8 @@ } code { - margin-bottom: var(--spacing-vertical-medium); - padding: var(--spacing-vertical-medium); + margin-bottom: $tertiary-padding; + padding: $tertiary-padding; background-color: $subtle-border-color; color: $text-color; @@ -94,7 +120,7 @@ // Lists ul, ol { - margin-bottom: var(--spacing-vertical-medium); + margin-bottom: $thin-padding; > li { list-style-position: outside; @@ -106,7 +132,7 @@ } li { - margin-left: var(--spacing-vertical-large); + margin-left: $primary-padding; p { display: inline-block; diff --git a/client/scss/_row.scss b/client/scss/_row.scss index 4fbdf10c..e9ae9ded 100644 --- a/client/scss/_row.scss +++ b/client/scss/_row.scss @@ -4,21 +4,21 @@ .row-labeled { display: flex; - flex-direction: row; + flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: $tertiary-padding; } .row-labeled-label { - width: 30%; + width: 100%; display: flex; align-items: center; flex: 1; } .row-labeled-content { align-self: center; - width: 70%; + width: 100%; } @media (max-width: $break-point-tablet ) { diff --git a/client/scss/_variables.scss b/client/scss/_variables.scss index 603e01b1..0722103d 100644 --- a/client/scss/_variables.scss +++ b/client/scss/_variables.scss @@ -2,6 +2,7 @@ $base-color: white; //default white $card-color: white; //default white $chrome-color: lightgray; //default white (navbar) +$blockquote-background: #EEEEFF; $background-color: $base-color; //text colors @@ -11,6 +12,7 @@ $text-color: #333; $success-color: green; $failure-color: red; $grey: #9095A5; +$blockquote-text: $text-color; //borders and highlights diff --git a/client/src/components/FileViewer/index.jsx b/client/src/components/FileViewer/index.jsx index 56f05453..8cd0172e 100644 --- a/client/src/components/FileViewer/index.jsx +++ b/client/src/components/FileViewer/index.jsx @@ -38,7 +38,7 @@ class FileViewer extends React.Component {