Become responsive
This commit is contained in:
parent
98c12bdc43
commit
7d76cab5a9
GPG key ID:
A98E9B769E4FF428
8 changed files with 296 additions and 49 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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
Normal file
150
assets/css/highlight.css
Normal 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;
|
||||
}
|
||||
|
|
@ -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 > section {
|
||||
width: 50%;
|
||||
footer p {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
margin: 0px 0px 0px -200px;
|
||||
text-align: right;
|
||||
padding: 5px 20px 0px 0px;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 799px) {
|
||||
h2::before {
|
||||
content: "🙬 ";
|
||||
}
|
||||
h2::after {
|
||||
content: " 🙮";
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -82,6 +121,51 @@ p {
|
|||
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 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -98,18 +182,6 @@ p {
|
|||
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 {
|
||||
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
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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue