jscom_ice 0.0.8 → 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/_sass/base/_base.scss +58 -9
- 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 +50 -13
- data/_sass/component/_posts.scss +40 -15
- data/_sass/main.scss +39 -6
- data/assets/css/style.scss +3 -0
- metadata +9 -9
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/_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;
|
|
@@ -119,19 +124,50 @@ body {
|
|
|
119
124
|
background-color: $dark-black;
|
|
120
125
|
|
|
121
126
|
|
|
122
|
-
// Universal Headers
|
|
127
|
+
// Universal Headers with improved hierarchy
|
|
123
128
|
h1, h2, h3, h4, h5, h6 {
|
|
124
129
|
color: $smoke;
|
|
125
|
-
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;
|
|
126
147
|
}
|
|
127
148
|
|
|
128
149
|
|
|
129
150
|
/** for `code tags` **/
|
|
130
151
|
code {
|
|
152
|
+
font-family: $code-font-family;
|
|
153
|
+
font-size: $medium-font-size;
|
|
131
154
|
color: #2881d3;
|
|
132
155
|
// code highlight color
|
|
133
156
|
&.highlighter-rouge {
|
|
134
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;
|
|
135
171
|
}
|
|
136
172
|
}
|
|
137
173
|
|
|
@@ -155,15 +191,28 @@ body {
|
|
|
155
191
|
}
|
|
156
192
|
|
|
157
193
|
a {
|
|
158
|
-
// Link Colors
|
|
194
|
+
// Link Colors with smooth transitions
|
|
159
195
|
color: $darker-text-link-blue;
|
|
160
|
-
|
|
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
|
+
}
|
|
161
204
|
|
|
162
|
-
&:hover,
|
|
163
205
|
&:active,
|
|
164
206
|
&:focus {
|
|
165
|
-
// On
|
|
166
|
-
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;
|
|
167
216
|
}
|
|
168
217
|
}
|
|
169
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,4 +1,4 @@
|
|
|
1
|
-
// Navbar
|
|
1
|
+
// Navbar with enhanced styling
|
|
2
2
|
.navbar {
|
|
3
3
|
border-color: $dark-light;
|
|
4
4
|
// position: relative; // Removed - let Bootstrap's fixed-top handle positioning
|
|
@@ -6,29 +6,41 @@
|
|
|
6
6
|
margin-right: auto;
|
|
7
7
|
margin-left: auto;
|
|
8
8
|
border-bottom: 1px solid $dark-smoke;
|
|
9
|
+
padding: $spacing-md $spacing-lg;
|
|
9
10
|
|
|
10
11
|
// Smooth transitions for all state changes
|
|
11
|
-
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease, padding 0.3s ease;
|
|
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;
|
|
12
13
|
|
|
13
14
|
// Scrolled state - solid background with shadow
|
|
14
15
|
&.navbar-scrolled {
|
|
15
|
-
background-color: rgba(
|
|
16
|
-
box-shadow: 0 4px
|
|
17
|
-
border-bottom: 1px solid rgba(
|
|
18
|
-
backdrop-filter: blur(
|
|
19
|
-
-webkit-backdrop-filter: blur(
|
|
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;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
.nav-link:not(:last-child) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
opacity: .
|
|
26
|
-
|
|
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;
|
|
27
31
|
}
|
|
32
|
+
|
|
28
33
|
.nav-link {
|
|
29
34
|
&:hover {
|
|
30
|
-
color: $
|
|
35
|
+
color: $link-hover-blue;
|
|
31
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);
|
|
32
44
|
}
|
|
33
45
|
}
|
|
34
46
|
|
|
@@ -38,8 +50,33 @@
|
|
|
38
50
|
}
|
|
39
51
|
|
|
40
52
|
.dropdown-menu {
|
|
41
|
-
background-color:
|
|
53
|
+
background-color: rgba(27, 29, 37, 0.98);
|
|
42
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
|
+
}
|
|
43
80
|
}
|
|
44
81
|
|
|
45
82
|
|
data/_sass/component/_posts.scss
CHANGED
|
@@ -1,52 +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
|
-
|
|
33
|
-
|
|
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
|
+
}
|
|
34
57
|
|
|
35
|
-
|
|
36
|
-
|
|
58
|
+
&:active, &:focus {
|
|
59
|
+
color: $link-active-blue;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
37
62
|
}
|
|
38
63
|
}
|
|
39
64
|
|
|
40
65
|
|
|
41
66
|
|
|
42
67
|
.col-md-2 {
|
|
43
|
-
flex: 1; //
|
|
68
|
+
flex: 1; // fixed width for date column
|
|
44
69
|
white-space: nowrap;
|
|
45
70
|
text-overflow: ellipsis;
|
|
71
|
+
min-width: 120px;
|
|
46
72
|
}
|
|
47
73
|
|
|
48
74
|
.col-md-8 {
|
|
49
75
|
flex: 5; // allows the title to grow and take up remaining space
|
|
50
|
-
|
|
51
|
-
padding-left: 10px; // adjust as necessary for spacing
|
|
76
|
+
padding-left: $spacing-md;
|
|
52
77
|
}
|
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";
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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
|
|
@@ -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
|