Become responsive
This commit is contained in:
parent
98c12bdc43
commit
7d76cab5a9
GPG Key ID:
A98E9B769E4FF428
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,18 @@
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<article class="post">
|
<header>
|
||||||
<header>
|
<h1>{{ page.title }}</h1>
|
||||||
<h1>{{ page.title }}</h1>
|
<div class="meta">Publié le {{ page.date | date:"%d/%m/%Y" }}</div>
|
||||||
<h2 class="headline">{{ page.date | date:"%B %-d, %Y" }}</h2>
|
</header>
|
||||||
</header>
|
|
||||||
<section id="post-body">
|
<main>
|
||||||
{{content}}
|
<article class="post">
|
||||||
</section>
|
<div class="sidelinks"> <a href="/">← Retour</a> </div>
|
||||||
</article>
|
{{content}}
|
||||||
|
<div class="sidelinks"> <a href="/">← Retour</a> </div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
{% include footer.html %}
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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) {
|
||||||
position: absolute;
|
main > section, main > article {
|
||||||
width: 180px;
|
padding-left: 200px;
|
||||||
margin: 0px 0px 0px -200px;
|
}
|
||||||
text-align: right;
|
|
||||||
padding: 5px 20px 0px 0px;
|
h2, .sidelinks {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 180px;
|
||||||
|
margin: 5px 0px 0px -200px;
|
||||||
|
text-align: right;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
12
index.html
12
index.html
|
|
@ -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,11 +96,10 @@ 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>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -179,4 +178,5 @@ layout: default
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</footer>
|
</section>
|
||||||
|
{% include footer.html %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue