quentin/quentin.dufour.io
1
0
Fork 2
Code Issues 3 Pull requests Releases Wiki Activity

Become responsive

Browse source
This commit is contained in:
Quentin 2021-07-14 21:40:13 +02:00
parent 98c12bdc43
commit 7d76cab5a9
Signed by: quentin
GPG key ID: A98E9B769E4FF428
8 changed files with 296 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_includes/footer.html
View file

@ -1,3 +1,8 @@
<footer id="footer"> <footer>
<p class="small">© Copyright {{ site.time | date: '%Y' }} {{ site.author }}</p> <p>License <a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1">CC BY-SA 4.0</a>.
Les sources sont accessibles via le <a href="https://git.deuxfleurs.fr/quentin/quentin.dufour.io">dépôt Git</a>.
</p>
<p>Ce site est propulsé par <a href="https://jekyllrb.com/">Jekyll</a>,
servi par <a href="https://garagehq.deuxfleurs.fr">Garage</a> et hébergé par
<a href="https://deuxfleurs.fr">Deuxfleurs</a>.</p>
</footer> </footer>

1
_layouts/default.html
View file

@ -9,6 +9,7 @@
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="/feed.xml"> <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="/feed.xml">
<link rel="stylesheet" href="/assets/css/style.css"> <link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/typo.css"> <link rel="stylesheet" href="/assets/css/typo.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="shortcut icon" href="/assets/images/favicon.ico"> <link rel="shortcut icon" href="/assets/images/favicon.ico">
</head> </head>
<body> <body>

14
_layouts/post.html
View file

@ -2,12 +2,18 @@
layout: default layout: default
--- ---
<article class="post">
<header> <header>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<h2 class="headline">{{ page.date | date:"%B %-d, %Y" }}</h2> <div class="meta">Publié le {{ page.date | date:"%d/%m/%Y" }}</div>
</header> </header>
<section id="post-body">
<main>
<article class="post">
<div class="sidelinks"> <a href="/">← Retour</a> </div>
{{content}} {{content}}
</section> <div class="sidelinks"> <a href="/">← Retour</a> </div>
</article> </article>
</main>
{% include footer.html %}

1
_posts/2021-03-05-latex-dvi-integrer-image.md
View file

@ -11,7 +11,6 @@ tags:
Pour les compilateurs LaTeX compilant vers le format DVI-Tex (DeVice Independent) / PostScript, Pour les compilateurs LaTeX compilant vers le format DVI-Tex (DeVice Independent) / PostScript,
il n'est pas possible d'intégrer directement des images au format JPG, PNG ou autre. il n'est pas possible d'intégrer directement des images au format JPG, PNG ou autre.
Si aujourd'hui le plus simple est d'utiliser un compilateur LaTeX qui produit des fichiers au format PDF et supporte les formats d'image précédents, Si aujourd'hui le plus simple est d'utiliser un compilateur LaTeX qui produit des fichiers au format PDF et supporte les formats d'image précédents,
ce n'est pas toujours possible. ce n'est pas toujours possible.

150
assets/css/highlight.css Normal file
View file

@ -0,0 +1,150 @@
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1 {
color: #888888;
}
.highlight .cp {
color: #cc0000;
font-weight: bold;
}
.highlight .cs {
color: #cc0000;
background-color: #fff0f0;
font-weight: bold;
}
.highlight .err {
color: #a61717;
background-color: #e3d2d2;
}
.highlight .gr {
color: #aa0000;
}
.highlight .gh {
color: #333333;
}
.highlight .gu {
color: #666666;
}
.highlight .gd {
color: #000000;
background-color: #ffdddd;
}
.highlight .gi {
color: #000000;
background-color: #ddffdd;
}
.highlight .ge {
font-style: italic;
}
.highlight .gs {
font-weight: bold;
}
.highlight .gl {
color: #888888;
}
.highlight .go {
color: #888888;
}
.highlight .gp {
color: #555555;
}
.highlight .gt {
color: #aa0000;
}
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kv {
color: #008800;
font-weight: bold;
}
.highlight .kp {
color: #008800;
}
.highlight .kt {
color: #888888;
font-weight: bold;
}
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
color: #0000dd;
font-weight: bold;
}
.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .s1 {
color: #dd2200;
background-color: #fff0f0;
}
.highlight .sa {
color: #008800;
font-weight: bold;
}
.highlight .se {
color: #0044dd;
background-color: #fff0f0;
}
.highlight .si {
color: #3333bb;
background-color: #fff0f0;
}
.highlight .sx {
color: #22bb22;
background-color: #f0fff0;
}
.highlight .sr {
color: #008800;
}
.highlight .ss {
color: #aa6600;
background-color: #fff0f0;
}
.highlight .na {
color: #336699;
}
.highlight .nb, .highlight .bp {
color: #003388;
}
.highlight .nc {
color: #bb0066;
font-weight: bold;
}
.highlight .no {
color: #003366;
font-weight: bold;
}
.highlight .nd {
color: #555555;
}
.highlight .ne {
color: #bb0066;
font-weight: bold;
}
.highlight .nf, .highlight .fm {
color: #0066bb;
font-weight: bold;
}
.highlight .nl {
color: #336699;
}
.highlight .nn {
color: #bb0066;
font-weight: bold;
}
.highlight .py {
color: #336699;
font-weight: bold;
}
.highlight .nt {
color: #bb0066;
font-weight: bold;
}
.highlight .nv, .highlight .vc, .highlight .vm {
color: #336699;
}
.highlight .vg {
color: #dd7700;
}
.highlight .vi {
color: #3333bb;
}
.highlight .ow {
color: #008800;
}
.highlight .w {
color: #bbbbbb;
}

142
assets/css/style.css
View file

@ -8,6 +8,12 @@ html {
--color-second: #ffc0ba80; --color-second: #ffc0ba80;
} }
@media screen and (max-width: 499px) {
html {
font-size: 50%;
}
}
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -16,34 +22,47 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "dlig", "salt"; font-feature-settings: "kern", "liga", "dlig", "salt";
font-size: 2.4rem; font-size: 2.4rem;
line-height: 1.7; line-height: 1.6;
}
main > section, footer {
max-width: 1000px;
padding: 3rem 3rem 3rem 200px;
margin: auto;
} }
header { header {
width: 100%;
text-align: center; text-align: center;
margin: 3rem 1rem 3rem 1rem;
padding: 0px;
}
header > .meta {
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 3rem;
} }
footer { footer {
display: flex; text-align: center;
font-size: 1.6rem;
color: var(--color-text-second);
padding: 0rem 1rem 2rem 1rem;
} }
footer > section { footer p {
width: 50%; padding-top: 0.1rem !important;
}
footer::before {
content: "🙠 🙢 ";
display: block;
color: var(--color-accent);
}
main > section, main > article {
max-width: 1000px;
padding: 3rem;
margin: auto;
} }
h1 { h1 {
font-size: 4.8rem; font-size: 4.8rem;
font-weight: 500; font-weight: 500;
margin: 0px; margin: 0px;
padding: 0px;
} }
h1::after { h1::after {
content: "🙡 🙣"; content: "🙡 🙣";
@ -52,20 +71,40 @@ h1::after {
color: var(--color-accent); color: var(--color-accent);
} }
h2, h3 { h2, h3, header > .meta, .sidelinks {
font-variant: small-caps; font-variant: small-caps;
font-weight: 700;
text-transform: lowercase; text-transform: lowercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
font-size: 1.8rem; font-size: 1.8rem;
margin-top: 0px; margin-top: 0px;
line-height: 1.3;
} }
h2 { @media screen and (min-width: 800px) {
main > section, main > article {
padding-left: 200px;
}
h2, .sidelinks {
display: block;
position: absolute; position: absolute;
width: 180px; width: 180px;
margin: 0px 0px 0px -200px; margin: 5px 0px 0px -200px;
text-align: right; text-align: right;
padding: 5px 20px 0px 0px; padding: 0px 20px 0px 0px;
}
}
@media screen and (max-width: 799px) {
h2::before {
content: "🙬 ";
}
h2::after {
content: " 🙮";
}
} }
h3 { h3 {
@ -82,6 +121,51 @@ p {
margin: 0; margin: 0;
} }
ul {
list-style: none;
}
article ul li::before {
content: "❦";
color: var(--color-accent);
padding-right: 1rem;
}
p + p,
* + h2,
h2:not(:first-child) + p,
h2:not(:first-child) + .highlighter-rouge
h2:not(:first-child) + pre
{
padding-top: 5rem;
}
a, a:hover, a:visited {
padding: 0rem 0.6rem;
margin: 0rem -0.6rem;
color: var(--color-accent);
text-decoration: none;
transition: background-color 400ms;
}
a:hover {
background-color: var(--color-second);
}
img {
max-width: 100%;
}
blockquote {
font-style: italic;
border-left: solid 1rem var(--color-accent);
padding-left: 2rem;
}
/*
* Composants maison
*/
.list ul { .list ul {
padding: 0px; padding: 0px;
} }
@ -98,18 +182,6 @@ p {
text-align: center; text-align: center;
} }
a, a:hover, a:visited {
padding: 0rem 0.6rem;
margin: 0rem -0.6rem;
color: var(--color-accent);
text-decoration: none;
transition: background-color 400ms;
}
a:hover {
background-color: var(--color-second);
}
.card { .card {
margin-bottom: 1.8rem; margin-bottom: 1.8rem;
} }
@ -118,3 +190,17 @@ a:hover {
font-size: 1.6rem; font-size: 1.6rem;
color: var(--color-text-second); color: var(--color-text-second);
} }
.highlighter-rouge, pre {
overflow-x: auto;
}
@media screen and (min-width: 800px) {
.blocks {
display: flex;
}
.blocks > section {
width: 50%;
}
}

8
index.html
View file

@ -22,7 +22,7 @@ layout: default
<a href="/feed.xml">Flux RSS</a> <a href="/feed.xml">Flux RSS</a>
</li> </li>
<li> <li>
<a href="https://git.deuxfleurs.fr">Git</a> (<a href="/ssh.keys">SSH</a>) <a href="https://git.deuxfleurs.fr/quentin">Git</a> (<a href="/ssh.keys">SSH</a>)
</li> </li>
<li> <li>
<a href="/cv.pdf">CV</a> <a href="/cv.pdf">CV</a>
@ -96,9 +96,8 @@ layout: default
</div> </div>
</section> </section>
</section> </section>
</main>
<footer> <section class="blocks" id="links">
<h2>Des liens</h2> <h2>Des liens</h2>
<section> <section>
<h3>Pour des rencontres</h3> <h3>Pour des rencontres</h3>
@ -179,4 +178,5 @@ layout: default
</div> </div>
</section> </section>
</footer> </section>
{% include footer.html %}

0
keys.txt → ssh.keys
View file