Skip to content

Commit

Permalink
Merge pull request #8 from KirbyPaint/search
Browse files Browse the repository at this point in the history 
adds shitty search for mobile only
  • Loading branch information
@KirbyPaint
KirbyPaint authored Jun 3, 2024
2 parents 090bc46 + b27eafb commit 7ed6a44
Show file tree
Hide file tree
Showing 9 changed files with 183 additions and 9 deletions.
15 changes: 15 additions & 0 deletions appendix-a.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css" />
<title>Appendix A</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<h1>Appendix A: Other Rules</h1>
<div class="section">
<h3>Fire damage</h3>
Expand Down
15 changes: 15 additions & 0 deletions appendix-b.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css" />
<title>Appendix B</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<h1>Appendix B: Old Gods Powers and Spells</h1>
<div class="section">
<p>All spells derive from gods and each god has two domains of spells and abilities.</p>
Expand Down
15 changes: 15 additions & 0 deletions appendix-c.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css" />
<title>Appendix C</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<h1>Appendix C: Abilities</h1>
<div class="section">
<h2>Fighting</h2>
Expand Down
17 changes: 16 additions & 1 deletion basic-moves.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css" />
<title>Basic Moves</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<h1>Basic Moves</h1>
<div class="section">
<h2>Act Under Fire</h2>
<h2 id="actUnderFire">Act Under Fire</h2>
<p>
When you do something under fire, or dig in to endure, roll+Sturdy. On a 10+, you do it. On a 7-9, you flinch,
hesitate, or stall. The DM can offer you a worse outcome, a hard bargain, or an ugly choice.
Expand Down
15 changes: 15 additions & 0 deletions character-sheet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css" />
<title>Character Sheet</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<h1>Character Sheet</h1>
<div class="section">
<p><span class="important">Name:</span> The name of those who will suffer.</p>
Expand Down
15 changes: 15 additions & 0 deletions downtime.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css" />
<title>Downtime</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<div class="section">
<h1>Downtime</h1>
<p>These moves can only be done when resting. It requires a safe location.</p>
Expand Down
18 changes: 10 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,16 @@
</head>

<body>
<h1>Hexen Wiki</h1>
<p><a href="character-sheet.html">Character Sheet</a></p>
<p><a href="mechanics.html">Mechanics</a></p>
<p><a href="basic-moves.html">Basic Moves</a></p>
<p><a href="downtime.html">Downtime</a></p>
<p><a href="appendix-a.html">Appendix A</a></p>
<p><a href="appendix-b.html">Appendix B</a></p>
<p><a href="appendix-c.html">Appendix C</a></p>
<div class="section">
<h1>Hexen Wiki</h1>
<p><a href="character-sheet.html">Character Sheet</a></p>
<p><a href="mechanics.html">Mechanics</a></p>
<p><a href="basic-moves.html">Basic Moves</a></p>
<p><a href="downtime.html">Downtime</a></p>
<p><a href="appendix-a.html">Appendix A</a></p>
<p><a href="appendix-b.html">Appendix B</a></p>
<p><a href="appendix-c.html">Appendix C</a></p>
</div>
</body>

</html>
15 changes: 15 additions & 0 deletions mechanics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styling.css">
<title>Mechanics</title>
<script type="text/javascript">
window.onload = function () {
var searchBar = document.getElementById("searchBar");
searchBar.onclick = function (e) {
searchBar.addEventListener("keydown", function (e) {
if (e.code === "Enter") {
window.find(e.target.value);
}
})
}
};
</script>
</head>

<body>
<div class="topnav">
<input type="text" id="searchBar" placeholder="Search..." function="search()">
</div>
<h1>Mechanics</h1>
<div class="section">
<h2>Out of Combat</h2>
Expand Down
67 changes: 67 additions & 0 deletions styling.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,71 @@ ul {
border-radius: 10px;
margin: 1rem;
padding: 1rem;
}

/* Add a black background color to the top navigation bar */
/* .topnav {
overflow: hidden;
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;
} */

/* 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;
}
}

@media screen and (max-width: 600px) {
.topnav {
box-sizing: border-box;
max-width: 100%;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}

.topnav input[type=text] {
width: 100%;
/* display: block; */
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
border: 1px solid #ccc;
}
}

0 comments on commit 7ed6a44

Please sign in to comment.