Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8e24cc4

Browse files
Merge branch 'dostonnabotov:main' into refacto/css/pulse-animation
2 parents 343a1a1 + f9fa07b commit 8e24cc4

File tree

6 files changed

+70
-33
lines changed

6 files changed

+70
-33
lines changed

‎public/icons/bash.svg‎

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎snippets/bash/icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading[フレーム]
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: System Resource Monitor
3+
description: Monitors system resources (CPU, RAM, disk, users)
4+
author: sponkurtus2
5+
tags: file,system
6+
---
7+
8+
```bash
9+
system_resources () {
10+
echo "CPU Load: $(top -bn1 | grep "Cpu(s)" | awk '{print 2ドル}')%"
11+
echo "Memory Used: $(free -m | awk 'NR==2{printf "%.2f%%", 3ドル*100/2ドル}')"
12+
echo "Disk Used: $(df -h / | awk 'NR==2{print 5ドル}')"
13+
echo "Active Users: $(who | wc -l)"
14+
}
15+
16+
system_resources "$@"
17+
18+
// Usage:
19+
chmod a+x system-resource-monitor.sh // First make it executable for all the users
20+
21+
./system-resource-monitor.sh // It will print the following system resources (CPU, RAM, disk, and active users)
22+
```

‎src/components/CodePreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
4040
language={language}
4141
style={theme === "dark" ? oneDark : oneLight}
4242
wrapLines={true}
43-
customStyle={{ margin: "0", maxHeight: "20rem" }}
43+
customStyle={{ margin: "0", maxHeight: "32rem" }}
4444
>
4545
{code}
4646
</SyntaxHighlighter>

‎src/components/SnippetModal.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -61,29 +61,31 @@ const SnippetModal: React.FC<Props> = ({
6161
<CloseIcon />
6262
</Button>
6363
</div>
64-
<CodePreview language={slugify(language)} code={snippet.code} />
65-
<p>
66-
<b>Description: </b>
67-
{snippet.description}
68-
</p>
69-
<p>
70-
Contributed by{" "}
71-
<a
72-
href={`https://github.com/${snippet.author}`}
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
className="styled-link"
76-
>
77-
@{snippet.author}
78-
</a>
79-
</p>
80-
<ul role="list" className="modal__tags">
81-
{snippet.tags.map((tag) => (
82-
<li key={tag} className="modal__tag">
83-
{tag}
84-
</li>
85-
))}
86-
</ul>
64+
<div className="modal__body | flow">
65+
<CodePreview language={slugify(language)} code={snippet.code} />
66+
<p>
67+
<b>Description: </b>
68+
{snippet.description}
69+
</p>
70+
<p>
71+
Contributed by{" "}
72+
<a
73+
href={`https://github.com/${snippet.author}`}
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
className="styled-link"
77+
>
78+
@{snippet.author}
79+
</a>
80+
</p>
81+
<ul role="list" className="modal__tags">
82+
{snippet.tags.map((tag) => (
83+
<li key={tag} className="modal__tag">
84+
{tag}
85+
</li>
86+
))}
87+
</ul>
88+
</div>
8789
</motion.div>
8890
</motion.div>,
8991
modalRoot

‎src/styles/main.css‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -550,22 +550,19 @@ abbr {
550550
border-radius: var(--br-lg);
551551
padding: 0.75em;
552552
text-align: start;
553-
filter: grayscale(100%);
554553

555554
&:is(:hover, :focus-visible) {
556-
outline: 3px solid var(--clr-border-primary);
557-
filter: grayscale(0);
555+
outline: 2px solid var(--clr-border-primary);
558556
}
559557
}
560558

561559
.snippet__preview {
562560
width: 100%;
563561
overflow: hidden;
564-
aspect-ratio: 10 / 3;
562+
aspect-ratio: 9 / 3;
565563
background-color: var(--clr-bg-secondary);
566564
/* background-image: var(--gradient-secondary); */
567565
border: 1px solid var(--clr-border-primary);
568-
border-radius: var(--br-md);
569566
position: relative;
570567
padding-inline: 1em;
571568
display: grid;
@@ -599,20 +596,34 @@ body:has(.modal-overlay) {
599596

600597
.modal {
601598
background-color: var(--clr-bg-secondary);
602-
padding: 2rem;
603-
width: 90%;
604-
max-width: 800px;
599+
width: fit-content;
600+
min-width: 50%;
601+
max-width: 1000px;
602+
max-height: 90%;
605603
border-radius: var(--br-lg);
606604
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
605+
gap: 0;
607606
position: relative;
608-
gap:1rem;
607+
overflow: auto;
609608
}
610609

611610
.modal__header {
611+
z-index: 50;
612612
display: flex;
613+
position: sticky;
614+
top: 0;
613615
align-items: center;
614616
justify-content: space-between;
615617
gap: 1rem;
618+
padding: 1rem 1.5rem;
619+
background-color: var(--clr-bg-secondary);
620+
border-radius: var(--br-lg);
621+
}
622+
623+
.modal__body {
624+
padding: 1.5rem;
625+
padding-top: 0;
626+
gap: 1rem;
616627
}
617628

618629
.code-preview {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /