From 0404e9e5cb0bfe0fe8c56f48e11a4d52234ecf77 Mon Sep 17 00:00:00 2001 From: daudix Date: Fri, 28 Jun 2024 20:28:30 +0300 Subject: [PATCH] Full-bleed media --- config.toml | 23 +++++++++++++---------- content/demo/index.md | 5 +++++ sass/_media.scss | 21 ++++++++++++--------- templates/shortcodes/image.html | 2 ++ templates/shortcodes/video.html | 3 ++- 5 files changed, 34 insertions(+), 20 deletions(-) diff --git a/config.toml b/config.toml index 805b113..2e82a2b 100644 --- a/config.toml +++ b/config.toml @@ -8,7 +8,7 @@ generate_feeds = true # Only the first file will be used in the navbar feed button, # other feeds will still be available in page's head. feed_filenames = ["rss.xml", "atom.xml"] -build_search_index = false +build_search_index = true author = "Duck Quack" # Based on https://github.com/welpo/tabi @@ -24,6 +24,18 @@ default_language = "en" taxonomies = [{ name = "tags", feed = true }] +[markdown] +highlight_code = true +highlight_theme = "css" +highlight_themes_css = [ + { theme = "solarized-dark", filename = "syntax-theme-dark.css" }, + { theme = "solarized-light", filename = "syntax-theme-light.css" }, +] +smart_punctuation = true + +[search] +index_format = "elasticlunr_javascript" + [languages.ru] title = "Duckquill" description = "Современная, симпатичная и аккуратная тема." @@ -38,15 +50,6 @@ generate_feeds = true taxonomies = [{ name = "tags", feed = true }] -[markdown] -highlight_code = true -highlight_theme = "css" -highlight_themes_css = [ - { theme = "solarized-dark", filename = "syntax-theme-dark.css" }, - { theme = "solarized-light", filename = "syntax-theme-light.css" }, -] -smart_punctuation = true - [extra] # Sets theme and browser theme color. # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color diff --git a/content/demo/index.md b/content/demo/index.md index d9e4319..f2eb5c4 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -179,6 +179,7 @@ Available variables are: - `url_min`: URL to compressed version of an image, original can be opened by clicking on the image. - `alt`: Alt text, same as if the text were inside square brackets in Markdown. - `full`: Forces image to be full-width. +- `full_bleed`: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover. - `start`: Float image to the start of paragraph and scale it down. - `end`: Float image to the end of paragraph and scale it down. - `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp. @@ -200,6 +201,7 @@ Variables should be comma-separated and be inside the brackets. Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes. - `#full`: Forces image to be full-width. +- `#full-bleed`: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover. - `#start`: Float image to the start of paragraph and scale it down. - `#end`: Float image to the end of paragraph and scale it down. - `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp. @@ -214,6 +216,9 @@ Alternatively, you can append the following URL anchors. It can be more handy in ![1966 Ford Mustang coupe white](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/1966_Ford_Mustang_coupe_white_003.jpg/320px-1966_Ford_Mustang_coupe_white_003.jpg#start) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. +\ +![1966 Ford Mustang coupe white](https://images.unsplash.com/photo-1635410773896-da585e1fe138?q=80&w=2063&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D#full-bleed) + #### Video Same as images, but with a few differences: `no_hover` and `url_min` are not available. diff --git a/sass/_media.scss b/sass/_media.scss index 5f12129..a12af41 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -11,6 +11,14 @@ video { width: 100%; } + &.full-bleed, + &[src*="#full-bleed"] { + margin-right: calc((-100vw + 100%) / 2); + margin-left: calc((-100vw + 100%) / 2); + width: 100vw; + max-width: 100vw; + } + &.start, &.end, &[src*="#start"], @@ -56,7 +64,9 @@ video { } &.transparent, - &[src*="#transparent"] { + &.full-bleed, + &[src*="#transparent"], + &[src*="#full-bleed"] { box-shadow: none; border-radius: 0; } @@ -65,7 +75,7 @@ video { img { transition: var(--transition-longer); - &:not(.no-hover, &[src*="#no-hover"]) { + &:not(.no-hover, .full-bleed, &[src*="#no-hover"], &[src*="#full-bleed"]) { cursor: zoom-in; &:hover { @@ -90,12 +100,5 @@ img { } } } - - &.transparent, - &[src*="#transparent"] { - &:hover { - box-shadow: none; - } - } } } diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html index 98f98c5..64999a1 100644 --- a/templates/shortcodes/image.html +++ b/templates/shortcodes/image.html @@ -2,6 +2,7 @@