fixed header, put images and article text in two columns.
This commit is contained in:
theo lem
parent
fc714e44ef
commit
7e8d4bbeec
@ -12,9 +12,4 @@ Authors: felicie
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</audio>
|
||||
@ -13,21 +13,15 @@ Summary: A man and a building.
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio>
|
||||
|
||||
|
||||
|
||||
He is less wary of how much of his emotions and thoughts is outward.
|
||||
The bird flying by startled him and his body actually shook. His ears were staring at the sound of a knife striking a cutting board. He is more surprised by his own reaction than by the bird. Birds fly by most of the time.
|
||||
He used to put a lot of effort into being as reserved in his private space as he would be with other people. When he takes the time to inspect this habit, he wonders if it would seem unreasonable to someone else. Deep down, he is afraid that being suddenly extrovert by himself without the rest of the world knowing about it would make him dishonest.
|
||||
And now, he begins to realize as he is facing himself all day long, and the days before, and the days to come, that he needs some kind of confrontation to replace basic social exchanges. He needs something or someone to go against him even only by pointing out that he is not doing so bad. Something like a conversation, that would bring the dialectic aspect life is missing.
|
||||
|
||||
|
||||
|
||||
He doesn’t like calling people as much as he would need to. The geographical loophole it creates makes him feel uneasy. He is working on ways to hide how awkward he is when hearing someone, who could just as well be on another planet for as far as he knows. It really is not that simple.
|
||||
He draws parallel lines with infinite care on a piece of paper that made the mistake of hanging around there too long. When both sides of the paper are filled, he uses a different color to draw new lines in between the first lines. At that point, the conversation seems illusive and his mind works up an excuse to hang up and a way to make that excuse come true, so that he doesn’t feel too dishonest because he really hates it.
|
||||
At sunset, he starts to think that the angle of the light on the stretch of earth where he lives, is not the same on the stretch of earth at the other end of the line. At the end of the day, he doesn’t like calling people.
|
||||
|
||||
|
||||
|
||||
He laughs out loud more regularly, and it sounds odd. Both liberated and self-aware at the same time. As if he was in actual social exchange, it is often followed by the need to express, out loud again, what was so funny that he couldn’t hold it in. The toothbrush on the side of the sink seems confused but if that is what it takes to be at peace with himself, it is happy to help.
|
||||
He also comments with either self-pity or candid interest everything he undertakes. He even talks back to himself sometimes, which he always assumed was the point of no return. But having the last word has become a matter of principle.
|
||||
|
||||
|
||||
@ -12,7 +12,4 @@ Authors: felicie
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio>
|
||||
|
||||
|
||||
|
||||
</audio>
|
||||
@ -10,30 +10,32 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
<div class="article-content">
|
||||
<h1 class='article-title'>Construction</h1>
|
||||
<h2 class='article-author'> by felicie</h2>
|
||||
<div class='article-content'> <p><audio controls="controls"
|
||||
<div class="article">
|
||||
<div class='article-content column'> <p><audio controls="controls"
|
||||
src="sounds/construction.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/construction/01-construction.jpg">
|
||||
<img alt="02" src="images/construction/02-construction.JPG">
|
||||
<img alt="03" src="images/construction/03-construction.JPG">
|
||||
<img alt="04" src="images/construction/04-construction.JPG"></p></div>
|
||||
</div>
|
||||
</audio></p></div>
|
||||
<div class='article-img column'>
|
||||
<img alt="" src="/images/Construction/Construction-1.jpg">
|
||||
<img alt="" src="/images/Construction/Construction-2.jpg">
|
||||
<img alt="" src="/images/Construction/Construction-3.jpg">
|
||||
<img alt="" src="/images/Construction/Construction-4.jpg">
|
||||
<img alt="" src="/images/Construction/Construction-5.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<a id="about" href="/pages/about.html">about</div>
|
||||
<a id="download" href="/pages/download.html">download</div>
|
||||
<a id="about" href="/pages/about.html">about</a>
|
||||
<a id="download" href="/pages/download.html">download</a>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -10,40 +10,43 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
<div class="article-content">
|
||||
<h1 class='article-title'>Courtyard</h1>
|
||||
<h2 class='article-author'> by felicie</h2>
|
||||
<div class='article-content'> <p><audio controls="controls"
|
||||
<div class="article">
|
||||
<div class='article-content column'> <p><audio controls="controls"
|
||||
src="sounds/courtyard.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/courtyard/01-courtyard.JPG"></p>
|
||||
<p>He is less wary of how much of his emotions and thoughts is outward.
|
||||
The bird flying by startled him and his body actually shook. His ears were staring at the sound of a knife striking a cutting board. He is more surprised by his own reaction than by the bird. Birds fly by most of the time.
|
||||
He used to put a lot of effort into being as reserved in his private space as he would be with other people. When he takes the time to inspect this habit, he wonders if it would seem unreasonable to someone else. Deep down, he is afraid that being suddenly extrovert by himself without the rest of the world knowing about it would make him dishonest.
|
||||
And now, he begins to realize as he is facing himself all day long, and the days before, and the days to come, that he needs some kind of confrontation to replace basic social exchanges. He needs something or someone to go against him even only by pointing out that he is not doing so bad. Something like a conversation, that would bring the dialectic aspect life is missing.</p>
|
||||
<p><img alt="02" src="images/courtyard/02-courtyard.JPG"></p>
|
||||
<p>He doesn’t like calling people as much as he would need to. The geographical loophole it creates makes him feel uneasy. He is working on ways to hide how awkward he is when hearing someone, who could just as well be on another planet for as far as he knows. It really is not that simple.
|
||||
He draws parallel lines with infinite care on a piece of paper that made the mistake of hanging around there too long. When both sides of the paper are filled, he uses a different color to draw new lines in between the first lines. At that point, the conversation seems illusive and his mind works up an excuse to hang up and a way to make that excuse come true, so that he doesn’t feel too dishonest because he really hates it.
|
||||
At sunset, he starts to think that the angle of the light on the stretch of earth where he lives, is not the same on the stretch of earth at the other end of the line. At the end of the day, he doesn’t like calling people.</p>
|
||||
<p><img alt="03" src="images/courtyard/03-courtyard.JPG"></p>
|
||||
<p>He laughs out loud more regularly, and it sounds odd. Both liberated and self-aware at the same time. As if he was in actual social exchange, it is often followed by the need to express, out loud again, what was so funny that he couldn’t hold it in. The toothbrush on the side of the sink seems confused but if that is what it takes to be at peace with himself, it is happy to help.
|
||||
He also comments with either self-pity or candid interest everything he undertakes. He even talks back to himself sometimes, which he always assumed was the point of no return. But having the last word has become a matter of principle.</p>
|
||||
<p>He goes to the balcony twice a day to smoke a cigarette. It overlooks the courtyard, so it is just outside enough to give himself the impression that he is going somewhere. The junk and the dust lingering on the other balconies have made space to allow a chair and a reading person to get a bit of sunlight.
|
||||
He can hear neighbors laughing out loud, as they always had in peaceful sunny spring afternoon. They started to watch an old TV show last week. He knows the ending and can even tell some lines.</p></div>
|
||||
</div>
|
||||
<div class='article-img column'>
|
||||
<img alt="" src="/images/Courtyard/Courtyard-1.jpg">
|
||||
<img alt="" src="/images/Courtyard/Courtyard-2.jpg">
|
||||
<img alt="" src="/images/Courtyard/Courtyard-3.jpg">
|
||||
<img alt="" src="/images/Courtyard/Courtyard-4.jpg">
|
||||
<img alt="" src="/images/Courtyard/Courtyard-5.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<a id="about" href="/pages/about.html">about</div>
|
||||
<a id="download" href="/pages/download.html">download</div>
|
||||
<a id="about" href="/pages/about.html">about</a>
|
||||
<a id="download" href="/pages/download.html">download</a>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -4,26 +4,19 @@
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/construction/01-construction.jpg">
|
||||
<img alt="02" src="images/construction/02-construction.JPG">
|
||||
<img alt="03" src="images/construction/03-construction.JPG">
|
||||
<img alt="04" src="images/construction/04-construction.JPG"></p></content><category term="public"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
</audio></p></content><category term="public"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
src="sounds/courtyard.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/courtyard/01-courtyard.JPG"></p>
|
||||
<p>He is less wary of how much of his emotions and thoughts is outward.
|
||||
The bird flying by startled him and his body actually shook. His ears were staring at the sound of a knife striking a cutting board. He is more surprised by his own reaction than by the bird. Birds fly by most of the time.
|
||||
He used to put a lot of effort into being as reserved in his private space as he would be with other people. When he takes the time to inspect this habit, he wonders if it would seem unreasonable to someone else. Deep down, he is afraid that being suddenly extrovert by himself without the rest of the world knowing about it would make him dishonest.
|
||||
And now, he begins to realize as he is facing himself all day long, and the days before, and the days to come, that he needs some kind of confrontation to replace basic social exchanges. He needs something or someone to go against him even only by pointing out that he is not doing so bad. Something like a conversation, that would bring the dialectic aspect life is missing.</p>
|
||||
<p><img alt="02" src="images/courtyard/02-courtyard.JPG"></p>
|
||||
<p>He doesn’t like calling people as much as he would need to. The geographical loophole it creates makes him feel uneasy. He is working on ways to hide how awkward he is when hearing someone, who could just as well be on another planet for as far as he knows. It really is not that simple.
|
||||
He draws parallel lines with infinite care on a piece of paper that made the mistake of hanging around there too long. When both sides of the paper are filled, he uses a different color to draw new lines in between the first lines. At that point, the conversation seems illusive and his mind works up an excuse to hang up and a way to make that excuse come true, so that he doesn’t feel too dishonest because he really hates it.
|
||||
At sunset, he starts to think that the angle of the light on the stretch of earth where he lives, is not the same on the stretch of earth at the other end of the line. At the end of the day, he doesn’t like calling people.</p>
|
||||
<p><img alt="03" src="images/courtyard/03-courtyard.JPG"></p>
|
||||
<p>He laughs out loud more regularly, and it sounds odd. Both liberated and self-aware at the same time. As if he was in actual social exchange, it is often followed by the need to express, out loud again, what was so funny that he couldn’t hold it in. The toothbrush on the side of the sink seems confused but if that is what it takes to be at peace with himself, it is happy to help.
|
||||
He also comments with either self-pity or candid interest everything he undertakes. He even talks back to himself sometimes, which he always assumed was the point of no return. But having the last word has become a matter of principle.</p>
|
||||
<p>He goes to the balcony twice a day to smoke a cigarette. It overlooks the courtyard, so it is just outside enough to give himself the impression that he is going somewhere. The junk and the dust lingering on the other balconies have made space to allow a chair and a reading person to get a bit of sunlight.
|
||||
@ -32,6 +25,4 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/sunday/01-sunday.jpg">
|
||||
<img alt="02" src="images/sunday/02-sunday.jpg"></p></content><category term="public"></category><category term="article"></category></entry></feed>
|
||||
</audio></p></content><category term="public"></category><category term="article"></category></entry></feed>
|
||||
@ -4,26 +4,19 @@
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/construction/01-construction.jpg">
|
||||
<img alt="02" src="images/construction/02-construction.JPG">
|
||||
<img alt="03" src="images/construction/03-construction.JPG">
|
||||
<img alt="04" src="images/construction/04-construction.JPG"></p></content><category term="public"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
</audio></p></content><category term="public"></category><category term="article"></category></entry><entry><title>Courtyard</title><link href="https://fel.theo-lem.org/courtyard.html" rel="alternate"></link><published>2020-04-24T17:01:00+02:00</published><updated>2020-04-24T17:01:00+02:00</updated><author><name>felicie</name></author><id>tag:fel.theo-lem.org,2020-04-24:/courtyard.html</id><summary type="html"><p>A man and a building.</p></summary><content type="html"><p><audio controls="controls"
|
||||
src="sounds/courtyard.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/courtyard/01-courtyard.JPG"></p>
|
||||
<p>He is less wary of how much of his emotions and thoughts is outward.
|
||||
The bird flying by startled him and his body actually shook. His ears were staring at the sound of a knife striking a cutting board. He is more surprised by his own reaction than by the bird. Birds fly by most of the time.
|
||||
He used to put a lot of effort into being as reserved in his private space as he would be with other people. When he takes the time to inspect this habit, he wonders if it would seem unreasonable to someone else. Deep down, he is afraid that being suddenly extrovert by himself without the rest of the world knowing about it would make him dishonest.
|
||||
And now, he begins to realize as he is facing himself all day long, and the days before, and the days to come, that he needs some kind of confrontation to replace basic social exchanges. He needs something or someone to go against him even only by pointing out that he is not doing so bad. Something like a conversation, that would bring the dialectic aspect life is missing.</p>
|
||||
<p><img alt="02" src="images/courtyard/02-courtyard.JPG"></p>
|
||||
<p>He doesn’t like calling people as much as he would need to. The geographical loophole it creates makes him feel uneasy. He is working on ways to hide how awkward he is when hearing someone, who could just as well be on another planet for as far as he knows. It really is not that simple.
|
||||
He draws parallel lines with infinite care on a piece of paper that made the mistake of hanging around there too long. When both sides of the paper are filled, he uses a different color to draw new lines in between the first lines. At that point, the conversation seems illusive and his mind works up an excuse to hang up and a way to make that excuse come true, so that he doesn’t feel too dishonest because he really hates it.
|
||||
At sunset, he starts to think that the angle of the light on the stretch of earth where he lives, is not the same on the stretch of earth at the other end of the line. At the end of the day, he doesn’t like calling people.</p>
|
||||
<p><img alt="03" src="images/courtyard/03-courtyard.JPG"></p>
|
||||
<p>He laughs out loud more regularly, and it sounds odd. Both liberated and self-aware at the same time. As if he was in actual social exchange, it is often followed by the need to express, out loud again, what was so funny that he couldn’t hold it in. The toothbrush on the side of the sink seems confused but if that is what it takes to be at peace with himself, it is happy to help.
|
||||
He also comments with either self-pity or candid interest everything he undertakes. He even talks back to himself sometimes, which he always assumed was the point of no return. But having the last word has become a matter of principle.</p>
|
||||
<p>He goes to the balcony twice a day to smoke a cigarette. It overlooks the courtyard, so it is just outside enough to give himself the impression that he is going somewhere. The junk and the dust lingering on the other balconies have made space to allow a chair and a reading person to get a bit of sunlight.
|
||||
@ -32,6 +25,4 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/sunday/01-sunday.jpg">
|
||||
<img alt="02" src="images/sunday/02-sunday.jpg"></p></content><category term="public"></category><category term="article"></category></entry></feed>
|
||||
</audio></p></content><category term="public"></category><category term="article"></category></entry></feed>
|
||||
@ -10,24 +10,24 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
|
||||
<article id="articles">
|
||||
<a class="vignette" href="/courtyard.html">
|
||||
<img class= "img-menu" src="/images/courtyard/02-courtyard.JPG" alt="courtyard">
|
||||
<img class= "img-menu" src="/images/Courtyard/Courtyard-2.jpg" alt="courtyard">
|
||||
<h2>The courtyard</h2>
|
||||
</a>
|
||||
|
||||
<a class="vignette"href="/construction.html">
|
||||
<img class= "img-menu" src="/images/construction/01-construction.jpg" alt="construction">
|
||||
<a class="vignette" href="/construction.html">
|
||||
<img class= "img-menu" src="/images/Construction/Construction-1.jpg" alt="construction">
|
||||
<h2>Construction workers</h2>
|
||||
</a>
|
||||
|
||||
<a class="vignette"href="/sunday.html">
|
||||
<img class= "img-menu" src="/images/sunday/02-sunday.jpg" alt="sunday">
|
||||
<a class="vignette" href="/sunday.html">
|
||||
<img class= "img-menu" src="/images/Sunday/Sunday-2.jpg" alt="sunday">
|
||||
<h2>Sunday</h2>
|
||||
</a>
|
||||
|
||||
@ -37,8 +37,8 @@
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<a id="about" href="/pages/about.html">about</div>
|
||||
<a id="download" href="/pages/download.html">download</div>
|
||||
<a id="about" href="/pages/about.html">about</a>
|
||||
<a id="download" href="/pages/download.html">download</a>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
@ -21,8 +21,8 @@
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<a id="about" href="/pages/about.html">about</div>
|
||||
<a id="download" href="/pages/download.html">download</div>
|
||||
<a id="about" href="/pages/about.html">about</a>
|
||||
<a id="download" href="/pages/download.html">download</a>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
@ -19,8 +19,8 @@
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<a id="about" href="/pages/about.html">about</div>
|
||||
<a id="download" href="/pages/download.html">download</div>
|
||||
<a id="about" href="/pages/about.html">about</a>
|
||||
<a id="download" href="/pages/download.html">download</a>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -10,28 +10,32 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
<div class="article-content">
|
||||
<h1 class='article-title'>Sunday</h1>
|
||||
<h2 class='article-author'> by felicie</h2>
|
||||
<div class='article-content'> <p><audio controls="controls"
|
||||
<div class="article">
|
||||
<div class='article-content column'> <p><audio controls="controls"
|
||||
src="sounds/sunday.wav"
|
||||
autoplay loop
|
||||
class='audio'>
|
||||
Your browser does not support the HTML5 Audio element.
|
||||
</audio></p>
|
||||
<p><img alt="01" src="images/sunday/01-sunday.jpg">
|
||||
<img alt="02" src="images/sunday/02-sunday.jpg"></p></div>
|
||||
</div>
|
||||
</audio></p></div>
|
||||
<div class='article-img column'>
|
||||
<img alt="" src="/images/Sunday/Sunday-1.jpg">
|
||||
<img alt="" src="/images/Sunday/Sunday-2.jpg">
|
||||
<img alt="" src="/images/Sunday/Sunday-3.jpg">
|
||||
<img alt="" src="/images/Sunday/Sunday-4.jpg">
|
||||
<img alt="" src="/images/Sunday/Sunday-5.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<a id="about" href="/pages/about.html">about</div>
|
||||
<a id="download" href="/pages/download.html">download</div>
|
||||
<a id="about" href="/pages/about.html">about</a>
|
||||
<a id="download" href="/pages/download.html">download</a>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -15,21 +15,21 @@ h1{
|
||||
}
|
||||
|
||||
header{
|
||||
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
margin-left: 80%;
|
||||
top: 10%;
|
||||
height: 100px;
|
||||
border: 3px solid #00FF00;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
z-index: 15;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
font;
|
||||
border: 3px solid #00FF00;
|
||||
border-radius: 10px;
|
||||
|
||||
margin: 5px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#articles {
|
||||
@ -78,7 +78,7 @@ header{
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
max-width: 70%;
|
||||
max-width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -88,6 +88,10 @@ header{
|
||||
color: #0ff000;
|
||||
}
|
||||
|
||||
.img-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vignette h2{
|
||||
font-family: libertinage;
|
||||
font-size: 40px;
|
||||
@ -103,7 +107,6 @@ header{
|
||||
border: 3px solid #000000;
|
||||
border-radius: 10px;
|
||||
/* for chrome and safari support */
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.img-menu:hover {
|
||||
@ -140,10 +143,8 @@ p a {
|
||||
|
||||
.content{
|
||||
margin-top: 150px;
|
||||
margin-left: 13%;
|
||||
padding-left: 2em;
|
||||
padding-bottom: 5em;
|
||||
max-width: 50%;
|
||||
line-height: 1.2;
|
||||
font-size: 1.2em;
|
||||
text-align: justify;
|
||||
@ -161,9 +162,29 @@ p a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-content img{
|
||||
.article-content p {
|
||||
font-size: 1.2em;
|
||||
line-height: 150%;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.article-img img{
|
||||
max-width: 60%;
|
||||
margin: 3em;
|
||||
width:60%;
|
||||
}
|
||||
|
||||
.article {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.article::after {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 15px;
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
# Faire un site avec Git et Pelican
|
||||
|
||||
[toc]
|
||||
|
||||
_Ce tuto est destiné aux débutant⋅e⋅s souhaitant réaliser un site avec Pelican et Git, deux outils très utiles. Il est écrit à l'arrache, mais il vise au maximum à être partagé et corrigé. J'ai notamment voulu utiliser l'écriture inclusive, mais les oublis sont sans doute légions, et je m'en excuse._
|
||||
|
||||
## Les outils
|
||||
|
||||
@ -15,21 +15,21 @@ h1{
|
||||
}
|
||||
|
||||
header{
|
||||
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
margin-left: 80%;
|
||||
top: 10%;
|
||||
height: 100px;
|
||||
border: 3px solid #00FF00;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
z-index: 15;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
font;
|
||||
border: 3px solid #00FF00;
|
||||
border-radius: 10px;
|
||||
|
||||
margin: 5px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#articles {
|
||||
@ -78,7 +78,7 @@ header{
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
max-width: 70%;
|
||||
max-width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -88,6 +88,10 @@ header{
|
||||
color: #0ff000;
|
||||
}
|
||||
|
||||
.img-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vignette h2{
|
||||
font-family: libertinage;
|
||||
font-size: 40px;
|
||||
@ -103,7 +107,6 @@ header{
|
||||
border: 3px solid #000000;
|
||||
border-radius: 10px;
|
||||
/* for chrome and safari support */
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.img-menu:hover {
|
||||
@ -140,10 +143,8 @@ p a {
|
||||
|
||||
.content{
|
||||
margin-top: 150px;
|
||||
margin-left: 13%;
|
||||
padding-left: 2em;
|
||||
padding-bottom: 5em;
|
||||
max-width: 50%;
|
||||
line-height: 1.2;
|
||||
font-size: 1.2em;
|
||||
text-align: justify;
|
||||
@ -161,9 +162,29 @@ p a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-content img{
|
||||
.article-content p {
|
||||
font-size: 1.2em;
|
||||
line-height: 150%;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.article-img img{
|
||||
max-width: 60%;
|
||||
margin: 3em;
|
||||
width:60%;
|
||||
}
|
||||
|
||||
.article {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.article::after {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 15px;
|
||||
}
|
||||
@ -5,9 +5,13 @@
|
||||
{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="article-content">
|
||||
<h1 class='article-title'>{{ article.title }}</h1>
|
||||
<h2 class='article-author'> by {{ article.author }}</h2>
|
||||
<div class='article-content'> {{ article.content }}</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class='article-content column'> {{ article.content }}</div>
|
||||
<div class='article-img column'>
|
||||
{% for i in [1, 2, 3, 4, 5] %}
|
||||
<img alt="" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="{{ SITE_URL }}/index.html"><h1>better <br> days</h1></a>
|
||||
<a href="{{ SITE_URL }}/index.html"><h1>better days</h1></a>
|
||||
</header>
|
||||
|
||||
<div class='content'>
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
|
||||
<article id="articles">
|
||||
<a class="vignette" href="{{ SITE_URL }}/courtyard.html">
|
||||
<img class= "img-menu" src="{{ SITE_URL }}/images/courtyard/02-courtyard.JPG" alt="courtyard">
|
||||
<img class= "img-menu" src="{{ SITE_URL }}/images/Courtyard/Courtyard-2.jpg" alt="courtyard">
|
||||
<h2>The courtyard</h2>
|
||||
</a>
|
||||
|
||||
<a class="vignette" href="{{ SITE_URL }}/construction.html">
|
||||
<img class= "img-menu" src="{{ SITE_URL }}/images/construction/01-construction.jpg" alt="construction">
|
||||
<img class= "img-menu" src="{{ SITE_URL }}/images/Construction/Construction-1.jpg" alt="construction">
|
||||
<h2>Construction workers</h2>
|
||||
</a>
|
||||
|
||||
<a class="vignette" href="{{ SITE_URL }}/sunday.html">
|
||||
<img class= "img-menu" src="{{ SITE_URL }}/images/sunday/02-sunday.jpg" alt="sunday">
|
||||
<img class= "img-menu" src="{{ SITE_URL }}/images/Sunday/Sunday-2.jpg" alt="sunday">
|
||||
<h2>Sunday</h2>
|
||||
</a>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user