mirror of https://github.com/Requarks/wiki.git
NGPixel
8 years ago
13 changed files with 150 additions and 237 deletions
Split View
Diff Options
-
59assets/js/bundle.min.js
-
3client/js/components/editor.js
-
14client/js/components/page-loader.js
-
4client/js/login.js
-
5client/js/pages/source.js
-
1client/scss/app.scss
-
145client/scss/layout/_content.scss
-
54client/scss/layout/_loader.scss
-
85client/scss/layout/_mixins.scss
-
2views/configure/index.pug
-
5views/pages/create.pug
-
5views/pages/edit.pug
-
5views/pages/source.pug
59
assets/js/bundle.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,14 @@ |
|||
'use strict' |
|||
|
|||
import $ from 'jquery' |
|||
import _ from 'lodash' |
|||
|
|||
module.exports = { |
|||
|
|||
complete () { |
|||
$('#page-loader').addClass('is-loaded') |
|||
_.delay(() => { |
|||
$('#page-loader').addClass('is-hidden') |
|||
}, 1100) |
|||
} |
|||
} |
|||
@ -1,7 +1,7 @@ |
|||
'use strict' |
|||
|
|||
import jQuery from 'jquery' |
|||
import $ from 'jquery' |
|||
|
|||
jQuery(document).ready(function ($) { |
|||
$(() => { |
|||
$('#login-user').focus() |
|||
}) |
|||
@ -1,145 +0,0 @@ |
|||
|
|||
|
|||
#page-type-view > section { |
|||
transition: background-color .5s ease; |
|||
|
|||
&.blurred { |
|||
background-color: mc('grey', '50'); |
|||
} |
|||
|
|||
} |
|||
|
|||
.sd-menus { |
|||
|
|||
width: 300px; |
|||
|
|||
} |
|||
|
|||
.menu { |
|||
.menu-list a, .menu-nav a { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.menu-list .icon { |
|||
margin-right: 8px |
|||
} |
|||
} |
|||
|
|||
.section.is-small { |
|||
padding: 20px 20px; |
|||
} |
|||
|
|||
.mkcontent { |
|||
|
|||
h1 { |
|||
border-bottom: 1px dotted mc('blue', '500'); |
|||
padding-bottom: 4px; |
|||
font-weight: 400; |
|||
color: desaturate(mc('blue', '500'), 20%); |
|||
} |
|||
|
|||
h2 { |
|||
border-bottom: 1px dotted mc('grey', '100'); |
|||
padding-bottom: 4px; |
|||
font-weight: 400; |
|||
color: desaturate(mc('purple', '500'), 20%); |
|||
} |
|||
|
|||
a.toc-anchor { |
|||
font-size: 80%; |
|||
color: mc('blue', '500'); |
|||
border-bottom: none; |
|||
|
|||
&:visited { |
|||
color: mc('purple', '500') !important; |
|||
} |
|||
|
|||
} |
|||
|
|||
a.external-link { |
|||
position: relative; |
|||
padding-left: 20px; |
|||
|
|||
&:before { |
|||
content: "\f08e"; |
|||
font-family: FontAwesome; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
color: mc('grey', '500'); |
|||
font-size: 14px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
} |
|||
|
|||
pre { |
|||
padding: 0; |
|||
font-family: $core-font-monospace; |
|||
|
|||
> code { |
|||
box-shadow: inset 0 0 5px 0 mc('grey', '100'); |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
} |
|||
|
|||
pre + p { |
|||
padding-top: 1em; |
|||
} |
|||
|
|||
img.right { |
|||
float:right; |
|||
} |
|||
|
|||
img.pagelogo { |
|||
float: right; |
|||
margin-top: -75px; |
|||
max-width: 200px; |
|||
background-color: #FFF; |
|||
} |
|||
|
|||
strong { |
|||
color: mc('grey', '700'); |
|||
} |
|||
|
|||
.twa { |
|||
font-size: 120%; |
|||
} |
|||
|
|||
table thead th { |
|||
background-color: mc('blue', '500'); |
|||
color: #FFF; |
|||
border-color: #FFF; |
|||
border-bottom-color: mc('blue', '500'); |
|||
border-top-color: mc('blue', '500'); |
|||
|
|||
&:first-child { |
|||
border-left-color: mc('blue', '500'); |
|||
} |
|||
|
|||
&:last-child { |
|||
border-right-color: mc('blue', '500'); |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.content a:not(.button):visited { |
|||
color: mc('teal', '500'); |
|||
font-weight: 500; |
|||
} |
|||
|
|||
code { |
|||
font-weight: 500; |
|||
color: mc('purple', '500'); |
|||
} |
|||
|
|||
p code { |
|||
padding: 2px 5px; |
|||
border-radius: 4px; |
|||
} |
|||
@ -0,0 +1,54 @@ |
|||
#page-loader { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: mc('blue-grey', '800'); |
|||
z-index: 100; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: mc('blue-grey', '100'); |
|||
font-weight: 300; |
|||
font-size: 18px; |
|||
flex-direction: column; |
|||
|
|||
> i { |
|||
width: 48px; |
|||
height: 48px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 25px; |
|||
|
|||
&::before { |
|||
content: " "; |
|||
@include spinner(mc('blue-grey', '200'), 0.4s, 48px); |
|||
} |
|||
} |
|||
|
|||
@include keyframes(pageLoaderExit) { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
99% { |
|||
display: flex; |
|||
opacity: 0; |
|||
transform: scale(1.1, 1.1); |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
&.is-loaded { |
|||
animation: pageLoaderExit 1s ease forwards; |
|||
} |
|||
|
|||
&.is-hidden { |
|||
display: none !important; |
|||
} |
|||
|
|||
} |
|||
@ -1,85 +0,0 @@ |
|||
/** |
|||
* Clearfix |
|||
* |
|||
* @return {string} Clearfix attribute |
|||
*/ |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Placeholder attribute for inputs |
|||
* |
|||
* @return {string} Placeholder attributes |
|||
*/ |
|||
@mixin placeholder { |
|||
&::-webkit-input-placeholder {@content}; |
|||
&::-moz-placeholder {@content} |
|||
&:-ms-input-placeholder {@content} |
|||
&:placeholder-shown {@content}; |
|||
} |
|||
|
|||
/** |
|||
* Spinner element |
|||
* |
|||
* @param {string} $color - Color |
|||
* @param {string} $dur - Animation Duration |
|||
* @param {int} $width - Width |
|||
* @param {int} $height [$width] - height |
|||
* |
|||
* @return {string} Spinner element |
|||
*/ |
|||
@mixin spinner($color,$dur,$width,$height:$width) { |
|||
width: $width; |
|||
height: $height; |
|||
border-radius: 50%; |
|||
box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color; |
|||
@include prefix(animation, spin $dur linear infinite); |
|||
@include keyframes(spin) { |
|||
100%{ |
|||
@include prefix(transform, rotate(360deg)); |
|||
} |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* Prefixes for keyframes |
|||
* |
|||
* @param {string} $animation-name - The animation name |
|||
* |
|||
* @return {string} Prefixed keyframes attributes |
|||
*/ |
|||
@mixin keyframes($animation-name) { |
|||
@-webkit-keyframes #{$animation-name} { |
|||
@content; |
|||
} |
|||
@-moz-keyframes #{$animation-name} { |
|||
@content; |
|||
} |
|||
@-o-keyframes #{$animation-name} { |
|||
@content; |
|||
} |
|||
@keyframes #{$animation-name} { |
|||
@content; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Prefix function for browser compatibility |
|||
* |
|||
* @param {string} $property - Property name |
|||
* @param {any} $value - Property value |
|||
* |
|||
* @return {string} Prefixed attributes |
|||
*/ |
|||
@mixin prefix($property, $value) { |
|||
-webkit-#{$property}: #{$value}; |
|||
-moz-#{$property}: #{$value}; |
|||
-ms-#{$property}: #{$value}; |
|||
-o-#{$property}: #{$value}; |
|||
#{$property}: #{$value}; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save