Browse Source

Become responsive

master
Quentin 4 months ago
parent
commit
7d76cab5a9
Signed by: quentin GPG Key ID: A98E9B769E4FF428
  1. 9
      _includes/footer.html
  2. 1
      _layouts/default.html
  3. 24
      _layouts/post.html
  4. 1
      _posts/2021-03-05-latex-dvi-integrer-image.md
  5. 150
      assets/css/highlight.css
  6. 144
      assets/css/style.css
  7. 12
      index.html
  8. 0
      ssh.keys

9
_includes/footer.html

@ -1,3 +1,8 @@
<footer id="footer">
<p class="small">© Copyright {{ site.time | date: '%Y' }} {{ site.author }}</p>
<footer>
<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>

1
_layouts/default.html

@ -9,6 +9,7 @@
<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/typo.css">
<link rel="stylesheet" href="/assets/css/highlight.css">
<link rel="shortcut icon" href="/assets/images/favicon.ico">
</head>
<body>

24
_layouts/post.html

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

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

@ -11,7 +11,6 @@ tags:
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.
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.

150
assets/css/highlight.css

@ -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;
}

144
assets/css/style.css

@ -8,6 +8,12 @@ html {
--color-second: #ffc0ba80;
}
@media screen and (max-width: 499px) {
html {
font-size: 50%;
}
}
body {
margin: 0px;
padding: 0px;
@ -16,34 +22,47 @@ body {
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "dlig", "salt";
font-size: 2.4rem;
line-height: 1.7;
}
main > section, footer {
max-width: 1000px;
padding: 3rem 3rem 3rem 200px;
margin: auto;
line-height: 1.6;
}
header {
width: 100%;
text-align: center;
margin: 3rem 1rem 3rem 1rem;
padding: 0px;
}
header > .meta {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer {
display: flex;
text-align: center;
font-size: 1.6rem;
color: var(--color-text-second);
padding: 0rem 1rem 2rem 1rem;
}
footer p {
padding-top: 0.1rem !important;
}
footer::before {
content: "🙠 🙢 ";
display: block;
color: var(--color-accent);
}
footer > section {
width: 50%;
main > section, main > article {
max-width: 1000px;
padding: 3rem;
margin: auto;
}
h1 {
font-size: 4.8rem;
font-weight: 500;
margin: 0px;
padding: 0px;
}
h1::after {
content: "🙡 🙣";
@ -52,20 +71,40 @@ h1::after {
color: var(--color-accent);
}
h2, h3 {
h2, h3, header > .meta, .sidelinks {
font-variant: small-caps;
font-weight: 700;
text-transform: lowercase;
letter-spacing: 0.1em;
font-size: 1.8rem;
margin-top: 0px;
line-height: 1.3;
}
@media screen and (min-width: 800px) {
main > section, main > article {
padding-left: 200px;
}
h2, .sidelinks {
display: block;
position: absolute;
width: 180px;
margin: 5px 0px 0px -200px;
text-align: right;
padding: 0px 20px 0px 0px;
}
}
h2 {
position: absolute;
width: 180px;
margin: 0px 0px 0px -200px;
text-align: right;
padding: 5px 20px 0px 0px;
@media screen and (max-width: 799px) {
h2::before {
content: "🙬 ";
}
h2::after {
content: " 🙮";
}
}
h3 {
@ -82,20 +121,24 @@ p {
margin: 0;
}
.list ul {
padding: 0px;
ul {
list-style: none;
}
.list li {
display: inline;
article ul li::before {
content: "❦";
color: var(--color-accent);
padding-right: 1rem;
}
.list li:not(:first-child)::before {
content: "🙘";
display: inline-block;
vertical-align: middle;
width: 4rem;
text-align: center;
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 {
@ -110,6 +153,35 @@ 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 {
padding: 0px;
}
.list li {
display: inline;
}
.list li:not(:first-child)::before {
content: "🙘";
display: inline-block;
vertical-align: middle;
width: 4rem;
text-align: center;
}
.card {
margin-bottom: 1.8rem;
}
@ -118,3 +190,17 @@ a:hover {
font-size: 1.6rem;
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

@ -22,7 +22,7 @@ layout: default
<a href="/feed.xml">Flux RSS</a>
</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>
<a href="/cv.pdf">CV</a>
@ -96,11 +96,10 @@ layout: default
</div>
</section>
</section>
</main>
<footer>
<h2>Des liens</h2>
<section>
<section class="blocks" id="links">
<h2>Des liens</h2>
<section>
<h3>Pour des rencontres</h3>
<div class="card">
@ -179,4 +178,5 @@ layout: default
</div>
</section>
</footer>
</section>
{% include footer.html %}

0
keys.txt → ssh.keys

Loading…
Cancel
Save