Vincent Prouillet
7 years ago
commit
068416a53d
11 changed files with 1306 additions and 0 deletions
@ -0,0 +1,21 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2017 Vincent Prouillet |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,45 @@
|
||||
# after-dark |
||||
|
||||
 |
||||
|
||||
## Contents |
||||
|
||||
- [Installation](#installation) |
||||
- [Options](#options) |
||||
- [Top menu](#top-menu) |
||||
- [Title](#title) |
||||
|
||||
## Installation |
||||
First download this theme to your `themes` directory: |
||||
|
||||
```bash |
||||
$ cd themes |
||||
$ git clone https://github.com/Keats/after-dark.git |
||||
``` |
||||
and then enable it in your `config.toml`: |
||||
|
||||
```toml |
||||
theme = "after-dark" |
||||
``` |
||||
|
||||
## Options |
||||
|
||||
### Top-menu |
||||
Set a field in `extra` with a key of `after_dark_menu`: |
||||
|
||||
```toml |
||||
after_dark_menu = [ |
||||
{url = "$BASE_URL", name = "Home"}, |
||||
{url = "$BASE_URL/categories", name = "Categories"}, |
||||
{url = "$BASE_URL/tags", name = "Tags"}, |
||||
{url = "https://google.com", name = "Google"}, |
||||
] |
||||
``` |
||||
|
||||
If you put `$BASE_URL` in a url, it will automatically be replaced by the actual |
||||
site URL. |
||||
|
||||
### Title |
||||
The site title is shown on the homepage. As it might be different from the `<title>` |
||||
element that the `title` field in the config represents, you can set the `after_dark_title` |
||||
instead. |
||||
|
After Width: | Height: | Size: 131 KiB |
@ -0,0 +1,100 @@
|
||||
:root { |
||||
--screen-size-small: 30em; /* breakpoint reference only */ |
||||
} |
||||
@keyframes intro { |
||||
0% { |
||||
opacity: 0; |
||||
} |
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.muted { |
||||
color: rgba(255, 255, 255, 0.5); |
||||
} |
||||
.responsive-iframe { |
||||
position: relative; |
||||
padding-bottom: 56.25%; /* 16:9 */ |
||||
padding-top: 25px; |
||||
height: 0; |
||||
} |
||||
.responsive-iframe iframe { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
iframe { |
||||
border: 0; |
||||
} |
||||
main, footer { |
||||
animation: intro 0.3s both; |
||||
animation-delay: 0.15s; |
||||
} |
||||
footer time[datetime$="M"]:before { |
||||
content: "\2013\0020"; |
||||
} |
||||
@media only screen |
||||
and ( max-width: 30em ) { |
||||
footer time[datetime$="M"] { |
||||
display: none; |
||||
} |
||||
} |
||||
blockquote cite { |
||||
display: block; |
||||
} |
||||
blockquote cite::before { |
||||
content: "\2014"; |
||||
} |
||||
:target { |
||||
color: #fff; |
||||
} |
||||
/* hack.css overrides and enhancements */ |
||||
.hack li ul { |
||||
margin: 0; |
||||
} |
||||
.main { |
||||
padding: 20px 10px; |
||||
} |
||||
nav a.active { |
||||
background-color: #ff2e88; |
||||
color: #fff; |
||||
} |
||||
a[itemprop="url"] { |
||||
color: #ff9800; |
||||
} |
||||
a[itemprop="url"]:hover { |
||||
color: #fff; |
||||
} |
||||
a[href*="://"]::after, |
||||
a[rel*="external"] { |
||||
content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E"); |
||||
} |
||||
figure a[href*="://"]::after, |
||||
figure a[rel*="external"] { |
||||
content: ""; |
||||
} |
||||
html { |
||||
font-size: 13px; |
||||
} |
||||
.hack pre { |
||||
font-size: 17px; |
||||
} |
||||
article [itemprop="description"], article [itemprop="summary"] { |
||||
margin-bottom: 20px; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
article [itemprop="summary"] p { |
||||
margin: 0; |
||||
} |
||||
|
||||
@media screen and (min-width: 768px) { |
||||
html { |
||||
font-size: 1em; |
||||
} |
||||
.container { |
||||
max-width: 50rem; |
||||
} |
||||
} |
||||
@ -0,0 +1,993 @@
|
||||
html { |
||||
font-size: 12px |
||||
} |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
text-rendering: geometricPrecision |
||||
} |
||||
|
||||
body { |
||||
font-size: 1rem; |
||||
line-height: 1.5rem; |
||||
margin: 0; |
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; |
||||
word-wrap: break-word |
||||
} |
||||
|
||||
h1, h2, h3, h4, h5, h6 { |
||||
line-height: 1.3em |
||||
} |
||||
|
||||
fieldset { |
||||
border: none; |
||||
padding: 0; |
||||
margin: 0 |
||||
} |
||||
|
||||
pre { |
||||
padding: 2rem; |
||||
margin: 1.75rem 0; |
||||
background-color: #fff; |
||||
border: 1px solid #ccc; |
||||
overflow: auto |
||||
} |
||||
|
||||
code[class*=language-], pre[class*=language-], pre code { |
||||
font-weight: 100; |
||||
text-shadow: none; |
||||
margin: 1.75rem 0 |
||||
} |
||||
|
||||
a { |
||||
cursor: pointer; |
||||
color: #ff2e88; |
||||
text-decoration: none; |
||||
border-bottom: 1px solid #ff2e88 |
||||
} |
||||
|
||||
a:hover { |
||||
background-color: #ff2e88; |
||||
color: #fff |
||||
} |
||||
|
||||
.grid { |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-ms-flex-wrap: wrap; |
||||
flex-wrap: wrap |
||||
} |
||||
|
||||
.grid.\-top { |
||||
-ms-flex-align: start; |
||||
-ms-grid-row-align: flex-start; |
||||
align-items: flex-start |
||||
} |
||||
|
||||
.grid.\-middle { |
||||
-ms-flex-align: center; |
||||
-ms-grid-row-align: center; |
||||
align-items: center |
||||
} |
||||
|
||||
.grid.\-bottom { |
||||
-ms-flex-align: end; |
||||
-ms-grid-row-align: flex-end; |
||||
align-items: flex-end |
||||
} |
||||
|
||||
.grid.\-stretch { |
||||
-ms-flex-align: stretch; |
||||
-ms-grid-row-align: stretch; |
||||
align-items: stretch |
||||
} |
||||
|
||||
.grid.\-baseline { |
||||
-ms-flex-align: baseline; |
||||
-ms-grid-row-align: baseline; |
||||
align-items: baseline |
||||
} |
||||
|
||||
.grid.\-left { |
||||
-ms-flex-pack: start; |
||||
justify-content: flex-start |
||||
} |
||||
|
||||
.grid.\-center { |
||||
-ms-flex-pack: center; |
||||
justify-content: center |
||||
} |
||||
|
||||
.grid.\-right { |
||||
-ms-flex-pack: end; |
||||
justify-content: flex-end |
||||
} |
||||
|
||||
.grid.\-between { |
||||
-ms-flex-pack: justify; |
||||
justify-content: space-between |
||||
} |
||||
|
||||
.grid.\-around { |
||||
-ms-flex-pack: distribute; |
||||
justify-content: space-around |
||||
} |
||||
|
||||
.cell { |
||||
-ms-flex: 1; |
||||
flex: 1; |
||||
box-sizing: border-box |
||||
} |
||||
|
||||
@media screen and (min-width: 768px) { |
||||
.cell.\-1of12 { |
||||
-ms-flex: 0 0 8.33333%; |
||||
flex: 0 0 8.33333% |
||||
} |
||||
.cell.\-2of12 { |
||||
-ms-flex: 0 0 16.66667%; |
||||
flex: 0 0 16.66667% |
||||
} |
||||
.cell.\-3of12 { |
||||
-ms-flex: 0 0 25%; |
||||
flex: 0 0 25% |
||||
} |
||||
.cell.\-4of12 { |
||||
-ms-flex: 0 0 33.33333%; |
||||
flex: 0 0 33.33333% |
||||
} |
||||
.cell.\-5of12 { |
||||
-ms-flex: 0 0 41.66667%; |
||||
flex: 0 0 41.66667% |
||||
} |
||||
.cell.\-6of12 { |
||||
-ms-flex: 0 0 50%; |
||||
flex: 0 0 50% |
||||
} |
||||
.cell.\-7of12 { |
||||
-ms-flex: 0 0 58.33333%; |
||||
flex: 0 0 58.33333% |
||||
} |
||||
.cell.\-8of12 { |
||||
-ms-flex: 0 0 66.66667%; |
||||
flex: 0 0 66.66667% |
||||
} |
||||
.cell.\-9of12 { |
||||
-ms-flex: 0 0 75%; |
||||
flex: 0 0 75% |
||||
} |
||||
.cell.\-10of12 { |
||||
-ms-flex: 0 0 83.33333%; |
||||
flex: 0 0 83.33333% |
||||
} |
||||
.cell.\-11of12 { |
||||
-ms-flex: 0 0 91.66667%; |
||||
flex: 0 0 91.66667% |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 768px) { |
||||
.grid { |
||||
-ms-flex-direction: column; |
||||
flex-direction: column |
||||
} |
||||
.cell { |
||||
-ms-flex: 0 0 auto; |
||||
flex: 0 0 auto |
||||
} |
||||
} |
||||
|
||||
.hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong { |
||||
font-size: 1rem; |
||||
font-style: normal; |
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif |
||||
} |
||||
|
||||
.hack blockquote, .hack code, .hack em, .hack strong { |
||||
line-height: 20px |
||||
} |
||||
|
||||
.hack blockquote, .hack code, .hack footer, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack header, .hack li, .hack ol, .hack p, .hack section, .hack ul { |
||||
float: none; |
||||
margin: 0; |
||||
padding: 0 |
||||
} |
||||
|
||||
.hack blockquote, .hack h1, .hack ol, .hack p, .hack ul { |
||||
margin-top: 20px; |
||||
margin-bottom: 20px |
||||
} |
||||
|
||||
.hack h1 { |
||||
position: relative; |
||||
display: inline-block; |
||||
display: table-cell; |
||||
padding: 20px 0 30px; |
||||
margin: 0; |
||||
overflow: hidden |
||||
} |
||||
|
||||
.hack h1:after { |
||||
content: "===================================================================================================="; |
||||
position: absolute; |
||||
bottom: 10px; |
||||
left: 0 |
||||
} |
||||
|
||||
.hack h1 + * { |
||||
margin-top: 0 |
||||
} |
||||
|
||||
.hack h2, .hack h3, .hack h4, .hack h5, .hack h6 { |
||||
position: relative; |
||||
margin-bottom: 1.75rem |
||||
} |
||||
|
||||
.hack h2:before, .hack h3:before, .hack h4:before, .hack h5:before, .hack h6:before { |
||||
display: inline |
||||
} |
||||
|
||||
.hack h2:before { |
||||
content: "## " |
||||
} |
||||
|
||||
.hack h3:before { |
||||
content: "### " |
||||
} |
||||
|
||||
.hack h4:before { |
||||
content: "#### " |
||||
} |
||||
|
||||
.hack h5:before { |
||||
content: "##### " |
||||
} |
||||
|
||||
.hack h6:before { |
||||
content: "###### " |
||||
} |
||||
|
||||
.hack li { |
||||
position: relative; |
||||
display: block; |
||||
padding-left: 20px |
||||
} |
||||
|
||||
.hack li:after { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0 |
||||
} |
||||
|
||||
.hack ul > li:after { |
||||
content: "-" |
||||
} |
||||
|
||||
.hack ol { |
||||
counter-reset: a |
||||
} |
||||
|
||||
.hack ol > li:after { |
||||
content: counter(a) "."; |
||||
counter-increment: a |
||||
} |
||||
|
||||
.hack blockquote { |
||||
position: relative; |
||||
padding-left: 17px; |
||||
padding-left: 2ch; |
||||
overflow: hidden |
||||
} |
||||
|
||||
.hack blockquote:after { |
||||
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>"; |
||||
white-space: pre; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
line-height: 20px |
||||
} |
||||
|
||||
.hack em:after, .hack em:before { |
||||
content: "*"; |
||||
display: inline |
||||
} |
||||
|
||||
.hack pre code:after, .hack pre code:before { |
||||
content: '' |
||||
} |
||||
|
||||
.hack code { |
||||
font-weight: 700 |
||||
} |
||||
|
||||
.hack code:after, .hack code:before { |
||||
content: "`"; |
||||
display: inline |
||||
} |
||||
|
||||
.hack hr { |
||||
position: relative; |
||||
height: 20px; |
||||
overflow: hidden; |
||||
border: 0; |
||||
margin: 20px 0 |
||||
} |
||||
|
||||
.hack hr:after { |
||||
content: "----------------------------------------------------------------------------------------------------"; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
line-height: 20px; |
||||
width: 100%; |
||||
word-wrap: break-word |
||||
} |
||||
|
||||
@-moz-document url-prefix() { |
||||
.hack h1 { |
||||
display: block |
||||
} |
||||
} |
||||
|
||||
.hack-ones ol > li:after { |
||||
content: "1." |
||||
} |
||||
|
||||
p { |
||||
margin: 0 0 1.75rem |
||||
} |
||||
|
||||
.container { |
||||
max-width: 70rem |
||||
} |
||||
|
||||
.container, .container-fluid { |
||||
margin: 0 auto; |
||||
padding: 0 1rem |
||||
} |
||||
|
||||
.inner { |
||||
padding: 1rem |
||||
} |
||||
|
||||
.inner2x { |
||||
padding: 2rem |
||||
} |
||||
|
||||
.pull-left { |
||||
float: left |
||||
} |
||||
|
||||
.pull-right { |
||||
float: right |
||||
} |
||||
|
||||
.progress-bar { |
||||
height: 8px; |
||||
opacity: .8; |
||||
background-color: #ccc; |
||||
margin-top: 12px |
||||
} |
||||
|
||||
.progress-bar.progress-bar-show-percent { |
||||
margin-top: 38px |
||||
} |
||||
|
||||
.progress-bar-filled { |
||||
background-color: gray; |
||||
height: 100%; |
||||
transition: width .3s ease; |
||||
position: relative; |
||||
width: 0 |
||||
} |
||||
|
||||
.progress-bar-filled:before { |
||||
content: ''; |
||||
border: 6px solid transparent; |
||||
border-top-color: gray; |
||||
position: absolute; |
||||
top: -12px; |
||||
right: -6px |
||||
} |
||||
|
||||
.progress-bar-filled:after { |
||||
color: gray; |
||||
content: attr(data-filled); |
||||
display: block; |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
position: absolute; |
||||
border: 6px solid transparent; |
||||
top: -38px; |
||||
right: 0; |
||||
-ms-transform: translateX(50%); |
||||
transform: translateX(50%) |
||||
} |
||||
|
||||
table { |
||||
width: 100%; |
||||
border-collapse: collapse; |
||||
margin: 1.75rem 0; |
||||
color: #778087 |
||||
} |
||||
|
||||
table td, table th { |
||||
vertical-align: top; |
||||
border: 1px solid #ccc; |
||||
line-height: 15px; |
||||
padding: 10px |
||||
} |
||||
|
||||
table thead th { |
||||
font-size: 10px |
||||
} |
||||
|
||||
table tbody td:first-child { |
||||
font-weight: 700; |
||||
color: #333 |
||||
} |
||||
|
||||
.form { |
||||
width: 30rem |
||||
} |
||||
|
||||
.form-group { |
||||
margin-bottom: 1.75rem; |
||||
overflow: auto |
||||
} |
||||
|
||||
.form-group label { |
||||
border-bottom: 2px solid #ccc; |
||||
color: #333; |
||||
width: 10rem; |
||||
display: inline-block; |
||||
height: 38px; |
||||
line-height: 38px; |
||||
padding: 0; |
||||
float: left; |
||||
position: relative |
||||
} |
||||
|
||||
.form-group.form-success label { |
||||
color: #4caf50 !important; |
||||
border-color: #4caf50 !important |
||||
} |
||||
|
||||
.form-group.form-warning label { |
||||
color: #ff9800 !important; |
||||
border-color: #ff9800 !important |
||||
} |
||||
|
||||
.form-group.form-error label { |
||||
color: #f44336 !important; |
||||
border-color: #f44336 !important |
||||
} |
||||
|
||||
.form-control { |
||||
outline: none; |
||||
border: none; |
||||
border-bottom: 2px solid #ccc; |
||||
padding: .5rem 0; |
||||
width: 20rem; |
||||
height: 38px; |
||||
background-color: transparent |
||||
} |
||||
|
||||
.form-control:focus { |
||||
border-color: #555 |
||||
} |
||||
|
||||
.form-group.form-textarea label:after { |
||||
position: absolute; |
||||
content: ''; |
||||
width: 2px; |
||||
background-color: #fff; |
||||
right: -2px; |
||||
top: 0; |
||||
bottom: 0 |
||||
} |
||||
|
||||
textarea.form-control { |
||||
height: auto; |
||||
resize: none; |
||||
padding: 1rem 0; |
||||
border-bottom: 2px solid #ccc; |
||||
border-left: 2px solid #ccc; |
||||
padding: .5rem |
||||
} |
||||
|
||||
select.form-control { |
||||
border-radius: 0; |
||||
background-color: transparent; |
||||
-webkit-appearance: none; |
||||
-moz-appearance: none; |
||||
-ms-appearance: none |
||||
} |
||||
|
||||
.help-block { |
||||
color: #999; |
||||
margin-top: .5rem |
||||
} |
||||
|
||||
.form-actions { |
||||
margin-bottom: 1.75rem |
||||
} |
||||
|
||||
.btn { |
||||
display: -ms-inline-flexbox; |
||||
display: inline-flex; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
-ms-flex-pack: center; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
outline: none; |
||||
padding: .65rem 2rem; |
||||
font-size: 1rem; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
position: relative; |
||||
z-index: 1 |
||||
} |
||||
|
||||
.btn:active { |
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12) |
||||
} |
||||
|
||||
.btn.btn-ghost { |
||||
border-color: #757575; |
||||
color: #757575; |
||||
background-color: transparent |
||||
} |
||||
|
||||
.btn.btn-ghost:focus, .btn.btn-ghost:hover { |
||||
border-color: #424242; |
||||
color: #424242; |
||||
z-index: 2 |
||||
} |
||||
|
||||
.btn.btn-ghost:hover { |
||||
background-color: transparent |
||||
} |
||||
|
||||
.btn-block { |
||||
width: 100%; |
||||
display: -ms-flexbox; |
||||
display: flex |
||||
} |
||||
|
||||
.btn-default { |
||||
color: #fff; |
||||
background-color: #e0e0e0; |
||||
border: 1px solid #e0e0e0; |
||||
color: #333 |
||||
} |
||||
|
||||
.btn-default:focus:not(.btn-ghost), .btn-default:hover { |
||||
background-color: #dcdcdc; |
||||
border-color: #dcdcdc |
||||
} |
||||
|
||||
.btn-success { |
||||
color: #fff; |
||||
background-color: #4caf50; |
||||
border: 1px solid #4caf50 |
||||
} |
||||
|
||||
.btn-success:focus:not(.btn-ghost), .btn-success:hover { |
||||
background-color: #43a047; |
||||
border-color: #43a047 |
||||
} |
||||
|
||||
.btn-success.btn-ghost { |
||||
border-color: #4caf50; |
||||
color: #4caf50 |
||||
} |
||||
|
||||
.btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover { |
||||
border-color: #388e3c; |
||||
color: #388e3c; |
||||
z-index: 2 |
||||
} |
||||
|
||||
.btn-error { |
||||
color: #fff; |
||||
background-color: #f44336; |
||||
border: 1px solid #f44336 |
||||
} |
||||
|
||||
.btn-error:focus:not(.btn-ghost), .btn-error:hover { |
||||
background-color: #e53935; |
||||
border-color: #e53935 |
||||
} |
||||
|
||||
.btn-error.btn-ghost { |
||||
border-color: #f44336; |
||||
color: #f44336 |
||||
} |
||||
|
||||
.btn-error.btn-ghost:focus, .btn-error.btn-ghost:hover { |
||||
border-color: #d32f2f; |
||||
color: #d32f2f; |
||||
z-index: 2 |
||||
} |
||||
|
||||
.btn-warning { |
||||
color: #fff; |
||||
background-color: #ff9800; |
||||
border: 1px solid #ff9800 |
||||
} |
||||
|
||||
.btn-warning:focus:not(.btn-ghost), .btn-warning:hover { |
||||
background-color: #fb8c00; |
||||
border-color: #fb8c00 |
||||
} |
||||
|
||||
.btn-warning.btn-ghost { |
||||
border-color: #ff9800; |
||||
color: #ff9800 |
||||
} |
||||
|
||||
.btn-warning.btn-ghost:focus, .btn-warning.btn-ghost:hover { |
||||
border-color: #f57c00; |
||||
color: #f57c00; |
||||
z-index: 2 |
||||
} |
||||
|
||||
.btn-info { |
||||
color: #fff; |
||||
background-color: #00bcd4; |
||||
border: 1px solid #00bcd4 |
||||
} |
||||
|
||||
.btn-info:focus:not(.btn-ghost), .btn-info:hover { |
||||
background-color: #00acc1; |
||||
border-color: #00acc1 |
||||
} |
||||
|
||||
.btn-info.btn-ghost { |
||||
border-color: #00bcd4; |
||||
color: #00bcd4 |
||||
} |
||||
|
||||
.btn-info.btn-ghost:focus, .btn-info.btn-ghost:hover { |
||||
border-color: #0097a7; |
||||
color: #0097a7; |
||||
z-index: 2 |
||||
} |
||||
|
||||
.btn-primary { |
||||
color: #fff; |
||||
background-color: #2196f3; |
||||
border: 1px solid #2196f3 |
||||
} |
||||
|
||||
.btn-primary:focus:not(.btn-ghost), .btn-primary:hover { |
||||
background-color: #1e88e5; |
||||
border-color: #1e88e5 |
||||
} |
||||
|
||||
.btn-primary.btn-ghost { |
||||
border-color: #2196f3; |
||||
color: #2196f3 |
||||
} |
||||
|
||||
.btn-primary.btn-ghost:focus, .btn-primary.btn-ghost:hover { |
||||
border-color: #1976d2; |
||||
color: #1976d2; |
||||
z-index: 2 |
||||
} |
||||
|
||||
.btn-group { |
||||
overflow: auto |
||||
} |
||||
|
||||
.btn-group .btn { |
||||
float: left |
||||
} |
||||
|
||||
.btn-group .btn-ghost:not(:first-child) { |
||||
margin-left: -1px |
||||
} |
||||
|
||||
.card { |
||||
border: 1px solid #ccc |
||||
} |
||||
|
||||
.card .card-header { |
||||
color: #333; |
||||
text-align: center; |
||||
background-color: #ddd; |
||||
padding: .5rem 0 |
||||
} |
||||
|
||||
.alert { |
||||
color: #ccc; |
||||
padding: 1rem; |
||||
border: 1px solid #ccc; |
||||
margin-bottom: 1.75rem |
||||
} |
||||
|
||||
.alert-success { |
||||
color: #4caf50; |
||||
border-color: #4caf50 |
||||
} |
||||
|
||||
.alert-error { |
||||
color: #f44336; |
||||
border-color: #f44336 |
||||
} |
||||
|
||||
.alert-info { |
||||
color: #00bcd4; |
||||
border-color: #00bcd4 |
||||
} |
||||
|
||||
.alert-warning { |
||||
color: #ff9800; |
||||
border-color: #ff9800 |
||||
} |
||||
|
||||
.media:not(:last-child) { |
||||
margin-bottom: 1.25rem |
||||
} |
||||
|
||||
.media-left { |
||||
padding-right: 1rem |
||||
} |
||||
|
||||
.media-left, .media-right { |
||||
display: table-cell; |
||||
vertical-align: top |
||||
} |
||||
|
||||
.media-right { |
||||
padding-left: 1rem |
||||
} |
||||
|
||||
.media-body { |
||||
display: table-cell; |
||||
vertical-align: top |
||||
} |
||||
|
||||
.media-heading { |
||||
font-size: 1.16667rem; |
||||
font-weight: 700 |
||||
} |
||||
|
||||
.media-content { |
||||
margin-top: .3rem |
||||
} |
||||
|
||||
.avatarholder, .placeholder { |
||||
background-color: #f0f0f0; |
||||
text-align: center; |
||||
color: #b9b9b9; |
||||
font-size: 1rem; |
||||
border: 1px solid #f0f0f0 |
||||
} |
||||
|
||||
.avatarholder { |
||||
width: 48px; |
||||
height: 48px; |
||||
line-height: 46px; |
||||
font-size: 2rem; |
||||
background-size: cover; |
||||
background-position: 50%; |
||||
background-repeat: no-repeat |
||||
} |
||||
|
||||
.avatarholder.rounded { |
||||
border-radius: 33px |
||||
} |
||||
|
||||
.loading { |
||||
display: inline-block; |
||||
content: ' '; |
||||
height: 20px; |
||||
width: 20px; |
||||
margin: 0 .5rem; |
||||
animation: a .6s infinite linear; |
||||
border: 2px solid #e91e63; |
||||
border-right-color: transparent; |
||||
border-radius: 50% |
||||
} |
||||
|
||||
.btn .loading { |
||||
margin-bottom: 0; |
||||
width: 14px; |
||||
height: 14px |
||||
} |
||||
|
||||
.btn div.loading { |
||||
float: left |
||||
} |
||||
|
||||
.alert .loading { |
||||
margin-bottom: -5px |
||||
} |
||||
|
||||
@keyframes a { |
||||
0% { |
||||
transform: rotate(0deg) |
||||
} |
||||
to { |
||||
transform: rotate(1turn) |
||||
} |
||||
} |
||||
|
||||
.menu { |
||||
width: 100% |
||||
} |
||||
|
||||
.menu .menu-item { |
||||
display: block; |
||||
color: #616161; |
||||
border-color: #616161 |
||||
} |
||||
|
||||
.menu .menu-item.active, .menu .menu-item:hover { |
||||
color: #000; |
||||
border-color: #000; |
||||
background-color: transparent |
||||
} |
||||
|
||||
@media screen and (max-width: 768px) { |
||||
.form-group label { |
||||
display: block; |
||||
border-bottom: none; |
||||
width: 100% |
||||
} |
||||
.form-group.form-textarea label:after { |
||||
display: none |
||||
} |
||||
.form-control { |
||||
width: 100% |
||||
} |
||||
textarea.form-control { |
||||
border-left: none; |
||||
padding: .5rem 0 |
||||
} |
||||
pre::-webkit-scrollbar { |
||||
height: 3px |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 480px) { |
||||
.form { |
||||
width: 100% |
||||
} |
||||
} |
||||
|
||||
.dark { |
||||
color: #ccc |
||||
} |
||||
|
||||
.dark, .dark pre { |
||||
background-color: #000 |
||||
} |
||||
|
||||
.dark pre { |
||||
padding: 0; |
||||
border: none |
||||
} |
||||
|
||||
.dark pre code { |
||||
color: #00bcd4 |
||||
} |
||||
|
||||
.dark h1 a, .dark h2 a, .dark h3 a, .dark h4 a, .dark h5 a { |
||||
color: #ccc |
||||
} |
||||
|
||||
.dark code, .dark strong { |
||||
color: #fff |
||||
} |
||||
|
||||
.dark code { |
||||
font-weight: 100 |
||||
} |
||||
|
||||
.dark table { |
||||
color: #ccc |
||||
} |
||||
|
||||
.dark table td, .dark table th { |
||||
border-color: #444 |
||||
} |
||||
|
||||
.dark table tbody td:first-child { |
||||
color: #fff |
||||
} |
||||
|
||||
.dark .form-group label { |
||||
color: #ccc; |
||||
border-color: rgba(95, 95, 95, .78) |
||||
} |
||||
|
||||
.dark .form-group.form-textarea label:after { |
||||
background-color: #000 |
||||
} |
||||
|
||||
.dark .form-control { |
||||
color: #ccc; |
||||
border-color: rgba(95, 95, 95, .78) |
||||
} |
||||
|
||||
.dark .form-control:focus { |
||||
border-color: #ccc; |
||||
color: #ccc |
||||
} |
||||
|
||||
.dark textarea.form-control { |
||||
color: #ccc |
||||
} |
||||
|
||||
.dark .card { |
||||
border-color: rgba(95, 95, 95, .78) |
||||
} |
||||
|
||||
.dark .card .card-header { |
||||
background-color: transparent; |
||||
color: #ccc; |
||||
border-bottom: 1px solid rgba(95, 95, 95, .78) |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-default { |
||||
border-color: #ababab; |
||||
color: #ababab |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-default:focus, .dark .btn.btn-ghost.btn-default:hover { |
||||
border-color: #9c9c9c; |
||||
color: #9c9c9c; |
||||
z-index: 1 |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-default:focus, .dark .btn.btn-ghost.btn-default:hover { |
||||
border-color: #e0e0e0; |
||||
color: #e0e0e0 |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-primary:focus, .dark .btn.btn-ghost.btn-primary:hover { |
||||
border-color: #64b5f6; |
||||
color: #64b5f6 |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-success:focus, .dark .btn.btn-ghost.btn-success:hover { |
||||
border-color: #81c784; |
||||
color: #81c784 |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-info:focus, .dark .btn.btn-ghost.btn-info:hover { |
||||
border-color: #4dd0e1; |
||||
color: #4dd0e1 |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-error:focus, .dark .btn.btn-ghost.btn-error:hover { |
||||
border-color: #e57373; |
||||
color: #e57373 |
||||
} |
||||
|
||||
.dark .btn.btn-ghost.btn-warning:focus, .dark .btn.btn-ghost.btn-warning:hover { |
||||
border-color: #ffb74d; |
||||
color: #ffb74d |
||||
} |
||||
|
||||
.dark .avatarholder, .dark .placeholder { |
||||
background-color: transparent; |
||||
border-color: #333 |
||||
} |
||||
|
||||
.dark .menu .menu-item { |
||||
color: #ccc; |
||||
border-color: rgba(95, 95, 95, .78) |
||||
} |
||||
|
||||
.dark .menu .menu-item.active, .dark .menu .menu-item:hover { |
||||
color: #fff; |
||||
border-color: #ccc |
||||
} |
||||
@ -0,0 +1,80 @@
|
||||
{% import "post_macros.html" as post_macros %} |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
||||
|
||||
<!-- Enable responsiveness on mobile devices--> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> |
||||
|
||||
<title>{% block title %}{{ config.title }}{% endblock title %}</title> |
||||
|
||||
{% if config.generate_rss %} |
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") }}"> |
||||
{% endif %} |
||||
|
||||
{% block css %} |
||||
<link rel="stylesheet" href="{{ get_url(path="site.css") }}"> |
||||
{% endblock css %} |
||||
|
||||
{% block extra_head %} |
||||
{% endblock extra_head %} |
||||
</head> |
||||
|
||||
<body class="hack dark main container"> |
||||
{% block content %} |
||||
{% if config.extra.after_dark_menu %} |
||||
<header> |
||||
<nav itemscope itemtype="http://schema.org/SiteNavigationElement"> |
||||
{% for item in config.extra.after_dark_menu %} |
||||
<a itemprop="url" |
||||
class="{% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}active{% endif %}" |
||||
href="{{ item.url | replace(from="$BASE_URL", to=config.base_url) }}"> |
||||
<span itemprop="name">{{ item.name }} |
||||
</span></a> |
||||
{% endfor %} |
||||
</nav> |
||||
</header> |
||||
{% endif %} |
||||
|
||||
<main> |
||||
{% if config.extra.after_dark_title %} |
||||
<header> |
||||
<h1>{{ config.extra.after_dark_title }}</h1> |
||||
</header> |
||||
{% endif %} |
||||
{% for page in paginator.pages %} |
||||
<article itemscope itemtype="http://schema.org/CreativeWork"> |
||||
<header> |
||||
<h2 itemprop="name"> |
||||
<a href="{{ page.permalink }}">{{ page.title }}</a> |
||||
</h2> |
||||
<span class="muted">{{ post_macros::meta(page=page) }}</span> |
||||
</header> |
||||
{% if page.summary %} |
||||
<div itemprop="summary"> |
||||
{{ page.summary | safe }} |
||||
<nav class="readmore"><a itemprop="url" href="{{ page.permalink }}">Read More »</a></nav> |
||||
</div> |
||||
{% endif %} |
||||
</article> |
||||
{% endfor %} |
||||
|
||||
<nav> |
||||
<p> |
||||
{% if paginator.previous %} |
||||
<a href="{{ paginator.previous }}">« Previous</a> | |
||||
{% endif %} |
||||
<span>Page {{ paginator.current_index }} of {{ paginator.pagers | length }}</span> |
||||
{% if paginator.next %} |
||||
| <a href="{{ paginator.next }}">Next »</a> |
||||
{% endif %} |
||||
</p> |
||||
</nav> |
||||
</main> |
||||
{% endblock content %} |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,28 @@
|
||||
{% extends "index.html" %} |
||||
{% import "post_macros.html" as post_macros %} |
||||
|
||||
{% block content %} |
||||
|
||||
<article itemscope itemtype="http://schema.org/BlogPosting"> |
||||
<header> |
||||
<h1 itemprop="headline">{{ page.title }}</h1> |
||||
<span class="muted">{{ post_macros::meta(page=page) }}</span> |
||||
</header> |
||||
<div itemprop="articleBody"> |
||||
{{ page.content | safe }} |
||||
</div> |
||||
|
||||
{% block page_footer %} |
||||
<footer> |
||||
<hr> |
||||
<p> |
||||
{% if config.extra.author %} |
||||
Published by {{ config.extra.author }} |
||||
{% endif %} |
||||
</p> |
||||
</footer> |
||||
{% endblock page_footer %} |
||||
</article> |
||||
|
||||
{% endblock content %} |
||||
|
||||
@ -0,0 +1,16 @@
|
||||
{% macro meta(page) %} |
||||
<svg style="margin-bottom:-3px" class="i-clock" viewBox="0 0 32 32" |
||||
width="16" height="16" fill="none" stroke="currentcolor" |
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%"> |
||||
<circle cx="16" cy="16" r="14"/> |
||||
<path d="M16 8 L16 16 20 20"/> |
||||
</svg> |
||||
<span>{{ page.reading_time }} minute read</span> |
||||
<svg style="margin-bottom: -3px" class="i-edit" viewBox="0 0 32 32" |
||||
width="16" height="16" fill="none" stroke="currentcolor" |
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%"> |
||||
<path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z"/> |
||||
</svg> |
||||
|
||||
Published: {{ page.date | date(format="%F") }} |
||||
{% endmacro meta %} |
||||
@ -0,0 +1,17 @@
|
||||
name = "after-dark" |
||||
description = "A robust, elegant dark theme" |
||||
license = "MIT" |
||||
homepage = "https://github.com/Keats/after-dark" |
||||
min_version = "0.2" |
||||
|
||||
[extra] |
||||
|
||||
|
||||
[author] |
||||
name = "Vincent Prouillet" |
||||
homepage = "https://vincent.is" |
||||
|
||||
[original] |
||||
author = "comfusion" |
||||
homepage = "https://comfusion.github.io/after-dark/" |
||||
repo = "https://github.com/comfusion/after-dark" |
||||
Loading…
Reference in new issue