From bf4c1e0cab9ecc4af8522974fb4addd5b4cf85a6 Mon Sep 17 00:00:00 2001 From: gauthiier Date: Fri, 23 Aug 2024 10:16:24 +0200 Subject: [PATCH] css media --- gen.py | 5 +- styles/+++/lestyle.css | 156 +++++++++++++++++++-------- templates/index_apache_template.html | 5 +- templates/index_template.html | 13 +-- 4 files changed, 127 insertions(+), 52 deletions(-) diff --git a/gen.py b/gen.py index cb776ba..4a01c6a 100644 --- a/gen.py +++ b/gen.py @@ -143,10 +143,11 @@ def index_content(dir_name: str, data_dir: pathlib.Path, index_txt: pathlib.Path if desc_md is None and content_index is None: return; + content_desc = "" content = "" if desc_md: - content += "
  • " + "" + "\n" + desc_md + "" + "
    • " + "\n"; + content_desc += "
  • " + "" + "\n" + desc_md + "" + "
    • " + "\n"; if content_index: @@ -171,7 +172,7 @@ def index_content(dir_name: str, data_dir: pathlib.Path, index_txt: pathlib.Path # check if there is an html file existing already. if so use that one. - html = template.replace('[[content]]', content).replace('[[dir]]', str(dir_name)); + html = template.replace('[[content_desc]]', content_desc).replace('[[content]]', content).replace('[[dir]]', str(dir_name)); try: out = data_dir / 'index.html' diff --git a/styles/+++/lestyle.css b/styles/+++/lestyle.css index 58f90b7..d9effc6 100644 --- a/styles/+++/lestyle.css +++ b/styles/+++/lestyle.css @@ -5,79 +5,106 @@ body { padding: 0; } -.tableau { - border: 10px grey ridge; - margin: 5em; - margin-bottom: 1em; +hd { + display: flex; + flex-direction: column; + max-width: 45em; + min-width: 250px; } +hd img { + width: 80%; + border: 10px grey ridge; + margin-bottom: 1em; + margin-top: 5em; + +} + +h1 { font-size: 2.7vw; } + +h2 { font-size: 2.2vw;} + +h3 { font-size: 1.7vw;} + +h4 { font-size: 1.3vw;} + table { - display: block; margin: 1em; border: 10px grey ridge; - font-size: small; text-align: left; - width: 55em; + max-width: 55em; + min-width: 250px; } -table td { - border: 2px grey ridge; +table tr { + display: flex; + flex-direction: column; + text-align: center; +} + +table tr td { padding: 1em; +/* width: 75em;*/ } table td h1 { - bborder: 1px red solid; margin-top: 0.4em; margin-bottom: 0.2em; } +table tr td img { + width: 100%; + height: auto; + border: 2px grey ridge; +} + +table tr td video { + width: 100%; + height: auto; + border: 2px grey ridge; +} + + +table td p { + margin-top: 0.1em; + margin-bottom: 0.4em; +} + h1 a:hover, h1 a:active { text-decoration: none; } - -table td p { - bborder: 1px red solid; - margin-top: 0.1em; - margin-bottom: 0.4em; -} - a:hover p, a:active p { text-decoration: none; } - -table tr { - text-align: center; -} - -table td img { - width: 100%; - border: 2px grey ridge; -} - .lst { + display: flex; + flex-direction: column; margin-right: 3em; + margin-left: 3em; } .lst p mat { margin-left: : 2em; } -.lst ul li { display: inline; } .lst ul li desc { - margin: 2em; + margin-left: 1em; + margin-right: 1em; margin-bottom: 1em; - width: 985; + min-width: 250px; + max-width: 1024px; display: block; } + .lst ul li desc img { border: 10px grey ridge; margin: 0em; margin-bottom: 2em; - width: 985; + width: 98%; display: block; } @@ -85,36 +112,42 @@ table td img { border: 10px grey ridge; margin: 0em; margin-bottom: 2em; - width: 985; + width: 98%; display: block; } +.lst ul li { display: inline-block; } + .lst ul li img { border: 10px grey ridge; - margin: 2em; + margin: 0.5em; margin-bottom: 1em; - width: 450; + resize: both; + overflow: auto; + width: 488px; } .lst ul li video { border: 10px grey ridge; - margin: 2em; + margin: 0.5em; margin-bottom: 1em; - width: 450; + width: 488px; } .lst ul li sound { - display: inline-block; + display: block; border: 10px grey ridge; - margin: 2em; - width: 440; + margin-left: 1em; + margin-right: 1em; padding: 10; + min-width: 250px; + max-width: 990px; } .lst ul li sound track { - display: block; margin-top: 0.3em; margin-bottom: 0.3em; + width: 100%; } .lst ul li sound info { @@ -126,19 +159,19 @@ table td img { margin-top: 0.5em; } -.lst ul li lo img { +.lst ul li desc lo img { border: none; margin: 1em; margin-top: 0.5em; max-width: 300; } -.lst ul li la img { +.lst ul li desc la img { border: none; margin: 1em; margin-top: 0.5em; max-width: 100; - max-height: 100; + min-width: 100; } address { @@ -149,4 +182,41 @@ address { margin: 20px; } +@media screen and (max-width: 1200px) { + h1 { font-size: 6vw; } + + h2 { font-size: 5.3vw;} + + h3 { font-size: 5vw;} + + h4 { font-size: 4vw;} + + p { font-size: 3.7vw;} + + pre { font-size: 3.5vw;} + + table { + max-width: 65em; + } + + + .lst ul li { display: block; } + + .lst ul li img { + border: 10px grey ridge; + margin: 0.5em; + margin-bottom: 1em; + width: 96%; + min-width: 250px; + } + + .lst ul li video { + border: 10px grey ridge; + margin: 0.5em; + margin-bottom: 1em; + width: 96%; + min-width: 250px; + } + +} diff --git a/templates/index_apache_template.html b/templates/index_apache_template.html index 20d984d..bd6979c 100644 --- a/templates/index_apache_template.html +++ b/templates/index_apache_template.html @@ -15,8 +15,11 @@
    +
    Apache Server at gauthiier.info Port 80
    diff --git a/templates/index_template.html b/templates/index_template.html index bcec571..51935a1 100644 --- a/templates/index_template.html +++ b/templates/index_template.html @@ -1,7 +1,7 @@ - + @@ -9,11 +9,12 @@
    - -

    David Gauthier

    -

    (Selected) Index of works

    -

    index of academic work

    -

    d[at]gauthiier.info

    + + +

    David Gauthier

    +

    (Selected) Index of works

    +

    index of academic work

    +     [[content]]