From 081e686d9466f8384b3386bbd47ffac71062d3e1 Mon Sep 17 00:00:00 2001 From: Florent Le Saout Date: Wed, 11 Nov 2020 18:06:39 +0100 Subject: [PATCH] Enleve quelques samples Signed-off-by: Florent Le Saout --- src/posts/sample/a-post-with-code-samples.md | 61 ------------------- .../sample/a-post-with-figures-and-video.md | 22 ------- src/posts/sample/a-scheduled-post.md | 30 --------- src/posts/sample/a-simple-post.md | 29 --------- src/posts/sample/a-simpler-post.md | 6 -- 5 files changed, 148 deletions(-) delete mode 100644 src/posts/sample/a-post-with-code-samples.md delete mode 100644 src/posts/sample/a-post-with-figures-and-video.md delete mode 100644 src/posts/sample/a-scheduled-post.md delete mode 100644 src/posts/sample/a-simple-post.md delete mode 100644 src/posts/sample/a-simpler-post.md diff --git a/src/posts/sample/a-post-with-code-samples.md b/src/posts/sample/a-post-with-code-samples.md deleted file mode 100644 index cd76f6a..0000000 --- a/src/posts/sample/a-post-with-code-samples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: A post with code samples -date: '2019-12-18' -type: 'news' ---- -The best way to demo a code post is to display a real life post, so check out this one from [andy-bell.design](https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/) about a full bleed CSS utility. - -- - - - -Sometimes you want to break your components out of the constraints that they find themselves in. A common situation where this occurs is when you don’t have much control of the container that it exists in, such as a CMS main content area. - -This is even more the case with editing tools such as the [WordPress Gutenberg editor](https://wordpress.org/gutenberg/), where in theory, you could pull in a component from a design system and utilise it in the main content of your web page. In these situations, it can be pretty darn handy to have a little utility that makes the element 100% of the viewport’s width _and_ still maintain its flow within its parent container. - -This is when I normally pull the `.full-bleed` utility class out of my back pocket. - -## The `.full-bleed` utility - -It’s small, but hella mighty: - -```css -.full-bleed { - width: 100vw; - margin-left: 50%; - transform: translateX(-50%); -} -``` - -Here it is in a context where it makes a fancy `