refactor: various improvements
- use semantic elements (main, header, article) - remove unused AddressBar component - bundle article css
This commit is contained in:
parent
d4fef25400
commit
d4bc2755bc
7 changed files with 90 additions and 83 deletions
|
|
@ -1,62 +0,0 @@
|
|||
div#post {
|
||||
|
||||
h1.title {
|
||||
font-size: xx-large;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.source, .publish-info {
|
||||
font-size: smaller;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.source {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.publish-info {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
content {
|
||||
p, table, ul, img {
|
||||
margin: 1em 0 !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
td, th {
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
&:has(code) {
|
||||
padding: 1em;
|
||||
background: #f6f8fa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
p, table, ul, img {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
---
|
||||
|
||||
<div id="jumbotron"><a href="/">
|
||||
<header id="jumbotron"><a href="/">
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="487.1" height="151.38" version="1.1" viewBox="0 0 128.88 40.052" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
</svg>
|
||||
|
||||
|
||||
</a></div>
|
||||
</a></header>
|
||||
|
||||
<style>
|
||||
div {
|
||||
#jumbotron {
|
||||
margin: 0 auto;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
|
|||
-->
|
||||
{
|
||||
article && article.url !== '/' &&
|
||||
<div id="post">
|
||||
<article id="post">
|
||||
{article.source && <span class="source">{article.source}</span>}
|
||||
{article.title && <h1 class="title">{article.title}</h1>}
|
||||
{(article.author || datePublished) && (
|
||||
|
|
@ -32,5 +32,71 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
|
|||
</ul>
|
||||
)}
|
||||
<content set:html={cleanContent} />
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
|
||||
|
||||
<style>
|
||||
#post {
|
||||
|
||||
h1.title {
|
||||
font-size: xx-large;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.source, .publish-info {
|
||||
font-size: smaller;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.source {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.publish-info {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
content {
|
||||
p, table, ul, img {
|
||||
margin: 1em 0 !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
td, th {
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
&:has(code) {
|
||||
padding: 1em;
|
||||
background: #f6f8fa;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
p, table, ul, img {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@ const placeholder = "Type the article URL here";
|
|||
const { url } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="address-bar">
|
||||
<div id="address-bar">
|
||||
<form>
|
||||
<label for="app-url">
|
||||
<Icon name="ic:round-arrow-forward-ios" />
|
||||
|
|
@ -44,7 +44,7 @@ const { url } = Astro.props;
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.address-bar {
|
||||
#address-bar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import Jumbotron from "../components/Jumbotron.astro";
|
||||
import { ArticleData } from "@extractus/article-extractor";
|
||||
import "../styles/reset.css";
|
||||
import '../styles/variables.css';
|
||||
|
|
@ -49,6 +50,8 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
|
|||
</head>
|
||||
<body>
|
||||
<div id="app-wrapper">
|
||||
<Jumbotron />
|
||||
<main>
|
||||
<slot />
|
||||
<div id="main-content">
|
||||
<div id="post-wrapper">
|
||||
|
|
@ -58,7 +61,8 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
|
|||
<slot name="library" />
|
||||
</div>
|
||||
</div>
|
||||
<slot name="footer">
|
||||
</main>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
---
|
||||
import AddressBar from "../components/AddressBar.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Library from "../components/Library.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import SimpleAddressBar from "../components/SimpleAddressBar.astro";
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
---
|
||||
|
||||
<Layout article={null}>
|
||||
<AddressBar url="" />
|
||||
<div slot="post">
|
||||
<SimpleAddressBar url='' />
|
||||
<div slot="post" id="router-outlet">
|
||||
<h1>
|
||||
404: Not Found
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import Post from "../components/Post.astro";
|
|||
import Layout from "../layouts/Layout.astro";
|
||||
import Library from "../components/Library.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Jumbotron from "../components/Jumbotron.astro";
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
|
|
@ -25,7 +24,6 @@ if (url)
|
|||
|
||||
---
|
||||
<Layout article={article}>
|
||||
<Jumbotron />
|
||||
<SimpleAddressBar url={url} />
|
||||
<div slot="post" id="router-outlet">
|
||||
<Post article={article} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue