New CSS for orgmode and Worg ?

New CSS for orgmode and Worg ?

[Bastien]

Hi all,

the current CSS for orgmode.org and orgmode.org/Worg is nice: readable
and simple.  But I'm bugged by the feeling we can do better.

It would be super cool to celebrate the forthcoming 7.01 version of Org
with a brand new CSS. Maybe we can evaluate a few ones and decide which
one suits best the community until July, 18th...

Anyone with CSS expertise ready to take this challenge ?

Looking forward :)

-- 
 Bastien

Re: New CSS for orgmode and Worg ?

[Greg Newman]

[-- Attachment #1.1: Type: text/plain, Size: 808 bytes --]

I'd be happy to Bastien!

— Greg

On Tue, Jul 6, 2010 at 6:20 PM, Bastien <bastien.guerry@wikimedia.fr> wrote:

> Hi all,
>
> the current CSS for orgmode.org and orgmode.org/Worg is nice: readable
> and simple.  But I'm bugged by the feeling we can do better.
>
> It would be super cool to celebrate the forthcoming 7.01 version of Org
> with a brand new CSS. Maybe we can evaluate a few ones and decide which
> one suits best the community until July, 18th...
>
> Anyone with CSS expertise ready to take this challenge ?
>
> Looking forward :)
>
> --
>  Bastien
>
> _______________________________________________
> Emacs-orgmode mailing list
> Please use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode
>

[-- Attachment #1.2: Type: text/html, Size: 1388 bytes --]

[-- Attachment #2: Type: text/plain, Size: 201 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: New CSS for orgmode and Worg ?

[Carsten Dominik]

On Jul 7, 2010, at 12:20 AM, Bastien wrote:

> Hi all,
>
> the current CSS for orgmode.org and orgmode.org/Worg is nice: readable
> and simple.  But I'm bugged by the feeling we can do better.
>
> It would be super cool to celebrate the forthcoming 7.01 version of  
> Org
> with a brand new CSS. Maybe we can evaluate a few ones and decide  
> which
> one suits best the community until July, 18th...

Wow, great idea.  I am looking forward to seeing this!

>
> Anyone with CSS expertise ready to take this challenge ?
>
> Looking forward :)
>
> -- 
> Bastien
>
> _______________________________________________
> Emacs-orgmode mailing list
> Please use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode

- Carsten

Re: New CSS for orgmode and Worg ?

[Christian Egli]

Bastien <bastien.guerry@wikimedia.fr> writes:

> the current CSS for orgmode.org and orgmode.org/Worg is nice: readable
> and simple.  But I'm bugged by the feeling we can do better.

What I'd like to see is something more aligned with the css for asciidoc
which makes for a very pleasant and readable experience.

Look for the css that is delivered with
http://www.methods.co.nz/asciidoc/ or in the repository at
http://code.google.com/p/asciidoc/source/browse/#hg/stylesheets

> Anyone with CSS expertise ready to take this challenge ?

Unfortunatelly my expertise is limited to trial and error when it comes
to css.

Thanks
Christian
-- 
Christian Egli
Swiss Library for the Blind, Visually Impaired and Print Disabled
Grubenstrasse 12, CH-8045 Zürich, Switzerland

Re: Re: New CSS for orgmode and Worg ?

[Bastien]

Christian Egli <christian.egli@sbszh.ch> writes:

> What I'd like to see is something more aligned with the css for asciidoc
> which makes for a very pleasant and readable experience.

Yes, the CSS behind asciidoc is neat.

> Unfortunatelly my expertise is limited to trial and error when it
> comes to css.

Trial and error will be very useful for suggested CSS.

My secret hope is to collect several CSS and to display screenshots of
them in Worg, so that users can pick up their favorite one for the HTML
export.

-- 
 Bastien

Re: Re: New CSS for orgmode and Worg ?

[Greg Newman]

[-- Attachment #1.1: Type: text/plain, Size: 811 bytes --]

On Thu, Jul 8, 2010 at 3:56 AM, Bastien <bastien.guerry@wikimedia.fr> wrote:

> Christian Egli <christian.egli@sbszh.ch> writes:
>
> > What I'd like to see is something more aligned with the css for asciidoc
> > which makes for a very pleasant and readable experience.
>
> Yes, the CSS behind asciidoc is neat.
>
> > Unfortunatelly my expertise is limited to trial and error when it
> > comes to css.
>
> Trial and error will be very useful for suggested CSS.
>
> My secret hope is to collect several CSS and to display screenshots of
> them in Worg, so that users can pick up their favorite one for the HTML
> export.
>

In my mind, I'd like to see a few different style sheets too in different
flavors (html, html5, etc) for different browser specs or covering all
browsers.

— Greg

[-- Attachment #1.2: Type: text/html, Size: 1241 bytes --]

[-- Attachment #2: Type: text/plain, Size: 201 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: Re: New CSS for orgmode and Worg ?

[Sebastian Rose]

Greg Newman <greg@20seven.org> writes:
> In my mind, I'd like to see a few different style sheets too in different
> flavors (html, html5, etc) for different browser specs or covering all
> browsers.


We would need different flavours of HTML export then.


  Sebastian

Re: Re: New CSS for orgmode and Worg ?

[Jonathan Arkell]

On Jul 9, 2010, at 7:38 AM, Sebastian Rose wrote:
>
>
> Greg Newman <greg@20seven.org> writes:
>> In my mind, I'd like to see a few different style sheets too in different
>> flavors (html, html5, etc) for different browser specs or covering all
>> browsers.
>
>
> We would need different flavours of HTML export then.
>
>
>  Sebastian
>


Not if everything was done correctly, check http://www.csszengarden.com/ for an example.

In fact, if you are careful about how you write your CSS and Markup, you could probably target chrome with all the css bells and whistles and Lynx in the same stylesheet!

I think Greg is referring more to CSS 3, rather then HTML 5.  But I could be wrong!

__________________________________

Jonathan Arkell
Tech Lead
Inspired By Drum & Bass, Scheme, Kawaii

p. 403.206.4377

402 -- 11th Ave SE
Calgary, AB, Canada T2G 0Y4

jonathana@criticalmass.com
criticalmass.com





The information contained in this message is confidential. It is intended to be read only by the individual or entity named above or their designee. If the reader of this message is not the intended recipient, you are hereby notified that any distribution of this message, in any form, is strictly prohibited. If you have received this message in error, please immediately notify the sender and delete or destroy any copy of this message.

Re: Re: New CSS for orgmode and Worg ?

[Greg Newman]

[-- Attachment #1.1: Type: text/plain, Size: 1836 bytes --]

You are correct about the CSS Johnathan.
I am referring to both.  HTML5's markup is so much simpler and cleaner, it
would be nice to utilize that as much as possible
and with the use of Modernizr it degrades HTML5 very nicely for older
browsers.

— Greg

On Fri, Jul 9, 2010 at 12:29 PM, Jonathan Arkell <jonathana@criticalmass.com
> wrote:

> On Jul 9, 2010, at 7:38 AM, Sebastian Rose wrote:
> >
> >
> > Greg Newman <greg@20seven.org> writes:
> >> In my mind, I'd like to see a few different style sheets too in
> different
> >> flavors (html, html5, etc) for different browser specs or covering all
> >> browsers.
> >
> >
> > We would need different flavours of HTML export then.
> >
> >
> >  Sebastian
> >
>
>
> Not if everything was done correctly, check http://www.csszengarden.com/for an example.
>
> In fact, if you are careful about how you write your CSS and Markup, you
> could probably target chrome with all the css bells and whistles and Lynx in
> the same stylesheet!
>
> I think Greg is referring more to CSS 3, rather then HTML 5.  But I could
> be wrong!
>
> __________________________________
>
> Jonathan Arkell
> Tech Lead
> Inspired By Drum & Bass, Scheme, Kawaii
>
> p. 403.206.4377
>
> 402 -- 11th Ave SE
> Calgary, AB, Canada T2G 0Y4
>
> jonathana@criticalmass.com
> criticalmass.com
>
>
>
>
>
> The information contained in this message is confidential. It is intended
> to be read only by the individual or entity named above or their designee.
> If the reader of this message is not the intended recipient, you are hereby
> notified that any distribution of this message, in any form, is strictly
> prohibited. If you have received this message in error, please immediately
> notify the sender and delete or destroy any copy of this message.
>

[-- Attachment #1.2: Type: text/html, Size: 2497 bytes --]

[-- Attachment #2: Type: text/plain, Size: 201 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: Re: New CSS for orgmode and Worg ?

[Christian Egli]

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

Bastien <bastien.guerry@wikimedia.fr> writes:

> Christian Egli <christian.egli@sbszh.ch> writes:
>
>> What I'd like to see is something more aligned with the css for asciidoc
>> which makes for a very pleasant and readable experience.
>
> Yes, the CSS behind asciidoc is neat.
>
>> Unfortunatelly my expertise is limited to trial and error when it
>> comes to css.
>
> Trial and error will be very useful for suggested CSS.

Actually, come to think of it: I had totally forgotten that I once took
the css from org
(http://repo.or.cz/w/org-mode.git/blob/HEAD:/ORGWEBPAGE/org.css) and
added some asciidoc styling to it. An example output can be seen at
http://www.daisyproducer.org/. It is in a "works for me" state, I think
I probably hard coded some assumptions I had on my side.

The css is attached. 

If there is demand I could merge it with the original org.css or create
a patch.

Thanks
Christian


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: asciidoc css adapted for org mode --]
[-- Type: text/css, Size: 3828 bytes --]

@media all
{
body {
  margin: 1em 5% 1em 5%;
}

a {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: fuchsia;
}

em {
  font-style: italic;
  color: navy;
}

strong {
  font-weight: bold;
  color: #083194;
}

tt {
  color: navy;
}

h1, h2, h3, h4, h5, h6 {
  color: #527bbd;
  font-family: sans-serif;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

h1, h2, h3 {
  border-bottom: 2px solid silver;
}
h2 {
  padding-top: 0.5em;
}
h3 {
  float: left;
}
h3 + * {
  clear: left;
}

div.sectionbody {
  font-family: serif;
  margin-left: 0;
}

hr {
  border: 1px solid silver;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

ul, ol, li > p {
  margin-top: 0;
}

pre {
  padding: 0;
  margin: 0;
}

#table-of-contents {
    font-size: 85%;
    line-height: 1.4em;
}

#table-of-contents ul {
    list-style: none;
    margin: 7px 0px 7px 15px ;
    padding: 0px;
}

div.content { /* Block element content. */
  padding: 0;
}

dl {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
dt {
  margin-top: 0.5em;
  margin-bottom: 0;
  font-style: normal;
  color: navy;
}
dd > *:first-child {
  margin-top: 0.1em;
}

ul, ol {
    list-style-position: outside;
}

table {
    border:3px solid #527bbd;
    border-left-style:none;
    border-right-style:none;
    margin-bottom:1.5em;
    margin-top:0.25em;
}
thead {
  font-family: sans-serif;
  font-weight: bold;
  border-bottom: 3px solid #527bbd;
}
tfoot {
  font-weight: bold;
}
th, td {
    border-bottom: 1px solid #527bbd;
}
tbody tr:hover {
    color: #527bbd;
}

code {font-size: 10pt;}

img {
    border: none;
}

.share img {
    opacity: .4;
    -moz-opacity: .4;
    filter: alpha(opacity=40);
}

.share img:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}


}  /* END OF @media all */


@media screen
{
  body {
	margin: 10px 6% 10px 180px;
	font-family: serif;
  }

  .logo-link {
    position: fixed;
    top: 10px;
    left: 30px;
  }

  #table-of-contents {
	position: fixed;
	display: block;
	left: 10px;
	width: 150px;
	min-height:60px;
	max-height:90%;
	overflow:auto;
  }

  #table-of-contents h2 {
	display:none;
  }



  /* These style are only for IE: */

  * html {
    overflow-y: hidden;
    padding-bottom:0px;
    margin:0px;
  }

  * html body {
    height: 100%;
    overflow-y: auto;
    font-size: 100%;
    margin: 0px 0px 0px 180px;
    padding: 0px 10% 0px 0px;
  }

  * html #table-of-contents {
    position: absolute;
    width:150px;
  }

  * html h1 {
    margin-top:10px;
  }

  * html .logo-link {
    position: absolute;
    top: 10px;
    left: 30px;
  }

}  /* END OF @media screen */




/* Printing */



@page
{
	margin-top:3cm;
    margin-bottom:2.5cm;
}

@page :left
{
  margin-left:1.5cm;
  margin-right:2cm;
}

@page :right
{
  margin-left:2cm;
  margin-right:1.5cm;
}


@media print
{
  body {
	margin:0px;
	font-family: Verdana, Helvetica, sans-serif;
  }

  div {
    orphans:2;
  }

  p {
    orphans:2;
  }

  li {
    orphans:2;
  }

  .logo-link {
    top: 10px;
    left: 30px;
  }

  #table-of-contents h2 {
    margin-top:1.5cm;
    page-break-before:auto;
    border-style:none;
  }

  #text-table-of-contents {
    width:50%;
    margin-top:1cm;
    margin-left:0cm;
    margin-right:auto;
    text-align:left;
  }

  #table-of-contents ul {
    text-align:left;
  }

  h2 {
    /* page-break-before:always; */
  }

  pre {
    page-break-inside:avoid;
  }

  /* Hide all org-info.js stuff for printing: */

  div#org-info-js_console-container {
    display:none;
  }

  div.org-info-js_local-toc {
    display:none;
  }

  table.org-info-js_info-navigation {
    display:none;
  }
  div.org-info-js_header-navigation {
    display:none;
    visibility:hidden; /* needed to overwrite the hardcoded style setting... */
  }

}  /* END OF @media print */

[-- Attachment #3: Type: text/plain, Size: 138 bytes --]


-- 
Christian Egli
Swiss Library for the Blind, Visually Impaired and Print Disabled
Grubenstrasse 12, CH-8045 Zürich, Switzerland

[-- Attachment #4: Type: text/plain, Size: 201 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: New CSS for orgmode and Worg ?

[Dan Davison]

While I remember, I have a CSS request: it would be nice if src code
blocks (and similar elements) could be formatted within a box which is
big enough to contain the code without wrapping, but does not
necessarily stretch all the way to the right margin. I don't know
anything about CSS I'm afraid; I hope that's feasible.

Thanks,

Dan

Christian Egli <christian.egli@sbszh.ch> writes:

> Bastien <bastien.guerry@wikimedia.fr> writes:
>
>> Christian Egli <christian.egli@sbszh.ch> writes:
>>
>>> What I'd like to see is something more aligned with the css for asciidoc
>>> which makes for a very pleasant and readable experience.
>>
>> Yes, the CSS behind asciidoc is neat.
>>
>>> Unfortunatelly my expertise is limited to trial and error when it
>>> comes to css.
>>
>> Trial and error will be very useful for suggested CSS.
>
> Actually, come to think of it: I had totally forgotten that I once took
> the css from org
> (http://repo.or.cz/w/org-mode.git/blob/HEAD:/ORGWEBPAGE/org.css) and
> added some asciidoc styling to it. An example output can be seen at
> http://www.daisyproducer.org/. It is in a "works for me" state, I think
> I probably hard coded some assumptions I had on my side.
>
> The css is attached. 
>
> If there is demand I could merge it with the original org.css or create
> a patch.
>
> Thanks
> Christian

Re: New CSS for orgmode and Worg ?

[Greg Newman]

Adding to my list Dan. Any other requests let me know.

-- Greg

On Monday, July 12, 2010, Dan Davison <davison@stats.ox.ac.uk> wrote:
> While I remember, I have a CSS request: it would be nice if src code
> blocks (and similar elements) could be formatted within a box which is
> big enough to contain the code without wrapping, but does not
> necessarily stretch all the way to the right margin. I don't know
> anything about CSS I'm afraid; I hope that's feasible.
>
> Thanks,
>
> Dan
>
> Christian Egli <christian.egli@sbszh.ch> writes:
>
>> Bastien <bastien.guerry@wikimedia.fr> writes:
>>
>>> Christian Egli <christian.egli@sbszh.ch> writes:
>>>
>>>> What I'd like to see is something more aligned with the css for asciidoc
>>>> which makes for a very pleasant and readable experience.
>>>
>>> Yes, the CSS behind asciidoc is neat.
>>>
>>>> Unfortunatelly my expertise is limited to trial and error when it
>>>> comes to css.
>>>
>>> Trial and error will be very useful for suggested CSS.
>>
>> Actually, come to think of it: I had totally forgotten that I once took
>> the css from org
>> (http://repo.or.cz/w/org-mode.git/blob/HEAD:/ORGWEBPAGE/org.css) and
>> added some asciidoc styling to it. An example output can be seen at
>> http://www.daisyproducer.org/. It is in a "works for me" state, I think
>> I probably hard coded some assumptions I had on my side.
>>
>> The css is attached.
>>
>> If there is demand I could merge it with the original org.css or create
>> a patch.
>>
>> Thanks
>> Christian
>
> _______________________________________________
> Emacs-orgmode mailing list
> Please use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode
>

Re: Re: New CSS for orgmode and Worg ?

[Bastien]

Hi Christian,

thanks for the css.

I've added the asciidoc-like css you propose to Worg as an alternate
stylesheet - people can switch to it on their browsers: Menu -> View
-> Page Style -> NextWorg.

If other Worgers want to add new stylesheets to Worg, please feel free
to do so!  Only remember the css must be compatible with the org-infojs
display...  which shouldn't be to hard to achieve.

Thanks,

-- 
 Bastien

Re: Re: New CSS for orgmode and Worg ?

[Bastien]

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

Bastien <bzg@gnu.org> writes:

> I've added the asciidoc-like css you propose to Worg as an alternate
> stylesheet - people can switch to it on their browsers: Menu -> View
> -> Page Style -> NextWorg.

Here is a screenshot demonstrating this worg2.css.


[-- Attachment #2: NextWorg.jpg --]
[-- Type: image/jpeg, Size: 176600 bytes --]

[-- Attachment #3: Type: text/plain, Size: 14 bytes --]


-- 
 Bastien

[-- Attachment #4: Type: text/plain, Size: 201 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode