Skip to content

Commit ec24f48

Browse files
x157x157
committed
Move style.css so it doesn't require processing
1 parent d17de1b commit ec24f48

4 files changed

Lines changed: 128 additions & 105 deletions

File tree

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ This document contains rules and guidelines for AI Agents working on the `x157.g
1515
- **Documentation**: Whenever new setup steps for WSL or local development are discovered, **IMMEDIATELY** update `DEVELOPMENT.md`.
1616
- **Consistency**: Ensure `DEVELOPMENT.md` is the single source of truth for setting up the project locally.
1717
- **Shell Compatibility**:
18+
- **Testing**: Always run tests and the local server inside **WSL (Windows Subsystem for Linux)**, as detailed in `DEVELOPMENT.md`. Do not attempt to run `jekyll` or `bundle` commands directly in PowerShell on Windows.
1819
- Assume the environment is **Windows PowerShell (`pwsh`)**.
1920
- Do **NOT** assume POSIX commands (like `grep`, `ls`, `cat`) exist natively unless running inside WSL.
2021
- Use `Select-String` instead of `grep`, `Get-Content` instead of `cat`, etc.

‎_layouts/default.html‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,54 @@
11
<!DOCTYPE html>
2-
<html lang="{{ site.lang | default: "en-US" }}">
3-
<head>
4-
<meta charset='utf-8'>
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | absolute_url }}">
8-
{% include head-custom.html %}
9-
10-
{% seo %}
11-
</head>
12-
13-
<body>
14-
15-
<header>
16-
<div class="container main-header-flex">
17-
<div class="header-title">
18-
<a id="a-title" href="{{ '/' | absolute_url }}">
19-
<h1>{{ site.title | default: site.github.repository_name }}</h1>
20-
</a>
21-
<h2>{{ site.description | default: site.github.project_tagline }}</h2>
22-
</div>
23-
<div class="header-search">
24-
<form action="{{ '/search' | relative_url }}" method="get">
25-
<input type="text" name="q" placeholder="Search..." aria-label="Search" class="search-input" />
26-
</form>
27-
</div>
2+
<html lang="{{ site.lang | default: " en-US" }}">
3+
4+
<head>
5+
<meta charset='utf-8'>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | absolute_url }}">
9+
{% include head-custom.html %}
10+
11+
{% seo %}
12+
</head>
13+
14+
<body>
15+
16+
<header>
17+
<div class="container main-header-flex">
18+
<div class="header-title">
19+
<a id="a-title" href="{{ '/' | absolute_url }}">
20+
<h1>{{ site.title | default: site.github.repository_name }}</h1>
21+
</a>
22+
<h2>{{ site.description | default: site.github.project_tagline }}</h2>
23+
</div>
24+
<div class="header-search">
25+
<form action="{{ '/search' | relative_url }}" method="get" target="search-frame" id="search-form">
26+
<input type="text" name="q" placeholder="Search..." aria-label="Search" class="search-input" />
27+
</form>
2828
</div>
29-
</header>
29+
</div>
30+
</header>
31+
32+
{% include header.html %}
3033

31-
{% include header.html %}
34+
<div class="container">
35+
<section id="main_content">
36+
{{ content }}
37+
</section>
38+
</div>
3239

33-
<div class="container">
34-
<section id="main_content">
35-
{{ content }}
36-
</section>
40+
{% include footer.html %}
41+
42+
<!-- Search Overlay -->
43+
<div id="search-overlay" class="search-overlay" style="display: none;">
44+
<div class="search-overlay-content">
45+
<button id="close-search" class="close-search-btn">&times;</button>
46+
<iframe name="search-frame" id="search-frame" src="about:blank"></iframe>
3747
</div>
48+
</div>
49+
50+
<script src="{{ '/assets/js/search.js' | relative_url }}"></script>
3851

39-
{% include footer.html %}
52+
</body>
4053

41-
</body>
42-
</html>
54+
</html>

assets/css/style.scss renamed to assets/css/style.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,4 +531,55 @@ todo-p:before {
531531
problem {
532532
display: inline-block;
533533
background-color: #800000
534+
}
535+
536+
/* Search Overlay (Glassmorphism) */
537+
.search-overlay {
538+
position: fixed;
539+
top: 0;
540+
left: 0;
541+
width: 100%;
542+
height: 100%;
543+
background: rgba(0, 0, 0, 0.7);
544+
backdrop-filter: blur(5px);
545+
z-index: 9999;
546+
display: flex;
547+
justify-content: center;
548+
align-items: center;
549+
}
550+
551+
.search-overlay-content {
552+
position: relative;
553+
width: 90%;
554+
max-width: 800px;
555+
height: 80vh;
556+
background: rgba(30, 30, 30, 0.9);
557+
border: 1px solid #00cc00;
558+
border-radius: 8px;
559+
box-shadow: 0 0 20px rgba(0, 204, 0, 0.2);
560+
display: flex;
561+
flex-direction: column;
562+
overflow: hidden;
563+
}
564+
565+
.close-search-btn {
566+
position: absolute;
567+
top: 10px;
568+
right: 15px;
569+
background: none;
570+
border: none;
571+
color: #cccccc;
572+
font-size: 28px;
573+
cursor: pointer;
574+
z-index: 10;
575+
}
576+
577+
.close-search-btn:hover {
578+
color: #00cc00;
579+
}
580+
581+
#search-frame {
582+
width: 100%;
583+
height: 100%;
584+
border: none;
534585
}

‎assets/js/search.js‎

Lines changed: 29 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,34 @@
1-
(function() {
2-
function displaySearchResults(results, store) {
3-
var searchResults = document.getElementById('search-results');
4-
5-
if (results.length) {
6-
var appendString = '';
7-
8-
for (var i = 0; i < results.length; i++) {
9-
var item = store[results[i].ref];
10-
appendString += '<h3><a href="' + item.url + '">' + item.title + '</a></h3>';
11-
appendString += '<p>' + item.content.substring(0, 150) + '...</p>';
12-
}
13-
14-
searchResults.innerHTML = appendString;
15-
} else {
16-
searchResults.innerHTML = '<h3>No results found</h3>';
17-
}
1+
document.addEventListener('DOMContentLoaded', function () {
2+
const searchForm = document.getElementById('search-form');
3+
const searchOverlay = document.getElementById('search-overlay');
4+
const closeBtn = document.getElementById('close-search');
5+
const searchFrame = document.getElementById('search-frame');
6+
7+
if (searchForm) {
8+
searchForm.addEventListener('submit', function () {
9+
searchOverlay.style.display = 'flex';
10+
});
1811
}
1912

20-
function getQueryVariable(variable) {
21-
var query = window.location.search.substring(1);
22-
var vars = query.split('&');
23-
24-
for (var i = 0; i < vars.length; i++) {
25-
var pair = vars[i].split('=');
26-
27-
if (pair[0] === variable) {
28-
return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
29-
}
30-
}
13+
if (closeBtn) {
14+
closeBtn.addEventListener('click', function () {
15+
searchOverlay.style.display = 'none';
16+
// Optional: reset frame
17+
// searchFrame.src = "about:blank";
18+
});
3119
}
3220

33-
var searchTerm = getQueryVariable('q');
34-
35-
if (searchTerm) {
36-
document.getElementById('search-results').innerHTML = 'Searching...';
37-
38-
// In a real implementation, you might want to fetch the JSON first
39-
fetch('/search.json')
40-
.then(response => response.json())
41-
.then(data => {
42-
var idx = lunr(function () {
43-
this.field('id');
44-
this.field('title', { boost: 10 });
45-
this.field('content');
46-
47-
for (var key in data) { // In this simple version, data is array
48-
this.add({
49-
'id': key,
50-
'title': data[key].title,
51-
'content': data[key].content
52-
});
53-
}
54-
});
21+
// Close on click outside content
22+
searchOverlay.addEventListener('click', function (e) {
23+
if (e.target === searchOverlay) {
24+
searchOverlay.style.display = 'none';
25+
}
26+
});
5527

56-
var results = idx.search(searchTerm);
57-
// Map results back to the original data
58-
// The ref in results is the index in the data array
59-
// We need to pass the data store to display function
60-
// But formatting explicitly:
61-
var enrichedResults = results.map(function(result) {
62-
return {
63-
ref: result.ref, // This is the index (0, 1, 2...)
64-
score: result.score
65-
};
66-
});
67-
68-
displaySearchResults(enrichedResults, data);
69-
})
70-
.catch(err => {
71-
console.error("Error fetching search data: ", err);
72-
document.getElementById('search-results').innerHTML = 'Error loading search.';
73-
});
74-
}
75-
})();
28+
// Close on Escape key
29+
document.addEventListener('keydown', function (e) {
30+
if (e.key === 'Escape' && searchOverlay.style.display === 'flex') {
31+
searchOverlay.style.display = 'none';
32+
}
33+
});
34+
});

0 commit comments

Comments
 (0)