mirror of
https://github.com/almet/notmyidea.git
synced 2025-04-28 11:32:39 +02:00
751 lines
12 KiB
CSS
751 lines
12 KiB
CSS
/*
|
|
Theme Name: mnmlist modified by Alexis Métaireau
|
|
|
|
Theme URI: http://mathieu.agopian.info/mnmlist/theme.html
|
|
Description: Theme adapted from http://mnmlist.com/theme/ from Leo Babauta,
|
|
a very clean minimalist theme, without comments, search, archives or other
|
|
features.
|
|
|
|
Author: Mathieu Agopian, Mathieu Leplatre, Alexis Métaireau
|
|
Author URI: https://notmyidea.org
|
|
|
|
This theme is uncopyrighted, free, and offered as is.
|
|
*/
|
|
|
|
@import url("pygment.css");
|
|
|
|
:root {
|
|
--main-bg-color: hsl(0, 0%, 100%);
|
|
--text-color: hsl(0, 0%, 18%);
|
|
--reverse-bg-color: hsl(0, 0%, 20%);
|
|
--reverse-text-color: hsl(0, 0%, 100%);
|
|
--border-color: hsl(0, 0%, 67%);
|
|
--code-bg-color: hsl(0, 0%, 96%);
|
|
--quote-bg-color: hsl(24, 100%, 98%);
|
|
--quote-bold-color: hsla(9, 100%, 60%, 0.3);
|
|
--highlight: hsla(200, 13%, 76%, 0.15);
|
|
--highlight-hover: hsl(165, 16%, 59%);
|
|
--link-color: hsl(9, 100%, 64%);
|
|
--general-heading-color: var(--link-color);
|
|
--headers-color: hsl(0, 0%, 0%);
|
|
--headers-color-secondary: hsla(0, 0%, 0%, 0.463);
|
|
--color-lectures: hsl(65, 80%, 45%);
|
|
--color-code: hsl(28, 90%, 50%);
|
|
--color-ecriture: hsl(180, 70%, 40%);
|
|
--color-journal: hsl(317, 80%, 45%);
|
|
--color-weeknotes: hsl(270, 30%, 50%);
|
|
}
|
|
|
|
.link-lectures, .lectures {
|
|
--item-color: var(--color-lectures);
|
|
--link-color: var(--color-lectures);
|
|
--general-heading-color: var(--color-lectures);
|
|
--quote-bg-color: hsl(65, 100%, 98%);
|
|
--quote-bold-color: hsla(65, 80%, 45%, 0.3);
|
|
}
|
|
|
|
.link-code, .code {
|
|
--item-color: var(--color-code);
|
|
--link-color: var(--color-code);
|
|
--general-heading-color: var(--color-code);
|
|
}
|
|
|
|
.link-ecriture, .ecriture {
|
|
--item-color: var(--color-ecriture);
|
|
--link-color: var(--color-ecriture);
|
|
--general-heading-color: var(--color-ecriture);
|
|
}
|
|
|
|
.link-journal, .journal {
|
|
--item-color: var(--color-journal);
|
|
--link-color: var(--color-journal);
|
|
--general-heading-color: var(--color-journal);
|
|
}
|
|
|
|
.link-weeknotes, .weeknotes {
|
|
--item-color: var(--color-weeknotes);
|
|
--link-color: var(--color-weeknotes);
|
|
--general-heading-color: var(--color-weeknotes);
|
|
--quote-bg-color: hsl(270, 100%, 98%);
|
|
--quote-bold-color: hsla(270, 80%, 45%, 0.3);
|
|
}
|
|
|
|
.items > .item {
|
|
padding-left: 1em;
|
|
border-left-width: 1em;
|
|
border-left: solid;
|
|
border-left-color: var(--item-color);
|
|
}
|
|
|
|
.items {
|
|
position: relative;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.items h3 {
|
|
margin-top: 10px;
|
|
position: absolute;
|
|
left: -100px;
|
|
width: 100px;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
color: var(--headers-color-secondary);
|
|
display: none; /* Hide by default */
|
|
}
|
|
|
|
/* Show month labels when screen is wide enough */
|
|
@media (min-width: 1100px) {
|
|
.items h3 {
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Caveat";
|
|
font-style: normal;
|
|
font-weight: 400 700;
|
|
font-display: swap;
|
|
src: url("../fonts/Caveat.woff2") format("woff2");
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
|
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
|
|
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
body {
|
|
background: var(--main-bg-color);
|
|
color: var(--text-color);
|
|
font-family: "Cantarell", "Luciole", Arial, sans-serif;
|
|
/* background-image: url(/theme/white-waves.webp); */
|
|
background-repeat: repeat;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 16px;
|
|
|
|
max-width: 45em;
|
|
font-size: 20px;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
/* For mobile phones: */
|
|
body {
|
|
padding: 5px;
|
|
|
|
max-width: 100%;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: var(--headers-color);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
line-height: 1.2em;
|
|
a {
|
|
text-decoration-style: unset;
|
|
}
|
|
small {
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
time {
|
|
font-family:
|
|
ui-monospace,
|
|
SFMono-Regular,
|
|
SF Mono,
|
|
Menlo,
|
|
Consolas,
|
|
Liberation Mono,
|
|
monospace;
|
|
}
|
|
|
|
.book-container {
|
|
grid-template-columns: 1fr 1fr;
|
|
display: grid;
|
|
align-items: start;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.align-right {
|
|
float: right;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.align-center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.footnote:first-of-type {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.footnote:last-of-type {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.footnote-reference {
|
|
vertical-align: super;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
blockquote {
|
|
position: relative;
|
|
margin: 1em 2ch 1em 2ch;
|
|
background-color: var(--quote-bg-color);
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
padding-top: 0.1em;
|
|
padding-bottom: 0.1em;
|
|
}
|
|
|
|
blockquote strong {
|
|
background-color: var(--quote-bold-color);
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
blockquote::before,
|
|
blockquote::after {
|
|
font-size: 2em;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
white-space: pre;
|
|
line-height: 30px;
|
|
cursor: default;
|
|
}
|
|
|
|
blockquote::before {
|
|
top: 0;
|
|
left: -1ch;
|
|
bottom: 0;
|
|
width: 1ch;
|
|
content: "«";
|
|
}
|
|
|
|
blockquote::after {
|
|
bottom: 0;
|
|
right: -1.2ch;
|
|
width: 1ch;
|
|
content: "»";
|
|
}
|
|
|
|
p {
|
|
line-height: 30px;
|
|
margin: 30px auto;
|
|
text-indent: 0px;
|
|
}
|
|
|
|
p.caption {
|
|
font-size: 80%;
|
|
margin-top: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration-color: var(--link-color);
|
|
text-decoration-thickness: 3px;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
a.tag {
|
|
border-radius: 5px;
|
|
padding: 0 0.1rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tag {
|
|
border-radius: 5px;
|
|
padding: 0 0.1rem;
|
|
font-size: 0.7em;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
a.tag:hover {
|
|
color: var(--highlight-hover);
|
|
}
|
|
|
|
ul li,
|
|
ol li {
|
|
line-height: 30px;
|
|
padding: 0;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
tt,
|
|
pre {
|
|
font-family: Inconsolata, Monaco, monospace;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
pre {
|
|
font-size: 0.8em;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* .ecriture {
|
|
font-family: "Caveat";
|
|
font-size: 1.5em;
|
|
} */
|
|
|
|
header {
|
|
display: inline-block;
|
|
width: 100%;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
hyphens: auto;
|
|
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
figure {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
h1 {
|
|
min-height: 2em;
|
|
font-size: clamp(3rem, 5vw, 5rem);
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
position: relative;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--color-lectures) 20%,
|
|
var(--color-code) 20% 40%,
|
|
var(--color-ecriture) 40% 60%,
|
|
var(--color-journal) 60% 80%,
|
|
var(--color-weeknotes) 80%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
text-shadow:
|
|
2px 2px 0 rgba(0,0,0,0.1),
|
|
-2px -2px 0 rgba(255,255,255,0.1);
|
|
|
|
del {
|
|
text-decoration: line-through;
|
|
color: #555;
|
|
}
|
|
}
|
|
}
|
|
|
|
figcaption {
|
|
top: -6rem;
|
|
right: 3em;
|
|
position: relative;
|
|
background: white;
|
|
float: right;
|
|
font-size: 1.3em;
|
|
padding: 3px;
|
|
color: grey;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
figure {
|
|
h1 {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 1em;
|
|
right: 1rem;
|
|
top: -3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
section.index {
|
|
margin-top: 3em;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
section.index h1 {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.index time {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#links {
|
|
li {
|
|
display: initial;
|
|
list-style-type: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
li:nth-child(1) {
|
|
display: inline-block;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
text-decoration-color: var(--link-color);
|
|
/*text-decoration-thickness: unset;*/
|
|
}
|
|
|
|
li a:not(.main) {
|
|
text-transform: lower-case;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
a.main {
|
|
color: #fff;
|
|
background-color: var(--link-color);
|
|
}
|
|
|
|
a.selected {
|
|
text-decoration-color: var(--link-color);
|
|
}
|
|
|
|
a.selected:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
article :not(.weeknotes),
|
|
.index {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
border-left: 0.6em var(--link-color) solid;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
ul {
|
|
position: relative;
|
|
list-style-type: none;
|
|
|
|
li::before {
|
|
content: "→";
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
padding-left: 0px;
|
|
border: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.more {
|
|
color: var(--reverse-text-color);
|
|
background-color: var(--reverse-bg-color);
|
|
padding: 1em;
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
color: var(--reverse-text-color);
|
|
}
|
|
}
|
|
.more details {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
#article-list {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
#article-list ol li {
|
|
line-height: 1.2em;
|
|
list-style-type: none;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
p code {
|
|
font-family:
|
|
ui-monospace,
|
|
SFMono-Regular,
|
|
SF Mono,
|
|
Menlo,
|
|
Consolas,
|
|
Liberation Mono,
|
|
monospace;
|
|
background: var(--code-bg-color);
|
|
padding: 2px 4px;
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.note {
|
|
background: var(--code-bg-color);
|
|
font-style: italic;
|
|
padding: 1em 0.5em;
|
|
margin: 1em 0;
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.note p {
|
|
display: inline;
|
|
}
|
|
|
|
.note p.first {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.note p.first::after {
|
|
content: " : ";
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
color: var(--headers-color);
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
footer li {
|
|
display: inline;
|
|
}
|
|
|
|
footer p {
|
|
text-align: right;
|
|
}
|
|
|
|
footer a {
|
|
text-decoration-thickness: unset;
|
|
}
|
|
|
|
table {
|
|
margin: 0 0 2em 0;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
table thead {
|
|
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
|
|
}
|
|
|
|
table th {
|
|
color: #000;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
padding: 0 0.75em 0.75em 0.75em;
|
|
text-align: left;
|
|
}
|
|
|
|
table tbody tr:nth-child(2n + 1) {
|
|
background-color: rgba(0, 0, 0, 0.025);
|
|
}
|
|
|
|
table td {
|
|
padding: 0.75em 0.75em;
|
|
}
|
|
|
|
hr {
|
|
width: 100%;
|
|
height: 0.5em;
|
|
border: 0px;
|
|
margin-top: 3em;
|
|
margin-bottom: 3em;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--text-color) 0px,
|
|
var(--text-color) 3px,
|
|
transparent 2px,
|
|
transparent 9px
|
|
);
|
|
}
|
|
|
|
@media screen and (max-width: 710px) {
|
|
ul li:nth-child(1):after {
|
|
content: "\A";
|
|
white-space: pre;
|
|
}
|
|
}
|
|
|
|
a[data-size]::after {
|
|
content: attr(data-size);
|
|
vertical-align: super;
|
|
font-style: italic;
|
|
font-size: 10px;
|
|
}
|
|
|
|
a[data-size="2"] {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
a[data-size="3"] {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
a[data-size="4"] {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
a[data-size="5"] {
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
.footer #feed {
|
|
top: 5px;
|
|
}
|
|
|
|
#feed {
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
#feed img {
|
|
height: 25px;
|
|
width: 25px;
|
|
}
|
|
|
|
.book-cover {
|
|
max-width: 128px;
|
|
max-height: 192px;
|
|
padding: 1em;
|
|
float: left;
|
|
}
|
|
|
|
dd {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
#content {
|
|
background-color: var(--main-bg-color);
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
.progressbar {
|
|
font-size: 1em;
|
|
display: inline;
|
|
float: left;
|
|
}
|
|
|
|
#articles .items {
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.item {
|
|
flex-direction: row;
|
|
display: flex;
|
|
padding-bottom: 0.5em;
|
|
|
|
time {
|
|
flex: 1;
|
|
text-align: right;
|
|
color: #797878;
|
|
padding-left: 1em;
|
|
|
|
@media screen and (max-width: 600px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav {
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.navigation {
|
|
list-style-type: none;
|
|
padding-left: 0px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navigation > li {
|
|
display: inline-flex;
|
|
padding: 0px 0.5em;
|
|
}
|
|
|
|
.navigation > li::after {
|
|
content: " ";
|
|
letter-spacing: 1em;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent calc(50% - 0.03125em),
|
|
currentColor 0,
|
|
currentColor calc(50% + 0.03125em),
|
|
transparent 0
|
|
);
|
|
}
|
|
|
|
.weeknotes ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
padding: 2px
|
|
}
|
|
}
|
|
|