diff options
Diffstat (limited to 'web/assets')
| m--------- | web/assets/Fork-Awesome | 0 | ||||
| -rw-r--r-- | web/assets/base.css (renamed from web/assets/bundle.css) | 70 | ||||
| -rw-r--r-- | web/assets/colors.css | 1 | ||||
| -rw-r--r-- | web/assets/logo.png | bin | 0 -> 144838 bytes | |||
| -rw-r--r-- | web/assets/status.css | 230 |
5 files changed, 276 insertions, 25 deletions
diff --git a/web/assets/Fork-Awesome b/web/assets/Fork-Awesome new file mode 160000 +Subproject 5c126c4fb5ce9c78d24148afc514f9c4ccbe405 diff --git a/web/assets/bundle.css b/web/assets/base.css index 7d4eae172..b28cf2533 100644 --- a/web/assets/bundle.css +++ b/web/assets/base.css @@ -1,46 +1,71 @@ html, body { padding: 0; margin: 0; - background: #525c66; + background: rgb(70, 79, 88); color: #fafaff; font-family: sans-serif; } body { display: grid; - grid-template-columns: 1fr 50% 1fr; - grid-template-columns: 1fr 90ch 1fr; - line-height: 1.5em; + grid-template-rows: auto 1fr auto; min-height: 100vh; - grid-auto-rows: auto; - grid-auto-flow: dense; + line-height: 1.5em; } -body > * { - align-self: start; - grid-column: 2; +main { + background: #525c66; + display: grid; + padding-top: 2rem; + grid-template-columns: 1fr 50% 1fr; + grid-template-columns: auto min(92%, 90ch) auto; +} + +main .left { + grid-column: 1; } -body header, body footer, body .fullWidth { - grid-column: 1/4; - grid-column: 1/-1; +main .right { + grid-column: 3; } -body .left { - grid-column: 1; +main.lightgray { + background: #525c66; } -body .right { - grid-column: 3; +main > * { + align-self: start; + grid-column: 2; } header { background: rgb(70, 79, 88); - padding: 2rem; - margin-bottom: 4rem; + padding: 2rem 0; + padding-bottom: 0; + display: flex; + flex-wrap: wrap; } +header img { + height: 4rem; + padding-left: 2rem; + padding-bottom: 2rem; + } + +header div { + height: 100%; + margin: 0 2rem; + margin-top: -2rem; + flex-grow: 1; + align-self: center; + display: flex; + } + +header div h1 { + align-self: center; + } + h1 { /* color: $acc1; */ margin: 0; @@ -160,26 +185,21 @@ footer a { } @media screen and (orientation: portrait) { - body { + main { grid-template-columns: 1fr 92% 1fr; } - body footer, body .left, body .right { - grid-column: 2; - } - header { text-align: center; } footer { - padding: 0; margin-top: 2rem; grid-template-columns: 1fr; } footer div { - margin: 1rem 0; + margin: 0.3rem 0; } section.apps .applist { diff --git a/web/assets/colors.css b/web/assets/colors.css new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/web/assets/colors.css @@ -0,0 +1 @@ + diff --git a/web/assets/logo.png b/web/assets/logo.png Binary files differnew file mode 100644 index 000000000..d6d485df1 --- /dev/null +++ b/web/assets/logo.png diff --git a/web/assets/status.css b/web/assets/status.css new file mode 100644 index 000000000..9dd788a9e --- /dev/null +++ b/web/assets/status.css @@ -0,0 +1,230 @@ +main { + background: transparent; + grid-auto-rows: auto; +} + +.thread { + display: flex; + flex-direction: column; +} + +.toot { + position: relative; + background: rgb(75, 84, 93); + padding: 2rem; + /* padding-bottom: 0; */ + display: grid; + grid-template-columns: 3.2rem auto 1fr; + column-gap: 0.5rem; + margin-bottom: 0.2rem; +} + +.toot a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + } + +.toot .avatar { + grid-row: span 2; + } + +.toot .avatar img { + height: 3.2rem; + width: 3.2rem; + object-fit: cover; + } + +.toot .displayname { + font-weight: bold; + font-size: 1.2rem; + align-self: start; + } + +.toot .username { + color: #b0b0b5; + justify-self: start; + } + +.toot input.spoiler:checked ~ .content { + display: none; + } + +.toot .spoiler label { + background: #de8957; + border-radius: 0.3rem; + padding: 0.3rem; + margin-left: 0.4rem; + position: relative; + z-index: 2; + cursor: pointer; + } + +.toot .text { + margin: 0; + grid-column: span 2; + } + +.toot .text a { + color: #de8957; + text-decoration: underline; + } + +.toot .media { + margin-top: 0.6rem; + border-radius: 0.2rem; + grid-column: span 3; + display: grid; + grid-template-columns: 50% 50%; + grid-auto-rows: 10rem; + overflow: hidden; + gap: 0.3rem; + } + +.toot .media a { + position: relative; + } + +.toot .media .no-image-desc { + display: flex; + position: absolute; + bottom: 0.1rem; + right: 0.4rem; + color: white; + background: #5897df; + padding: 0.2rem 0.4rem; + border-radius: 100%; + z-index: 3; + } + +.toot .media .no-image-desc i.fa { + display: block; + line-height: 1.3rem; + } + +.toot .media .no-image-desc span { + margin-left: 0.3rem; + display: none; + } + +.toot .media .no-image-desc:hover span { + display: block; + } + +.toot .media .no-image-desc:hover { + border-radius: 0.2rem; +} + +.toot .media img { + width: 100%; + height: 100%; + object-fit: cover; + } + +.toot .media.single a { + grid-column: span 2; + } + +.toot .media.odd a:first-child, .toot .media.double a { + grid-row: span 2; + } + +.toot .info { + display: none; + } + +.toot .info div { + position: relative; + padding-right: 1.3rem; + } + +.toot .info .stats { + display: flex; + } + +.toot .info { + + color: #b0b0b5; + grid-column: span 3; + margin-top: 0.5rem; + flex-wrap: wrap; +} + +.toot .info div.stats::after { + display: none; + } + +.toot .info div::after { + display: block; + background: #b0b0b5; + height: 0.25rem; + width: 0.25rem; + content: ""; + position: absolute; + top: calc((1.5rem - 0.25rem) / 2); + right: 0.55rem; + border-radius: 1rem; + } + +.toot .info div:last-child::after { + display: none; + } + +.toot .info div:last-child { + margin-right: 0; +} + +.toot .toot-link { + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + + position: absolute; + z-index: 0; + } + +.toot {} + +.toot:first-child { + /* top left, top right */ + border-radius: 0.3rem 0.3rem 0 0; + } + +.toot:last-child { + /* bottom left, bottom right */ + border-radius: 0 0 0.3rem 0.3rem; + padding-bottom: 1.5rem; + } + +.toot.expanded { + background: #525c66; + padding-bottom: 1.5rem; + } + +.toot.expanded .displayname { + grid-column: span 2; + } + +.toot.expanded .text { + grid-column: span 3; + grid-row: span 1; + margin-top: 0.3rem; + } + +.toot.expanded .info { + display: flex; + } + +.toot.expanded .media { + grid-auto-rows: 1fr; + max-height: 120rem; + } + +footer + div { /* something weird from the devstack.. */ + display: none; +}
\ No newline at end of file |
