Commit 4fa0521f authored by Mathieu Nivoliez's avatar Mathieu Nivoliez

Merge branch '3-css-change' into 'master'

Resolve "CSS change"

Closes #3

See merge request !3
parents a5a6ef1f e5eb4972
......@@ -16,8 +16,8 @@ posts:
jsonfeed: ~
default: {}
site:
title: cobalt blog
description: ~
title: "@mnivoliez blog"
description: Site about Mathieu Nivoliez and his thoughts
base_url: ~
data: ~
template_extensions:
......@@ -31,4 +31,4 @@ syntax_highlight:
theme: "base16-ocean.dark"
assets:
sass:
style: Nested
\ No newline at end of file
style: Nested
<div id="disqus_thread"></div>
<article id="disqus_thread"></article>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = "https://blog.deep-nope.me/posts/{{ page.permalink }}"; // Replace PAGE_URL with your page's canonical URL variable
{% if page.data.dsq_thread_id %}
this.page.url = "https://www.mathieu-nivoliez.com/posts/{{ page.permalink }}"; // Replace PAGE_URL with your page's canonical URL variable
{% if page.data.dsq_thread_id != "" %}
this.page.identifier = {{ page.data.dsq_thread_id }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
{%endif%}
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-blog-deep-nope-me.disqus.com/embed.js';
s.src = 'https://www-mathieu-nivoliez-com.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
......
......@@ -3,8 +3,8 @@
<title>{{ page.title }}</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://writ.cmcenroe.me/1.0.2/writ.min.css">
<link rel="stylesheet" href="https://writ.cmcenroe.me/1.0.4/writ.min.css">
<link rel="stylesheet" href="/style.css" type="text/css" media="all" />
<link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS" />
<meta name="author" content="Mathieu Nivoliez">
<meta name="description" content="Personal website of Mathieu Nivoliez."/>
<meta name="description" content="{{ site.description }}"/>
<header>
<div class="logo"><img src="/images/cropped-cropped-imgpsh_fullsize.png" /></div>
<div class="title">
<h1><a href="/">Deep Blog</a></h1>
</div>
<h1>@mnivoliez Blog</h1>
<nav>
<a href="/"><h2>Articles</h2></a>
</nav>
</header>
<article class="post-card">
{% comment %}
<!--{% if post.data.img_cover %}
<img class="post-card-cover" src="{{ post.data.img_cover }}">
{% endif %}-->
{% endcomment %}
<div class="post-card details">
<a style="text-decoration:none;" href="{{ post.permalink }}"><strong style="color:#00bcd4;"><h2>{{ post.title }}</h2></strong></a>
<div class="post-meta"><time datetime="{{ post.published_date }}">{{ post.published_date | date: '%b %-d, %Y' }}</time> / {{ post.data.author }}</div>
{{ post.excerpt }}
<form class="post-form" action="{{ post.permalink }}" method="GET">
<button type="submit" class="button green">Read more<i class="material-icons">chevron_right</i></button>
</form>
</div>
<a class="post-title" href="{{ post.permalink }}"><strong><h2>{{ post.title }}</h2></strong></a>
<div class="post-meta"><time datetime="{{ post.published_date }}">{{ post.published_date | date: '%b %-d, %Y' }}</time> / {{ post.data.author }}</div>
{{ post.excerpt }}
<a class="post-readmore" href="{{ post.permalink }}">Read more<i style="vertical-align: bottom;" class="material-icons">chevron_right</i></a>
</article>
......@@ -9,4 +9,4 @@
{% else %}
{% assign phrase = " minutes." | prepend: reading_time %}
{% endcase %}
<time pubdate="pubdate">{{ page.published_date | date: "%b %d, %Y" }} - Reading time: {{ phrase }}</time><br />
<div class="post-meta"><time pubdate="pubdate">{{ page.published_date | date: "%b %d, %Y" }} - Reading time: {{ phrase }}</time></div><br />
......@@ -7,7 +7,7 @@
{% include "_headbar.liquid" %}
<main>
<article>
<h1>{{ page.title }}</h1>
<h1 class="post-title">{{ page.title }}</h1>
{% include "_reading-time.liquid" %}
{{ page.content }}
</article>
......
title: The DEEP BLOG
title: "@MNivoliez Blog"
layout: default.liquid
data:
lang: en
---
<div>
<div class="posts-container">
{% for post in collections.posts.pages %}
{% include "_post-card.liquid" %}
{% endfor %}
</div>
<div class="posts-container">
{% for post in collections.posts.pages %}
{% include "_post-card.liquid" %}
{% endfor %}
</div>
:root {
--dark-grey: #211D27;
--light-grey: #404040;
--dark-purple: #332453;
--purple: #563C7E;
--light-purple:#7665B8;
--green: #4caf50;
--font-stack: helvetica, arial, sans-serif;
--text-color: white;
--text-color-light-grey: #828282;
--title-color: #00bcd4;
--breakpoint: 41em;
}
--background-color: #607D8B;
--header-background-color: rgb(55, 71, 79);
--element-background-color: rgb(48, 48, 48);
* {
box-sizing: border-box;
--breakpoint: 41em;
}
html {
......@@ -23,52 +17,48 @@ html {
body {
color: var(--text-color);
background-color: var(--dark-purple);
background-color: var(--background-color);
font-family: var(--font-stack);
line-height: 1.4;
margin: 0;
}
main {
padding-top: 20px;
margin-top: 90px;
max-width: 100ch;
}
a {
}
header {
width: 100%;
display: grid;
grid-template-areas: "l c r";
grid-template-columns: 1fr 2fr 1fr;
padding-top: 1em;
background-color: var(--dark-grey);
margin-bottom: 20px;
top: 0;
left: 0;
right: 0;
position: fixed;
padding: 5px;
height: 90px;
background-color: var(--header-background-color);
box-shadow:rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
header .logo {
grid-area: l;
text-align: left;
}
header .logo img {
max-height: 200px;
header nav {
display: flex;
flex-direction: row;
justify-content: center;
}
header .title {
grid-area: c;
display: inline-flex;
flex-direction: column;
align-content: center;
nav a {
text-decoration: none;
color: var(--text-color) !important;
}
header .title h1 {
nav a h2 {
margin: auto;
}
header nav {
justify-content: center;
}
@media (max-width: 41em) {
......@@ -91,80 +81,58 @@ section {
}
article {
border-radius: 2px;
background-color: var(--light-grey);
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
margin: 2px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 32px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: var(--element-background-color);
box-sizing: border-box;
font-family: Roboto, sans-serif;
border-radius: 2px;
}
#disqus_thread {
border-radius: 2px;
background-color: var(--light-grey);
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 10px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
padding-top: 1em;
background-color: var(--dark-grey);
background-color: var(--element-background-color);
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
text-align: center;
}
footer p {
margin: 0;
padding: 1em 0;
.posts-container {
display: flex;
flex-direction: column;
}
.post-card {
background-color: var(--light-grey);
border-radius: 2px;
margin: 5px;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 10px;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.post-card .details {
margin: 5px;
display: inline-flex;
flex-direction: column;
.post-title {
text-decoration: none;
color: var(--title-color) !important;
}
.post-meta {
padding-left: 10px;
color: var(--text-color-light-grey);
}
.post-form {
display: inline-flex;
justify-content: flex-end;
}
.button {
display: inline-flex;
align-items: center;
text-align: center;
outline: medium none currentcolor;
border: 10px none;
cursor: pointer;
height: 36px;
line-height: 36px;
.post-readmore {
color: var(--text-color) !important;
text-decoration: none;
padding: 2px;
justify-content: center;
border-radius: 2px;
display: inline-block;
background-color: rgb(76, 175, 80);
align-self: flex-end;
}
.button.green {
background-color: var(--green);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment