Initial commit
This commit is contained in:
Vincent Prouillet
commit
068416a53d
11 changed files with 1306 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.idea/
|
||||
config.toml
|
||||
content/
|
||||
public
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -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.
|
||||
45
README.md
Normal file
45
README.md
Normal file
|
|
@ -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.
|
||||
BIN
image.png
Normal file
BIN
image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
100
sass/_theme.scss
Normal file
100
sass/_theme.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
993
sass/_vendor.scss
Normal file
993
sass/_vendor.scss
Normal file
|
|
@ -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
|
||||
}
|
||||
2
sass/site.scss
Normal file
2
sass/site.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "vendor";
|
||||
@import "theme";
|
||||
80
templates/index.html
Normal file
80
templates/index.html
Normal file
|
|
@ -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>
|
||||
28
templates/page.html
Normal file
28
templates/page.html
Normal file
|
|
@ -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 %}
|
||||
|
||||
16
templates/post_macros.html
Normal file
16
templates/post_macros.html
Normal file
|
|
@ -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 %}
|
||||
17
theme.toml
Normal file
17
theme.toml
Normal file
|
|
@ -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 a new issue