first commit

assets/README.md

@@ -0,0 +1,19 @@
+
+
+HTML paged.js
+
+```
+pandoc --template=assets/template.html --toc -o output.html input.md
+```
+
+
+
+PDF plus léger:
+
+```
+gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/printer -dNOPAUSE -dQUIET -dBATCH -sOutputFile=output.pdf input.pdf
+```
+
+
+
+

assets/add_section_ids.lua

@@ -0,0 +1,49 @@
+local filenames = PANDOC_STATE.input_files or {}
+
+function Pandoc(doc)
+  local blocks = {}
+
+  -- Check if input files are available
+  if not filenames or #filenames == 0 then
+    io.stderr:write("Error: No input files found in PANDOC_STATE.input_files\n")
+    return doc
+  end
+
+  -- Process each file independently
+  for _, filename in ipairs(filenames) do
+    -- Extract the ID from the filename (the name without the extension)
+    local section_id = filename:match("([^/]+)%.md$")
+    local section_class = ""
+
+    -- Check if the filename contains "portfolio"
+    if filename:match("portfolio") then
+      section_class = " class=\"portfolio-group\""
+    end
+
+    -- Add a section for each file with the optional class
+    table.insert(blocks, pandoc.RawBlock("html", "<section id=\"" .. section_id .. "\"" .. section_class .. ">"))
+    
+    -- Read the content of the file as raw text
+    local file = io.open(filename, "r")
+    if not file then
+      io.stderr:write("Error: Unable to read file " .. filename .. "\n")
+      return doc
+    end
+    local file_content = file:read("*all")
+    file:close()
+
+    -- Convert the Markdown content to Pandoc blocks
+    local file_doc = pandoc.read(file_content, 'markdown')
+
+    -- Add the blocks from the file to the section
+    for _, block in ipairs(file_doc.blocks) do
+      table.insert(blocks, block)
+    end
+    
+    -- Close the section
+    table.insert(blocks, pandoc.RawBlock("html", "</section>"))
+  end
+
+  -- Return the modified document
+  return pandoc.Pandoc(blocks, doc.meta)
+end

assets/fonts/Area/stylesheet.css

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: 'Area Normal';
+    src: url('AreaNormal-Bold.woff2') format('woff2'),
+        url('AreaNormal-Bold.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Area Normal';
+    src: url('AreaNormal-BoldItalic.woff2') format('woff2'),
+        url('AreaNormal-BoldItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Area Normal';
+    src: url('AreaNormal-Black.woff2') format('woff2'),
+        url('AreaNormal-Black.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Area Normal';
+    src: url('AreaNormal-BlackItalic.woff2') format('woff2'),
+        url('AreaNormal-BlackItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}

assets/fonts/Geist-mono/stylesheet.css

@@ -0,0 +1,180 @@
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Italic.woff2') format('woff2'),
+        url('GeistMono-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-ThinItalic.woff2') format('woff2'),
+        url('GeistMono-ThinItalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-ExtraLightItalic.woff2') format('woff2'),
+        url('GeistMono-ExtraLightItalic.woff') format('woff');
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-SemiBold.woff2') format('woff2'),
+        url('GeistMono-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Regular.woff2') format('woff2'),
+        url('GeistMono-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-SemiBoldItalic.woff2') format('woff2'),
+        url('GeistMono-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Italic.woff2') format('woff2'),
+        url('GeistMono-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-BoldItalic.woff2') format('woff2'),
+        url('GeistMono-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-MediumItalic.woff2') format('woff2'),
+        url('GeistMono-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-BlackItalic.woff2') format('woff2'),
+        url('GeistMono-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Thin.woff2') format('woff2'),
+        url('GeistMono-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Bold.woff2') format('woff2'),
+        url('GeistMono-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-LightItalic.woff2') format('woff2'),
+        url('GeistMono-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-ExtraBoldItalic.woff2') format('woff2'),
+        url('GeistMono-ExtraBoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Black.woff2') format('woff2'),
+        url('GeistMono-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-ExtraBold.woff2') format('woff2'),
+        url('GeistMono-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-ExtraLight.woff2') format('woff2'),
+        url('GeistMono-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Regular.woff2') format('woff2'),
+        url('GeistMono-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Medium.woff2') format('woff2'),
+        url('GeistMono-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('GeistMono-Light.woff2') format('woff2'),
+        url('GeistMono-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+

assets/style.css

@@ -0,0 +1,362 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased
+}
+
+
+body{
+    font-family: 'Area Normal';
+    font-size: 12px;
+    line-height: 1.5em;
+    --small: 9px;
+    --light: #bfbfbf;
+    --title: 20px;
+    --mono: 'Geist Mono';
+    --table-w: 760px;
+}
+
+a{
+    color: currentColor;
+}
+
+img{ width: 100%; }
+
+
+@page {
+    size: A4 landscape;
+    margin-left: 14mm;
+    margin-right: 14mm;
+    margin-top: 8mm; 
+    margin-bottom: 14mm; 
+    @bottom-left {
+      content: element(titleRunning);
+     
+      
+      
+    }
+    @bottom-right-corner{
+        content: counter(page) "/" counter(pages);
+        /* font-size: 8px; */
+        color: var(--light);
+        text-align: left;
+    
+        
+    }
+  }
+
+#note-intention,
+#devis,
+#equipe,
+#details{
+    break-before: page;
+    break-after: page;
+}
+
+
+header{
+    margin-top: 20em;
+    margin-bottom: 3em;
+}
+header h1{
+    font-size: 6em;
+    line-height: 1em;
+}
+
+header h2{
+    margin-top: 0.5em;
+}
+
+
+#studio-variable{
+    break-after: page;
+    max-width: 56ch;
+ 
+}
+
+
+
+
+.infos{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 1ch;
+}
+
+
+section > h2{
+    font-weight: bold;
+    font-size: var(--title);
+    break-after: none;
+    margin-bottom: 2em;
+}
+
+section > h2::before{
+    content: '● ';
+}
+
+p{ 
+    margin: .75em 0;
+    widows: 3;
+    orphans: 3;
+}
+
+h3{
+    font-size: 1em;
+    margin-top: 2em;
+    margin-bottom: 1em;
+}
+
+
+
+ul{
+    list-style-type: square;
+    margin-left: 2em;
+}
+
+footer{
+    position: running(titleRunning);
+    /* font-size: 8px; */
+    color: var(--light);
+
+}
+
+
+@media screen, pagedjs-ignore{
+    body{
+        padding: 20px;
+        background-color: #efefef
+    }
+    .pagedjs_page{
+        outline: 1px solid #cfcfcf;
+        background-color: white;
+        margin-bottom: 30px;
+    }
+
+    .pagedjs_pages{
+        margin: 0 auto;
+        width: var(--pagedjs-width-right);
+    }
+}
+
+
+
+/* NOTE INTENTION -------------------------------------------- */
+
+#note-intention{
+    columns: 2;
+    column-fill: auto;
+    column-gap: 2.5em;
+
+}
+
+#note-intention h2{
+    column-span: all;
+}
+
+#note-intention h2 + p{
+    margin-top: 0em;
+}
+
+
+/* DEVIS -------------------------------------------- */
+
+
+
+#devis h2 + p{
+
+    width: var(--table-w);
+    text-align: right; 
+    margin-bottom: 1.5em;
+}
+
+#devis table{
+    width: 760px;
+    /* font-family: var(--mono); */
+    border-collapse: collapse;
+    border-bottom: 1px solid #cfcfcf;
+}
+
+#devis table thead th{
+    background-color: #efefef;
+    text-align: left;
+}
+
+#devis table thead th, td{
+    padding: 5px 1ch;
+}
+
+#devis table thead th:nth-of-type(2),
+#devis table thead th:nth-of-type(3),
+#devis table td:nth-of-type(2),
+#devis table td:nth-of-type(3){
+    text-align: right!important;
+}
+
+#devis table tr:nth-of-type(even){
+    background-color: #efefef;
+
+}
+
+#devis table .indent{
+    display: inline-block;
+    width: 4ch;
+}
+
+
+#devis #total table{
+    /* border-top: 1px solid #cfcfcf; */
+    width: 400px;
+    margin-left: calc(var(--table-w) - 400px);
+    margin-top: 2em;
+    border-bottom: none;
+}
+
+#devis #total th,
+#devis #total td{
+    background-color: transparent!important;
+    font-weight: bold;
+}
+
+#devis #total tr:nth-of-type(1){
+    color: var(--light);
+}
+
+
+#devis #total tr:nth-of-type(2) td{
+    background-color: transparent!important;
+}
+
+
+#devis #total + p{
+    margin-top: 3em;
+    font-size: var(--small);
+    line-height: 1.5em;
+    max-width: 40ch;
+    margin-left: calc(var(--table-w) - 400px);
+    
+}
+
+
+/* PLANNING & LIVRABLES ---------------------------------------- */
+
+
+#livrables{
+    margin-top: 5em;
+}
+
+
+/* EQUIPE --------------------------------------------------- */
+
+#equipe .people{
+    min-height: 160px;
+    break-inside: avoid;
+    margin-top: 6em;
+    margin-bottom: 6em;
+    padding-left: 220px;
+    position: relative;
+    margin-left: 5em;
+}
+
+
+#equipe figure{
+    width: 160px;
+    position: absolute;
+    left: 0px;
+ 
+}
+
+#equipe figure figcaption{
+    display: none;
+}
+
+#equipe .people h1{
+    font-size: var(--title);
+    line-height: 1.2em;
+    margin-top: 5px;
+}
+
+
+#equipe .people p{
+    max-width: 52ch;
+}
+
+
+
+
+/* PORTFOLIO intro-------------------------------------------- */
+
+#portfolio-introduction > h2{
+    margin-bottom: 0px;
+
+}
+
+
+
+
+/* PORTFOLIO 1img -------------------------------------------- */
+
+.portfolio-group{
+    display: grid;
+    grid-template-columns: 500px 1fr;
+    grid-column-gap: 2em;
+    grid-template-rows: auto auto 1fr;
+    break-inside: avoid;
+    margin-bottom: 3em;
+}
+
+.portfolio-group figure{
+    grid-column: 1;
+    grid-row: 1/4;
+    margin: 0;
+    border: 1px solid #cfcfcf;
+    aspect-ratio: 5/3;
+    overflow: hidden;
+}
+
+.portfolio-group figure figcaption{ display: none; }
+
+.portfolio-group figure img{
+    width: 100%;
+    display: flex;
+
+}
+
+.portfolio-group h1{
+    grid-column: 2;
+    grid-row: 1;
+    font-size: var(--title);
+    line-height: 1.2em;
+    margin-top: 5px;
+}
+
+.portfolio-group p{
+    grid-column: 2;
+    grid-row: 2;
+    width: 54ch;
+}
+
+.portfolio-group .details{
+    grid-column: 2;
+    grid-row: 3;
+    margin-top: 0.75em;
+}
+
+
+.portfolio-group .details dl{
+    display: flex;
+    margin-bottom: 0.5ch;
+  
+}
+
+.portfolio-group .details dt{
+    width: 12ch;
+    font-weight: bold;
+    flex: 0 0 auto;
+}
+
+

assets/template.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>$title$</title>
+    <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
+
+
+    <link rel="stylesheet" type="text/css" href="assets/style.css">
+    <link rel="stylesheet" type="text/css" href="assets/fonts/Area/stylesheet.css">
+    <link rel="stylesheet" type="text/css" href="assets/fonts/Geist-mono/stylesheet.css">
+
+
+</head>
+<body>
+
+    <aside class="infos">
+        <p>$client$</p>
+        <p>$date$</p>
+        <p>$contact$</p>
+    </aside>
+
+    <header>
+        <h1>$title$</h1>
+        <h2>$baseline$</h2>
+    </header>
+
+    <footer>
+        <p><p>$footer$</p></p>
+    </footer>
+
+
+    $body$
+
+
+   
+
+
+   
+</body>
+</html>