css : nouveau thème

parent abe8d4db
Pipeline #141988195 passed with stage
in 3 minutes and 40 seconds
......@@ -4,6 +4,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<link rel="stylesheet" href="{{ "/css/normalize.css" | relative_url }}">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ "/css/cayman.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/css/codecode.coop.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/css/highlight.css" | relative_url }}">
</head>
<footer class="site-footer">
<span class="site-footer-owner"><a href="{{ site.url }}">{{ site.title }}</a> est un site collaboratif. Vous pouvez nous <a href="mailto:[email protected]">contacter</a>.</span>
<span class="site-footer-credits">Consultez les sources sur GitLab pour <a href="https://gitlab.com/CodeursEnLiberte/codecode.coop/blob/master/{{ page.path }}">participer, corriger ou améliorer ce texte</a>.</span>
<div class="site-footer__logo">
<img src="{{ "/images/logo.png" | relative_url }}" />
</div>
<div class="site-footer__text">
<p>
{{ site.title }} est un site collaboratif. Vous pouvez nous <a href="mailto:[email protected]">contacter</a>.
</p>
<p>
Consultez les sources sur GitLab pour <a href="https://gitlab.com/CodeursEnLiberte/codecode.coop/blob/master/{{ page.path }}">participer, corriger ou améliorer ce texte</a>.
</p>
<p>
<a href="{% link apropos.markdown %}">À propos</a>.
</p>
</div>
</footer>
<!DOCTYPE html>
<html lang="{{ site.locale }}">
{% include head.html %}
<body>
{% include page-header.html %}
<section class="main-content">
{{ content }}
{% include page-footer.html %}
{{ content }}
</section>
{% include page-footer.html %}
</body>
</html>
/*
* General variables
*/
:root {
--page-margin-color: #F8F6EF;
--page-title-color: #444444;
--accent-color: #BD0000;
--link-color: #003BCB;
--text-color: #333333;
--article-title-color: #000000;
--article-subtitle-color: var(--accent-color);
--baseline: 24px;
--baseline-subdivision: 8px;
}
/*
* Baselines
*
* This stylesheet uses a baseline grid. Text is always sitting on
* lines evenly spaced by 24px.
*
* To perform this effet, text elements are adjusted in two ways:
* - a margin-top, to move the first line of the text on the next baseline
* (depending on the text size).
* - a padding-bottom, to move the end of the element on the next baseline.
* (using padding instead of margin to prevent margin collapse)
*
* Debugging:
*
* To visualise the baseline grid, simply comment out the `display: none` statement
* below.
*
* Reference:
*
* See https://open.nytimes.com/how-we-implemented-a-baseline-grid-using-css-cb13cac45201
*/
/* DEBUG: display the baseline grid */
html {
position: relative;
}
html::before {
display: none; /* Enable to see the grid */
--debug-baseline-color: hsla(204, 100%, 50%, 0.30);
--debug-sub-baseline-color: hsla(204, 80%, 72%, 0.25);
--background-baseline: repeating-linear-gradient(
to bottom,
var(--debug-baseline-color),
var(--debug-baseline-color) 1px,
transparent 1px,
transparent var(--baseline)
);
--background-baseline-subdivisions: repeating-linear-gradient(
to bottom,
var(--debug-sub-baseline-color),
var(--debug-sub-baseline-color) 1px,
transparent 1px,
transparent var(--baseline-subdivision)
);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-right: auto;
margin-left: auto;
content: '';
background-image: var(--background-baseline), var(--background-baseline-subdivisions);
z-index: 1000;
pointer-events: none;
}
/* END DEBUG */
/*
* General page layout
*/
* {
box-sizing: border-box;
}
html {
background-color: var(--page-margin-color);
min-height: 100%;
}
body {
min-height: 100vh;
padding: 0;
margin: 0;
font-family: Georgia, serif;
font-size: 18px;
line-height: var(--baseline);
border: 1px solid transparent;
border-left: 1px solid #E9E9E9;
color: var(--text-color);
background-color: white;
}
/* Large screens */
@media (min-width: 1000px) { body {
margin-left: 128px;
padding-left: 128px;
}}
/* Normal screen */
@media screen and (max-width: 999px) and (min-width: 760px) { body {
margin-left: 32px;
padding-left: 72px;
}}
/* Narrow screen */
@media screen and (max-width: 759px) and (min-width: 400px) { body {
margin-left: 0;
padding-left: 48px;
width: auto;
}}
/* Very narrow screen */
@media screen and (max-width: 399px) { body {
margin-left: 0;
padding-left: 16px;
width: auto;
min-width: 280px;
}}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/*
* Header
*/
.site-header {
margin-top: 96px;
margin-bottom: 92px;
}
.site-header__title {
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
color: var(--title-color);
letter-spacing: -3px;
text-transform: lowercase;
}
/* Large screens */
@media (min-width: 1000px) { .site-header__title {
font-size: 56px;
}}
/* Normal screen */
@media screen and (max-width: 999px) and (min-width: 760px) { .site-header__title {
font-size: 56px;
}}
/* Narrow screen */
@media screen and (max-width: 759px) and (min-width: 400px) { .site-header__title {
font-size: 40px;
}}
/* Very narrow screen */
@media screen and (max-width: 399px) { .site-header__title {
font-size: 40px;
}}
.site-header__title a {
color: inherit;
}
.site-header__tagline {
margin-top: 14px;
margin-bottom: 0;
padding-bottom: 11px;
margin-left: 3px;
font-weight: normal;
color: var(--accent-color);
letter-spacing: 0;
}
/* Large screens */
@media (min-width: 1000px) { .site-header__tagline {
width: auto;
font-size: 18px;
}}
/* Normal screen */
@media screen and (max-width: 999px) and (min-width: 760px) { .site-header__tagline {
width: auto;
font-size: 18px;
}}
/* Narrow screen */
@media screen and (max-width: 759px) and (min-width: 400px) { .site-header__tagline {
width: 240px;
font-size: 21px;
}}
/* Very narrow screen */
@media screen and (max-width: 399px) { .site-header__tagline {
width: 192px;
font-size: 18px;
}}
/*
* Main content layout and typography
*/
.main-content {
word-wrap: break-word;
}
.main-content h1 {
margin-top: 92px;
margin-bottom: 29px;
padding-bottom: 11px;
font-weight: bold;
font-size: 28px;
color: var(--article-title-color);
letter-spacing: 0;
line-height: 32px;
}
.main-content h2 {
margin-top: 48px;
margin-bottom: 0;
padding-bottom: 16px;
font-weight: bold;
font-size: 21px;
color: var(--article-subtitle-color);
letter-spacing: 0;
line-height: 32px;
}
.main-content h3 {
margin-top: 1px;
margin-bottom: 0;
padding-bottom: 15px;
font-weight: bold;
font-size: 18px;
color: var(--article-title-color);
letter-spacing: 0;
line-height: 32px;
}
.main-content h3[id|="section-suivante"] {
margin-top: 73px;
}
.main-content p {
max-width: 536px;
line-height: var(--baseline);
margin-top: 5px;
/* Push the text down and sit it on the baseline */
margin-bottom: 0;
padding-bottom: 19px;
/* Extra line between the paragraphs (with padding to avoid margin collapse) */
font-size: 18px;
letter-spacing: 0;
}
.main-content img {
max-width: 100%;
}
.main-content ul,
.main-content ol {
margin-top: 5px;
margin-bottom: 0;
padding-bottom: 11px;
}
.main-content blockquote {
margin-top: 5px;
margin-left: 0;
padding: 0 1rem;
margin-left: 0;
color: #819198;
border-left: 0.3rem solid #dce6f0;
}
.main-content blockquote > :first-child {
margin-top: 0;
}
.main-content blockquote > :last-child {
margin-bottom: 0;
}
.main-content table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
-webkit-overflow-scrolling: touch;
}
.main-content table th {
font-weight: bold;
}
.main-content table th, .main-content table td {
padding: 0.5rem 1rem;
border: 1px solid #e9ebec;
}
.main-content dl {
padding: 0;
}
.main-content dl dt {
padding: 0;
margin-top: 1rem;
font-size: 1rem;
font-weight: bold;
}
.main-content dl dd {
padding: 0;
margin-bottom: 1rem;
}
/*
* Code highlighting
*/
.main-content code {
padding: 2px 4px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9rem;
color: #567482;
background-color: #f3f6fa;
border-radius: 0.3rem;
}
.main-content pre {
padding: 0.8rem;
margin-top: 5px;
margin-bottom: 1rem;
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dce6f0;
border-radius: 0.3rem;
}
.main-content pre > code {
padding: 0;
margin: 0;
font-size: 0.9rem;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.main-content .highlight {
margin-bottom: 1rem;
}
.main-content .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.main-content .highlight pre,
.main-content pre {
padding: 0.8rem;
overflow: auto;
font-size: 0.9rem;
border-radius: 0.3rem;
-webkit-overflow-scrolling: touch;
}
.main-content pre code,
.main-content pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.main-content pre code:before,
.main-content pre code:after,
.main-content pre tt:before,
.main-content pre tt:after {
content: normal;
}
/*
* Home page
*/
h3.home__header {
margin-top: 49px;
margin-bottom: 0;
padding-bottom: 31px;
}
ol.home__articles {
margin-bottom: 29px;
}
.home__credits {
font-style: italic;
}
.home__credits em {
font-style: normal;
}
/*
* Footer
*/
.site-footer {
display: flex;
align-items: center;
margin-top: 95px;
margin-bottom: 120px;
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: 16px;
}
.site-footer__logo {
flex-shrink: 1;
}
.site-footer__logo img {
display: block;
height: 64px;
}
.site-footer__text {
padding-top: 6px;
padding-left: 32px;
}
.site-footer__text p {
margin: 0;
}
......@@ -123,82 +123,3 @@
.highlight .w { color: #bbbbbb; }
.highlight { background-color: #f8f8f8; }
* { box-sizing: border-box; }
body { padding: 0; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #545e62; }
a { color: #1e6bb8; text-decoration: none; }
a:hover { text-decoration: underline; }
.btn { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.btn:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
.btn + .btn { margin-left: 1rem; }
@media screen and (min-width: 64em) { .btn { padding: 0.75rem 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
@media screen and (max-width: 42em) { .btn { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
.btn + .btn { margin-top: 1rem; margin-left: 0; } }
.page-header { color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } }
@media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }
.project-name { margin-top: 0; margin-bottom: 0.1rem; }
.project-name a { color: inherit; }
@media screen and (min-width: 64em) { .project-name { font-size: 3.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 2.25rem; } }
@media screen and (max-width: 42em) { .project-name { font-size: 1.75rem; } }
.project-tagline { margin-bottom: 2rem; font-weight: normal; opacity: 0.7; }
@media screen and (min-width: 64em) { .project-tagline { font-size: 1.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .project-tagline { font-size: 1.15rem; } }
@media screen and (max-width: 42em) { .project-tagline { font-size: 1rem; } }
.main-content { word-wrap: break-word; }
.main-content :first-child { margin-top: 0; }
@media screen and (min-width: 64em) { .main-content { max-width: 58rem; padding: 4rem 6rem 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 2rem 4rem; font-size: 1.1rem; } }
@media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; } }
.main-content img { max-width: 100%; }
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { margin-top: 3rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.1; color: #159957; }
.main-content h1 { margin-bottom: 2rem; }
.main-content p { margin-bottom: 1em; }
.main-content strong { font-weight: 700; }
.main-content code { padding: 2px 4px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9rem; color: #567482; background-color: #f3f6fa; border-radius: 0.3rem; }
.main-content pre { padding: 0.8rem; margin-top: 0; margin-bottom: 1rem; font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace; color: #567482; word-wrap: normal; background-color: #f3f6fa; border: solid 1px #dce6f0; border-radius: 0.3rem; }
.main-content pre > code { padding: 0; margin: 0; font-size: 0.9rem; color: #567482; word-break: normal; white-space: pre; background: transparent; border: 0; }
.main-content .highlight { margin-bottom: 1rem; }
.main-content .highlight pre { margin-bottom: 0; word-break: normal; }
.main-content .highlight pre, .main-content pre { padding: 0.8rem; overflow: auto; font-size: 0.9rem; line-height: 1.45; border-radius: 0.3rem; -webkit-overflow-scrolling: touch; }
.main-content pre code, .main-content pre tt { display: inline; max-width: initial; padding: 0; margin: 0; overflow: initial; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; }
.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after { content: normal; }
.main-content ul, .main-content ol { margin-top: 0; }
.main-content blockquote { padding: 0 1rem; margin-left: 0; color: #819198; border-left: 0.3rem solid #dce6f0; }
.main-content blockquote > :first-child { margin-top: 0; }
.main-content blockquote > :last-child { margin-bottom: 0; }
.main-content table { display: block; width: 100%; overflow: auto; word-break: normal; word-break: keep-all; -webkit-overflow-scrolling: touch; }
.main-content table th { font-weight: bold; }
.main-content table th, .main-content table td { padding: 0.5rem 1rem; border: 1px solid #e9ebec; }
.main-content dl { padding: 0; }
.main-content dl dt { padding: 0; margin-top: 1rem; font-size: 1rem; font-weight: bold; }
.main-content dl dd { padding: 0; margin-bottom: 1rem; }
.main-content hr { height: 2px; padding: 0; margin: 1rem 0; background-color: #eff0f1; border: 0; }
.articles-header { margin-left: auto; margin-right: auto; margin-bottom: 2rem; text-align: center; }
.articles-header .articles-header__title { margin-bottom: 0.5rem; }
.articles-header .articles-header__subtitle { margin-top: 0; }
.articles__credits { margin-top: 2rem; font-size: 0.9rem; }
.corner-ribbon-container { position: relative; overflow: hidden; }
.corner-ribbon-container::before { position: absolute; top: 25px; right: -50px; left: auto; width: 200px; content: 'Alpha'; background: #1e6bb8; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; font-weight: 600; transform: rotate(45deg); -webkit-transform: rotate(45deg); box-shadow: 0 0 3px rgba(0,0,0,.3); }
@media screen and (max-width: 42em) { .corner-ribbon-container::before { line-height: 40px; } }
.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; }
@media screen and (min-width: 64em) { .site-footer { font-size: 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .site-footer { font-size: 1rem; } }
@media screen and (max-width: 42em) { .site-footer { font-size: 0.9rem; } }
.site-footer-owner { display: block; font-weight: bold; }
.site-footer-credits { color: #819198; }
......@@ -4,11 +4,11 @@ title: {{ site.name }}
---
<h3 class="home__header">
<h1 class="home__title">Un guide pour créer votre coopérative ouvrière</h1>
<h3 class="home__subtitle">à destination des indépendant·e·s dans l’informatique</h3>
Un guide pour créer votre coopérative ouvrière<br>
à destination des indépendant·e·s dans l’informatique
</h3>
<ol class="articles">
<ol class="home__articles">
<li>
<a href="{% link _guide/pourquoi-creer-une-cooperative.markdown %}">
Pourquoi créer une coopérative à partir d’un groupe de travailleurs indépendants ?
......
......@@ -5,7 +5,9 @@ title: Témoignages
<h1>{{ page.title }}</h1>
Vous trouverez ici des témoignages de différentes coopératives informatiques.