## CSS obscure rule: margin-top of

affects parent's margin As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins: "In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero Basically in our example on the original question, the biggest margin-top is the one of the

therefore taken and applied to the parent
. This rule is cancelled for: * Floated elements * Absolutely positioned elements * Inline-block elements * Elements with overflow set to anything other than visible (They do not collapse margins with their children.) * Cleared elements (They do not collapse their top margins with their parent block's bottom margin.) * The root element That is the reason why overflow:hidden solved the issue. h2(#css-grids). CSS grids https://jsfiddle.net/zw9c7owa/ https://jsfiddle.net/zw9c7owa/3/ https://jsfiddle.net/zw9c7owa/4/ https://jsfiddle.net/zw9c7owa/6/ https://jsfiddle.net/zw9c7owa/7/ https://jsfiddle.net/zw9c7owa/8/ https://jsfiddle.net/zw9c7owa/12/ -> yeah! https://jsfiddle.net/zw9c7owa/13/ https://jsfiddle.net/zw9c7owa/14/ https://jsfiddle.net/zw9c7owa/15/ https://jsfiddle.net/zw9c7owa/16/ https://jsfiddle.net/zw9c7owa/17/ Emulate CSS media print : https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6 h2(#processing-connections). processing connections https://research.lafkon.net/projects/dit/ https://research.lafkon.net/projects/lac2008/ h3(#visualer-les-media-print-en-redimensionnant-la-page). visualer les media print en redimensionnant la page @media screen and (max-width: 699px) or media print { ... } h3(#john-resig-micro-template). John Resig Micro template Si jamais vous avez besoin de générer du HTML en javascript... https://johnresig.com/blog/javascript-micro-templating/ h2(#césures). Césures http://gitlab.constantvzw.org/osp/tools.html5lib_typogrify Les version récentes de webkit gèrent les césures interdire les césures bc. -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; autoriser les césures bc. -webkit-hyphens: auto; Gérer les césures bc. -webkit-hyphenate-limit-before: 2; /* 2 caractères minimum en fin de ligne, donc en début de mot */ -webkit-hyphenate-limit-after: 2; /* 3 caractères minimum en début de ligne, donc en fin de mot */ -webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */ NE PAS OUBLIER D'INSTALLER HYPHEN! sur arch @sudo pacman -S hyphen@ ou @yaourt -S hyphen@ h2(#css-variables-in-page). CSS variables in @page https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules h2(#convertir-tous-les-fichiers-html-en-markdown). Convertir tous les fichiers HTML en Markdown attention, vous allez perdre le contenu non-sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code for file in *.html; do pandoc --from html --to markdown --output "{file%.*}.md" "file"; done h2(#html2print-readme). HTML2Print readme h3(#exemples-de-readme-visuels). exemples de readme visuels * http://organon.osp.kitchen/70 * http://blog.lavillahermosa.com/brass-%E2%86%92-print-tool-v1/ * http://design.lavillahermosa.com/works-288-le-brass-2014 * http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory-learning-archives-et-bidouillages-workshop-au-mundaneum-24-261016/ * http://lorainefurter.net/readme/readme-workflows.html * https://hpg.io/ * https://youtu.be/eIgX6sPOqCY?t=2m40s !http://hpg.io/img/multi_format.png! https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET-EN.pdf https://research.lafkon.net/content/2.projects/6.wtf/99.wtf_generator_1_00_WEB.gif http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png h3(#workflow-dun-numéro-de-médor). workflow d'un numéro de Médor * http://organon.osp.kitchen/90 h3(#python-rss-to-html). python rss to html https://figureslibres.io/gogs/bachir/python-rss2html 
#!/usr/bin/python
# -*- coding: utf-8 -*-


import feedparser
from bs4 import BeautifulSoup

def main():
   # url du flux rss
   tpsreac_feed_url = "https://tempsdereaction.wordpress.com/feed/"

   # on aspire le flux rss avec feedparser
   tpsreac_feeds = feedparser.parse(tpsreac_feed_url)

   # base template du fichier html
   base = "<html><head></head><body></body></html>"
   # create dom for html file base
   base_dom = BeautifulSoup(base, 'html.parser')

   # page base template
   page_base = "<section class='page'></section>"

   # boucle sur les entrées racine du flux
   for key in tpsreac_feeds:
      print(key)

   # on boucle sur les entrées du flux rss
   for entrie in tpsreac_feeds['entries']:
      print('- - - - -',entrie['title'])
      # just display entrie keys
      for key in entrie:
         print(key)
         #     entries.extend( feed[ "items" ] )

      # create page dom
      p_dom = BeautifulSoup(page_base, 'html.parser')
      # add content in page dom
      p_dom.section.append(entrie['summary'])

      # add newly created page dom to html dom
      base_dom.body.append(p_dom)

   # create main html file from filled base html dom
   with open("index.html", 'w') as fp:
      fp.write(base_dom.prettify(formatter=None))


if __name__ == "__main__":
   main()
h3(#python-pandoc-and-template). python pandoc and template https://figureslibres.io/gogs/bachir/gitbook-html2print 
#!/usr/bin/python
# -*- coding: utf-8 -*-

from bs4 import BeautifulSoup
import pypandoc

def main():
       # create main html dom from template
       template_f = open("templates/main.tpl.html", "r")
       template_html = template_f.read()
       template_dom = BeautifulSoup(template_html, 'html.parser')
    

      pdoc_args = ['--mathjax',
                   '--smart']

      pdoc_filters = []

      output = pypandoc.convert_file("lechemin/de/monfichier.md",
                               to='html5',
                               format='markdown+header_attributes+link_attributes+bracketed_spans',
                               extra_args=pdoc_args,
                               filters=pdoc_filters)
                              #  outputfile=out_f)

      # print("output :\n"+output)

      output_dom = BeautifulSoup(output, 'html.parser')

      template_dom.append(output_dom)
      
    # create main html file from filled template html dom
    html_f = 'monfichier.html'
    with open(html_f, 'w') as fp:
        fp.write(template_dom.prettify(formatter=None))



if __name__ == "__main__":
   main()
h2(#ajuster-une-image). Ajuster une image voir https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit et https://developer.mozilla.org/en-US/docs/Web/CSS/object-position h2(#css-regions). CSS regions h1(#flow-main). flow-main { bc. -webkit-flow-into: flow-main; flow-into: flow-main; } .flow-main { -webkit-flow-from: flow-main; flow-from: flow-main; } ex: https://jsfiddle.net/asmqaheq/