Skip to content

Commit 5c968d9

Browse files
PkLavcPkLavc
committed
readmes add
1 parent 12ed2af commit 5c968d9

16 files changed

Lines changed: 3861 additions & 0 deletions

‎css/projects.css‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,218 @@ body {
8686
line-height: 1.6;
8787
margin-bottom: 15px;
8888
}
89+
90+
.project-readmore-toggle-wrap {
91+
display: flex;
92+
justify-content: flex-end;
93+
margin-bottom: 14px;
94+
}
95+
96+
.project-readmore-toggle {
97+
border: 1px solid var(--clr-primary);
98+
background: transparent;
99+
color: var(--clr-primary);
100+
font-size: 0.78rem;
101+
font-weight: 600;
102+
letter-spacing: 0.03em;
103+
padding: 6px 12px;
104+
border-radius: 999px;
105+
cursor: pointer;
106+
transition: all 0.25s ease;
107+
}
108+
109+
.project-readmore-toggle:hover,
110+
.project-readmore-toggle:focus-visible {
111+
background: var(--clr-primary);
112+
color: #050505;
113+
outline: none;
114+
}
115+
116+
.project-readmore-toggle:disabled {
117+
opacity: 0.7;
118+
cursor: wait;
119+
}
120+
121+
.readme-overlay {
122+
position: fixed;
123+
inset: 0;
124+
z-index: 9999;
125+
display: none;
126+
padding: 2.2vh 2vw;
127+
background: rgba(0, 0, 0, 0.62);
128+
backdrop-filter: blur(2px);
129+
}
130+
131+
.readme-overlay.is-open {
132+
display: block;
133+
}
134+
135+
.readme-modal {
136+
position: relative;
137+
width: 100%;
138+
height: 100%;
139+
background: #0d0d0d;
140+
border: 1px solid rgba(255, 255, 255, 0.16);
141+
border-radius: 12px;
142+
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
143+
overflow: hidden;
144+
display: flex;
145+
flex-direction: column;
146+
}
147+
148+
.readme-modal-close {
149+
position: absolute;
150+
top: 10px;
151+
right: 12px;
152+
width: 34px;
153+
height: 34px;
154+
border: 1px solid rgba(255, 255, 255, 0.2);
155+
border-radius: 50%;
156+
background: #151515;
157+
color: #f2f2f2;
158+
cursor: pointer;
159+
font-weight: 700;
160+
font-size: 0.82rem;
161+
line-height: 1;
162+
}
163+
164+
.readme-modal-close:hover,
165+
.readme-modal-close:focus-visible {
166+
background: var(--clr-primary);
167+
color: #070707;
168+
outline: none;
169+
}
170+
171+
.readme-modal-header {
172+
display: flex;
173+
justify-content: space-between;
174+
align-items: center;
175+
gap: 12px;
176+
padding: 16px 54px 14px 18px;
177+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
178+
background: #111111;
179+
}
180+
181+
.readme-modal-title {
182+
margin: 0;
183+
color: #f5f5f5;
184+
font-size: 1.02rem;
185+
line-height: 1.3;
186+
}
187+
188+
.readme-modal-link {
189+
color: var(--clr-primary);
190+
text-decoration: none;
191+
font-size: 0.9rem;
192+
white-space: nowrap;
193+
}
194+
195+
.readme-modal-link:hover {
196+
color: #ffffff;
197+
}
198+
199+
.readme-modal-body {
200+
flex: 1;
201+
overflow: auto;
202+
padding: 18px;
203+
line-height: 1.6;
204+
}
205+
206+
.readme-modal-body.markdown-body {
207+
background: #0d1117;
208+
color: #c9d1d9;
209+
}
210+
211+
.readme-modal-body h1,
212+
.readme-modal-body h2,
213+
.readme-modal-body h3,
214+
.readme-modal-body h4,
215+
.readme-modal-body h5,
216+
.readme-modal-body h6 {
217+
margin: 1.25em 0 0.6em;
218+
line-height: 1.3;
219+
}
220+
221+
.readme-modal-body p,
222+
.readme-modal-body li {
223+
color: inherit;
224+
}
225+
226+
.readme-modal-body hr {
227+
border: none;
228+
border-top: 1px solid rgba(255, 255, 255, 0.2);
229+
margin: 1.2em 0;
230+
}
231+
232+
.readme-modal-body code {
233+
font-family: "Courier New", monospace;
234+
background: #191919;
235+
border: 1px solid rgba(255, 255, 255, 0.08);
236+
border-radius: 4px;
237+
padding: 0.12em 0.35em;
238+
font-size: 0.9em;
239+
}
240+
241+
.readme-modal-body pre {
242+
background: #0a0a0a;
243+
border: 1px solid rgba(255, 255, 255, 0.1);
244+
border-radius: 8px;
245+
padding: 12px;
246+
overflow: auto;
247+
}
248+
249+
.readme-modal-body pre code {
250+
background: transparent;
251+
border: 0;
252+
padding: 0;
253+
}
254+
255+
.readme-modal-body table {
256+
width: 100%;
257+
border-collapse: collapse;
258+
margin: 14px 0;
259+
}
260+
261+
.readme-modal-body table th,
262+
.readme-modal-body table td {
263+
border: 1px solid rgba(255, 255, 255, 0.12);
264+
padding: 8px;
265+
text-align: left;
266+
}
267+
268+
.readme-modal-body blockquote {
269+
margin: 1em 0;
270+
padding: 0.5em 1em;
271+
border-left: 3px solid var(--clr-primary);
272+
background: rgba(255, 255, 255, 0.03);
273+
}
274+
275+
.readme-modal-body img {
276+
max-width: 100%;
277+
height: auto;
278+
}
279+
280+
.readme-modal-body .contains-task-list {
281+
list-style: none;
282+
padding-left: 0;
283+
}
284+
285+
.readme-modal-body .task-list-item {
286+
list-style: none;
287+
}
288+
289+
.readme-modal-body .task-list-item input[type="checkbox"] {
290+
margin-right: 8px;
291+
}
292+
293+
.readme-modal-body svg {
294+
max-width: 100%;
295+
height: auto;
296+
}
297+
298+
body.readme-open {
299+
overflow: hidden;
300+
}
89301
.project-features {
90302
display: flex;
91303
flex-wrap: wrap;
@@ -137,6 +349,40 @@ body {
137349

138350
/* CORREÇÃO DO BOTÃO NO MOBILE */
139351
@media (max-width: 768px) {
352+
.project-readmore-toggle-wrap {
353+
margin-bottom: 10px;
354+
}
355+
356+
.project-readmore-toggle {
357+
width: 100%;
358+
border-radius: 6px;
359+
font-size: 0.8rem;
360+
padding: 8px 12px;
361+
}
362+
363+
.readme-overlay {
364+
padding: 1.4vh 1.8vw;
365+
}
366+
367+
.readme-modal {
368+
border-radius: 10px;
369+
}
370+
371+
.readme-modal-header {
372+
flex-direction: column;
373+
align-items: flex-start;
374+
padding: 14px 46px 12px 14px;
375+
}
376+
377+
.readme-modal-title {
378+
font-size: 0.95rem;
379+
}
380+
381+
.readme-modal-body {
382+
padding: 12px;
383+
font-size: 0.9rem;
384+
}
385+
140386
.project-actions {
141387
flex-direction: column;
142388
gap: 8px;

0 commit comments

Comments
 (0)