mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 18:00:06 +01:00
Matthias Kretschmann
299084de93
* basic astro setup, kick out all gatsby configs * move content folder * src/pages setup * more file reorg * more config updates * more reorgs * refactor * refactor * bump astro * refactor * svg icon build system, theme switch * remark plugin for lead paragraph, more refactor * make images work * post meta * custom Picture component * Pagination, More component, 404 fixes * linking fixes * add table of contents * post actions fixes * tag fixes * content changes * content changes: move media files to their posts * more content moving, remove media folder * refactor remark-lead-paragraph * link css file when defined in post frontmatter * move content up again * kbd post update * allow js * downloads solution * add astro check * redirect_from solution * githubLink solution * reorg * exif solution as prebuild step * exif solution on each post during build * isolate lead paragraph extraction to articles * restore Exif components * deploy script update * fix redirects * xml & json feeds * build fix * fix exif readout in production * head and seo tweaks, add feeds * tweak image display * archive pages with single layout * restore tags archive * sitemap setup * restore thanks page functionality * reorg * cleanup * parallel scripts during prebuild * restore jest setup * remove jest, switch to vitest as test runner * adapt CI * test refactor * typescript tweaks * avatar fixes * typings * restore search functionality * theme switch with nanostores * fixes * test fixes * restore changelog functionality * umami script * border color tweak * related posts with fuse.js * plawright e2e testing setup * search tweaks * simplify typekit loading * photo fix * e2e tests * related posts fix * fix tags archive * tweaks * tweaks * linux snapshots * fix header test * new symlink tactic * fix dev server in codespaces * fix yaml * ci fixes * changelog loading tweaks * e2e against dev server on ci * changelog tweaks * ci tweaks * ci tweaks * ci tweaks * docs updates * ci tweaks * refactor photo creation script * package updates * refactor search * ci tweak * ci tweaks * test tweaks, more unit tests * more unit tests * post creation script tweaks * refactor new scripts, test them for real life * more tests * refactor * codeclimate-action update * uses update * limit ci runs * fix theme toggle, test it * more tests * favicon files cleanup * icon components location change * type checking through ci * command fixes * ci fix * search tweaks * ci tweaks * revised favicons, write post draft about it * drafts filtering fix * lint fix, favicon fixes * copy changes * fix related search images * content updates * new codeblock styles, copy tweaks, fixes * package updates * typing fixes * lint fix * content updates * restore link posts * faster theme switching * split up astro utils * related posts fixes * fix * refactor * fixes * copy tweaks * fixes * picture tweaks * image fixes * feed fixes, adapt for json feed v1.1 * e2e test updates * layout tweaks * update snaphots * migrate to createMarkdownProcessor * ci cache tweaks * activate more browsers for e2e testing * switch to macos-13 images * build caching tweaks * markdown fix * set image quality * remove avif generation * picture tweaks * head fixes * add og:image:alt * create-icons test * new post: Favicon Generation with Astro
121 lines
3.5 KiB
Markdown
121 lines
3.5 KiB
Markdown
---
|
|
title: The Kremalicious MarsEdit Style
|
|
author: Matthias Kretschmann
|
|
|
|
date: 2008-08-22 17:04:19+00:00
|
|
|
|
tags:
|
|
- goodies
|
|
---
|
|
|
|
Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.
|
|
|
|
|
|
|
|
A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:
|
|
|
|
|
|
|
|
Here's how to apply the style for your blog preview in MarsEdit:
|
|
|
|
In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header.
|
|
|
|
Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](./marsedit_kremalicious.txt):
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>#weblogName#: #title#</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background-color: #000;
|
|
}
|
|
|
|
a {
|
|
color: #778caa;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: #778caa;
|
|
color: #000;
|
|
text-shadow: 0px 1px 1px #ddd;
|
|
}
|
|
|
|
#title {
|
|
color: #778caa;
|
|
background-color: #333;
|
|
margin: 0;
|
|
font:
|
|
normal 2.1em 'HelveticaNeue-UltraLight',
|
|
Helvetica,
|
|
sans-serif;
|
|
}
|
|
|
|
#title a {
|
|
display: block;
|
|
position: relative;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
#title a:hover {
|
|
text-shadow: 0px 1px 1px #b3b3b3;
|
|
}
|
|
|
|
#content {
|
|
font:
|
|
1em 'Lucida Grande',
|
|
Lucida,
|
|
Verdana,
|
|
sans-serif;
|
|
color: #ddd;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
#meta {
|
|
margin-top: 20px;
|
|
padding: 5px;
|
|
background-color: #333;
|
|
-webkit-border-radius: 5px;
|
|
}
|
|
|
|
#credit {
|
|
font:
|
|
italic 0.8em/12px 'Helvetica Neue',
|
|
Arial,
|
|
Helvetica,
|
|
Geneva,
|
|
sans-serif;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="title">
|
|
<a href="#url#">#title#</a>
|
|
</div>
|
|
|
|
<div id="content">
|
|
#body# #extended#
|
|
|
|
<div id="meta">
|
|
<b>url</b> : <a href="#url#">#url#</a><br />
|
|
<b>tags</b> : #tags#
|
|
</div>
|
|
<div id="credit">
|
|
The Kremalicious MarsEdit Style<br />
|
|
<a href="http://www.kremalicious.com">www.kremalicious.com</a>
|
|
</div>
|
|
</div>
|
|
<-- end content -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Now click on Save Changes in the lower right corner of the window and there you have it.
|
|
|
|
Of course you are free to alter the style provided by me to fit your needs. If you have any additions to my provided code feel free to post them in the comments.
|