Skip to content

Commit cede6cc

Browse files
acharneskiacharneski
committed
wip
1 parent 5f23c84 commit cede6cc

19 files changed

+1083
-27
lines changed

‎_includes/header.html‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
<div class="site-header">
2-
<div class="header-content">
3-
<h1><a href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
4-
{% if site.tagline %}<p class="site-tagline">{{ site.tagline }}</p>{% endif %}
5-
<nav class="site-nav">
6-
7-
<a href="{{ '/human.html' | relative_url }}" class="touch-target">Human</a>
8-
<a href="{{ '/projects.html' | relative_url }}" class="touch-target">Projects</a>
9-
<a href="{{ '/learning.html' | relative_url }}" class="touch-target">Learning</a>
10-
<a href="{{ '/scifi.html' | relative_url }}" class="touch-target">Physics</a>
11-
<a href="{{ '/social.html' | relative_url }}" class="touch-target">Social</a>
12-
<a href="{{ '/phenomenology.html' | relative_url }}" class="touch-target">Phenomenology</a>
13-
<a href="{{ '/consciousness.html' | relative_url }}" class="touch-target">Consciousness</a>
14-
<a href="{{ '/creative_writing.html' | relative_url }}" class="touch-target">Creative</a>
15-
</nav>
16-
</div>
2+
<div class="header-content">
3+
<a href="{{ '/' | relative_url }}"><img src="assets/images/fractal_thought_engine.png" height="290" width="457"/></a>
4+
<nav class="site-nav">
5+
<a href="{{ '/human.html' | relative_url }}" class="touch-target">Human</a>
6+
<a href="{{ '/projects.html' | relative_url }}" class="touch-target">Projects</a>
7+
<a href="{{ '/learning.html' | relative_url }}" class="touch-target">Learning</a>
8+
<a href="{{ '/scifi.html' | relative_url }}" class="touch-target">Physics</a>
9+
<a href="{{ '/social.html' | relative_url }}" class="touch-target">Social</a>
10+
<a href="{{ '/phenomenology.html' | relative_url }}" class="touch-target">Phenomenology</a>
11+
<a href="{{ '/consciousness.html' | relative_url }}" class="touch-target">Consciousness</a>
12+
<a href="{{ '/creative_writing.html' | relative_url }}" class="touch-target">Creative</a>
13+
</nav>
14+
</div>
1715
</div>
1816

1917
<section class="header-disclaimers" aria-label="Important disclaimers">

‎_includes/image.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!-- Enhanced Image Component -->
2+
{% assign image_path = include.src | default: include.path %}
3+
{% assign image_alt = include.alt | default: include.title | default: "Image" %}
4+
{% assign image_title = include.title | default: include.caption %}
5+
{% assign image_class = include.class | default: "" %}
6+
{% assign image_loading = include.loading | default: "lazy" %}
7+
{% assign image_sizes = include.sizes | default: "(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px" %}
8+
<figure class="enhanced-image {{ include.figure_class }}"
9+
{% if include.id %}id="{{ include.id }}"{% endif %}>
10+
{% if include.link %}
11+
<a href="{{ include.link }}"
12+
class="image-link"
13+
{% if include.link_target %}target="{{ include.link_target }}"{% endif %}
14+
{% if include.link_rel %}rel="{{ include.link_rel }}"{% endif %}>
15+
{% endif %}
16+
<div class="image-container {{ image_class }}">
17+
{% if include.responsive and include.srcset %}
18+
<img src="{{ image_path | relative_url }}"
19+
srcset="{{ include.srcset }}"
20+
sizes="{{ image_sizes }}"
21+
alt="{{ image_alt }}"
22+
{% if image_title %}title="{{ image_title }}"{% endif %}
23+
loading="{{ image_loading }}"
24+
class="responsive-image"
25+
{% if include.width %}width="{{ include.width }}"{% endif %}
26+
{% if include.height %}height="{{ include.height }}"{% endif %}>
27+
{% else %}
28+
<img src="{{ image_path | relative_url }}"
29+
alt="{{ image_alt }}"
30+
{% if image_title %}title="{{ image_title }}"{% endif %}
31+
loading="{{ image_loading }}"
32+
class="standard-image"
33+
{% if include.width %}width="{{ include.width }}"{% endif %}
34+
{% if include.height %}height="{{ include.height }}"{% endif %}>
35+
{% endif %}
36+
{% if include.overlay %}
37+
<div class="image-overlay">
38+
{{ include.overlay }}
39+
</div>
40+
{% endif %}
41+
{% if include.zoom %}
42+
<button class="image-zoom-btn" aria-label="Zoom image">🔍</button>
43+
{% endif %}
44+
</div>
45+
{% if include.link %}
46+
</a>
47+
{% endif %}
48+
{% if include.caption %}
49+
<figcaption class="image-caption">
50+
{{ include.caption | markdownify }}
51+
</figcaption>
52+
{% endif %}
53+
</figure>
54+
<style>
55+
.enhanced-image {
56+
margin: 2rem 0;
57+
text-align: center;
58+
position: relative;
59+
}
60+
.image-container {
61+
position: relative;
62+
display: inline-block;
63+
max-width: 100%;
64+
border: 2px solid var(--primary-color, #818cf8);
65+
border-radius: var(--border-radius, 8px);
66+
overflow: hidden;
67+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
68+
transition: all 0.3s ease;
69+
}
70+
.image-container:hover {
71+
box-shadow: 0 0 var(--glow-medium, 15px) var(--primary-color, #818cf8);
72+
transform: translateY(-2px);
73+
}
74+
.responsive-image,
75+
.standard-image {
76+
width: 100%;
77+
height: auto;
78+
display: block;
79+
transition: transform 0.3s ease;
80+
}
81+
.image-container:hover .responsive-image,
82+
.image-container:hover .standard-image {
83+
transform: scale(1.02);
84+
}
85+
.image-overlay {
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
right: 0;
90+
bottom: 0;
91+
background: rgba(0, 0, 0, 0.7);
92+
color: white;
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
opacity: 0;
97+
transition: opacity 0.3s ease;
98+
padding: 1rem;
99+
text-align: center;
100+
}
101+
.image-container:hover .image-overlay {
102+
opacity: 1;
103+
}
104+
.image-zoom-btn {
105+
position: absolute;
106+
top: 10px;
107+
right: 10px;
108+
background: rgba(0, 0, 0, 0.7);
109+
color: white;
110+
border: none;
111+
border-radius: 50%;
112+
width: 40px;
113+
height: 40px;
114+
cursor: pointer;
115+
font-size: 1.2rem;
116+
opacity: 0;
117+
transition: opacity 0.3s ease;
118+
}
119+
.image-container:hover .image-zoom-btn {
120+
opacity: 1;
121+
}
122+
.image-zoom-btn:hover {
123+
background: var(--primary-color, #818cf8);
124+
}
125+
.image-caption {
126+
margin-top: 1rem;
127+
font-style: italic;
128+
color: var(--tertiary-color, #9ca3af);
129+
font-size: 0.9rem;
130+
line-height: 1.4;
131+
}
132+
.image-caption p {
133+
margin: 0;
134+
}
135+
.image-link {
136+
text-decoration: none;
137+
display: inline-block;
138+
}
139+
/* Responsive adjustments */
140+
@media (max-width: 768px) {
141+
.enhanced-image {
142+
margin: 1rem 0;
143+
}
144+
.image-zoom-btn {
145+
width: 35px;
146+
height: 35px;
147+
font-size: 1rem;
148+
}
149+
.image-caption {
150+
font-size: 0.8rem;
151+
}
152+
}
153+
</style>

0 commit comments

Comments
 (0)