diff --git a/app/scss/main.scss b/app/scss/main.scss index 4a14c33..dc99b1c 100644 --- a/app/scss/main.scss +++ b/app/scss/main.scss @@ -1,11 +1,9 @@ -$font-stack: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, - Ubuntu, roboto, noto, arial, sans-serif; - +$font-stack: Helvetica, sans-serif; $background: #ddd; $light-background: #e6e6e6; $text-color: #111; $primary-color: #1d781d; -$secondary-color: #781d78; +$secondary-color: #781D78; $form-background-color: #ccc; $form-text-color: #333; $muted-color: #555; // solarized comment text @@ -15,46 +13,6 @@ $code-highlight-background: #f0f0f0; // Load custom theme @import "theme.scss"; -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* Set core root defaults */ -html:focus-within { - scroll-behavior: smooth; -} - -/* Inherit fonts for inputs and buttons */ -input, -button, -textarea, -select { - font: inherit; -} - -html { - max-width: 90ch; - padding: 3em 1em; - margin: auto; - line-height: 1.75; - font-size: 1.25em; -} - -body { - font-family: $font-stack; - background: $background; - color: $text-color; - display: flex; - min-height: 100vh; - flex-direction: column; -} -a { - text-decoration: none; -} - .primary-color { color: $primary-color; } @@ -112,7 +70,7 @@ a { display: none; } .sensitive-attachment-state:checked ~ .sensitive-attachment-box div { - display: none; + display:none; } .sensitive-attachment-box { position: relative; @@ -126,6 +84,7 @@ a { } } + blockquote { border-left: 3px solid $secondary-color; margin-left: 0; @@ -133,11 +92,28 @@ blockquote { } .muted { - color: $muted-color; + color: $muted-color; } .light-background { - background: $light-background; + background: $light-background; +} + + +body { + font-family: $font-stack; + font-size: 20px; + line-height: 32px; + background: $background; + color: $text-color; + margin: 0; + padding: 0; + display: flex; + min-height: 100vh; + flex-direction: column; +} +a { + text-decoration: none; } dl { @@ -161,56 +137,53 @@ dl { } .shared-header { - margin-left: 20px; - margin-top: 30px; - margin-bottom: -20px; - strong { - color: $primary-color; - } - span { - color: $muted-color; - } + margin-left: 20px; + margin-top: 30px; + margin-bottom: -20px; + strong { + color: $primary-color; + } + span { + color: $muted-color; + } } div.highlight { - background: $code-highlight-background; - padding: 0 10px; - overflow: auto; - display: block; - margin: 20px 0; + background: $code-highlight-background; + padding: 0 10px; + overflow: auto; + display: block; + margin: 20px 0; } .box { - padding: 0 20px; + padding: 0 20px; } -code, -pre { +code, pre { color: $secondary-color; // #cb4b16; // #268bd2; // #2aa198; font-family: monospace; } .form { - input, - select, - textarea { - font-size: 20px; - border: 0; - padding: 5px; - background: $form-background-color; - color: $form-text-color; - &:focus { - outline: 1px solid $secondary-color; + input, select, textarea { + font-size: 20px; + border: 0; + padding: 5px; + background: $form-background-color; + color: $form-text-color; + &:focus { + outline: 1px solid $secondary-color; + } + } + input[type=submit] { + font-size: 20px; + outline: none; + background: $primary-color; + color: $primary-button-text-color; + padding: 5px 12px; + cursor: pointer; } - } - input[type="submit"] { - font-size: 20px; - outline: none; - background: $primary-color; - color: $primary-button-text-color; - padding: 5px 12px; - cursor: pointer; - } } header { @@ -239,17 +212,18 @@ a { } } #main { - display: flex; - flex: 1; + display: flex; + flex: 1; } main { - width: 100%; - margin: 30px auto; + width: 100%; + max-width: 1000px; + margin: 30px auto; } .main-flex { - display: flex; - flex: 1; + display: flex; + flex: 1; } .centered { @@ -263,12 +237,12 @@ main { } footer { - font-size: 1em; width: 100%; + max-width: 1000px; margin: 20px auto; color: $muted-color; p { - margin: 0; + margin: 0; } } .tiny-actor-icon { @@ -280,7 +254,7 @@ footer { .actor-box { display: flex; column-gap: 20px; - margin: 10px 0; + margin:10px 0; .icon-box { flex: 0 0 50px; } @@ -294,54 +268,50 @@ footer { } } #articles { - list-style-type: none; - margin: 30px 0; - padding: 0 20px; - li { - display: block; - span { - padding-right: 10px; + list-style-type: none; + margin: 30px 0; + padding: 0 20px; + li { + display: block; + span { + padding-right:10px; + } } - } } -#notifications, -#followers, -#following { - ul { - list-style-type: none; - margin: 0; - padding: 0; - } - li { - display: block; - } +#notifications, #followers, #following { + ul { + list-style-type: none; + margin: 0; + padding: 0; + } + li { + display: block; + } } @mixin admin-button() { - font-size: 20px; - line-height: 32px; - font-family: $font-stack; - background: $form-background-color; - color: $form-text-color; - border: 1px solid $background; - padding: 8px 10px 5px 10px; - cursor: pointer; - &:hover { - border: 1px solid $form-text-color; - } + font-size: 20px; + line-height: 32px; + font-family: $font-stack; + background: $form-background-color; + color: $form-text-color; + border: 1px solid $background; + padding: 8px 10px 5px 10px; + cursor: pointer; + &:hover { + border: 1px solid $form-text-color; + } } -.show-sensitive-btn, -.show-more-btn, -.label-btn { - @include admin-button; - padding: 10px 5px; - margin: 20px 0; +.show-sensitive-btn, .show-more-btn, .label-btn { + @include admin-button; + padding: 10px 5px; + margin: 20px 0; } .show-hide-sensitive-btn { - display: inline-block; + display:inline-block; } .no-margin-top { @@ -365,13 +335,13 @@ ul.poll-items { } .poll-bar { - width: 100%; - height: 20px; - line { - stroke: $secondary-color; - stroke-width: 20px; - } + width:100%;height:20px; + line { + stroke: $secondary-color; + stroke-width: 20px; + } } + } } @@ -392,45 +362,44 @@ ul.poll-items { } nav { - form { - margin: 15px 0; - } - input[type="submit"], - button { - @include admin-button; - } + form { + margin: 15px 0; + } + input[type=submit], button { + @include admin-button; + } } nav.flexbox { - ul { - display: flex; - flex-wrap: wrap; - align-items: center; - list-style-type: none; - margin: 0; - padding: 0; - } + ul { + display: flex; + flex-wrap: wrap; + align-items: center; + list-style-type: none; + margin: 0; + padding: 0; - ul li { - margin-right: 20px; + } - &:last-child { - margin-right: 0px; + ul li { + margin-right: 20px; + + &:last-child { + margin-right: 0px; + } } - } - a:not(.label-btn) { - color: $primary-color; - text-decoration: none; - &:hover, - &:active { - color: $secondary-color; - text-decoration: underline; + a:not(.label-btn) { + color: $primary-color; + text-decoration: none; + &:hover, &:active { + color: $secondary-color; + text-decoration: underline; + } + } + a.active:not(.label-btn) { + color: $secondary-color; + font-weight: bold; } - } - a.active:not(.label-btn) { - color: $secondary-color; - font-weight: bold; - } } // after nav.flexbox to override default behavior @@ -443,34 +412,31 @@ a.label-btn { } .ap-object { - margin: 15px 0; - padding: 20px; - nav { - color: $muted-color; - } - .in-reply-to { - display: inline; - color: $muted-color; - } - .e-content, - .activity-og-meta { - a:hover { - text-decoration: underline; + margin: 15px 0; + padding: 20px; + nav { + color: $muted-color; } - } - .activity-attachment { - margin: 30px 0 20px 0; - img, - audio, - video { - width: 100%; - max-width: 740px; + .in-reply-to { + display: inline; + color: $muted-color; + } + .e-content, .activity-og-meta { + a:hover { + text-decoration: underline; + } + } + .activity-attachment { + margin: 30px 0 20px 0; + img, audio, video { + width: 100%; + max-width: 740px; + } + } + img.inline-img { + display: block; + max-width: 740px; } - } - img.inline-img { - display: block; - max-width: 740px; - } } .activity-og-meta { @@ -487,26 +453,25 @@ a.label-btn { } .ap-object-expanded { - border: 2px dashed $secondary-color; + border: 2px dashed $secondary-color; } .error-box { - color: $secondary-color; + color: $secondary-color; } .actor-action { - margin-top: 20px; - margin-bottom: -20px; + margin-top:20px; + margin-bottom:-20px; padding: 0 20px; span { color: $muted-color; } } .actor-metadata { - color: $muted-color; + color: $muted-color; } -.emoji, -.custom-emoji { +.emoji, .custom-emoji { max-width: 25px; }