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 9d3aa59

Browse files
Merge pull request #168 from neoRandom/main
Quick Visual Improvements
2 parents f446d74 + aa6c551 commit 9d3aa59

File tree

3 files changed

+46
-33
lines changed

3 files changed

+46
-33
lines changed

‎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 によって変換されたページ (->オリジナル) /