jscom_ice 0.0.7 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_includes/contact-me-form.html +3 -1
- data/_includes/scripts.html +3 -0
- data/_sass/base/_base.scss +62 -8
- data/_sass/component/_codeblock.scss +40 -9
- data/_sass/component/_contact.scss +76 -2
- data/_sass/component/_form.scss +132 -20
- data/_sass/component/_navbar.scss +57 -8
- data/_sass/component/_posts.scss +40 -14
- data/_sass/layout/_footer.scss +1 -0
- data/_sass/main.scss +39 -6
- data/assets/css/style.scss +3 -0
- data/assets/js/navbar.js +55 -0
- metadata +12 -11
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e2e4d3a629ff8b0afd7dab17fad54261dc38f995f13c649515c88d6c9393de98
|
|
4
|
+
data.tar.gz: c2d18a727df56042bff527ca414687da9c118370665d016e91ae88bd53be7306
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c37f283039e7ca8512b6924d6967b6941386887f198cd80a8788bddd10eb6c34a80390b25b11438229519430fb85faa5fa79e3f75d98b33e770ad86a909d8f4a
|
|
7
|
+
data.tar.gz: a0fbc7cec2332b6afc00673e23982ebc1587da1ce51d1186beede37cdd0228284b1e54319da07bd3bbc319c8dbef902904487768afe692aea4d90383c9d3b35e
|
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
<div class="form-group">
|
|
12
12
|
<textarea class="form-control" id="msg" name="user_message" placeholder="Message"></textarea>
|
|
13
13
|
</div>
|
|
14
|
-
<
|
|
14
|
+
<div class="form-buttons">
|
|
15
|
+
<button type="button" class="btn btn-primary" id="contact_submit">Send your message</button>
|
|
16
|
+
</div>
|
|
15
17
|
</form>
|
|
16
18
|
</div>
|
|
17
19
|
|
data/_includes/scripts.html
CHANGED
|
@@ -12,5 +12,8 @@ Scripts that are loaded throughout the website
|
|
|
12
12
|
|
|
13
13
|
<script src="/assets/js/bootstrap.js"></script>
|
|
14
14
|
|
|
15
|
+
<!-- Navbar scroll behavior -->
|
|
16
|
+
<script src="/assets/js/navbar.js"></script>
|
|
17
|
+
|
|
15
18
|
<!-- TODO contact form page & move this to more local include? (it's only needed on 1 page)-->
|
|
16
19
|
<!--<script src="/assets/js/contact.js"></script>-->
|
data/_sass/base/_base.scss
CHANGED
|
@@ -90,11 +90,16 @@ ol {
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
body {
|
|
93
|
-
//
|
|
94
|
-
font-family:
|
|
93
|
+
// Modern, readable font stack
|
|
94
|
+
font-family: $base-font-family;
|
|
95
|
+
font-size: $base-font-size;
|
|
96
|
+
line-height: $base-line-height;
|
|
97
|
+
font-weight: $normal-weight;
|
|
98
|
+
|
|
95
99
|
// make text easier on the eyes
|
|
96
100
|
-webkit-text-size-adjust: 100%;
|
|
97
101
|
-webkit-font-smoothing: antialiased;
|
|
102
|
+
-moz-osx-font-smoothing: grayscale;
|
|
98
103
|
-webkit-font-feature-settings: "kern" 1;
|
|
99
104
|
-moz-font-feature-settings: "kern" 1;
|
|
100
105
|
-o-font-feature-settings: "kern" 1;
|
|
@@ -107,6 +112,9 @@ body {
|
|
|
107
112
|
flex-direction: column;
|
|
108
113
|
min-height: 100vh;
|
|
109
114
|
|
|
115
|
+
// Account for fixed navbar height
|
|
116
|
+
padding-top: 56px; // Standard Bootstrap navbar height
|
|
117
|
+
|
|
110
118
|
img {
|
|
111
119
|
width: 100%;
|
|
112
120
|
height: auto;
|
|
@@ -116,19 +124,50 @@ body {
|
|
|
116
124
|
background-color: $dark-black;
|
|
117
125
|
|
|
118
126
|
|
|
119
|
-
// Universal Headers
|
|
127
|
+
// Universal Headers with improved hierarchy
|
|
120
128
|
h1, h2, h3, h4, h5, h6 {
|
|
121
129
|
color: $smoke;
|
|
122
|
-
font-weight:
|
|
130
|
+
font-weight: $semibold-weight;
|
|
131
|
+
line-height: $heading-line-height;
|
|
132
|
+
margin-top: $spacing-lg;
|
|
133
|
+
margin-bottom: $spacing-md;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
h1 {
|
|
137
|
+
font-size: $xxlarge-font-size;
|
|
138
|
+
font-weight: $bold-weight;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
h2 {
|
|
142
|
+
font-size: $xlarge-font-size;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
h3 {
|
|
146
|
+
font-size: $large-font-size;
|
|
123
147
|
}
|
|
124
148
|
|
|
125
149
|
|
|
126
150
|
/** for `code tags` **/
|
|
127
151
|
code {
|
|
152
|
+
font-family: $code-font-family;
|
|
153
|
+
font-size: $medium-font-size;
|
|
128
154
|
color: #2881d3;
|
|
129
155
|
// code highlight color
|
|
130
156
|
&.highlighter-rouge {
|
|
131
157
|
background-color: $dark-light;
|
|
158
|
+
padding: 2px 6px;
|
|
159
|
+
border-radius: 3px;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// Code blocks (preformatted)
|
|
164
|
+
pre {
|
|
165
|
+
font-family: $code-font-family;
|
|
166
|
+
font-size: $medium-font-size;
|
|
167
|
+
line-height: 1.5;
|
|
168
|
+
|
|
169
|
+
code {
|
|
170
|
+
font-family: inherit;
|
|
132
171
|
}
|
|
133
172
|
}
|
|
134
173
|
|
|
@@ -152,13 +191,28 @@ body {
|
|
|
152
191
|
}
|
|
153
192
|
|
|
154
193
|
a {
|
|
155
|
-
// Link Colors
|
|
194
|
+
// Link Colors with smooth transitions
|
|
156
195
|
color: $darker-text-link-blue;
|
|
157
|
-
|
|
196
|
+
text-decoration: none;
|
|
197
|
+
transition: color 0.3s ease, opacity 0.2s ease, text-shadow 0.3s ease;
|
|
198
|
+
|
|
199
|
+
&:hover {
|
|
200
|
+
// On Hover - Lighter and more vibrant
|
|
201
|
+
color: $link-hover-blue;
|
|
202
|
+
text-shadow: 0 0 8px rgba(164, 192, 255, 0.3);
|
|
203
|
+
}
|
|
204
|
+
|
|
158
205
|
&:active,
|
|
159
206
|
&:focus {
|
|
160
|
-
// On
|
|
161
|
-
color: $
|
|
207
|
+
// On Active/Focus - Slightly different shade
|
|
208
|
+
color: $link-active-blue;
|
|
209
|
+
outline: 2px solid $link-hover-blue;
|
|
210
|
+
outline-offset: 2px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&:focus {
|
|
214
|
+
// Better keyboard navigation visibility
|
|
215
|
+
outline-style: dashed;
|
|
162
216
|
}
|
|
163
217
|
}
|
|
164
218
|
}
|
|
@@ -1,32 +1,63 @@
|
|
|
1
1
|
pre.highlight, pre {
|
|
2
|
-
margin:
|
|
2
|
+
margin: $spacing-lg 0;
|
|
3
3
|
@include media-query($on-mobile) {
|
|
4
|
-
margin:
|
|
5
|
-
padding-left:
|
|
4
|
+
margin: $spacing-md calc(51% - 51vw);
|
|
5
|
+
padding-left: $spacing-md;
|
|
6
6
|
}
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
// Enhanced visual styling
|
|
9
|
+
border: 1px solid rgba(138, 168, 255, 0.1);
|
|
8
10
|
background-color: #1a1b21;
|
|
9
|
-
border-radius:
|
|
10
|
-
padding:
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
padding: $spacing-lg;
|
|
11
13
|
display: block;
|
|
12
14
|
overflow-x: auto;
|
|
13
15
|
|
|
16
|
+
// Subtle depth
|
|
17
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
|
|
18
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
19
|
+
|
|
20
|
+
// Smooth scrolling for overflow
|
|
21
|
+
scroll-behavior: smooth;
|
|
22
|
+
|
|
23
|
+
// Custom scrollbar for WebKit browsers
|
|
24
|
+
&::-webkit-scrollbar {
|
|
25
|
+
height: 8px;
|
|
26
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&::-webkit-scrollbar-thumb {
|
|
31
|
+
background-color: rgba(138, 168, 255, 0.3);
|
|
32
|
+
border-radius: 4px;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
background-color: rgba(138, 168, 255, 0.5);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
14
39
|
> code {
|
|
40
|
+
font-family: $code-font-family;
|
|
15
41
|
width: 100%;
|
|
16
42
|
max-width: 50rem;
|
|
17
43
|
margin-left: auto;
|
|
18
44
|
margin-right: auto;
|
|
19
|
-
line-height: 1.
|
|
20
|
-
font-size:
|
|
45
|
+
line-height: 1.6;
|
|
46
|
+
font-size: $medium-font-size;
|
|
21
47
|
display: block;
|
|
22
48
|
border: 0;
|
|
49
|
+
|
|
50
|
+
// Enable font ligatures for JetBrains Mono
|
|
51
|
+
font-feature-settings: "liga" 1, "calt" 1;
|
|
52
|
+
-webkit-font-feature-settings: "liga" 1, "calt" 1;
|
|
23
53
|
}
|
|
24
54
|
}
|
|
25
55
|
|
|
26
56
|
.highlight table td {
|
|
27
|
-
padding:
|
|
57
|
+
padding: $spacing-sm;
|
|
28
58
|
}
|
|
29
59
|
|
|
30
60
|
.highlight table pre {
|
|
31
61
|
margin: 0;
|
|
62
|
+
box-shadow: none; // Remove shadow for table-based highlights
|
|
32
63
|
}
|
|
@@ -1,9 +1,83 @@
|
|
|
1
|
-
|
|
1
|
+
// Contact form specific styling
|
|
2
2
|
#contactMeForm {
|
|
3
|
+
max-width: 800px;
|
|
4
|
+
margin: $spacing-xxl auto;
|
|
5
|
+
|
|
6
|
+
// Button container for stacked buttons
|
|
7
|
+
.form-buttons {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: $spacing-md;
|
|
11
|
+
margin-top: $spacing-md;
|
|
3
12
|
|
|
4
|
-
|
|
13
|
+
.btn {
|
|
14
|
+
width: 100%;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
5
17
|
|
|
18
|
+
// Legacy single button support
|
|
19
|
+
.btn:not(.form-buttons .btn) {
|
|
6
20
|
width: 100%;
|
|
21
|
+
margin-top: $spacing-md;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Add extra polish to the form container
|
|
25
|
+
.form-control {
|
|
26
|
+
&:last-of-type {
|
|
27
|
+
margin-bottom: $spacing-md;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Force textarea to match dark theme (override Bootstrap)
|
|
32
|
+
textarea.form-control,
|
|
33
|
+
textarea {
|
|
34
|
+
background-color: rgba(27, 29, 37, 0.8) !important;
|
|
35
|
+
color: $dark-white !important;
|
|
36
|
+
border: 1px solid rgba(138, 168, 255, 0.2) !important;
|
|
37
|
+
|
|
38
|
+
&::placeholder {
|
|
39
|
+
color: $darker-white !important;
|
|
40
|
+
opacity: 0.6 !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:focus {
|
|
44
|
+
background-color: rgba(27, 29, 37, 0.95) !important;
|
|
45
|
+
border-color: $darker-text-link-blue !important;
|
|
46
|
+
color: $dark-white !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:hover:not(:focus) {
|
|
50
|
+
background-color: rgba(27, 29, 37, 0.9) !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Force input text colors too (in case Bootstrap overrides)
|
|
55
|
+
input.form-control {
|
|
56
|
+
color: $dark-white !important;
|
|
57
|
+
|
|
58
|
+
&::placeholder {
|
|
59
|
+
color: $darker-white !important;
|
|
60
|
+
opacity: 0.6 !important;
|
|
61
|
+
}
|
|
7
62
|
}
|
|
8
63
|
|
|
64
|
+
// Success/error message styling
|
|
65
|
+
.alert {
|
|
66
|
+
margin-top: $spacing-lg;
|
|
67
|
+
padding: $spacing-md;
|
|
68
|
+
border-radius: 8px;
|
|
69
|
+
font-weight: $medium-weight;
|
|
70
|
+
|
|
71
|
+
&.alert-success {
|
|
72
|
+
background-color: rgba(111, 191, 115, 0.2);
|
|
73
|
+
border: 1px solid rgba(111, 191, 115, 0.4);
|
|
74
|
+
color: lighten($accent-green, 20%);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&.alert-danger {
|
|
78
|
+
background-color: rgba(251, 73, 52, 0.2);
|
|
79
|
+
border: 1px solid rgba(251, 73, 52, 0.4);
|
|
80
|
+
color: lighten(#fb4934, 20%);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
9
83
|
}
|
data/_sass/component/_form.scss
CHANGED
|
@@ -1,42 +1,154 @@
|
|
|
1
|
+
// Modern form styling matching our design language
|
|
1
2
|
form {
|
|
2
3
|
margin: 0 auto;
|
|
3
4
|
width: 100%;
|
|
4
|
-
padding:
|
|
5
|
-
border: 1px solid
|
|
6
|
-
border-radius:
|
|
5
|
+
padding: $spacing-xl;
|
|
6
|
+
border: 1px solid rgba(138, 168, 255, 0.15);
|
|
7
|
+
border-radius: 12px;
|
|
8
|
+
background: rgba(27, 29, 37, 0.5);
|
|
9
|
+
backdrop-filter: blur(8px);
|
|
10
|
+
-webkit-backdrop-filter: blur(8px);
|
|
11
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
7
12
|
}
|
|
8
13
|
|
|
9
14
|
.form-control {
|
|
10
|
-
margin-bottom:
|
|
15
|
+
margin-bottom: $spacing-lg;
|
|
11
16
|
}
|
|
12
17
|
|
|
13
18
|
label {
|
|
14
|
-
display:
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
display: block;
|
|
20
|
+
margin-bottom: $spacing-sm;
|
|
21
|
+
color: $dark-white;
|
|
22
|
+
font-weight: $medium-weight;
|
|
23
|
+
font-size: $medium-font-size;
|
|
17
24
|
}
|
|
18
25
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
// Input and textarea base styling
|
|
27
|
+
input[type="text"],
|
|
28
|
+
input[type="email"],
|
|
29
|
+
input[type="url"],
|
|
30
|
+
input[type="tel"],
|
|
31
|
+
input[type="number"],
|
|
32
|
+
input[type="search"],
|
|
33
|
+
textarea,
|
|
34
|
+
select {
|
|
35
|
+
font-family: $base-font-family;
|
|
36
|
+
font-size: $base-font-size;
|
|
37
|
+
width: 100%;
|
|
38
|
+
padding: $spacing-md;
|
|
23
39
|
box-sizing: border-box;
|
|
24
|
-
border: 1px solid #999;
|
|
25
|
-
}
|
|
26
40
|
|
|
27
|
-
input
|
|
28
|
-
|
|
29
|
-
border
|
|
41
|
+
// Modern dark theme input styling
|
|
42
|
+
background-color: rgba(27, 29, 37, 0.8);
|
|
43
|
+
border: 1px solid rgba(138, 168, 255, 0.2);
|
|
44
|
+
border-radius: 8px;
|
|
45
|
+
color: $dark-white;
|
|
46
|
+
|
|
47
|
+
// Smooth transitions
|
|
48
|
+
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
|
|
49
|
+
|
|
50
|
+
// Placeholder styling
|
|
51
|
+
&::placeholder {
|
|
52
|
+
color: $darker-white;
|
|
53
|
+
opacity: 0.6;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Focus state
|
|
57
|
+
&:focus {
|
|
58
|
+
outline: none;
|
|
59
|
+
border-color: $darker-text-link-blue;
|
|
60
|
+
background-color: rgba(27, 29, 37, 0.95);
|
|
61
|
+
box-shadow: 0 0 0 3px rgba(138, 168, 255, 0.1),
|
|
62
|
+
0 2px 8px rgba(0, 0, 0, 0.2);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Hover state
|
|
66
|
+
&:hover:not(:focus) {
|
|
67
|
+
border-color: rgba(138, 168, 255, 0.3);
|
|
68
|
+
background-color: rgba(27, 29, 37, 0.9);
|
|
69
|
+
}
|
|
30
70
|
}
|
|
31
71
|
|
|
32
72
|
textarea {
|
|
33
73
|
vertical-align: top;
|
|
34
|
-
height:
|
|
35
|
-
|
|
74
|
+
min-height: 120px;
|
|
75
|
+
resize: vertical;
|
|
76
|
+
line-height: $base-line-height;
|
|
77
|
+
|
|
78
|
+
// Ensure background matches other inputs
|
|
79
|
+
background-color: rgba(27, 29, 37, 0.8);
|
|
36
80
|
|
|
37
|
-
|
|
38
|
-
|
|
81
|
+
// Fix placeholder alignment to match other inputs
|
|
82
|
+
&::placeholder {
|
|
83
|
+
padding-top: 0;
|
|
84
|
+
line-height: $base-line-height;
|
|
85
|
+
}
|
|
39
86
|
}
|
|
40
87
|
|
|
88
|
+
// Button styling
|
|
89
|
+
.btn,
|
|
90
|
+
button[type="submit"],
|
|
91
|
+
input[type="submit"] {
|
|
92
|
+
font-family: $base-font-family;
|
|
93
|
+
font-size: $base-font-size;
|
|
94
|
+
font-weight: $semibold-weight;
|
|
95
|
+
padding: $spacing-md $spacing-xl;
|
|
96
|
+
|
|
97
|
+
background: linear-gradient(135deg, $darker-text-link-blue 0%, $accent-blue 100%);
|
|
98
|
+
border: 1px solid rgba(138, 168, 255, 0.3);
|
|
99
|
+
border-radius: 8px;
|
|
100
|
+
color: $dark-white;
|
|
101
|
+
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
transition: all 0.3s ease;
|
|
104
|
+
|
|
105
|
+
box-shadow: 0 2px 8px rgba(138, 168, 255, 0.2);
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
background: linear-gradient(135deg, $link-hover-blue 0%, lighten($accent-blue, 5%) 100%);
|
|
109
|
+
box-shadow: 0 4px 16px rgba(138, 168, 255, 0.4);
|
|
110
|
+
transform: translateY(-2px);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:active {
|
|
114
|
+
transform: translateY(0);
|
|
115
|
+
box-shadow: 0 2px 8px rgba(138, 168, 255, 0.3);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&:focus {
|
|
119
|
+
outline: 2px solid $link-hover-blue;
|
|
120
|
+
outline-offset: 2px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&:disabled {
|
|
124
|
+
opacity: 0.5;
|
|
125
|
+
cursor: not-allowed;
|
|
126
|
+
transform: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Secondary button variant (for reset/clear actions)
|
|
130
|
+
&.btn-secondary {
|
|
131
|
+
background: linear-gradient(135deg, rgba(251, 73, 52, 0.3) 0%, rgba(251, 73, 52, 0.2) 100%);
|
|
132
|
+
border: 1px solid rgba(251, 73, 52, 0.4);
|
|
133
|
+
color: lighten(#fb4934, 25%);
|
|
134
|
+
font-weight: $medium-weight;
|
|
135
|
+
|
|
136
|
+
&:hover {
|
|
137
|
+
background: linear-gradient(135deg, rgba(251, 73, 52, 0.4) 0%, rgba(251, 73, 52, 0.3) 100%);
|
|
138
|
+
box-shadow: 0 4px 16px rgba(251, 73, 52, 0.3);
|
|
139
|
+
color: lighten(#fb4934, 30%);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&:active {
|
|
143
|
+
transform: translateY(0);
|
|
144
|
+
box-shadow: 0 2px 8px rgba(251, 73, 52, 0.2);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&:focus {
|
|
148
|
+
outline: 2px solid rgba(251, 73, 52, 0.5);
|
|
149
|
+
outline-offset: 2px;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
41
153
|
|
|
42
154
|
|
|
@@ -1,22 +1,46 @@
|
|
|
1
|
-
// Navbar
|
|
1
|
+
// Navbar with enhanced styling
|
|
2
2
|
.navbar {
|
|
3
3
|
border-color: $dark-light;
|
|
4
|
-
position: relative;
|
|
4
|
+
// position: relative; // Removed - let Bootstrap's fixed-top handle positioning
|
|
5
5
|
|
|
6
6
|
margin-right: auto;
|
|
7
7
|
margin-left: auto;
|
|
8
8
|
border-bottom: 1px solid $dark-smoke;
|
|
9
|
-
|
|
9
|
+
padding: $spacing-md $spacing-lg;
|
|
10
|
+
|
|
11
|
+
// Smooth transitions for all state changes
|
|
12
|
+
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
|
|
13
|
+
|
|
14
|
+
// Scrolled state - solid background with shadow
|
|
15
|
+
&.navbar-scrolled {
|
|
16
|
+
background-color: rgba(19, 20, 24, 0.95) !important; // Match $dark-black with transparency
|
|
17
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
18
|
+
border-bottom: 1px solid rgba(138, 168, 255, 0.15); // Subtle link color accent
|
|
19
|
+
backdrop-filter: blur(12px) saturate(180%);
|
|
20
|
+
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
21
|
+
padding: $spacing-sm $spacing-lg;
|
|
22
|
+
}
|
|
10
23
|
|
|
11
24
|
.nav-link:not(:last-child) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
opacity: .
|
|
25
|
+
color: $dark-white;
|
|
26
|
+
font-weight: $medium-weight;
|
|
27
|
+
opacity: 0.8;
|
|
28
|
+
padding: $spacing-sm $spacing-md;
|
|
29
|
+
border-radius: 6px;
|
|
30
|
+
transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
|
|
15
31
|
}
|
|
32
|
+
|
|
16
33
|
.nav-link {
|
|
17
34
|
&:hover {
|
|
18
|
-
color: $
|
|
35
|
+
color: $link-hover-blue;
|
|
19
36
|
opacity: 1;
|
|
37
|
+
background-color: rgba(138, 168, 255, 0.08);
|
|
38
|
+
transform: translateY(-1px);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:active, &:focus {
|
|
42
|
+
color: $link-active-blue;
|
|
43
|
+
background-color: rgba(138, 168, 255, 0.12);
|
|
20
44
|
}
|
|
21
45
|
}
|
|
22
46
|
|
|
@@ -26,8 +50,33 @@
|
|
|
26
50
|
}
|
|
27
51
|
|
|
28
52
|
.dropdown-menu {
|
|
29
|
-
background-color:
|
|
53
|
+
background-color: rgba(27, 29, 37, 0.98);
|
|
30
54
|
color: $dark-white;
|
|
55
|
+
border: 1px solid rgba(138, 168, 255, 0.15);
|
|
56
|
+
border-radius: 8px;
|
|
57
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
58
|
+
backdrop-filter: blur(12px);
|
|
59
|
+
-webkit-backdrop-filter: blur(12px);
|
|
60
|
+
padding: $spacing-sm;
|
|
61
|
+
margin-top: $spacing-sm;
|
|
62
|
+
|
|
63
|
+
.dropdown-item {
|
|
64
|
+
color: $dark-white;
|
|
65
|
+
padding: $spacing-sm $spacing-md;
|
|
66
|
+
border-radius: 4px;
|
|
67
|
+
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background-color: rgba(138, 168, 255, 0.12);
|
|
71
|
+
color: $link-hover-blue;
|
|
72
|
+
transform: translateX(4px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:active, &:focus {
|
|
76
|
+
background-color: rgba(138, 168, 255, 0.18);
|
|
77
|
+
color: $link-active-blue;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
31
80
|
}
|
|
32
81
|
|
|
33
82
|
|
data/_sass/component/_posts.scss
CHANGED
|
@@ -1,51 +1,77 @@
|
|
|
1
1
|
.posts-wrapper {
|
|
2
2
|
background-color: transparent;
|
|
3
|
-
padding:
|
|
3
|
+
padding: $spacing-sm;
|
|
4
4
|
|
|
5
5
|
.posts-item-note {
|
|
6
6
|
color: $dark-text-link-blue;
|
|
7
|
-
font-size:
|
|
7
|
+
font-size: $xlarge-font-size;
|
|
8
|
+
font-weight: $semibold-weight;
|
|
9
|
+
margin-bottom: $spacing-lg;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.post-item {
|
|
11
13
|
border-top: transparent;
|
|
12
14
|
white-space: normal;
|
|
13
15
|
overflow-wrap: break-word;
|
|
16
|
+
padding: $spacing-md $spacing-sm;
|
|
17
|
+
border-radius: 6px;
|
|
18
|
+
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
|
19
|
+
|
|
20
|
+
&:hover {
|
|
21
|
+
background-color: rgba(138, 168, 255, 0.04);
|
|
22
|
+
transform: translateX(4px);
|
|
23
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
24
|
+
}
|
|
14
25
|
}
|
|
15
26
|
|
|
16
27
|
// last post item won't have a border
|
|
17
28
|
.post-item:not(:last-child) {
|
|
18
|
-
border-bottom: 1px solid
|
|
19
|
-
margin-bottom:
|
|
29
|
+
border-bottom: 1px solid rgba(74, 77, 86, 0.5);
|
|
30
|
+
margin-bottom: $spacing-xs;
|
|
20
31
|
}
|
|
21
32
|
|
|
22
33
|
span.post-item-date {
|
|
23
34
|
display: block;
|
|
24
35
|
color: $dark-white;
|
|
25
|
-
font-weight:
|
|
36
|
+
font-weight: $medium-weight;
|
|
37
|
+
font-size: $medium-font-size;
|
|
26
38
|
white-space: nowrap;
|
|
39
|
+
opacity: 0.8;
|
|
40
|
+
font-family: $code-font-family;
|
|
41
|
+
letter-spacing: 0.5px;
|
|
27
42
|
}
|
|
28
43
|
|
|
29
|
-
.post-item-title
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
44
|
+
.post-item-title {
|
|
45
|
+
a {
|
|
46
|
+
color: $smoke;
|
|
47
|
+
font-weight: $medium-weight;
|
|
48
|
+
font-size: $base-font-size;
|
|
49
|
+
line-height: $heading-line-height;
|
|
50
|
+
transition: color 0.3s ease, text-shadow 0.3s ease;
|
|
51
|
+
text-decoration: none;
|
|
52
|
+
|
|
53
|
+
&:hover {
|
|
54
|
+
color: $link-hover-blue;
|
|
55
|
+
text-shadow: 0 0 8px rgba(164, 192, 255, 0.2);
|
|
56
|
+
}
|
|
33
57
|
|
|
34
|
-
|
|
35
|
-
|
|
58
|
+
&:active, &:focus {
|
|
59
|
+
color: $link-active-blue;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
36
62
|
}
|
|
37
63
|
}
|
|
38
64
|
|
|
39
65
|
|
|
40
66
|
|
|
41
67
|
.col-md-2 {
|
|
42
|
-
flex: 1; //
|
|
68
|
+
flex: 1; // fixed width for date column
|
|
43
69
|
white-space: nowrap;
|
|
44
70
|
text-overflow: ellipsis;
|
|
71
|
+
min-width: 120px;
|
|
45
72
|
}
|
|
46
73
|
|
|
47
74
|
.col-md-8 {
|
|
48
75
|
flex: 5; // allows the title to grow and take up remaining space
|
|
49
|
-
|
|
50
|
-
padding-left: 10px; // adjust as necessary for spacing
|
|
76
|
+
padding-left: $spacing-md;
|
|
51
77
|
}
|
data/_sass/layout/_footer.scss
CHANGED
data/_sass/main.scss
CHANGED
|
@@ -3,13 +3,28 @@
|
|
|
3
3
|
*/
|
|
4
4
|
$homepage-author-bottom-buffer: 3.25rem;
|
|
5
5
|
|
|
6
|
-
//
|
|
7
|
-
$base-font-
|
|
8
|
-
$
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
// Font families
|
|
7
|
+
$base-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
8
|
+
$code-font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
|
|
9
|
+
|
|
10
|
+
// Fonts preferences - Modular scale (1.25 ratio)
|
|
11
|
+
// Base size optimized for comfortable reading on screens
|
|
12
|
+
$base-font-size: 18px;
|
|
13
|
+
$small-font-size: $base-font-size * 0.8; // 14.4px
|
|
14
|
+
$medium-font-size: $base-font-size * 0.9; // 16.2px
|
|
15
|
+
$large-font-size: $base-font-size * 1.25; // 22.5px
|
|
16
|
+
$xlarge-font-size: $base-font-size * 1.563; // 28.13px
|
|
17
|
+
$xxlarge-font-size: $base-font-size * 1.953; // 35.15px
|
|
18
|
+
|
|
19
|
+
// Line heights
|
|
20
|
+
$base-line-height: 1.6;
|
|
21
|
+
$heading-line-height: 1.3;
|
|
11
22
|
|
|
12
23
|
// Font weight
|
|
24
|
+
$light-weight: 300;
|
|
25
|
+
$normal-weight: 400;
|
|
26
|
+
$medium-weight: 500;
|
|
27
|
+
$semibold-weight: 600;
|
|
13
28
|
$bold-weight: 700;
|
|
14
29
|
|
|
15
30
|
|
|
@@ -31,6 +46,10 @@ $darker-text-link-blue: #8ba8ff;
|
|
|
31
46
|
$darker-blue-grey: #3e4a70;
|
|
32
47
|
$dark-text-link-blue-active: #2934ff;
|
|
33
48
|
|
|
49
|
+
// Enhanced link colors for better visual feedback
|
|
50
|
+
$link-hover-blue: #a4c0ff; // Lighter blue for hover
|
|
51
|
+
$link-active-blue: #6b8fef; // Slightly darker for active
|
|
52
|
+
|
|
34
53
|
$dark-black: #131418;
|
|
35
54
|
$dark-white: #eaeaea;
|
|
36
55
|
$darker-white: #a1a0a0;
|
|
@@ -42,11 +61,25 @@ $grey-blue: #3e4a70;
|
|
|
42
61
|
$red-title: #b7002b;
|
|
43
62
|
$dark-gray: #565656;
|
|
44
63
|
|
|
64
|
+
// Accent colors for UI elements
|
|
65
|
+
$accent-blue: #5b9cff;
|
|
66
|
+
$accent-purple: #9d7ce3;
|
|
67
|
+
$accent-green: #6fbf73;
|
|
68
|
+
|
|
45
69
|
// Width of the content area
|
|
46
70
|
$wide-size: 890px; // this only impacts nav bar
|
|
47
71
|
$narrow-size: 720px;
|
|
48
72
|
|
|
49
|
-
//
|
|
73
|
+
// Spacing scale (following 8px grid with modular increments)
|
|
74
|
+
$spacing-xs: 4px;
|
|
75
|
+
$spacing-sm: 8px;
|
|
76
|
+
$spacing-md: 16px;
|
|
77
|
+
$spacing-lg: 24px;
|
|
78
|
+
$spacing-xl: 32px;
|
|
79
|
+
$spacing-xxl: 48px;
|
|
80
|
+
$spacing-xxxl: 64px;
|
|
81
|
+
|
|
82
|
+
// Legacy spacing (keep for compatibility)
|
|
50
83
|
$spacing-full: 30px;
|
|
51
84
|
$spacing-half: 15px;
|
|
52
85
|
|
data/assets/css/style.scss
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
---
|
|
3
3
|
|
|
4
|
+
// Import fonts from Google Fonts
|
|
5
|
+
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
|
|
6
|
+
|
|
4
7
|
@import "main";
|
data/assets/js/navbar.js
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Navbar scroll behavior
|
|
3
|
+
* Adds sticky styling to navbar when user scrolls down
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
(function() {
|
|
7
|
+
'use strict';
|
|
8
|
+
|
|
9
|
+
// Configuration
|
|
10
|
+
const SCROLL_THRESHOLD = 50; // pixels before navbar changes
|
|
11
|
+
const NAVBAR_CLASS_SCROLLED = 'navbar-scrolled';
|
|
12
|
+
|
|
13
|
+
// Get navbar element
|
|
14
|
+
const navbar = document.querySelector('.navbar');
|
|
15
|
+
|
|
16
|
+
if (!navbar) {
|
|
17
|
+
return; // Exit if no navbar found
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Track scroll position
|
|
21
|
+
let lastScroll = 0;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Handle scroll events
|
|
25
|
+
*/
|
|
26
|
+
function handleScroll() {
|
|
27
|
+
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
|
|
28
|
+
|
|
29
|
+
if (currentScroll > SCROLL_THRESHOLD) {
|
|
30
|
+
// User has scrolled down - add solid background
|
|
31
|
+
navbar.classList.add(NAVBAR_CLASS_SCROLLED);
|
|
32
|
+
} else {
|
|
33
|
+
// At top of page - use transparent background
|
|
34
|
+
navbar.classList.remove(NAVBAR_CLASS_SCROLLED);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
lastScroll = currentScroll;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Throttle scroll events for better performance
|
|
41
|
+
let ticking = false;
|
|
42
|
+
|
|
43
|
+
window.addEventListener('scroll', function() {
|
|
44
|
+
if (!ticking) {
|
|
45
|
+
window.requestAnimationFrame(function() {
|
|
46
|
+
handleScroll();
|
|
47
|
+
ticking = false;
|
|
48
|
+
});
|
|
49
|
+
ticking = true;
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// Check scroll position on load
|
|
54
|
+
handleScroll();
|
|
55
|
+
})();
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jscom_ice
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- John Sosoka
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2025-10-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -16,56 +16,56 @@ dependencies:
|
|
|
16
16
|
requirements:
|
|
17
17
|
- - "~>"
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
|
-
version: 4.3
|
|
19
|
+
version: '4.3'
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
24
|
- - "~>"
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
|
-
version: 4.3
|
|
26
|
+
version: '4.3'
|
|
27
27
|
- !ruby/object:Gem::Dependency
|
|
28
28
|
name: jekyll-feed
|
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
|
30
30
|
requirements:
|
|
31
31
|
- - "~>"
|
|
32
32
|
- !ruby/object:Gem::Version
|
|
33
|
-
version: '0.
|
|
33
|
+
version: '0.17'
|
|
34
34
|
type: :runtime
|
|
35
35
|
prerelease: false
|
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
|
37
37
|
requirements:
|
|
38
38
|
- - "~>"
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
|
-
version: '0.
|
|
40
|
+
version: '0.17'
|
|
41
41
|
- !ruby/object:Gem::Dependency
|
|
42
42
|
name: jekyll-sitemap
|
|
43
43
|
requirement: !ruby/object:Gem::Requirement
|
|
44
44
|
requirements:
|
|
45
45
|
- - "~>"
|
|
46
46
|
- !ruby/object:Gem::Version
|
|
47
|
-
version: 1.4
|
|
47
|
+
version: '1.4'
|
|
48
48
|
type: :runtime
|
|
49
49
|
prerelease: false
|
|
50
50
|
version_requirements: !ruby/object:Gem::Requirement
|
|
51
51
|
requirements:
|
|
52
52
|
- - "~>"
|
|
53
53
|
- !ruby/object:Gem::Version
|
|
54
|
-
version: 1.4
|
|
54
|
+
version: '1.4'
|
|
55
55
|
- !ruby/object:Gem::Dependency
|
|
56
56
|
name: jekyll-compose
|
|
57
57
|
requirement: !ruby/object:Gem::Requirement
|
|
58
58
|
requirements:
|
|
59
59
|
- - "~>"
|
|
60
60
|
- !ruby/object:Gem::Version
|
|
61
|
-
version: 0.12
|
|
61
|
+
version: '0.12'
|
|
62
62
|
type: :runtime
|
|
63
63
|
prerelease: false
|
|
64
64
|
version_requirements: !ruby/object:Gem::Requirement
|
|
65
65
|
requirements:
|
|
66
66
|
- - "~>"
|
|
67
67
|
- !ruby/object:Gem::Version
|
|
68
|
-
version: 0.12
|
|
68
|
+
version: '0.12'
|
|
69
69
|
description: Simple Jekyll theme created for https://johnsosoka.com
|
|
70
70
|
email:
|
|
71
71
|
- code@johnsosoka.com
|
|
@@ -120,6 +120,7 @@ files:
|
|
|
120
120
|
- assets/js/bootstrap.min.js
|
|
121
121
|
- assets/js/bootstrap.min.js.map
|
|
122
122
|
- assets/js/jquery-3.7.0.min.js
|
|
123
|
+
- assets/js/navbar.js
|
|
123
124
|
- assets/js/popper.min.js
|
|
124
125
|
homepage: https://github.com/johnsosoka/jscom-ice
|
|
125
126
|
licenses:
|
|
@@ -140,7 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
140
141
|
- !ruby/object:Gem::Version
|
|
141
142
|
version: '0'
|
|
142
143
|
requirements: []
|
|
143
|
-
rubygems_version: 3.
|
|
144
|
+
rubygems_version: 3.4.19
|
|
144
145
|
signing_key:
|
|
145
146
|
specification_version: 4
|
|
146
147
|
summary: Simple Dark Jekyll Theme
|