lineにstyleを当てられるようにする

yuiseki · Jun 4, 2022 · cb2e24f · cb2e24f
1 parent 95fd6b9
commit cb2e24f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/src/components/layout/ScrapboxPageView.tsx b/src/components/layout/ScrapboxPageView.tsx
@@ -11,7 +11,7 @@ export const ScrapboxPageView: React.FC<{
   return (
     <>
       <h2>{displayTitle}</h2>
-      <div>
+      <div className="page">
         <Lines lines={lines} />
       </div>
       <footer>

diff --git a/src/components/scrapbox/Lines.tsx b/src/components/scrapbox/Lines.tsx
@@ -9,6 +9,7 @@ export const Lines: React.FC<{ lines: Line[] }> = ({ lines }) => {
           return (
             <div
               key={idx}
+              className="line"
               style={{
                 padding: "5px " + line.indent * 20 + "px",
               }}
@@ -17,7 +18,7 @@ export const Lines: React.FC<{ lines: Line[] }> = ({ lines }) => {
             </div>
           );
         } else {
-          return <div key={idx} />;
+          return <div key={idx} className="line" />;
         }
       })}
     </>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -20,7 +20,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
   return (
     <div className="root">
       <h1>{process.env.siteName}</h1>
-      <nav>
+      <nav className="navbar">
         <ul className="nav nav-pills">
           {pinnedPages.map((page) => {
             switch (page) {

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -27,6 +27,10 @@ a[href^="http"] {
   margin-bottom: 60px;
 }
 
+.page .line {
+  min-height: 1em;
+}
+
 footer {
   padding: 30px 0;
 }