dev vouch dev on at. thats about it
atvouch.dev
more changes to styling and copy
+56
-32
+27
-8
frontend/src/App.css
+27
-8
frontend/src/App.css
···
9
9
--text: #e8e4de;
10
10
--text-dim: #8a867e;
11
11
--text-faint: #5a5750;
12
-
--accent: #00ff88;
13
-
--accent-dim: #00cc6d;
14
-
--accent-bg: #00ff8808;
12
+
--accent: #ff4f6d;
13
+
--accent-dim: #cc3f57;
14
+
--accent-bg: #ff4f6d08;
15
15
--error: #ff5f56;
16
16
--error-bg: #ff5f5608;
17
17
--serif: 'Instrument Serif', Georgia, serif;
···
92
92
border-right: 1px solid var(--border);
93
93
}
94
94
95
+
.intro-right {
96
+
flex: 1;
97
+
display: flex;
98
+
flex-direction: column;
99
+
gap: 1rem;
100
+
padding-left: 2rem;
101
+
}
102
+
95
103
.instructions {
96
104
color: var(--text);
97
-
font-size: 13px;
105
+
font-size: 18px;
98
106
text-align: right;
99
107
line-height: 1.7;
100
-
flex: 1;
101
-
padding-left: 2rem;
102
108
}
103
109
104
110
.instructions p {
105
111
margin-bottom: 0.25rem;
106
112
}
107
113
114
+
.notes {
115
+
color: var(--text-dim);
116
+
font-size: 12px;
117
+
text-align: right;
118
+
line-height: 1.7;
119
+
border-top: 1px solid var(--border);
120
+
padding-top: 1rem;
121
+
}
122
+
123
+
.notes p {
124
+
margin-bottom: 0.25rem;
125
+
}
126
+
108
127
a {
109
-
color: #00e5ff;
128
+
color: #ff6b8a;
110
129
text-decoration: none;
111
130
}
112
131
···
115
134
}
116
135
117
136
a:visited {
118
-
color: #00e5ff;
137
+
color: #ff6b8a;
119
138
}
120
139
121
140
/* ── topbar ── */
+29
-24
frontend/src/App.tsx
+29
-24
frontend/src/App.tsx
···
59
59
<h1>atvouch</h1>
60
60
<div className="intro-block">
61
61
<p className="intro">
62
-
atvouch is a proof of concept atproto app to create intentional
63
-
vouches between developers to endorse each other's skill.
62
+
atvouch is a proof of concept atproto app to let developers vouch for
63
+
each others' skill.
64
64
<br />
65
65
<br />
66
-
developers are then able to see if there's a trust chain of vouches
67
-
between themselves and another developer. useful for pull requests
66
+
developers can see whether there is a chain of trust between
67
+
themselves and another developer. this may help you review PRs.
68
68
</p>
69
-
<div className="instructions">
70
-
<p>instructions:</p>
71
-
<p>
72
-
1. treat a vouch as an actual endorsement of someone's dev skills.
73
-
</p>
74
-
<p>
75
-
2. currently this uses{" "}
76
-
<a
77
-
href="https://www.microcosm.blue/"
78
-
target="_blank"
79
-
rel="noopener noreferrer"
80
-
>
81
-
microcosm
82
-
</a>{" "}
83
-
to resolve the vouch graph, but this may change to a full separate
84
-
service if i find this useful.
85
-
</p>
86
-
<p>
87
-
3. its just one lexicon. there isn't much to this at the moment.
88
-
</p>
69
+
<div className="intro-right">
70
+
<div className="instructions">
71
+
<p>instructions:</p>
72
+
<p>
73
+
1. treat a vouch as an actual endorsement of someone's dev skills.
74
+
</p>
75
+
</div>
76
+
{/* <div className="notes">
77
+
<p>notes:</p>
78
+
<p>
79
+
currently this uses{" "}
80
+
<a
81
+
href="https://www.microcosm.blue/"
82
+
target="_blank"
83
+
rel="noopener noreferrer"
84
+
>
85
+
microcosm
86
+
</a>{" "}
87
+
to resolve the vouch graph, but this may change to a full separate
88
+
service if i find this useful.
89
+
</p>
90
+
<p>
91
+
its just one lexicon. there isn't much to this at the moment.
92
+
</p>
93
+
</div> */}
89
94
</div>
90
95
</div>
91
96
{error && <div className="error">{error}</div>}