Improve narrow logo and explain justification indentation on landing (#…

…644) * Improve narrow logo and explain justification indentation on landing Signed-off-by: Carl Gieringer <[email protected]> * Update Header.scss --------- Signed-off-by: Carl Gieringer <[email protected]>
Howdju · Feb 17, 2024 · d8f714e · d8f714e
1 parent f8b6715
commit d8f714e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/premiser-ui/src/Header.scss b/premiser-ui/src/Header.scss
@@ -20,4 +20,11 @@
 #title {
  font-family: "Orbitron", sans-serif;
  font-weight: 400;
+
+ // Set a width-relative size normally…
+ font-size: 1.2vw;
+ // …but below a certain width, stop shrinking the text
+ @media (max-width: 768px) {
+ font-size: 0.6em;
+ }
 }
diff --git a/premiser-ui/src/Header.tsx b/premiser-ui/src/Header.tsx
@@ -13,10 +13,8 @@ export default function Header() {
  const dispatch = useDispatch();
  return (
  <AppBar id="header">
- <AppBarTitle>
- <Link to="/">
- <span id="title">howdju?</span>
- </Link>
+ <AppBarTitle id="title">
+ <Link to="/">howdju?</Link>
  </AppBarTitle>
  <AppBarTitle id="main-search-container">
  <MainSearch />

diff --git a/premiser-ui/src/LandingPage.tsx b/premiser-ui/src/LandingPage.tsx
@@ -380,7 +380,8 @@ export default class LandingPage extends Component {
 
  <p>
  Justifications can either support or oppose the truth of a
- proposition.
+ proposition. (Justifications indented to the left support the things
+ above them—those indented to the right oppose things above them.)
  </p>
 
  <div className="banner">