redesign 🎨
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
---
|
||||
import { format, add } from 'date-fns';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
title: String;
|
||||
@@ -15,28 +14,7 @@ const { title, date, slug } = Astro.props;
|
||||
<h2>
|
||||
{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
|
||||
</h2>
|
||||
<div class="date">
|
||||
<Icon size={24} class="calendar-icon" name="calendar" />
|
||||
<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
|
||||
<div>
|
||||
🗓️ <i>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h2,
|
||||
h2 a {
|
||||
font-size: 1.6rem;
|
||||
font-family: Oswald, sans-serif;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date span {
|
||||
font-family: Oswald, sans-serif;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
---
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
interface Props {}
|
||||
---
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
|
||||
>Astro</a
|
||||
>
|
||||
Copyright {year}, Graham Hall
|
||||
|
||||
<br />
|
||||
Built with <a href="https://astro.build">Astro</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="/rss.xml"> Subscribe with RSS</a>
|
||||
</p>
|
||||
<div id="wcb" class="carbonbadge"></div>
|
||||
</footer>
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import type { NavLink } from 'src/types';
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
|
||||
interface Props {}
|
||||
@@ -22,94 +19,14 @@ const navLinks: NavLink[] = [
|
||||
<header>
|
||||
<h1>ghall.blog</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
{
|
||||
navLinks.map((link) => (
|
||||
<li>
|
||||
<a
|
||||
class={pathname === link.path ? 'active-nav' : null}
|
||||
href={link.path}
|
||||
>
|
||||
<Icon size={26} name={link.icon} />
|
||||
<span>{link.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
{
|
||||
navLinks.map((link) => (
|
||||
<li class={pathname === link.path ? 'selected' : null}>
|
||||
<a href={link.path}>
|
||||
<span>{link.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 1.5rem 1rem;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
nav ul li a::before {
|
||||
content: '•';
|
||||
font-size: 1.6rem;
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
color: var(--blue);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a:hover::before {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.active-nav::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
content: '';
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
---
|
||||
import { Tag } from 'src/types';
|
||||
|
||||
import BlogHeader from '@components/BlogHeader.astro';
|
||||
import Tags from '@components/Tags.astro';
|
||||
|
||||
@@ -8,7 +6,7 @@ interface Post {
|
||||
data: {
|
||||
title: string;
|
||||
pubDate: Date;
|
||||
tags: Tag[];
|
||||
tags: string[];
|
||||
};
|
||||
slug: string;
|
||||
}
|
||||
@@ -21,9 +19,9 @@ const { post } = Astro.props;
|
||||
const { data, slug } = post;
|
||||
---
|
||||
|
||||
<article class="post-preview">
|
||||
<section>
|
||||
<div>
|
||||
<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
|
||||
<Tags tags={data.tags} />
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@@ -1,34 +1,17 @@
|
||||
---
|
||||
import { Tag } from 'src/types';
|
||||
|
||||
interface Props {
|
||||
tags: Tag[];
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
const { tags } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="tag-container">
|
||||
<span>
|
||||
{
|
||||
tags.sort().map((tag: Tag) => (
|
||||
tags.sort().map((tag: string, index: number) => (
|
||||
<a class="tag" href={`/archive/${tag}`}>
|
||||
#{tag}
|
||||
{`${tag}${index < tags.length - 1 ? ', ' : ''}`}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tag-container {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.tag:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
</span>
|
||||
|
||||
+10
-13
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import '@styles/global.css';
|
||||
import { ViewTransitions } from 'astro:transitions';
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
|
||||
import Header from '@components/Header.astro';
|
||||
import Footer from '@components/Footer.astro';
|
||||
@@ -15,33 +15,30 @@ export interface Props {
|
||||
const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" transition:animate="none">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name="robots" content="noindex" />
|
||||
<meta
|
||||
<meta name="robots" content="noindex" /><meta
|
||||
name="description"
|
||||
content="My personal blog about life, gaming, tech, and whatever else I feel like writing about."
|
||||
/>
|
||||
|
||||
<link
|
||||
/><link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title="ghall.blog - RSS"
|
||||
href={`${Astro.site}rss.xml`}
|
||||
/>
|
||||
<title>{`ghall.blog - ${title}`}</title>
|
||||
<ViewTransitions />
|
||||
</head>
|
||||
<body class="container">
|
||||
/><title>{`ghall.blog - ${title}`}</title></head
|
||||
>
|
||||
<ClientRouter />
|
||||
<body class="layout-simple">
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ layout: ../layouts/About.astro
|
||||
title: About Me
|
||||
---
|
||||
|
||||
My name is **Graham**, a web developer from Rhode Island.
|
||||
My name is **Graham**, a full-stack web developer.
|
||||
|
||||
When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, board games, music, hiking, photography, art, the list goes on...
|
||||
|
||||
|
||||
@@ -47,42 +47,16 @@ posts.sort(
|
||||
---
|
||||
|
||||
<Layout title="Blog Archive">
|
||||
{
|
||||
posts.map(({ slug, data }) => (
|
||||
<div class="archive-post">
|
||||
<a href={`/posts/${slug}`}>{data.title}</a>
|
||||
<span>
|
||||
{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.archive-post {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.archive-post:not(:last-of-type) {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.archive-post a {
|
||||
max-width: 400px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
padding: 30px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.archive-post {
|
||||
flex-direction: column;
|
||||
<ul>
|
||||
{
|
||||
posts.map(({ slug, data }) => (
|
||||
<li>
|
||||
<a href={`/posts/${slug}`}>{data.title}</a> -
|
||||
<span>
|
||||
{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</ul>
|
||||
</Layout>
|
||||
|
||||
@@ -16,7 +16,7 @@ import dictionary from '../dictionary.txt?raw';
|
||||
|
||||
function createParagraph() {
|
||||
paragraph = document.createElement('p');
|
||||
contentDiv.appendChild(paragraph);
|
||||
contentDiv?.appendChild(paragraph);
|
||||
}
|
||||
|
||||
createParagraph();
|
||||
@@ -65,9 +65,3 @@ import dictionary from '../dictionary.txt?raw';
|
||||
addRandomString();
|
||||
}, 1);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ai-trap {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@ const posts = await getCollection('blog');
|
||||
new Date(b.data.pubDate).valueOf() -
|
||||
new Date(a.data.pubDate).valueOf()
|
||||
)
|
||||
.slice(0, 6)
|
||||
.slice(0, 10)
|
||||
.map((post) => <PostPreview post={post} />)
|
||||
}
|
||||
{
|
||||
@@ -26,9 +26,3 @@ const posts = await getCollection('blog');
|
||||
)
|
||||
}
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.more-posts {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
+9
-7
@@ -5,28 +5,30 @@ title: Now
|
||||
|
||||
Hey there, this is my [/now page](https://nownownow.com/about)!
|
||||
|
||||
_Last updated: November 21, 2024_
|
||||
_Last updated: January 21, 2025_
|
||||
|
||||
## 🔨 Making
|
||||
|
||||
- This blog!
|
||||
- [AutoDock](https://github.com/ghall89/AutoDock) - A Mac menubar utility that automatically hides and shows your dock based on the size of your connected display.
|
||||
- [KeyStash](https://github.com/ghall89/KeyStash) - A native Mac app for managing registration codes for your apps, modelled on the feature from 1Password.
|
||||
|
||||
## 🎧 Listening
|
||||
|
||||
- [Paramore](https://music.apple.com/us/artist/paramore/75950796)
|
||||
- [Metric](https://music.apple.com/us/artist/metric/4125821)
|
||||
- [They Might Be Giants](https://music.apple.com/us/artist/they-might-be-giants/149020)
|
||||
- [Dragon Age: The Veilguard - Original Soundtrack](https://music.apple.com/us/album/dragon-age-the-veilguard-original-soundtrack/1772114262)
|
||||
- [Middle-Earth & Chill](https://music.apple.com/us/album/middle-earth-chill/1774281510)
|
||||
- [This Is Why - Paramore](https://music.apple.com/us/album/this-is-why/1646945378)
|
||||
|
||||
## 🎮 Playing
|
||||
|
||||
- [Dragon Age: The Veilguard](https://www.igdb.com/games/dragon-age-the-veilguard)
|
||||
- [Paper Mario: The Thousand Year Door](https://www.igdb.com/games/paper-mario-the-thousand-year-door--1)
|
||||
- [Unicorn Overlord](https://www.igdb.com/games/unicorn-overlord--1)
|
||||
- [Horizon Zero Dawn: Remastered](https://www.igdb.com/games/horizon-zero-dawn-remastered)
|
||||
- [Fortnite](https://www.igdb.com/games/fortnite)
|
||||
|
||||
## 📺 Watching
|
||||
|
||||
- [Taskmaster](https://www.themoviedb.org/tv/63404-taskmaster)
|
||||
- [Foundation](https://www.themoviedb.org/tv/93740-foundation?language=en-US)
|
||||
- [Make Some Noise](https://www.themoviedb.org/tv/204031-make-some-noise?language=en-US)
|
||||
|
||||
## 💻 Using
|
||||
|
||||
|
||||
@@ -30,21 +30,3 @@ const { Content } = await post.render();
|
||||
</a>
|
||||
<Tags tags={data.tags} />
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
article img {
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
.footnotes {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.footnotes p {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+102
-242
@@ -1,12 +1,14 @@
|
||||
@font-face {
|
||||
font-family: CrimsonText;
|
||||
src: url(./fonts/Poppins-Regular.ttf) format('truetype');
|
||||
font-family: Manrope;
|
||||
src: url(./fonts/Manrope-Regular.ttf) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Oswald;
|
||||
src: url(./fonts/Oswald-VariableFont_wght.ttf) format('truetype');
|
||||
font-family: Manrope;
|
||||
src: url(./fonts/Manrope-Bold.ttf) format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -18,276 +20,134 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--blue: #3274ce;
|
||||
--red: #ce3446;
|
||||
--orange: #e56045;
|
||||
--text: #444444;
|
||||
--blue: #1e66f5;
|
||||
--red: #d20f39;
|
||||
--orange: #fe640b;
|
||||
--text: #4c4f69;
|
||||
--background: white;
|
||||
--radius: 5px;
|
||||
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
--border: 1px solid #7f7f7f;
|
||||
--border: 1px solid #8c8fa1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--blue: #5996e9;
|
||||
--red: #e75969;
|
||||
--orange: #e87c66;
|
||||
--text: white;
|
||||
--background: color(display-p3 0.141 0.149 0.216);
|
||||
--border: 1px solid rgb(102, 102, 102);
|
||||
--blue: #89b4fa;
|
||||
--red: #f38ba8;
|
||||
--orange: #fab387;
|
||||
--text: #cdd6f4;
|
||||
--background: #1e1e2e;
|
||||
--border: 1px solid rgb(131, 139, 167);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'CrimsonText', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.03rem;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark light;
|
||||
color: var(--text);
|
||||
background-color: var(--background);
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem 3rem;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: Oswald, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid;
|
||||
border-color: var(--text);
|
||||
margin-left: 0;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 2px 8px;
|
||||
font-size: 0.8rem;
|
||||
font-family: sans-serif;
|
||||
border: var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--flat-bg);
|
||||
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
|
||||
rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
sup > a {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
filter: saturate(120%);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header > nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
gap: 20px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
header > nav > li > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header > nav > li > .selected {
|
||||
border-bottom: 1px solid #e56045;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: var(--border);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
article img {
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
.footnotes {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.footnotes p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.blog-header {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.blog-header > h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.more-posts {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid;
|
||||
border-color: var(--text);
|
||||
margin-left: 1rem;
|
||||
padding-left: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
pre code,
|
||||
code {
|
||||
color: var(--orange);
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
font-size: 0.9rem;
|
||||
padding: 2px 4px;
|
||||
border: var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(155, 155, 155, 0.2);
|
||||
padding: 1px 4px;
|
||||
margin: 0 2px;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
/* List Styles */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
kbd {
|
||||
border: var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
ol li {
|
||||
counter-increment: li;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
content: '‣';
|
||||
color: var(--orange);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
ol li::before {
|
||||
content: '.' counter(li);
|
||||
color: var(--orange);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1.5em;
|
||||
margin-right: 0.5em;
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
button,
|
||||
.link-button {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: filter 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.link-button:hover {
|
||||
text-decoration: none;
|
||||
filter: saturate(120%);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.link-button:active {
|
||||
opacity: 0.9;
|
||||
scale: 0.98;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 0.9rem;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* .select-container {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.select-container::before {
|
||||
position: absolute;
|
||||
content: "▾";
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
background-color: var(--blue);
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
/* Text Inputs */
|
||||
|
||||
input,
|
||||
textarea {
|
||||
appearance: none;
|
||||
outline: none;
|
||||
background-color: #e6e6e6;
|
||||
color: --text;
|
||||
border: 2px solid #dadada;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem;
|
||||
border-radius: 5px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
background-color: #eaeaea;
|
||||
box-shadow: 0px 0px 2px 1px var(--blue);
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
padding: 1.4rem;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
|
||||
.width-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blue-btn {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding: 0.1rem 0rem 1rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--text);
|
||||
code,
|
||||
kbd {
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Not By AI badge */
|
||||
@@ -299,7 +159,7 @@ svg {
|
||||
background-image: url(svg/Written-By-Human-Not-By-AI-Badge-white.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
/* border: 1px solid red; */
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4h-.8c-1.12 0-1.68 0-2.108.218a1.999 1.999 0 0 0-.874.874C4 5.52 4 6.08 4 7.2V8m4-4h8M8 4V2m8 2h.8c1.12 0 1.68 0 2.107.218c.377.192.683.497.875.874c.218.427.218.987.218 2.105V8m-4-4V2M4 8v8.8c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h9.606c1.118 0 1.677 0 2.104-.218c.377-.192.683-.498.875-.874c.218-.428.218-.986.218-2.104V8M4 8h16m-4 8h.002v.002H16zm-4 0h.002v.002H12zm-4 0h.002v.002H8zm8.002-4v.002H16V12zM12 12h.002v.002H12zm-4 0h.002v.002H8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 678 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5h5m-5 9a9 9 0 1 1 0-18a9 9 0 0 1 0 18"/></svg>
|
||||
|
Before Width: | Height: | Size: 245 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h16M4 20v-4l8-8M4 20h4l8-8m-4-4l2.869-2.869l.001-.001c.395-.395.593-.593.821-.667a1 1 0 0 1 .618 0c.228.074.425.272.82.666l1.74 1.74c.396.396.594.594.668.822a1 1 0 0 1 0 .618c-.074.228-.272.426-.668.822h0L16 12.001m-4-4l4 4"/></svg>
|
||||
|
Before Width: | Height: | Size: 429 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21a7 7 0 1 0-14 0m7-10a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/></svg>
|
||||
|
Before Width: | Height: | Size: 255 B |
Reference in New Issue
Block a user