change theme for header and use grid

This commit is contained in:
rick 2022-03-18 01:53:30 +01:00
parent 28d093ab45
commit d02bdccc9b
Signed by: Rick
GPG key ID: 4A6223D66294EB20
8 changed files with 206 additions and 200 deletions

View file

@ -6,10 +6,10 @@
</head>
<body>
<header>
<div id="header-title">
<h1>gyiwr dot tf</h1>
<h1><a href="index.html">gyiwr dot tf</a></h1>
<h2>le site de rick</h2>
</div>
</header>
<div id="header-links">
<a href="ou.html">où me retrouver</a>
<a href="copaings.html">copains & co</a>
@ -18,12 +18,12 @@
<a href="rss.html">mes flux rss</a>
<a href="autres.html">autres</a>
</div>
</header>
<div id="main">
<p>Vous pouvez ici retrouver des liens vers des pages contenant parfois certaines pensées fugaces et autres (d'où le nom, habile). Comme ce format se rapproche presque du blog, j'ai préféré les écrire et générer ces pages avec OrgMode, afin d'avoir une lecture plus fluide (et moins de choses à écrire).</p>
<ul>
<li><a href="inspiration.html">inspiration</a>: pourquoi avoir fait ce site comme ça ?</li>
<!--<li><a></a></li>-->
<li><a href="autres/gpg.html">Clés GPG</a></li>
<!--<li><a href="inspiration.html">inspiration</a>: pourquoi avoir fait ce site comme ça ?</li>-->
<!--<li><a href=""></a></li>-->
</ul>
</div>

View file

@ -7,10 +7,10 @@
</head>
<body>
<header>
<div id="header-title">
<h1>gyiwr dot tf</h1>
<h1><a href="index.html">gyiwr dot tf</a></h1>
<h2>le site de rick</h2>
</div>
</header>
<div id="header-links">
<a href="ou.html">où me retrouver</a>
<a href="copaings.html">copains & co</a>
@ -19,7 +19,6 @@
<a href="rss.html">mes flux rss</a>
<a href="autres.html">autres</a>
</div>
</header>
<div id="main">
<p>Vous pouvez trouver ici pleins de liens vers les sites personnels de personnes que je connais (plus ou moins, parfois trouvé au détour d'un tweet, d'un pouet, d'un flux RSS...). Vous pouvez me contacter pour que je puisse vous y ajouter (ou vous retirer / modifier un lien, un nom). Je n'accepte cependant que les sites personnels ou les blogs, pas les projets ou associations qui iront plutot dans l'annuaire.</p>

View file

@ -1,12 +1,5 @@
.tableau {
margin: 4em;
margin-bottom: 2em;
margin-top: -2em;
}
table {
border: 1px solid black;
border-spacing: 0;
border-collapse: collapse;
}
@ -17,3 +10,7 @@ thead {
tr:nth-child(even) {
background-color: rgb(228, 240, 245);
}
td {
border-left: 1px dotted black;
}

View file

@ -1,8 +1,10 @@
body {
margin: 0;
display: flex;
flex-direction: column;
/*display: flex;
flex-direction: column;*/
display: grid;
min-height: 100vh;
grid-template-rows: auto 1fr auto;
}
header {
@ -10,36 +12,43 @@ header {
margin-left: 3em;
}
#header-links {
margin-top: 2em;
header a {
color: black;
}
header a {
#header-links {
margin: 2em 0 2em 3em;
display: flex;
flex-direction: column;
grid-column: 1;
}
#header-links a {
color: black;
padding: 1em;
}
header a:hover {
#header-links a:hover {
color: white;
background-color: black;
}
#main {
margin: auto;
margin-top: 5em;
margin-bottom: 5em;
width: 50%;
flex: 1;
margin: 2em 3em 5em 3em;
}
footer {
background-color: #304B99;
padding: 1em;
text-align: center;
grid-column: 1/3;
}
#buttons {
margin-top: 1em;
}
#fsf {
justify-self: right;
text-align: right;
}
#footer-main {
@ -51,6 +60,7 @@ footer {
justify-self: center;
margin: 0;
color: white;
text-align: center;
}
#footer-text a, #footer-text span {
@ -66,3 +76,7 @@ footer {
color: black;
text-decoration: underline dotted;
}
#buttons {
text-align: center;
}

View file

@ -6,10 +6,10 @@
</head>
<body>
<header>
<div id="header-title">
<h1>gyiwr dot tf</h1>
<h1><a href="index.html">gyiwr dot tf</a></h1>
<h2>le site de rick</h2>
</div>
</header>
<div id="header-links">
<a href="ou.html">où me retrouver</a>
<a href="copaings.html">copains & co</a>
@ -18,7 +18,6 @@
<a href="rss.html">mes flux rss</a>
<a href="autres.html">autres</a>
</div>
</header>
<div id="main">
<p>Bienvenue sur mon petit bout d'Internet visiteur ! Laissez moi me présenter.</p>

View file

@ -6,10 +6,10 @@
</head>
<body>
<header>
<div id="header-title">
<h1>gyiwr dot tf</h1>
<h1><a href="index.html">gyiwr dot tf</a></h1>
<h2>le site de rick</h2>
</div>
</header>
<div id="header-links">
<a href="ou.html">où me retrouver</a>
<a href="copaings.html">copains & co</a>
@ -18,7 +18,6 @@
<a href="rss.html">mes flux rss</a>
<a href="autres.html">autres</a>
</div>
</header>
<div id="main">
<h2>Sites</h2>

View file

@ -7,10 +7,10 @@
</head>
<body>
<header>
<div id="header-title">
<h1>gyiwr dot tf</h1>
<h1><a href="index.html">gyiwr dot tf</a></h1>
<h2>le site de rick</h2>
</div>
</header>
<div id="header-links">
<a href="ou.html">où me retrouver</a>
<a href="copaings.html">copains & co</a>
@ -19,7 +19,6 @@
<a href="rss.html">mes flux rss</a>
<a href="autres.html">autres</a>
</div>
</header>
<div id="main">
<p>Vous pouvez retrouver tous mes projets sur <a href="https://git.gnous.eu/Rick">le git de Gnous</a> ou juste ceux que je trouve les plus intéressants sur <a href="https://git.gyiwr.tf">mon git personnel</a>.</p>
@ -35,7 +34,6 @@
<h2>Autres contributions</h2>
<p>Vous pouvez retrouver ci-dessous une liste des projets auxquels j'ai pu contribuer :</p>
</div>
<div class="tableau">
<table>
@ -141,3 +139,4 @@
<h3>source-integration</h3>
Le commit suivant est aussi de mon ressort mais dregad semble avoir remodifié en plus la REGEX. Je préfère mettre du coup uniquement les commits que j'ai écrit.
</div>
</div>

View file

@ -6,10 +6,10 @@
</head>
<body>
<header>
<div id="header-title">
<h1>gyiwr dot tf</h1>
<h1><a href="index.html">gyiwr dot tf</a></h1>
<h2>le site de rick</h2>
</div>
</header>
<div id="header-links">
<a href="ou.html">où me retrouver</a>
<a href="copaings.html">copains & co</a>
@ -18,7 +18,6 @@
<a href="rss.html">mes flux rss</a>
<a href="autres.html">autres</a>
</div>
</header>
<div id="main">
<p>Après plusieurs années sur Twitter, j'essaie de m'en détacher pour tout un tas de raisons. Parmis elles se trouve l'algorithme. Bien qu'utile pour découvrir des tweets / des gens / etc., il reste néanmoins un bout de code qui choisit ce que je dois voir ou non. Et cela m'embête. Pour éviter cela, j'ai décidé de passer une grosse partie de mon temps sur des flux RSS et non plus sur le réseau social. </p>