bwc9876.dev
Files for my website
bwc9876.dev
Blog style changes
+5
astro.config.mjs
+5
astro.config.mjs
-2
src/components/blog/CowSay.astro
-2
src/components/blog/CowSay.astro
+37
-27
src/content/posts/wip_screen_captures.md
+37
-27
src/content/posts/wip_screen_captures.md
···
34
34
To install grimblast, all I have to do is add it to my `environment.systemPackages`:
35
35
36
36
```nix
37
-
environment.systemPackages = with pkgs; [
38
-
# ...
39
-
grimblast
40
-
libnotify # For notifications
41
-
xdg-utils # For opening files
42
-
# ...
43
-
];
37
+
{
38
+
environment.systemPackages = with pkgs; [
39
+
# ...
40
+
grimblast
41
+
libnotify # For notifications
42
+
xdg-utils # For opening files
43
+
# ...
44
+
];
45
+
}
44
46
```
45
47
46
48
Grimblast will automatically save screenshots to `XDG_SCREENSHOTS_DIR`, I manually set this in my
47
49
_home manager_ config with:
48
50
49
51
```nix
50
-
xdg.userDirs.extraConfig.XDG_SCREENSHOTS_DIR = "${config.home.homeDirectory}/Pictures/Screenshots";
52
+
{
53
+
xdg.userDirs.extraConfig.XDG_SCREENSHOTS_DIR = "${config.home.homeDirectory}/Pictures/Screenshots";
54
+
}
51
55
```
52
56
53
57
Grimblast will name the screenshots with the current date and time, which works for me.
···
141
145
In home manager I simply have to add these strings to my Hyprland binds
142
146
143
147
```nix
144
-
wayland.windowManager.hyprland.settings.bind = [
145
-
# ...
146
-
",Print,exec,nu ${../res/screenshot.nu}"
147
-
"SUPER SHIFT,S,exec,nu ${../res/screenshot.nu}"
148
-
# ...
149
-
];
148
+
{
149
+
wayland.windowManager.hyprland.settings.bind = [
150
+
# ...
151
+
",Print,exec,nu ${../res/screenshot.nu}"
152
+
"SUPER SHIFT,S,exec,nu ${../res/screenshot.nu}"
153
+
# ...
154
+
];
155
+
}
150
156
```
151
157
152
158
Now by switching to my new config (and making sure to stage `screenshot.nu` of course), I can take
···
162
168
For the actual screen recording I'll be using [wf-recorder](https://github.com/ammen99/wf-recorder).
163
169
164
170
```nix
165
-
environment.systemPackages = with pkgs; [
166
-
# ...
167
-
wf-recorder
168
-
libnotify # For notifications
169
-
xdg-utils # For opening files
170
-
slurp # Will explain this later
171
-
# ...
172
-
];
171
+
{
172
+
environment.systemPackages = with pkgs; [
173
+
# ...
174
+
wf-recorder
175
+
libnotify # For notifications
176
+
xdg-utils # For opening files
177
+
slurp # Will explain this later
178
+
# ...
179
+
];
180
+
}
173
181
```
174
182
175
183
First and foremost location, I chose to use `~/Videos/Captures` for my recordings. I didn't set an
···
267
275
notification.
268
276
269
277
```nix
270
-
wayland.windowManager.hyprland.settings.bindr = [
271
-
# ...
272
-
"SUPER SHIFT,R,exec,pkill wf-recorder --signal SIGINT || nu ${../res/screenrec.nu}"
273
-
# ...
274
-
];
278
+
{
279
+
wayland.windowManager.hyprland.settings.bindr = [
280
+
# ...
281
+
"SUPER SHIFT,R,exec,pkill wf-recorder --signal SIGINT || nu ${../res/screenrec.nu}"
282
+
# ...
283
+
];
284
+
}
275
285
```
276
286
277
287
`pkill` here will exit with code `1` if it doesn't find any processes to kill, so the `||` will run
+7
-12
src/pages/blog/[...slug].astro
+7
-12
src/pages/blog/[...slug].astro
···
16
16
17
17
<Layout title={entry.data.title} description={entry.data.summary}>
18
18
<h1>{entry.data.title}</h1>
19
-
<CowSay text={entry.data.cowsay} />
20
19
<div class="wrapper">
21
20
<div>
21
+
<CowSay text={entry.data.cowsay} />
22
22
<Content />
23
23
</div>
24
24
<div class="toc">
···
72
72
</style>
73
73
74
74
<style is:global>
75
-
p {
76
-
overflow: hidden;
77
-
}
78
-
79
75
pre {
80
76
padding: var(--small);
81
77
border-radius: 5px;
82
-
background-color: #24292e;
83
78
box-sizing: border-box;
79
+
background-color: var(--background-950) !important;
80
+
box-shadow: inset color(from var(--background-100) srgb r g b / 0.2) 0 0 6px;
81
+
overflow-x: auto;
82
+
width: 100%;
84
83
}
85
84
86
-
main img {
85
+
img {
87
86
box-sizing: border-box;
88
87
border-radius: 5px;
89
88
max-width: 100%;
90
89
height: auto;
91
-
}
92
-
93
-
pre {
94
-
overflow-x: auto;
95
-
width: 100%;
90
+
box-shadow: color(from var(--accent) srgb r g b / 0.2) 0 0 6px;
96
91
}
97
92
</style>
+6
-2
src/pages/blog/index.astro
+6
-2
src/pages/blog/index.astro
···
15
15
---
16
16
17
17
<Layout title="The Cowsay - Ben C's Blog">
18
-
<h1>The Cowsay - Ben C's Blog</h1>
19
-
<p>Here you'll find my blog posts, most recent first.</p>
18
+
<h1 class="gradient-text">The Cowsay - Ben C's Blog</h1>
20
19
{
21
20
blogEntries.map((p) => (
22
21
<article>
···
35
34
<style>
36
35
article {
37
36
margin: var(--4) 0;
37
+
border-top: 1px solid var(--text);
38
+
}
39
+
40
+
article:first-of-type {
41
+
border-top: none;
38
42
}
39
43
40
44
article h2 {
+75
-74
src/pages/index.astro
+75
-74
src/pages/index.astro
···
22
22
</p>
23
23
<div class="ctas">
24
24
<a href="/projects" role="button" class="secondary">View My Projects</a>
25
+
<a href="/blog" role="button" class="primary">Read My Blog</a>
25
26
</div>
26
27
</div>
27
28
<div class="hero-image">
···
48
49
<div class="view-more">
49
50
<a href="/projects" role="button" class="secondary">View All Projects</a>
50
51
</div>
51
-
</Layout>
52
52
53
-
<style>
54
-
.hero {
55
-
display: flex;
56
-
gap: var(--2);
57
-
justify-content: space-between;
58
-
align-items: center;
59
-
}
53
+
<style>
54
+
.hero {
55
+
display: flex;
56
+
gap: var(--2);
57
+
justify-content: space-between;
58
+
align-items: center;
59
+
}
60
60
61
-
.hero .ctas {
62
-
display: flex;
63
-
flex-wrap: wrap;
64
-
gap: var(--1);
65
-
margin: var(--5) 0;
66
-
font-weight: bold;
67
-
}
61
+
.hero .ctas {
62
+
display: flex;
63
+
flex-wrap: wrap;
64
+
gap: var(--1);
65
+
margin: var(--5) 0;
66
+
font-weight: bold;
67
+
}
68
68
69
-
@keyframes glow {
70
-
0% {
71
-
box-shadow: 0 0 0 0 var(--primary);
72
-
}
73
-
100% {
74
-
box-shadow: 0 0 450px 5px var(--primary);
69
+
@keyframes glow {
70
+
0% {
71
+
box-shadow: 0 0 0 0 var(--primary);
72
+
}
73
+
100% {
74
+
box-shadow: 0 0 450px 5px var(--primary);
75
+
}
75
76
}
76
-
}
77
77
78
-
.hero-image {
79
-
--anim-props: 900ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
80
-
display: none;
81
-
align-items: center;
82
-
position: relative;
83
-
animation: glow var(--anim-props);
84
-
border-radius: 50%;
85
-
box-sizing: border-box;
86
-
margin: var(--10);
87
-
}
88
-
89
-
@media (width >= 1200px) {
90
78
.hero-image {
91
-
display: flex;
79
+
--anim-props: 900ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
80
+
display: none;
81
+
align-items: center;
82
+
position: relative;
83
+
animation: glow var(--anim-props);
84
+
border-radius: 50%;
85
+
box-sizing: border-box;
86
+
margin: var(--10);
92
87
}
93
-
}
94
88
95
-
.hero-image img {
96
-
width: var(--11);
97
-
height: var(--11);
98
-
position: relative;
99
-
z-index: 100;
100
-
clip-path: circle();
101
-
}
89
+
@media (width >= 1200px) {
90
+
.hero-image {
91
+
display: flex;
92
+
}
93
+
}
102
94
103
-
@keyframes pop {
104
-
from {
105
-
transform: scale(0);
95
+
.hero-image img {
96
+
width: var(--11);
97
+
height: var(--11);
98
+
position: relative;
99
+
z-index: 100;
100
+
clip-path: circle();
106
101
}
107
-
to {
108
-
transform: scale(1.8);
102
+
103
+
@keyframes pop {
104
+
from {
105
+
transform: scale(0);
106
+
}
107
+
to {
108
+
transform: scale(1.8);
109
+
}
109
110
}
110
-
}
111
111
112
-
.hero-image:after {
113
-
animation: pop var(--anim-props);
114
-
content: "";
115
-
mask: url("/pfp-lines.svg") no-repeat 50% 50%;
116
-
-webkit-mask: url("/pfp-lines.svg") no-repeat 50% 50%;
117
-
-webkit-mask-size: cover;
118
-
mask-size: cover;
119
-
display: inline-block;
120
-
position: absolute;
121
-
inset: 0;
122
-
width: 100%;
123
-
background-image: radial-gradient(circle at center, var(--primary) 0, var(--accent) 100%);
124
-
}
112
+
.hero-image:after {
113
+
animation: pop var(--anim-props);
114
+
content: "";
115
+
mask: url("/pfp-lines.svg") no-repeat 50% 50%;
116
+
-webkit-mask: url("/pfp-lines.svg") no-repeat 50% 50%;
117
+
-webkit-mask-size: cover;
118
+
mask-size: cover;
119
+
display: inline-block;
120
+
position: absolute;
121
+
inset: 0;
122
+
width: 100%;
123
+
background-image: radial-gradient(circle at center, var(--primary) 0, var(--accent) 100%);
124
+
}
125
125
126
-
.view-more {
127
-
display: flex;
128
-
justify-content: center;
129
-
width: 100%;
130
-
margin-top: var(--4);
131
-
}
126
+
.view-more {
127
+
display: flex;
128
+
justify-content: center;
129
+
width: 100%;
130
+
margin-top: var(--4);
131
+
}
132
132
133
-
.view-more a {
134
-
width: 100%;
135
-
text-align: center;
136
-
font-weight: bold;
137
-
}
138
-
</style>
133
+
.view-more a {
134
+
width: 100%;
135
+
text-align: center;
136
+
font-weight: bold;
137
+
}
138
+
</style>
139
+
</Layout>