diff --git a/.vscode/settings.json b/.vscode/settings.json index 9054b90..f2e3f28 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,6 +12,7 @@ "Rher", "Sisu", "spellcasting", + "topnav", "Trapcraft", "Vinushka", "Weaponcraft" diff --git a/appendix-a.html b/appendix-a.html index 1a9b193..e03f9b0 100644 --- a/appendix-a.html +++ b/appendix-a.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Appendix A: Other Rules

diff --git a/appendix-b.html b/appendix-b.html index 07f5f65..f20037c 100644 --- a/appendix-b.html +++ b/appendix-b.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Appendix B: Old Gods Powers and Spells

diff --git a/appendix-c.html b/appendix-c.html index 13dd436..1fb67ed 100644 --- a/appendix-c.html +++ b/appendix-c.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Appendix C: Abilities

diff --git a/basic-moves.html b/basic-moves.html index b9914f3..1b7d71f 100644 --- a/basic-moves.html +++ b/basic-moves.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Basic Moves

diff --git a/character-sheet.html b/character-sheet.html index b3889c3..cb637f7 100644 --- a/character-sheet.html +++ b/character-sheet.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Character Sheet

diff --git a/downtime.html b/downtime.html index 6217a09..2ef160e 100644 --- a/downtime.html +++ b/downtime.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Downtime

diff --git a/mechanics.html b/mechanics.html index 9078605..a240850 100644 --- a/mechanics.html +++ b/mechanics.html @@ -21,8 +21,10 @@ -
- +
+
+ +

Mechanics

diff --git a/styling.css b/styling.css index 11546d6..f3cb5be 100644 --- a/styling.css +++ b/styling.css @@ -67,69 +67,49 @@ ul { padding: 1rem; } -/* Add a black background color to the top navigation bar */ -/* .topnav { - overflow: hidden; +.topnavContainer { + display: flex; + justify-content: space-between; + align-items: center; + align-content: stretch; background-color: #e9e9e9; -} */ - -/* Style the links inside the navigation bar */ -/* .topnav a { - float: left; - display: block; - color: black; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; -} */ - -/* Change the color of links on hover */ -/* .topnav a:hover { - background-color: #ddd; - color: black; -} */ - -/* Style the "active" element to highlight the current page */ -/* .topnav a.active { - background-color: #2196F3; - color: white; -} */ - -/* Style the search box inside the navigation bar */ -/* .topnav input[type=text] { - float: right; - padding: 6px; - border: none; - margin-top: 8px; - margin-right: 16px; - font-size: 17px; -} */ + margin: 0.5rem; + height: 2.5rem; +} /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */ @media screen and (min-width: 600px) { .topnav { display: none; } + .topnavContainer { + display: none; + } } @media screen and (max-width: 600px) { .topnav { + display: flex; + justify-content: space-between; + align-items: center; + align-content: stretch; box-sizing: border-box; - max-width: 100%; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; + width: 100%; + height: 100%; } .topnav input[type=text] { - width: 100%; - /* display: block; */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block; text-align: left; - width: 100%; - margin: 0; - padding: 14px; border: 1px solid #ccc; + width: 100%; + height: 100%; } } \ No newline at end of file