This commit is contained in:
panr 2018-07-20 19:14:22 +02:00
commit 4e67004628
82 changed files with 7599 additions and 0 deletions

82
source/css/buttons.css Normal file
View file

@ -0,0 +1,82 @@
.button-container {
display: table;
margin-left: auto;
margin-right: auto;
}
.button,
a.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
background: var(--light-background-secondary);
text-decoration: none;
text-align: center;
font-weight: 500;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
.dark-theme & {
background: var(--dark-background-secondary);
}
/* variants */
&.outline {
background: transparent;
border-color: rgba(0, 0, 0, .2);
box-shadow: none;
padding: 8px 18px;
:hover {
transform: none;
box-shadow: none;
}
}
&.primary {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
&:hover {
box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
}
}
&.link {
background: none;
font-size: 1rem;
}
/* sizes */
&.small {
font-size: .8rem;
}
&.wide {
min-width: 200px;
padding: 14px 24px;
}
}
a.read-more,
a.read-more:hover,
a.read-more:active {
display: inline-flex;
background: none;
box-shadow: none;
padding: 0;
margin: 20px 0;
font-weight: bold;
.dark-theme & {
background: none;
}
}

53
source/css/footer.css Normal file
View file

@ -0,0 +1,53 @@
.footer {
padding: 40px 20px;
flex-grow: 0;
color: var(--light-color-secondary);
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
width: 760px;
max-width: 100%;
@media (--tablet) {
flex-direction: column;
}
}
a {
color: inherit;
}
.copyright {
display: flex;
flex-direction: row;
align-items: center;
font-size: 1rem;
color: var(--light-color-secondary);
&--user {
margin: auto;
text-align: center;
}
& > *:first-child:not(:only-child) {
border-right: 1px solid;
padding-right: 10px;
margin-right: 10px;
@media (--tablet) {
border: none;
padding: 0;
margin: 0;
}
}
@media (--tablet) {
flex-direction: column;
margin-top: 10px;
}
}
}

49
source/css/header.css Normal file
View file

@ -0,0 +1,49 @@
.header {
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 20px;
.dark-theme & {
background: #252627;
}
.bulb {
&-on {
display: none;
.dark-theme & {
display: block;
}
}
&-off {
display: block;
.dark-theme & {
display: none;
}
}
}
&__right {
display: flex;
flex-direction: row;
align-items: center;
@media (--phone) {
flex-direction: row-reverse;
}
}
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
width: 760px;
max-width: 100%;
}
}

59
source/css/inter-ui.css Normal file
View file

@ -0,0 +1,59 @@
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 400;
src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
url("../fonts/Inter-UI-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 400;
src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
url("../fonts/Inter-UI-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 500;
src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
url("../fonts/Inter-UI-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 500;
src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 700;
src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
url("../fonts/Inter-UI-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 700;
src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 900;
src: url("../fonts/Inter-UI-Black.woff2") format("woff2"),
url("../fonts/Inter-UI-Black.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 900;
src: url("../fonts/Inter-UI-BlackItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-BlackItalic.woff") format("woff");
}

94
source/css/list.css Normal file
View file

@ -0,0 +1,94 @@
.post {
width: 100%;
max-width: 800px;
text-align: left;
padding: 20px;
margin: 20px auto;
@media (--tablet) {
max-width: 660px;
}
&:not(:last-of-type) {
border-bottom: 1px solid var(--light-border-color);
.dark-theme & {
border-color: var(--dark-border-color);
}
}
&-meta {
display: flex;
flex-direction: row;
font-size: 1rem;
margin-bottom: 10px;
@media (--phone) {
font-size: .85rem;
}
}
&-date {
margin-right: 5px;
&:after {
content: '—';
}
}
&-title {
font-size: 2.625rem;
margin: 0;
@media (--phone) {
font-size: 2rem;
}
a {
text-decoration: none;
}
}
&-tags {
display: block;
margin-bottom: 20px;
font-size: 1rem;
opacity: .5;
a {
text-decoration: none;
}
}
&-content {
margin-top: 30px;
}
&-cover {
border-radius: 8px;
margin: 40px -50px;
width: 860px;
max-width: 860px;
@media (--tablet) {
margin: 20px 0;
width: 100%;
}
}
}
.post--regulation {
h1 {
justify-content: center;
}
h2 {
justify-content: center;
margin-bottom: 10px;
&+ h2 {
margin-top: -10px;
margin-bottom: 20px;
}
}
}

25
source/css/logo.css Normal file
View file

@ -0,0 +1,25 @@
.logo {
display: flex;
align-items: center;
text-decoration: none;
&__mark {
margin-right: 5px;
}
&__cursor {
display: inline-block;
width: 2px;
height: 1rem;
background: #fe5186;
margin-left: 5px;
border-radius: 2px;
animation: cursor 1s infinite;
}
}
@keyframes cursor {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

193
source/css/main.css Normal file
View file

@ -0,0 +1,193 @@
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.54;
background-color: var(--light-background);
color: var(--light-color);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
@media (--phone) {
font-size: 1rem;
}
&.dark-theme {
background-color: var(--dark-background);
color: var(--dark-color);
}
}
h1, h2, h3, h4, h5, h6 {
display: flex;
align-items: center;
}
h1 {
font-size: 2.625rem;
}
h2 {
font-size: 1.625rem;
}
h3 {
font-size: 1.375rem;
}
h4 {
font-size: 1.125rem;
}
@media (--phone) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.15rem;
}
h4 {
font-size: 1.125rem;
}
}
a {
color: inherit;
}
img {
display: block;
max-width: 100%;
}
code {
font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
background: var(--light-background-secondary);
padding: 1px 6px;
margin: 0 2px;
border-radius: 5px;
font-size: .95rem;
.dark-theme & {
background: var(--dark-background-secondary);
}
}
pre {
background: #1a1a1d;
padding: 20px;
border-radius: 8px;
font-size: 1rem;
overflow: auto;
@media (--phone) {
white-space: pre-wrap;
word-wrap: break-word;
}
code {
background: none !important;
color: #ccc;
padding: 0;
font-size: inherit;
}
}
blockquote {
border-left: 2px solid;
margin: 40px;
padding: 10px 20px;
@media (--phone) {
margin: 10px;
padding: 10px;
}
&:before {
content: '”';
font-family: Georgia, serif;
font-size: 3.875rem;
position: absolute;
left: -40px;
top: -20px;
}
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
}
ul, ol {
margin-left: 40px;
padding: 0;
@media (--phone) {
margin-left: 20px;
}
}
ol ol {
list-style-type: lower-alpha;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
flex: 1 auto;
align-items: center;
justify-content: center;
margin: 50px 0;
@media (--phone) {
margin-top: 0;
}
}
hr {
width: 100%;
border: none;
background: var(--light-border-color);
height: 1px;
.dark-theme & {
background: var(--dark-border-color);
}
}
.hidden {
display: none;
}

69
source/css/menu.css Normal file
View file

@ -0,0 +1,69 @@
.menu {
background: #fafafa;
border-right: 1px solid;
margin-right: 10px;
.dark-theme & {
background: #252627;
}
@media (--phone) {
position: absolute;
top: 50px;
right: 0;
border: none;
margin: 0;
padding: 10px;
}
&__inner {
display: flex;
align-items: center;
justify-content: flex-start;
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
font-size: 1rem;
list-style: none;
li {
margin: 0 20px;
&:last-of-type {
margin: 0;
}
}
@media (--phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
&-trigger {
width: 24px;
height: 24px;
fill: currentColor;
margin-left: 10px;
}
a {
display: inline-block;
margin-right: 15px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:last-of-type {
margin-right: 0;
}
}
}

47
source/css/pagination.css Normal file
View file

@ -0,0 +1,47 @@
.pagination {
margin-top: 50px;
&__title {
display: flex;
text-align: center;
position: relative;
margin: 100px 0 20px;
&-h {
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: var(--light-background);
color: var(--light-color-secondary);
font-size: .8rem;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .1em;
z-index: 1;
.dark-theme & {
background: var(--dark-background);
color: var(--dark-color-secondary);
}
}
hr {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 15px;
z-index: 0;
}
}
&__buttons {
display: flex;
justify-content: space-around;
a {
text-decoration: none;
font-weight: bold;
}
}
}

125
source/css/prism.css Normal file
View file

@ -0,0 +1,125 @@
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+markup-templating+go+handlebars+json+markdown+ocaml+pug+python+jsx+rust+scss */
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"],
pre[class*="language-"] {
color: #a9a9b3;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #1a1a1d !important;
border-radius: 8px;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--light-color-secondary);
}
.token.punctuation {
color: #a9a9b3;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}

13
source/css/style.css Normal file
View file

@ -0,0 +1,13 @@
@import 'variables';
@import 'inter-ui';
@import 'buttons';
@import 'header';
@import 'logo';
@import 'menu';
@import 'main';
@import 'list';
@import 'pagination';
@import 'footer';
@import 'prism';

28
source/css/variables.css Normal file
View file

@ -0,0 +1,28 @@
:root {
/* light theme color */
--light-background: #fff;
--light-background-secondary: #eaeaea;
--light-color: #222;
--light-color-secondary: #999;
--light-border-color: #dcdcdc;
/* dark theme colors */
--dark-background: #292a2d;
--dark-background-secondary: #3b3d42;
--dark-color: #a9a9b3;
--dark-color-secondary: #73747b;
--dark-border-color: #4a4b50;
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (width < 684px);
@custom-media --tablet (width < 900px);
/* HOW TO USE */
/*@media (--phone) {*/
/*margin-top: 0;*/
/*}*/

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,3 @@
<% htmlWebpackPlugin.files.js.filter(function(js){ return !/\.css$/.test(js) }).forEach(function(js){ %>
<script src="/assets/<%= js %>"></script>
<% }) %>

View file

@ -0,0 +1,3 @@
<% htmlWebpackPlugin.files.css.forEach(function(css){ %>
<link rel="stylesheet" href="/assets/<%= css %>">
<% }) %>

1
source/js/index.js Normal file
View file

@ -0,0 +1 @@
// Add your script here

16
source/js/menu.js Normal file
View file

@ -0,0 +1,16 @@
// Mobile menu
const menuTrigger = document.querySelector(".menu-trigger");
const menu = document.querySelector(".menu");
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
const isMobile = () => window.matchMedia(mobileQuery).matches;
const isMobileMenu = () => {
menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
menu && menu.classList.toggle("hidden", isMobile());
};
isMobileMenu();
menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden"));
window.addEventListener("resize", isMobileMenu);

18
source/js/prism.js Normal file

File diff suppressed because one or more lines are too long

12
source/js/theme.js Normal file
View file

@ -0,0 +1,12 @@
// Toggle theme
const getTheme = localStorage.getItem('theme')
const themeToggle = document.querySelector('.theme-toggle')
const isDark = getTheme === 'dark'
document.body.classList.toggle('dark-theme', isDark)
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme')
localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light')
})