CSS in markdown header

Support Content & Markdown
1

Hi,

I would like to switch two modular folders in my markdown header depending on the screen size of the user.
I was wondering if there was any way to embed CSS directly into a markdown header, like media queries.

Not sure if I’m clear, basically I would like to have something like :

> ---
> title: Home
> content:
> items: '@self.modular'
> order:
>     by: default
>     dir: asc
>     custom:
>         - _showcase
>         - _highlights
>         - _news
>         - _callout
>         - _bottom
> @media only all and (max-width: 49.987em) {
> content:
> items: '@self.modular'
> order:
>     by: default
>     dir: asc
>     custom:
>         - _showcase
>         - _highlights
>         - _callout
>         - _news
>         - _bottom
> }
> menu: Home
> visible: false
> onpage_menu: false
> ---
2

My 1st call would be to handle this via css positioning, did you thought about it?

3

Hi,

Thank you for your answer,

No, I’m quite new to web technologies, and I’m not sure to understand what CSS positioning is.
The only solution I came up to so far was to create two modular folder for the two positions. These two modular would be identical except that they are displayed depending on the screen size.

4

If you wrap your module contents in some CSS .class, you will be able to display it in desired position.

5

Ok, I’ll try this. So about my initial question, you cannot, in any way, put some css in markdown ?

6

You can put CSS in Markdown, but I do not know of any way to put it in frontmatter (header)

7

You can use multiline YAML properties.

---
test: |
    multi 
    line
    text
---

See https://github.com/getgrav/grav/issues/1646 as well

8

Okay I see, thank you very much for your time :slight_smile:

9

okay, on first reading, I seem to not have understood your requirements completely.

What @MakaryGo said is your correct starting point.

This is solveable in css completely and should be done there. Something like:

@media only all and (max-width: 49.987em) {
/* use flexbox and reorder the things.*/
}