WIP

src/main.tsx

@@ -139,7 +139,7 @@ const main = async () => {
 
       setState("boardConfig", "flipped", side === "b");
 
-      document.title = `SHARECHESS - ${game.getTitle({ anonymous: false })}`;
+      document.title = `ShareChess - ${game.getTitle({ anonymous: false })}`;
     },
     async loadFEN(fen: string, hash = true) {
       const game = new Game().loadFEN(fen);
@@ -168,7 +168,7 @@ const main = async () => {
 
       setState("boardConfig", "flipped", side === "b");
 
-      document.title = `SHARECHESS - FEN ${fen}`;
+      document.title = `ShareChess - FEN ${fen}`;
     },
     async load(data: string) {
       setState("refreshHash", false);

src/ui/components/Boards.css

@@ -5,7 +5,6 @@
 }
 
 .boards__ico {
-  margin: 0.2rem;
   cursor: pointer;
   width: 8.2rem;
   height: 8.2rem;

src/ui/components/GameTabs.css

@@ -6,13 +6,6 @@
   height: 100vh;
 }
 
-@media (orientation: portrait) {
-  .game-box {
-    padding: 0;
-    height: 800px;
-  }
-}
-
 .game {
   height: 100%;
   display: grid;
@@ -37,3 +30,15 @@
 .span3 {
   grid-row-end: span 3;
 }
+
+@media (orientation: portrait) {
+  .game-box {
+    padding: 0;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .game {
+    display: block;
+  }
+}

src/ui/components/Header.tsx

@@ -9,7 +9,9 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
   return (
     <header class="header-box">
       <div class="header__logo">
-        <div class="header__logo-pic" />
+        <a href="/">
+          <div class="header__logo-pic" />
+        </a>
       </div>
       <div class="header__options">
         {/* <div class="header__options-ico" onClick={() => {}}>

src/ui/components/Info.tsx

@@ -83,6 +83,18 @@ const Info: Component<{ handlers: Handlers }> = () => {
             </Show>
           </p>
         </Show>
+        <Show when={state.pgn === ""}>
+          <p>
+            <a
+              href={`https://lichess.org/analysis/${state.fen.replace(
+                /\s+/g,
+                "_"
+              )}`}
+            >
+              Analyze on Lichess
+            </a>
+          </p>
+        </Show>
         <Show when={state.game.header.DatePretty}>
           <p>{state.game.header.DatePretty}</p>
         </Show>

src/ui/components/reusable/Scrollable.css

@@ -1,6 +1,5 @@
 .scrollable {
   background: var(--color-bg-block);
-  height: auto;
   padding: 2rem 1rem 2rem 2rem;
   height: 100%;
   display: flex;
@@ -29,3 +28,10 @@
   background-color: var(--color-scrollbar);
   outline: 1px solid var(--color-scrollbar);
 }
+
+@media (orientation: portrait) {
+  .scrollable {
+    height: auto;
+    display: block;
+  }
+}