Quick Visual Improvements #168

Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,7 +40,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
		language={language}
		style={theme === "dark" ? oneDark : oneLight}
		wrapLines={true}
	customStyle={{ margin: "0", maxHeight: "20rem" }}
	customStyle={{ margin: "0", maxHeight: "32rem" }}
		>
		{code}
		</SyntaxHighlighter>
Expand Down

48 changes: 25 additions & 23 deletions src/components/SnippetModal.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,29 +61,31 @@ const SnippetModal: React.FC<Props> = ({
		<CloseIcon />
		</Button>
		</div>
	<CodePreview language={slugify(language)} code={snippet.code} />
	<p>
	<b>Description: </b>
	{snippet.description}
	</p>
	<p>
	Contributed by{" "}
	<a
	href={`https://github.com/${snippet.author}`}
	target="_blank"
	rel="noopener noreferrer"
	className="styled-link"
	>
	@{snippet.author}
	</a>
	</p>
	<ul role="list" className="modal__tags">
	{snippet.tags.map((tag) => (
	<li key={tag} className="modal__tag">
	{tag}
	</li>
	))}
	</ul>
	<div className="modal__body \| flow">
	<CodePreview language={slugify(language)} code={snippet.code} />
	<p>
	<b>Description: </b>
	{snippet.description}
	</p>
	<p>
	Contributed by{" "}
	<a
	href={`https://github.com/${snippet.author}`}
	target="_blank"
	rel="noopener noreferrer"
	className="styled-link"
	>
	@{snippet.author}
	</a>
	</p>
	<ul role="list" className="modal__tags">
	{snippet.tags.map((tag) => (
	<li key={tag} className="modal__tag">
	{tag}
	</li>
	))}
	</ul>
	</div>
		</motion.div>
		</motion.div>,
		modalRoot
Expand Down

29 changes: 20 additions & 9 deletions src/styles/main.css

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -550,22 +550,19 @@ abbr {
		border-radius: var(--br-lg);
		padding: 0.75em;
		text-align: start;
	filter: grayscale(100%);

		&:is(:hover, :focus-visible) {
	outline: 3px solid var(--clr-border-primary);
	filter: grayscale(0);
	outline: 2px solid var(--clr-border-primary);
		}
		}

		.snippet__preview {
		width: 100%;
		overflow: hidden;
	aspect-ratio: 10 / 3;
	aspect-ratio: 9 / 3;
		background-color: var(--clr-bg-secondary);
		/* background-image: var(--gradient-secondary); */
		border: 1px solid var(--clr-border-primary);
	border-radius: var(--br-md);
		position: relative;
		padding-inline: 1em;
		display: grid;
Expand Down Expand Up		@@ -599,20 +596,34 @@ body:has(.modal-overlay) {

		.modal {
		background-color: var(--clr-bg-secondary);
	padding: 2rem;
	width: 90%;
	max-width: 800px;
	width: fit-content;
neoRandom marked this conversation as resolved. Show resolved Hide resolved
	min-width: 50%;
	max-width: 1000px;
	max-height: 90%;
		border-radius: var(--br-lg);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	gap: 0;
		position: relative;
	gap: 1rem;
	overflow: auto;
		}

		.modal__header {
	z-index: 50;
		display: flex;
	position: sticky;
	top: 0;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	padding: 1rem 1.5rem;
	background-color: var(--clr-bg-secondary);
	border-radius: var(--br-lg);
	}

	.modal__body {
	padding: 1.5rem;
	padding-top: 0;
	gap: 1rem;
		}

		.code-preview {
Expand Down

Navigation Menu