Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode

Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 2205 bytes --]

Hey there,

I deployed a new personal art portfolio website:
 * https://www.sambanya.com

I am planning to use Emacs to create Org Mode files for the few main sections of my site that aren't the Art Gallery page itself.

I'm trying to figure out how to get a modern Wordpress looking Org generated HTML page that rivals pages like this:
 * https://karlkopinski.com/
 * https://wyliebeckert.com/
 * http://www.brucepennington.co.uk/
 * https://turnislefthome.com/
 * https://davidmattingly.com/sketches/
 * https://www.mathewborrett.com/
 * https://www.stephenfabian.com/gallery

I tried researching on my own about this, but most of the CSS stylesheets I've seen pretty much pertain to making Org generated HTML pages look like 'Read The Docs", solarized pages, or academic reports.

Anyway, would be curious if anyone happened to know of a good workflow, or if I should just rip apart the initial pages I like and see how I can match the styling via CSS alone.

Wanted to see if I could get away with having minimal JS involved as I'm only chasing the look, not really the functionalities of Wordpress (zoom etc).

Would be curious to know everyone's thoughts on this if there's a cool way to do this via Org Mode :)

Here are the links I tried to no avail though for anyone's reference:
 * https://github.com/gongzhitaao/orgcss
 * https://github.com/fniessen/org-html-themes
 * https://gist.github.com/mowen/326524
 * https://github.com/thomasf/solarized-css
 * https://demo.thi.ng/org-spec/
 * http://doc.norang.ca/org-mode.html
 * https://olmon.gitlab.io/org-themes/
 * https://github.com/c4710n/org-html-style
 * https://thomasf.github.io/solarized-css/
 * https://news.ycombinator.com/item?id=23130104
 * https://orgmode.org/manual/JavaScript-support.html
 * https://github.com/marsmining/ox-twbs
 * https://github.com/cosmicexplorer/org-info-js
 * https://orgmode.org/manual/CSS-support.html
 * https://juanjose.garciaripoll.com/blog/css-style-org-mode/
 * https://lepisma.xyz/2017/10/28/ricing-org-mode/
 * https://jnboehm.gitlab.io/blog/tufte-css/
 * https://gongzhitaao.org/orgcss/

The closest I've seen is MAYBE This:
 * https://olmon.gitlab.io/org-themes/darksun/darksun.html


Thanks,

Sam


[-- Attachment #2: Type: text/html, Size: 4402 bytes --]

Re: Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode

[Kaushal Modi]

Hi Samuel,

On Sun, Jan 16, 2022 at 12:06 PM Samuel Banya <sbanya@fastmail.com> wrote:
>
> I am planning to use Emacs to create Org Mode files for the few main sections of my site that aren't the Art Gallery page itself.
>
> I'm trying to figure out how to get a modern Wordpress looking Org generated HTML page that rivals pages like this:
>
> https://karlkopinski.com/
> https://wyliebeckert.com/
> http://www.brucepennington.co.uk/
> https://turnislefthome.com/
> https://davidmattingly.com/sketches/
> https://www.mathewborrett.com/
> https://www.stephenfabian.com/gallery

Here's my personal opinion: Org mode is great at concisely formatting
content, so I format my blog content in Org. But then I leave it up to
static site generator giants like Hugo to make the site look good. The
kind of look you want on your website could be achieved by one of the
themes: https://themes.gohugo.io/
Static site generators have tons of other benefits like putting the
right meta data, easily creating RSS, ATOM feeds, integrating
pre-generated search index, post-processing images, etc. before
uploading to the server, minifying CSS, JS, HTML, etc.

[ I am giving examples of using Hugo because that's what I use. You
can pick any static site generator and a compatible theme. ]

> Would be curious to know everyone's thoughts on this if there's a cool way to do this via Org Mode :)

I would focus on:

1. Content writing in Org mode
2. Rendering/prettifying the website using CSS, templating, etc in a
static site generator.

Of course you can do everything in Org mode and many people do it, but
then you need to design CSS, JS, etc yourself.
( I am not a web designer, so I took the static site generator
approach and started learning more about CSS and templating from
available themes. )



Kaushal

Re: Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode

[Samuel Banya]

[-- Attachment #1: Type: text/plain, Size: 2324 bytes --]

Hey Kaushal,

Thanks a ton for these ideas.

Yeah, the 'Art Gallery' page itself will be just the JS based project I will deploy, but I'll keep that in mind to just maybe roll with custom template static generated sites for the other sections since I think the only way to get close to that look and feel is to run with one of the ideas you mentioned.

Thanks again :)

Sam

On Fri, Jan 21, 2022, at 10:11 AM, Kaushal Modi wrote:
> Hi Samuel,
> 
> On Sun, Jan 16, 2022 at 12:06 PM Samuel Banya <sbanya@fastmail.com> wrote:
> >
> > I am planning to use Emacs to create Org Mode files for the few main sections of my site that aren't the Art Gallery page itself.
> >
> > I'm trying to figure out how to get a modern Wordpress looking Org generated HTML page that rivals pages like this:
> >
> > https://karlkopinski.com/
> > https://wyliebeckert.com/
> > http://www.brucepennington.co.uk/
> > https://turnislefthome.com/
> > https://davidmattingly.com/sketches/
> > https://www.mathewborrett.com/
> > https://www.stephenfabian.com/gallery
> 
> Here's my personal opinion: Org mode is great at concisely formatting
> content, so I format my blog content in Org. But then I leave it up to
> static site generator giants like Hugo to make the site look good. The
> kind of look you want on your website could be achieved by one of the
> themes: https://themes.gohugo.io/
> Static site generators have tons of other benefits like putting the
> right meta data, easily creating RSS, ATOM feeds, integrating
> pre-generated search index, post-processing images, etc. before
> uploading to the server, minifying CSS, JS, HTML, etc.
> 
> [ I am giving examples of using Hugo because that's what I use. You
> can pick any static site generator and a compatible theme. ]
> 
> > Would be curious to know everyone's thoughts on this if there's a cool way to do this via Org Mode :)
> 
> I would focus on:
> 
> 1. Content writing in Org mode
> 2. Rendering/prettifying the website using CSS, templating, etc in a
> static site generator.
> 
> Of course you can do everything in Org mode and many people do it, but
> then you need to design CSS, JS, etc yourself.
> ( I am not a web designer, so I took the static site generator
> approach and started learning more about CSS and templating from
> available themes. )
> 
> 
> 
> Kaushal
> 

[-- Attachment #2: Type: text/html, Size: 3731 bytes --]