summaryrefslogtreecommitdiff
path: root/web/source/css/base.css
diff options
context:
space:
mode:
Diffstat (limited to 'web/source/css/base.css')
-rw-r--r--web/source/css/base.css560
1 files changed, 248 insertions, 312 deletions
diff --git a/web/source/css/base.css b/web/source/css/base.css
index 5cd2cd047..0d3c436c8 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -20,35 +20,52 @@
/* noto-sans-regular - latin */
@font-face {
- font-family: "Noto Sans";
- font-weight: 400;
- font-display: swap;
- font-style: normal;
- src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'),
- url('../fonts/noto-sans-v27-latin-regular.woff') format('woff');
+ font-family: "Noto Sans";
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+ src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'),
+ url('../fonts/noto-sans-v27-latin-regular.woff') format('woff');
}
/* noto-sans-700 - latin */
@font-face {
- font-family: "Noto Sans";
- font-weight: 700;
- font-display: swap;
- font-style: normal;
- src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'),
- url('../fonts/noto-sans-v27-latin-700.woff') format('woff');
+ font-family: "Noto Sans";
+ font-weight: 700;
+ font-display: swap;
+ font-style: normal;
+ src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'),
+ url('../fonts/noto-sans-v27-latin-700.woff') format('woff');
}
-/* standard border radius for nice squircles */
+/*************************************
+***** SECTION 1: HANDY VARIABLES *****
+**************************************/
+
+/*
+ Standard border radius
+ for nice squircles.
+*/
$br: 0.4rem;
-/* border radius for items that are framed/bordered
- inside something with $br, eg avatar, header img */
+
+/*
+ Border radius for items that
+ are framed/bordered inside
+ something with $br, eg avatar,
+ header img, etc.
+*/
$br-inner: 0.2rem;
-/* Fork-Awesome 'fa-fw' fixed icon width
- keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
+/*
+ Fork-Awesome 'fa-fw' fixed icon width;
+ keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
*/
$fa-fw: 1.28571429em;
+/******************************************
+***** SECTION 2: BASIC GLOBAL STYLING *****
+*******************************************/
+
html, body {
padding: 0;
margin: 0;
@@ -63,90 +80,28 @@ body {
position: relative;
}
-.hidden {
- display: none;
-}
-
-.page {
- display: grid;
- min-height: 100vh;
-
- grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
- grid-template-columns: 1fr min(92%, 50rem) 1fr;
- grid-template-rows: auto 1fr auto;
-}
-
-h1 {
- margin: 0;
- line-height: 2.4rem;
-}
-
a {
color: $link-fg;
}
-header, footer {
- grid-column: 1 / span 3;
-}
-
-.content {
- grid-column: 2;
- align-self: start;
-}
-
-header {
- display: flex;
- justify-content: center;
-}
-
-header a {
- display: flex;
- flex-wrap: wrap;
- margin: 1.5rem;
- gap: 1rem;
- justify-content: center;
-
- img {
- align-self: center;
- height: 3rem;
- }
-
- h1 {
- flex-grow: 1;
- align-self: center;
- text-align: center;
-
- font-size: 1.5rem;
- word-wrap: anywhere;
- color: $fg;
- }
-}
-
-.excerpt-top {
- margin-bottom: 2rem;
- font-style: italic;
- font-weight: normal;
- text-align: center;
- font-size: 1.2rem;
-
- .count {
- font-weight: bold;
- color: $fg-accent;
- }
-}
-
+/*
+ Normalize margins of first and last children.
+ We generally don't want to open a paragraph or
+ paragraph-like element with a top margin or
+ close it with a bottom margin.
+*/
main {
- p:first-child {
+ p:first-child, ol:first-child, ul:first-child {
margin-top: 0;
}
- p:last-child {
+ p:last-child, ol:last-child, ul:last-child {
margin-bottom: 0;
}
}
.button, button {
- border-radius: 0.2rem;
+ border-radius: $br-inner;
color: $button-fg;
background: $button-bg;
box-shadow: $boxshadow;
@@ -184,6 +139,166 @@ main {
}
}
+/*
+ Form styling - used in settings frontend as well.
+*/
+input, select, textarea, .input {
+ box-sizing: border-box;
+ border: 0.15rem solid $input-border;
+ border-radius: 0.1rem;
+ color: $fg;
+ background: $input-bg;
+ width: 100%;
+ font-family: 'Noto Sans', sans-serif;
+ font-size: 1rem;
+ padding: 0.3rem;
+
+ &:focus, &:active {
+ border-color: $input-focus-border;
+ }
+
+ &:invalid, .invalid & {
+ border-color: $input-error-border;
+ }
+
+ &:disabled {
+ background: transparent;
+ }
+
+ &::placeholder {
+ opacity: 1;
+ color: $fg-reduced
+ }
+}
+
+/*
+ Squeeze emojis so they fit inline in text.
+*/
+.emoji {
+ width: 1.45em;
+ height: 1.45em;
+ margin: -0.2em 0.02em 0;
+ object-fit: contain;
+ vertical-align: middle;
+ transition: 0.1s;
+
+ /*
+ Enlarge emojis on hover to give
+ viewer a good look at them.
+ */
+ &:hover, &:active {
+ transform: scale(2);
+ background-color: $bg;
+ box-shadow: $boxshadow;
+ border: $boxshadow-border;
+ border-radius: $br-inner;
+ }
+}
+
+/*
+ Restyle unordered lists; outdent
+ and replace dot with orange dot.
+*/
+ul {
+ padding-left: 2.5rem;
+ list-style: none;
+
+ li::before {
+ content: "\2022";
+ color: $border-accent;
+ font-weight: bold;
+ display: inline-block;
+ width: 1.5rem;
+ margin-left: -1.5rem;
+ }
+}
+
+/*
+ Mirror the same styling a little bit
+ for ordered lists by making marker bold.
+*/
+ol {
+ padding-left: 2.5rem;
+
+ li::marker {
+ font-weight: bold;
+ }
+}
+
+/*
+ Outdent block quotes a bit; use
+ orange stripe for left border.
+*/
+blockquote {
+ padding: 0.5rem 0 0.5rem 0.5rem;
+ border-left: 0.2rem solid $border-accent;
+ margin: 0;
+ font-style: italic;
+}
+
+/*
+ Nice dashed orange line
+ for horizontal rules.
+*/
+hr {
+ border: 0;
+ border-top: 1px dashed $border-accent;
+}
+
+/*
+ Don't indent definition
+ lists and definitions.
+*/
+dl {
+ margin: 0;
+
+ dd {
+ margin-left: 0;
+ }
+}
+
+label {
+ cursor: pointer;
+}
+
+/*************************************
+***** SECTION 3: UTILITY CLASSES *****
+**************************************/
+
+/*
+ Column header that appears at the top
+ of threads, at the top of sections of
+ profiles (About, Pinned Posts, etc).
+*/
+.col-header {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 1rem;
+
+ justify-content: start;
+ align-items: center;
+
+ margin: 0;
+ background: $profile-bg;
+ border-top-left-radius: $br;
+ border-top-right-radius: $br;
+ padding: 0.75rem;
+
+ a {
+ justify-self: end;
+ }
+
+ h1, h2, h3, h4 {
+ font-size: 1.2rem;
+ line-height: 1.3rem;
+ margin: 0;
+ }
+}
+
+.hidden {
+ display: none;
+}
+
.nounderline {
text-decoration: none;
}
@@ -192,57 +307,37 @@ main {
color: $acc1;
}
-.logo {
- justify-self: center;
- img {
- height: 30vh;
- }
+.text-cutoff {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
-section.apps {
- align-self: start;
-
- .applist {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 0.5rem;
- align-content: start;
-
- .entry {
- display: grid;
- grid-template-columns: 25% 1fr;
- gap: 1.5rem;
- padding: 0.5rem;
- background: $bg-accent;
- border-radius: 0.5rem;
-
- .logo {
- align-self: center;
- width: 100%;
- object-fit: contain;
- flex: 1 1 auto;
- }
-
- .logo.redraw {
- fill: $fg;
- stroke: $fg;
- }
-
- a {
- font-weight: bold;
- }
-
- div {
- padding: 0;
- h3 {
- margin-top: 0;
- }
- }
- }
+/*
+ Class for lists that don't
+ want the orange dot.
+*/
+.nodot {
+ li::before {
+ content: initial;
}
}
-section.login {
+/***********************************
+***** SECTION 4: SHAMEFUL MESS *****
+************************************/
+
+/*
+ EVERYTHING BELOW THIS POINT:
+ Should be moved somewhere else
+ to avoid cluttering up this file.
+*/
+
+/*
+ Below section stylings are used
+ in transient/error templates.
+*/
+section.sign-in {
form {
display: flex;
flex-direction: column;
@@ -291,98 +386,11 @@ section.oob-token {
}
}
-.error-text {
- color: $error1;
- background: $error2;
- border-radius: 0.1rem;
- font-weight: bold;
-}
-
-input, select, textarea, .input {
- box-sizing: border-box;
- border: 0.15rem solid $input-border;
- border-radius: 0.1rem;
- color: $fg;
- background: $input-bg;
- width: 100%;
- font-family: 'Noto Sans', sans-serif;
- font-size: 1rem;
- padding: 0.3rem;
-
- &:focus, &:active {
- border-color: $input-focus-border;
- }
-
- &:invalid, .invalid & {
- border-color: $input-error-border;
- }
-
- &:disabled {
- background: transparent;
- }
-}
-
-::placeholder {
- opacity: 1;
- color: $fg-reduced
-}
-
-hr {
- color: transparent;
- width: 100%;
- border-bottom: 0.02rem solid $border-accent;
-}
-
-footer {
- align-self: end;
- padding: 2rem 0 1rem 0;
-
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-
- div {
- text-align: center;
- padding: 1rem;
- flex-grow: 1;
- }
-
- a {
- font-weight: bold;
- }
-}
-
-@media screen and (max-width: 600px) {
- header {
- text-align: center;
- }
-
- footer {
- grid-template-columns: 1fr;
-
- div {
- text-align: initial;
- width: 100%;
- }
- }
-
- section.apps .applist {
- grid-template-columns: 1fr;
- }
-}
-
-.emoji {
- width: 1.45em;
- height: 1.45em;
- margin: -0.2em 0.02em 0;
- object-fit: contain;
- vertical-align: middle;
-}
-
-.monospace {
- font-family: monospace;
-}
-
+/*
+ TODO: This is only used in the "finalize"
+ template for new signups; move this elsewhere
+ when that stuff is finished up.
+*/
.callout {
margin: 1.5rem 0;
border: .05rem solid $border-accent;
@@ -397,22 +405,11 @@ footer {
}
}
-label {
- cursor: pointer;
-}
-
-@media (prefers-reduced-motion) {
- .fa-spin {
- animation: none;
- }
-}
-
-.text-cutoff {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
+/*
+ TODO: list and blocklist are only used
+ in settings panel and on blocklist page;
+ consider moving them somewhere else.
+*/
.list {
display: flex;
flex-direction: column;
@@ -495,21 +492,18 @@ label {
}
}
-.about {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-
- h2 {
- margin: 0.5rem 0;
- }
-
- ul {
- margin-bottom: 0;
+@media screen and (max-width: 30rem) {
+ .domain-blocklist .entry {
+ grid-template-columns: 1fr;
+ gap: 0;
}
-
}
+/*
+ TODO: this is only used on About
+ page and in settings application;
+ consider moving it somewhere else.
+*/
.account-card {
display: inline-grid;
grid-template-columns: auto 1fr;
@@ -541,61 +535,3 @@ label {
grid-row: 1 / span 2;
}
}
-
-.instance-rules {
- list-style-position: inside;
- margin: 0;
- padding: 0;
-
- a.rule {
- display: grid;
- grid-template-columns: 1fr auto;
- align-items: center;
- color: $fg;
- text-decoration: none;
- background: $toot-bg;
- padding: 1rem;
- margin: 0.5rem 0;
- border-radius: $br;
- line-height: 2rem;
- position: relative;
-
- &:hover {
- color: $fg-accent;
-
- .edit-icon {
- display: inline;
- }
- }
-
- .edit-icon {
- display: none;
- font-size: 1rem;
- line-height: 1.5rem;
- }
-
- li {
- font-size: 1.75rem;
- padding: 0;
- margin: 0;
-
- h2 {
- margin: 0;
- margin-top: 0 !important;
- display: inline-block;
- font-size: 1.5rem;
- }
- }
-
- span {
- color: $fg-reduced;
- }
- }
-}
-
-@media screen and (max-width: 30rem) {
- .domain-blocklist .entry {
- grid-template-columns: 1fr;
- gap: 0;
- }
-} \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2025-07-12 19:11:49 +0000