emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
* Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode
@ 2022-01-16 17:00 Samuel Banya
  2022-01-21 15:11 ` Kaushal Modi
  0 siblings, 1 reply; 3+ messages in thread
From: Samuel Banya @ 2022-01-16 17:00 UTC (permalink / raw)
  To: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 3+ messages in thread

* Re: Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode
  2022-01-16 17:00 Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode Samuel Banya
@ 2022-01-21 15:11 ` Kaushal Modi
  2022-01-21 17:15   ` Samuel Banya
  0 siblings, 1 reply; 3+ messages in thread
From: Kaushal Modi @ 2022-01-21 15:11 UTC (permalink / raw)
  To: Samuel Banya; +Cc: emacs-org list

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


^ permalink raw reply	[flat|nested] 3+ messages in thread

* Re: Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode
  2022-01-21 15:11 ` Kaushal Modi
@ 2022-01-21 17:15   ` Samuel Banya
  0 siblings, 0 replies; 3+ messages in thread
From: Samuel Banya @ 2022-01-21 17:15 UTC (permalink / raw)
  To: Kaushal Modi; +Cc: Charles Berry

[-- 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 --]

^ permalink raw reply	[flat|nested] 3+ messages in thread

end of thread, other threads:[~2022-01-21 17:33 UTC | newest]

Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2022-01-16 17:00 Question Regarding CSS Stylesheets For Art Gallery Webpage Made With Org Mode Samuel Banya
2022-01-21 15:11 ` Kaushal Modi
2022-01-21 17:15   ` Samuel Banya

Code repositories for project(s) associated with this inbox:

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).