mirror of https://github.com/garritfra/garrit.xyz
GPG Key ID:
65586C4DDA55EA2C
67 changed files with 1550 additions and 1572 deletions
@ -1,60 +1,55 @@
|
||||
import Link from "next/link"; |
||||
import { usePlausible } from 'next-plausible' |
||||
import { usePlausible } from "next-plausible"; |
||||
|
||||
const BlogList = ({ posts }) => { |
||||
const plausible = usePlausible(); |
||||
const plausible = usePlausible(); |
||||
|
||||
const isPublicPost = (post) => !post.slug.startsWith("_"); |
||||
const publicPosts = posts.filter(isPublicPost); |
||||
const isPublicPost = (post) => !post.slug.startsWith("_"); |
||||
const publicPosts = posts.filter(isPublicPost); |
||||
|
||||
const reformatDate = (fullDate) => { |
||||
const date = new Date(fullDate); |
||||
return date.toDateString().slice(4); |
||||
}; |
||||
const reformatDate = (fullDate) => { |
||||
const date = new Date(fullDate); |
||||
return date.toDateString().slice(4); |
||||
}; |
||||
|
||||
const renderRandomButton = () => { |
||||
const randomIndex = Math.floor(Math.random() * publicPosts.length); |
||||
const randomPost = publicPosts[randomIndex]; |
||||
const randomUrl = `/posts/${randomPost?.slug}`; |
||||
return ( |
||||
<p> |
||||
<a |
||||
href={randomUrl} |
||||
onClick={() => plausible("random_post_clicked")} |
||||
> |
||||
✨ Random Post ✨ |
||||
</a> |
||||
</p> |
||||
); |
||||
}; |
||||
const renderRandomButton = () => { |
||||
const randomIndex = Math.floor(Math.random() * publicPosts.length); |
||||
const randomPost = publicPosts[randomIndex]; |
||||
const randomUrl = `/posts/${randomPost?.slug}`; |
||||
return ( |
||||
<p> |
||||
<a href={randomUrl} onClick={() => plausible("random_post_clicked")}> |
||||
✨ Random Post ✨ |
||||
</a> |
||||
</p> |
||||
); |
||||
}; |
||||
|
||||
const renderPost = (post) => ( |
||||
<div key={post.slug} className="blog__list__post"> |
||||
<time className="blog__list__post__date"> |
||||
{reformatDate(post.frontmatter.date)} |
||||
</time> |
||||
<br /> |
||||
<Link href={`/posts/${post.slug}`}>{post.frontmatter.title}</Link> |
||||
</div> |
||||
); |
||||
const renderPost = (post) => ( |
||||
<div key={post.slug} className="blog__list__post"> |
||||
<time className="blog__list__post__date"> |
||||
{reformatDate(post.frontmatter.date)} |
||||
</time> |
||||
<br /> |
||||
<Link href={`/posts/${post.slug}`}>{post.frontmatter.title}</Link> |
||||
</div> |
||||
); |
||||
|
||||
return ( |
||||
<> |
||||
{renderRandomButton()} |
||||
<hr /> |
||||
<div> |
||||
{publicPosts.length > 0 && |
||||
publicPosts |
||||
.filter(isPublicPost) |
||||
// Ternary operator is used to fix chromium sorting
|
||||
// See: https://stackoverflow.com/a/36507611
|
||||
.sort((a, b) => |
||||
a.frontmatter.date < b.frontmatter.date ? 1 : -1 |
||||
) |
||||
.map(renderPost)} |
||||
</div> |
||||
</> |
||||
); |
||||
return ( |
||||
<> |
||||
{renderRandomButton()} |
||||
<hr /> |
||||
<div> |
||||
{publicPosts.length > 0 && |
||||
publicPosts |
||||
.filter(isPublicPost) |
||||
// Ternary operator is used to fix chromium sorting
|
||||
// See: https://stackoverflow.com/a/36507611
|
||||
.sort((a, b) => (a.frontmatter.date < b.frontmatter.date ? 1 : -1)) |
||||
.map(renderPost)} |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default BlogList; |
||||
|
||||
@ -1,31 +1,31 @@
|
||||
export default function Footer() { |
||||
return ( |
||||
<footer className="footer"> |
||||
<div className="footer__content"> |
||||
<h3>Links of Interest</h3> |
||||
<a href="/rss.xml">RSS Feed</a> |
||||
<br /> |
||||
<a href="/todo">Todo List</a> |
||||
<br /> |
||||
<a href="https://keyoxide.org/hkp/garrit@slashdev.space">PGP Key</a> |
||||
<br /> |
||||
<a href="/guestbook">Guestbook</a> |
||||
<br /> |
||||
<a href="/blogroll">Blogroll</a> |
||||
<br /> |
||||
<a href="/ctf">Capture the Flag</a> |
||||
<h3>Elsewhere</h3> |
||||
<a href="https://github.com/garritfra" rel="me"> |
||||
Github |
||||
</a> |
||||
<br /> |
||||
<a href="https://www.linkedin.com/in/garritfranke/">LinkedIn</a> |
||||
<br /> |
||||
<a href="https://fosstodon.org/@garritfra">Mastodon (ActivityPub)</a> |
||||
<br /> |
||||
<a href="/contact">Contact</a> |
||||
</div> |
||||
<p>© 2018-2022 Garrit Franke</p> |
||||
</footer> |
||||
); |
||||
return ( |
||||
<footer className="footer"> |
||||
<div className="footer__content"> |
||||
<h3>Links of Interest</h3> |
||||
<a href="/rss.xml">RSS Feed</a> |
||||
<br /> |
||||
<a href="/todo">Todo List</a> |
||||
<br /> |
||||
<a href="https://keyoxide.org/hkp/garrit@slashdev.space">PGP Key</a> |
||||
<br /> |
||||
<a href="/guestbook">Guestbook</a> |
||||
<br /> |
||||
<a href="/blogroll">Blogroll</a> |
||||
<br /> |
||||
<a href="/ctf">Capture the Flag</a> |
||||
<h3>Elsewhere</h3> |
||||
<a href="https://github.com/garritfra" rel="me"> |
||||
Github |
||||
</a> |
||||
<br /> |
||||
<a href="https://www.linkedin.com/in/garritfranke/">LinkedIn</a> |
||||
<br /> |
||||
<a href="https://fosstodon.org/@garritfra">Mastodon (ActivityPub)</a> |
||||
<br /> |
||||
<a href="/contact">Contact</a> |
||||
</div> |
||||
<p>© 2018-2022 Garrit Franke</p> |
||||
</footer> |
||||
); |
||||
} |
||||
|
||||
@ -1,30 +1,30 @@
|
||||
export default function Header(props) { |
||||
return ( |
||||
<header className="header"> |
||||
<nav className="nav" role="navigation" aria-label="main navigation"> |
||||
<div className="header__container"> |
||||
<a href="/" className="header__container__logo underlined"> |
||||
{props.siteTitle} |
||||
</a> |
||||
</div> |
||||
<ul className="header__links"> |
||||
<li> |
||||
<a href="/posts" className="underlined"> |
||||
Blog |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="/contact" className="underlined"> |
||||
Contact |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="/cv" className="underlined"> |
||||
Resume |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
</header> |
||||
); |
||||
return ( |
||||
<header className="header"> |
||||
<nav className="nav" role="navigation" aria-label="main navigation"> |
||||
<div className="header__container"> |
||||
<a href="/" className="header__container__logo underlined"> |
||||
{props.siteTitle} |
||||
</a> |
||||
</div> |
||||
<ul className="header__links"> |
||||
<li> |
||||
<a href="/posts" className="underlined"> |
||||
Blog |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="/contact" className="underlined"> |
||||
Contact |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="/cv" className="underlined"> |
||||
Resume |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
</header> |
||||
); |
||||
} |
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import React from "react"; |
||||
|
||||
export default () => ( |
||||
<svg |
||||
class="page__tag-icon" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="16" |
||||
height="16" |
||||
viewBox="0 0 24 24" |
||||
fill="none" |
||||
stroke="currentColor" |
||||
stroke-width="2" |
||||
stroke-linecap="round" |
||||
stroke-linejoin="round" |
||||
> |
||||
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> |
||||
<line x1="7" y1="7" x2="7" y2="7"></line> |
||||
</svg> |
||||
<svg |
||||
class="page__tag-icon" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="16" |
||||
height="16" |
||||
viewBox="0 0 24 24" |
||||
fill="none" |
||||
stroke="currentColor" |
||||
stroke-width="2" |
||||
stroke-linecap="round" |
||||
stroke-linejoin="round" |
||||
> |
||||
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> |
||||
<line x1="7" y1="7" x2="7" y2="7"></line> |
||||
</svg> |
||||
); |
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# A web-based operating system |
||||
|
||||
* Full-fledged desktop environment |
||||
* Persistent file system |
||||
* Installer to bootstrap an "installation" |
||||
- Full-fledged desktop environment |
||||
- Persistent file system |
||||
- Installer to bootstrap an "installation" |
||||
|
||||
@ -1,13 +1,13 @@
|
||||
export const parseTags = (strings) => { |
||||
const postTags = keys |
||||
.map((key, index) => { |
||||
const value = values[index]; |
||||
// Parse yaml metadata & markdownbody in document
|
||||
const postTags = keys |
||||
.map((key, index) => { |
||||
const value = values[index]; |
||||
// Parse yaml metadata & markdownbody in document
|
||||
|
||||
const document = matter(value.default); |
||||
const rawTags = document.data?.tags || ""; |
||||
return rawTags.split(",").map((tag) => tag.trim()); |
||||
}) |
||||
.flat() |
||||
.filter((value) => value !== ""); |
||||
const document = matter(value.default); |
||||
const rawTags = document.data?.tags || ""; |
||||
return rawTags.split(",").map((tag) => tag.trim()); |
||||
}) |
||||
.flat() |
||||
.filter((value) => value !== ""); |
||||
}; |
||||
|
||||
@ -1,3 +1,3 @@
|
||||
module.exports = { |
||||
siteUrl: process.env.SITE_URL || 'https://garrit.xyz', |
||||
} |
||||
siteUrl: process.env.SITE_URL || "https://garrit.xyz", |
||||
}; |
||||
|
||||
@ -1,28 +1,28 @@
|
||||
const path = require("path"); |
||||
|
||||
const isProd = process.env.NODE_ENV === 'production' |
||||
const isProd = process.env.NODE_ENV === "production"; |
||||
|
||||
module.exports = { |
||||
experimental: { |
||||
outputStandalone: true, |
||||
}, |
||||
assetPrefix: isProd ? 'https://garrit.xyz' : '', |
||||
sassOptions: { |
||||
includePaths: [path.join(__dirname, 'styles')], |
||||
}, |
||||
webpack: function (config, { dev, isServer }) { |
||||
config.module.rules.push({ |
||||
test: /\.md$/, |
||||
use: "raw-loader", |
||||
}); |
||||
experimental: { |
||||
outputStandalone: true, |
||||
}, |
||||
assetPrefix: isProd ? "https://garrit.xyz" : "", |
||||
sassOptions: { |
||||
includePaths: [path.join(__dirname, "styles")], |
||||
}, |
||||
webpack: function (config, { dev, isServer }) { |
||||
config.module.rules.push({ |
||||
test: /\.md$/, |
||||
use: "raw-loader", |
||||
}); |
||||
|
||||
if (!dev && !isServer) { |
||||
Object.assign(config.resolve.alias, { |
||||
react: 'preact/compat', |
||||
'react-dom/test-utils': 'preact/test-utils', |
||||
'react-dom': 'preact/compat', |
||||
}) |
||||
} |
||||
return config; |
||||
}, |
||||
if (!dev && !isServer) { |
||||
Object.assign(config.resolve.alias, { |
||||
react: "preact/compat", |
||||
"react-dom/test-utils": "preact/test-utils", |
||||
"react-dom": "preact/compat", |
||||
}); |
||||
} |
||||
return config; |
||||
}, |
||||
}; |
||||
|
||||
@ -1,32 +1,32 @@
|
||||
{ |
||||
"name": "garrit.xyz", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"start": "npm run build && next dev", |
||||
"start:prod": "npm run build && next start", |
||||
"build": "next build && npm run build:rss && npm run build:sitemap && next build", |
||||
"build:static": "npm run build && next export", |
||||
"build:rss": "node lib/rss.js", |
||||
"build:sitemap": "next-sitemap" |
||||
}, |
||||
"dependencies": { |
||||
"markdown": "0.5.0", |
||||
"next": "12.1.0", |
||||
"next-plausible": "3.6.3", |
||||
"preact": "10.11.2", |
||||
"react": "17.0.2", |
||||
"react-dom": "17.0.2", |
||||
"react-markdown": "8.0.3", |
||||
"rehype-raw": "6.1.1", |
||||
"remark-gfm": "3.0.1" |
||||
}, |
||||
"devDependencies": { |
||||
"glob": "8.0.3", |
||||
"gray-matter": "4.0.3", |
||||
"next-sitemap": "3.1.25", |
||||
"raw-loader": "4.0.2", |
||||
"rfc822-date": "0.0.3", |
||||
"sass": "1.55.0" |
||||
} |
||||
"name": "garrit.xyz", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"start": "npm run build && next dev", |
||||
"start:prod": "npm run build && next start", |
||||
"build": "next build && npm run build:rss && npm run build:sitemap && next build", |
||||
"build:static": "npm run build && next export", |
||||
"build:rss": "node lib/rss.js", |
||||
"build:sitemap": "next-sitemap" |
||||
}, |
||||
"dependencies": { |
||||
"markdown": "0.5.0", |
||||
"next": "12.1.0", |
||||
"next-plausible": "3.6.3", |
||||
"preact": "10.11.2", |
||||
"react": "17.0.2", |
||||
"react-dom": "17.0.2", |
||||
"react-markdown": "8.0.3", |
||||
"rehype-raw": "6.1.1", |
||||
"remark-gfm": "3.0.1" |
||||
}, |
||||
"devDependencies": { |
||||
"glob": "8.0.3", |
||||
"gray-matter": "4.0.3", |
||||
"next-sitemap": "3.1.25", |
||||
"raw-loader": "4.0.2", |
||||
"rfc822-date": "0.0.3", |
||||
"sass": "1.55.0" |
||||
} |
||||
} |
||||
|
||||
@ -1,27 +1,25 @@
|
||||
import ReactMarkdown from "react-markdown"; |
||||
import matter from "gray-matter"; |
||||
import gfm from 'remark-gfm' |
||||
import gfm from "remark-gfm"; |
||||
import Page from "../components/Page"; |
||||
|
||||
const Index = (props) => { |
||||
return ( |
||||
<Page className="h-card" siteTitle="Garrit Franke"> |
||||
<ReactMarkdown remarkPlugins={[gfm]}> |
||||
{props.markdownBody} |
||||
</ReactMarkdown> |
||||
</Page> |
||||
); |
||||
return ( |
||||
<Page className="h-card" siteTitle="Garrit Franke"> |
||||
<ReactMarkdown remarkPlugins={[gfm]}>{props.markdownBody}</ReactMarkdown> |
||||
</Page> |
||||
); |
||||
}; |
||||
|
||||
export async function getStaticProps() { |
||||
const content = await import(`../content/index.md`); |
||||
const data = matter(content.default); |
||||
const content = await import(`../content/index.md`); |
||||
const data = matter(content.default); |
||||
|
||||
return { |
||||
props: { |
||||
markdownBody: data.content, |
||||
}, |
||||
}; |
||||
return { |
||||
props: { |
||||
markdownBody: data.content, |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
export default Index; |
||||
|
||||
@ -1,6 +1,4 @@
|
||||
{ |
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json", |
||||
"extends": [ |
||||
"config:base" |
||||
] |
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json", |
||||
"extends": ["config:base"] |
||||
} |
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.blog__list { |
||||
&__post { |
||||
margin-bottom: 1.5em; |
||||
&__date { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
&__post { |
||||
margin-bottom: 1.5em; |
||||
&__date { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,19 +1,19 @@
|
||||
.footer { |
||||
border-top: 1px solid var(--border); |
||||
padding-bottom: 0px; |
||||
text-align: center; |
||||
border-top: 1px solid var(--border); |
||||
padding-bottom: 0px; |
||||
text-align: center; |
||||
|
||||
&__content { |
||||
text-align: left; |
||||
margin-bottom: 3rem; |
||||
} |
||||
&__content { |
||||
text-align: left; |
||||
margin-bottom: 3rem; |
||||
} |
||||
|
||||
section { |
||||
min-width: 250px; |
||||
border-bottom: none; |
||||
} |
||||
section { |
||||
min-width: 250px; |
||||
border-bottom: none; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
@ -1,84 +1,84 @@
|
||||
nav { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
& > a { |
||||
opacity: 1 !important; |
||||
} |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
& > a { |
||||
opacity: 1 !important; |
||||
} |
||||
} |
||||
|
||||
.header { |
||||
&__links { |
||||
list-style-type: none; |
||||
display: flex; |
||||
flex-direction: row; |
||||
margin: 0; |
||||
padding: 0; |
||||
text-align: center; |
||||
align-items: center; |
||||
li { |
||||
padding: 24px; |
||||
} |
||||
} |
||||
&__links { |
||||
list-style-type: none; |
||||
display: flex; |
||||
flex-direction: row; |
||||
margin: 0; |
||||
padding: 0; |
||||
text-align: center; |
||||
align-items: center; |
||||
li { |
||||
padding: 24px; |
||||
} |
||||
} |
||||
|
||||
&__container { |
||||
padding: 24px 0px; |
||||
padding-bottom: 0px; |
||||
&__container { |
||||
padding: 24px 0px; |
||||
padding-bottom: 0px; |
||||
|
||||
&__logo { |
||||
margin: 0; |
||||
color: var(--text); |
||||
font-weight: 400; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
&__logo { |
||||
margin: 0; |
||||
color: var(--text); |
||||
font-weight: 400; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.underlined { |
||||
position: relative; |
||||
display: block; |
||||
opacity: 1 !important; |
||||
&::after { |
||||
content: ""; |
||||
height: 2px; |
||||
transform: scaleX(0); |
||||
transition: transform 0.25s ease; |
||||
transform-origin: left; |
||||
left: 0; |
||||
bottom: -4px; |
||||
width: 100%; |
||||
position: absolute; |
||||
background: white; |
||||
border-radius: 1px; |
||||
} |
||||
position: relative; |
||||
display: block; |
||||
opacity: 1 !important; |
||||
&::after { |
||||
content: ""; |
||||
height: 2px; |
||||
transform: scaleX(0); |
||||
transition: transform 0.25s ease; |
||||
transform-origin: left; |
||||
left: 0; |
||||
bottom: -4px; |
||||
width: 100%; |
||||
position: absolute; |
||||
background: white; |
||||
border-radius: 1px; |
||||
} |
||||
|
||||
&:hover { |
||||
&::after { |
||||
transform: scaleX(1); |
||||
} |
||||
} |
||||
&:hover { |
||||
&::after { |
||||
transform: scaleX(1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (min-width: 768px) { |
||||
.header { |
||||
left: 0; |
||||
top: 0; |
||||
.header { |
||||
left: 0; |
||||
top: 0; |
||||
|
||||
&__container { |
||||
padding-bottom: 24px; |
||||
} |
||||
&__container { |
||||
padding-bottom: 24px; |
||||
} |
||||
|
||||
&__logo { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
.nav { |
||||
height: 100%; |
||||
align-items: flex-start; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
&__logo { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
.nav { |
||||
height: 100%; |
||||
align-items: flex-start; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
@ -1,137 +1,137 @@
|
||||
.page { |
||||
margin-bottom: 3rem; |
||||
margin-bottom: 3rem; |
||||
} |
||||
.page__hero { |
||||
min-height: 300px; |
||||
height: 60vh; |
||||
width: 100%; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
min-height: 300px; |
||||
height: 60vh; |
||||
width: 100%; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
} |
||||
.page__hero img { |
||||
margin-bottom: 0; |
||||
object-fit: cover; |
||||
min-height: 100%; |
||||
min-width: 100%; |
||||
object-position: center; |
||||
margin-bottom: 0; |
||||
object-fit: cover; |
||||
min-height: 100%; |
||||
min-width: 100%; |
||||
object-position: center; |
||||
} |
||||
.page__info { |
||||
width: 100%; |
||||
max-width: 768px; |
||||
margin: 0 auto; |
||||
padding: 2rem 0; |
||||
width: 100%; |
||||
max-width: 768px; |
||||
margin: 0 auto; |
||||
padding: 2rem 0; |
||||
|
||||
h1 { |
||||
max-width: 500px; |
||||
margin: 0; |
||||
margin-bottom: 0.66rem; |
||||
} |
||||
h1 { |
||||
max-width: 500px; |
||||
margin: 0; |
||||
margin-bottom: 0.66rem; |
||||
} |
||||
|
||||
h3 { |
||||
margin-bottom: 0; |
||||
} |
||||
h3 { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.page__body a { |
||||
text-decoration: underline; |
||||
text-decoration-color: $color-tertiary-dark; |
||||
color: $color-text-dark; |
||||
@media (prefers-color-scheme: light) { |
||||
color: $color-text-light; |
||||
} |
||||
text-decoration: underline; |
||||
text-decoration-color: $color-tertiary-dark; |
||||
color: $color-text-dark; |
||||
@media (prefers-color-scheme: light) { |
||||
color: $color-text-light; |
||||
} |
||||
} |
||||
.page__body a, |
||||
.page__footer a { |
||||
text-decoration: underline; |
||||
text-decoration-color: $color-tertiary-dark; |
||||
text-decoration: underline; |
||||
text-decoration-color: $color-tertiary-dark; |
||||
} |
||||
|
||||
.page__body:last-child { |
||||
margin-bottom: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
.page__body h1 h2 h3 h4 h5 h6 p { |
||||
font-weight: normal; |
||||
font-weight: normal; |
||||
} |
||||
.page__body ul ol { |
||||
margin-left: 1.25rem; |
||||
margin-bottom: 1.25rem; |
||||
padding-left: 1.45rem; |
||||
margin-left: 1.25rem; |
||||
margin-bottom: 1.25rem; |
||||
padding-left: 1.45rem; |
||||
} |
||||
.page__footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 1.5rem 1.25rem; |
||||
width: 100%; |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 1.5rem 1.25rem; |
||||
width: 100%; |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
.page__footer h2 { |
||||
margin-bottom: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
.page__footer a { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.page__footer a svg { |
||||
width: 20px; |
||||
width: 20px; |
||||
} |
||||
|
||||
.page__tag-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 4px; |
||||
align-items: center; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 4px; |
||||
align-items: center; |
||||
} |
||||
|
||||
.page__tag-icon { |
||||
vertical-align: middle; |
||||
margin-right: 4px; |
||||
vertical-align: middle; |
||||
margin-right: 4px; |
||||
} |
||||
|
||||
@media (prefers-color-scheme: light) { |
||||
.page__tag-icon { |
||||
filter: invert(1); |
||||
} |
||||
.page__tag-icon { |
||||
filter: invert(1); |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
.page__footer { |
||||
display: none; |
||||
} |
||||
.page__footer { |
||||
display: none; |
||||
} |
||||
} |
||||
@media (min-width: 768px) { |
||||
.page__body span { |
||||
width: 100%; |
||||
margin: 1.5rem auto; |
||||
} |
||||
.page__body ul ol { |
||||
margin-left: 1.5rem; |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
.page__hero { |
||||
min-height: 600px; |
||||
height: 75vh; |
||||
} |
||||
.page__info { |
||||
text-align: center; |
||||
h1 { |
||||
margin: 0 auto 0.66rem auto; |
||||
} |
||||
} |
||||
.page__footer { |
||||
padding: 2.25rem; |
||||
} |
||||
.page__body span { |
||||
width: 100%; |
||||
margin: 1.5rem auto; |
||||
} |
||||
.page__body ul ol { |
||||
margin-left: 1.5rem; |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
.page__hero { |
||||
min-height: 600px; |
||||
height: 75vh; |
||||
} |
||||
.page__info { |
||||
text-align: center; |
||||
h1 { |
||||
margin: 0 auto 0.66rem auto; |
||||
} |
||||
} |
||||
.page__footer { |
||||
padding: 2.25rem; |
||||
} |
||||
} |
||||
@media (min-width: 1440px) { |
||||
.page__hero { |
||||
height: 70vh; |
||||
} |
||||
.page__info { |
||||
padding: 3rem 0; |
||||
} |
||||
.page__footer { |
||||
padding: 2rem 2rem 3rem 2rem; |
||||
} |
||||
.page__hero { |
||||
height: 70vh; |
||||
} |
||||
.page__info { |
||||
padding: 3rem 0; |
||||
} |
||||
.page__footer { |
||||
padding: 2rem 2rem 3rem 2rem; |
||||
} |
||||
} |
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.tag-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 12px; |
||||
justify-content: center; |
||||
} |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 12px; |
||||
justify-content: center; |
||||
} |
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.flex { |
||||
display: flex; |
||||
display: flex; |
||||
} |
||||
|
||||
Loading…
Reference in new issue