Select Git revision
Forked from
MACAO / MACAO Hugo
Source project has a limited visibility.
style.css 10.55 KiB
/**
* Pico's Default Theme
*
* Pico's default theme is a bit bare - but that's intentional! The default
* theme isn't meant for production use, it's actually a template for you to
* design your own theme around.
*
* Pico is a stupidly simple, blazing fast, flat file CMS.
*
* @author Gilbert Pellegrom
* @author Daniel Rudolf
* @link http://picocms.org
* @license http://opensource.org/licenses/MIT The MIT License
* @version 2.1
*/
* {
box-sizing: border-box;
border: 0 none;
margin: 0;
padding: 0;
}
.hidden { display: none !important; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0 none;
}
.slide {
overflow-y: hidden !important;
-webkit-transition: height .5s ease-in !important;
transition: height .5s ease-in !important;
}
/*** BASIC LAYOUT ***/
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
#header, #footer { flex: 0 0 auto; }
#main {
padding: 5em 0 4em;
}
/* very ugly overflow fix, avoid this whenever possible! */
/* #main .container { overflow-x: auto; } */
/*** BASIC LAYOUT: HEADER ***/
#header {
background: #EFEFEF;
color: #41B171;
}
#title, #logo, #title h1 {
font-family: Revalia !important;
float: left;
padding: 1em 0 0.5em 0.5em;
}
#title * { margin: 0; color: #41B171; }
#title p { font-style: italic; }
#logo img { float:left; }
#logo p {clear: both; }
#logo + #title h1 { margin: 0.8rem 0; }
#logo + #title.tagline h1 { margin: 0; }
#top {
text-align: right;
}
#top ul {
list-style: none;
margin: 0;
padding: 0;
}
#top ul li {
display: inline-block;
margin-left: 1em;
padding: 0;
font-weight: bold;
}
a#logo, #top a, #nav-toggle { color: #556d5f; }
a#logo:hover, #top .active a, #top a:hover, #nav-toggle:hover { color: #1e924d; }
#nav-toggle { display: none; }
/* IE8 + IE9 clearfix */
#header > .container:after {
content: '';
display: block;
clear: both;
}
/*** BASIC LAYOUT: FOOTER ***/
#footer {
background: #707070;
color: #C0C0C0;
}
#footer a { color: #ddd; }
#footer a:hover { color: #fff; }
#footer p {
margin: 0;
padding: 3em 0;
}
#footer .social {
float: right;
padding: 1.5em 0 1.5em 1em;
font-size: 1.5rem;
text-align: right;
}
/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/
@media (max-width: 767px) {
#main { padding: 2em 0 1em; }
#title, #logo { padding: 2em 1.5em 2em 0; }
#logo { height: 8.8em; }
#top {
clear: both;
padding: 0;
}
#top ul {
padding-bottom: 1em;
}
#top ul li {
display: block;
margin-left: 0;
text-align: center;
}
#top ul li a {
display: block;
padding: 0.5em 0;
}
.js #nav-toggle {
display: block;
float: right;
width: 2em;
margin: 0.6667em 0;
font-size: 1.5rem;
line-height: 2em;
text-align: center;
cursor: pointer;
}
.js #nav-toggle > * { vertical-align: middle; }
#footer p { padding: 1em 0; }
#footer .social { padding: 0.5em 0 0.5em 1em; }
}
/*** TYPOGRAPHY ***/
@font-face{
font-family: Revalia;
src: url(../font/Revalia-Regular.ttf)
}
@font-face{
font-family: Cabin;
src: url(../font/Cabin-Medium.ttf)
}
@font-face{
font-family: Cabin-Bold;
src: url(../font/Cabin-Bold.ttf)
}
html { font-size: 16px; }
body {
font: 17px/26px Cabin;
line-height: 1.6;
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
font-kerning: normal;
color: #6e8678;
}
p {
padding-bottom: 15px;
}
p, td, th, li, dd {
text-align: justify;
overflow-wrap: break-word;
word-wrap: break-word;
}
p, hr, table, .table-responsive, ol, ul, dl, dd, pre, blockquote, fieldset {
margin-bottom: 1em;
}
a {
color: #40c375;
text-decoration: none;
-webkit-transition: color .2s ease-in;
transition: color .2s ease-in;
}
a:hover { color: #1e924d; }
h1, h2, h3, h4, h5, h6 {
font-family: Cabin-bold;
margin-bottom: 0.6em;
font-weight: bold;
}
h1 {
padding: 40px 0;
font-size: 40px;
line-height: 48px;
color: #506257;
}
h2 {
font-size: 1.7rem;
padding: 30px 0 ;
}
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: normal; font-style: italic; }
img { max-width: 100%; }
hr {
border: 0.15em solid #f5f5f5;
border-radius: 0.3em;
background: #f5f5f5;
}
abbr { text-decoration: underline dotted; }
/*** UTILITIES ***/
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
.image { display: block; margin: 0 auto; }
.image.xsmall { width: 20%; }
.image.small { width: 40%; }
.image.large { width: 60%; }
.image.xlarge { width: 80%; }
.image.float-left { float: left; margin: 1em 2em 1em 0; }
.image.float-right { float: right; margin: 1em 0 1em 2em; }
.image img { display: block; width: 100%; }
@media (max-width: 767px) {
.image.xsmall { width: 60%; }
.image.small { width: 80%; }
.image.large, .image.xlarge { width: 100%; }
.image.float-left, .image.float-right { float: none; margin: 0 auto; }
}
/*** TABLES ***/
table { border-spacing: 0; }
td, th {
padding: 0.4em 1em;
vertical-align: top;
}
th {
font-weight: bold;
text-align: center;
background: #f5f5f5;
color: #333;
}
td, th { border: 1px solid #ccc; }
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; }
thead tr:last-child th { border-bottom: 0 none; }
td:not(:last-child), th:not(:last-child) { border-right: 0 none; }
tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-radius: 0.3em; }
tr:first-child td:last-child, tr:first-child th:last-child { border-top-right-radius: 0.3em; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 0.3em; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 0.3em; }
table thead + tbody tr:first-child td { border-radius: 0 !important; }
.table-responsive { overflow-x: auto; }
.table-responsive > table { margin-bottom: 0; }
/*** LISTS ***/
ol, ul {
list-style-position: outside;
padding-left: 1.5em;
}
ol { padding-left: 2.5em; }
li { padding-left: 0.5em; }
dt { font-weight: bold; }
dd { margin-left: 2em; }
/*** CODE ***/
code {
margin: 0 0.1em;
padding: 0.1em 0.2em;
border: 1px solid #ccc;
border-radius: 0.3em;
background: #f5f5f5;
font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
font-size: 0.85rem;
line-height: 1.9824;
}
pre {
padding: 0 1em;
border: 1px solid #ccc;
border-radius: 0.3em;
background: #f5f5f5;
}
pre code {
display: block;
margin: 0;
padding: 1.1111em 0;
border: 0 none;
background: transparent;
overflow-x: auto;
line-height: 1.4;
}
/*** BLOCKQUOTE ***/
blockquote {
font-style: italic;
margin-left: 1em;
padding-left: 1em;
border-left: 0.5em solid #f5f5f5;
}
/*** FORMS ***/
label, fieldset legend { font-weight: bold; }
input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
border: 1px solid #ccc;
border-radius: 0.3em;
background: #fff;
-webkit-transition: none .2s ease-in;
transition: none .2s ease-in;
-webkit-transition-property: border-color, background, box-shadow;
transition-property: border-color, background, box-shadow;
}
input:not([type="checkbox"]):not([type="radio"]), button, select, textarea {
padding: 0.5em 1em;
outline: 0 none;
font-size: 1rem;
}
input:focus:not([type="checkbox"]):not([type="radio"]), button:focus, select:focus, textarea:focus {
border-color: #2EAE9B;
box-shadow: 0 0 8px #2EAE9B;
}
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, button:focus,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
background: #f5f5f5;
cursor: pointer;
}
textarea, select[multiple] {
vertical-align: bottom;
overflow: auto;
}
fieldset {
padding: 1em;
background: #f5f5f5;
}
fieldset legend { padding: 0 0.5em; }
fieldset label, fieldset input, fieldset button,
fieldset select, fieldset textarea {
margin: 0.2em 0.5em;
}
fieldset label:first-child, fieldset input:first-child, fieldset button:first-child,
fieldset select:first-child, fieldset textarea:first-child {
margin-left: 0;
}
fieldset label:last-child, fieldset input:last-child, fieldset button:last-child,
fieldset select:last-child, fieldset textarea:last-child {
margin-right: 0;
}
/* Firefox input size fix */
input::-moz-focus-inner, button::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* Collapse with preview
*/
.module .collapse, .module .collapsing {
height: 3rem; /* [NUM_OF_LINES] x [LINE_HEIGHT] */
}
.module .collapse {
position: relative; /* For ...'s content absolute positioning */
display: block;
overflow: hidden;
float: right;
}
.module .collapse:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
}
.module .collapse.show {
height: auto; /* You need to reset the height when not collapsed */
}
.module .collapse.show:before {
display: none; /* Of course you don't want to display ... */
}
.module a.collapsed:after {
content: '+ Voir plus';
}
.module a:not(.collapsed):after {
content: '- Voir moins';
}
img.picture {
width: 30%;
}
.even {
float: right;
margin: 0% 0% 0% 10%;
}
#bottom ul {
list-style: none;
}
#bottom li {
float: left;
padding: 0 35px 20px 0;
font-size: 14px;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li h2 a:hover, p a:hover {
color: #41b171;
}
.items > li {
padding: 50px 0 50px;
border-top: 1px solid;
#color: #97c9ae;
#background: #3c4552;
}
.items {
list-style: none;
}
.items h2 a:hover {
color: #41b171;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: #3d5145;
text-decoration: none;
}
.content ul, .content ol, .items li ul {
padding: 20px 30px;
}
.wrap {
min-width: 280px;
max-width: 1024px;
width: 80%;
margin: 0 auto;
}
.footnote {
padding: 20px 0 40px;
border-top: 1px solid;
margin: 20px 15px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#main {
margin-top: 60px;
}