I swapped out sass for scss file for styling because scss is a bit more

accessible because of its similarity with base css.

I also plugged in stylint to normalize a css standard throughout the
project to work with prettier, which handles formatting

The structure scss file has been brought in line with the new standard
but the remaining need to be adjusted as well. Those will be added with
an additional commit.
pull/84/head
Are0h 2 years ago
parent aa3301fb66
commit 61b9acb280

@ -1,11 +1,27 @@
{
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
},
{
"files": "*.scss",
"options": {
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"printWidth": 90
}
},
{
"files": "*.js",
"options": {
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"bracketSameLine": false,
"jsxSingleQuote": true,
"parser": "babel",
"proseWrap": "preserve",
"requirePragma": false,
"semi": true,
@ -14,4 +30,7 @@
"useTabs": true,
"tabWidth": 4,
"printWidth": 90
}
}
}
]
}

@ -0,0 +1,6 @@
{
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-prettier-scss"
]
}

@ -12,7 +12,7 @@
</head>
<body>
<div id="notifications" class="notifications">
<div id="notifyMessage" class="notifyMessage">
<div id="notify-message" class="notify-message">
<div id="notify-good" class="notify-icon">
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-flirt"/></svg>
</div>

@ -4,27 +4,27 @@
if not, just make them empty
#}
{% if mode == 'edit' %}
{% set id = page['id'] %}
{% set uuid = page['uuid'] %}
{% set id = page['id'] %}
{% set uuid = page['uuid'] %}
{% set slug = page['slug'] %}
{% set layout = page['layout'] %}
{% set feature = page['feature'] %}
{% set _title = page['title'] %}
{% set tags = page['tags'] %}
{% set content = page['content'] %}
{% set feature = page['feature'] %}
{% set _title = page['title'] %}
{% set tags = page['tags'] %}
{% set content = page['content'] %}
{% set date = page['created'] %}
{% set updated = page['updated'] %}
{% set media = page['media'] %}
{% set files = page['docs'] %}
{% else %}
{% set id = '' %}
{% set uuid = '' %}
{% set id = '' %}
{% set uuid = '' %}
{% set slug = '' %}
{% set layout = 'page' %}
{% set feature = '' %}
{% set feature = '' %}
{% set title = '' %}
{% set tags = '' %}
{% set content = '' %}
{% set tags = '' %}
{% set content = '' %}
{% set date = '' %}
{% set updated = '' %}
{% set media = '' %}
@ -37,145 +37,144 @@
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=vbhj">
{% endblock %}
{% endblock %}
{% block mainContent %}
<div id="post-edit-index" data-index="{{ id }}" data-uuid="{{ uuid }}" data-slug="{{ slug }}" data-layout="{{ layout }}">
<div id="post-edit-index-wrapper">
<div id="post-feature">
{% if page['feature'] == null %}
<div id="page-file-manager">
<div id="page-file-wrapper">
<div id="page-file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
{% block mainContent %}
<div id="post-edit-index" data-index="{{ id }}" data-uuid="{{ uuid }}" data-slug="{{ slug }}" data-layout="{{ layout }}">
<div id="post-edit-index-wrapper">
<div id="post-feature">
{% if page['feature'] == null %}
<div id="page-file-manager">
<div id="page-file-wrapper">
<div id="page-file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
IMAGES AND VIDEO
<div id="page-images-list"></div>
FILES
<div id="page-files-list"></div>
</div>
IMAGES AND VIDEO
<div id="page-images-list"></div>
FILES
<div id="page-files-list"></div>
</div>
</div>
{% else %}
<div id="page-file-manager">
<div id="page-file-wrapper">
<div id="page-file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
IMAGES AND VIDEO
<div id="page-images-list">
{% if media|length > 1 %}
{% for item in media %}
{% if item.type == "mp4"%}
<div id="{{loop.index0}}" class="video-item" data-source="{{ item.file }}"></div>
{% else %}
<div id="{{loop.index0}}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
{% endif %}
{% endfor %}
{% else %}
{% if media[0] != '' %}
{% if media[0].type == "mp4"%}
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div>
{% else %}
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div>
</div>
{% else %}
<div id="page-file-manager">
<div id="page-file-wrapper">
<div id="page-file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
IMAGES AND VIDEO
<div id="page-images-list">
{% if media|length > 1 %}
{% for item in media %}
{% if item.type == "mp4" %}
<div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}"></div>
{% else %}
<div id="{{ loop.index0 }}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
{% endif %}
{% endfor %}
{% else %}
{% if media[0] != '' %}
{% if media[0].type == "mp4" %}
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div>
{% else %}
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div>
{% endif %}
{% else %}
{% endif %}
{% else %}
{% endif %}
{% endif %}
</div>
FILES
<div id="page-files-list">
{% if files|length > 1 %}
{% for item in files %}
{% if item.type == "mp3"%}
<div id="{{loop.index0}}" class="audio-item" data-source="{{ item.file }}"></div>
{% else %}
<div id="{{loop.index0}}" class="file-item" data-source="{{ item.file }}"></div>
{% endif %}
{% endfor %}
{% else %}
{% if files[0] != '' %}
{% if files[0].type == "mp3"%}
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div>
{% else %}
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div>
{% endif %}
</div>
FILES
<div id="page-files-list">
{% if files|length > 1 %}
{% for item in files %}
{% if item.type == "mp3" %}
<div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}"></div>
{% else %}
<div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}"></div>
{% endif %}
{% endfor %}
{% else %}
{% if files[0] != '' %}
{% if files[0].type == "mp3" %}
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div>
{% else %}
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div>
{% endif %}
{% else %}
{% else %}
{% endif %}
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
<div id="post-header">
<div id="post-header-wrapper" class="columns">
<div id="post-title" class="column">
<label>TITLE</label>
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
{{- _title -}}
</textarea>
</div>
<div id="post-header">
<div id="post-header-wrapper" class="columns">
<div id="post-title" class="column">
<label>TITLE</label>
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
{{ - _title - }}
</textarea>
<div id="layouts">
<label>LAYOUTS</label>
<select id="page-templates">
{% for view in views %}
{% if view == page['layout'] %}
<option value={{ view }} selected>{{ view }}</option>
{% else %}
<option value={{ view }}>{{ view }}</option>
{% endif %}
<div id="layouts">
<label>LAYOUTS</label>
<select id="page-templates">
{% for view in views %}
{% if view == page['layout'] %}
<option value={{ view }} selected>{{ view }}</option>
{% else %}
<option value={{ view }}>{{ view }}</option>
{% endif %}
{% endfor %}
</select>
{% endfor %}
</select>
</div>
<label>CREATED</label>
<span id="post-date" type="text">
{{ date }}
</span>
</div>
<div id="post-meta" class="column">
<label>TAGS</label>
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
{{ - tags - }}
</textarea>
<label>OPTIONS</label>
{% apply spaceless %}
{{ include("dash/partials/options.twig") }}
{% endapply %}
<label>UPDATED</label>
<span id="post-date" type="text">
{{ updated }}
</span>
<input id="page-files-upload" type="file" name="page-files-upload" multiple/>
<input id="post-image-upload" type="file" name="post-image-upload"/>
<input id="form_token" name="token" type="hidden" value="{{ token }}"></div>
</div>
<label>CREATED</label>
<span id="post-date" type="text">
{{ date }}
</span>
</div>
<div id="post-meta" class="column">
<label>TAGS</label>
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
{{- tags -}}
</textarea>
<label>OPTIONS</label>
<div id="edit-post">
{% apply spaceless %}
{{ include("dash/partials/options.twig") }}
{{ include("dash/partials/editor.twig") }}
{% endapply %}
<label>UPDATED</label>
<span id="post-date" type="text">
{{ updated }}
</span>
<input id="page-files-upload" type="file" name="page-files-upload" multiple/>
<input id="post-image-upload" type="file" name="post-image-upload"/>
<input id="form_token" name="token" type="hidden" value="{{ token }}">
</div>
</div>
</div>
<div id="edit-post">
{% apply spaceless %}
{{ include("dash/partials/editor.twig") }}
{% endapply %}
<div id="edit-post-wrapper">
<textarea id="edit" spellcheck="false">{{- content -}}</textarea>
<pre id="highlight">
<div id="edit-post-wrapper">
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea>
<pre id="highlight">
<code id="highlight-content" class="language-md">
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% endblock %}
{% block javascripts %}
<script src="/assets/scripts/Start.js?=dfdfvd" type="text/javascript"></script>
{% endblock %}
{% block javascripts %}
<script src="/assets/scripts/Start.js?=dfdfvd" type="text/javascript"></script>
{% endblock %}

2239
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -13,7 +13,10 @@
"eslint": "^8.11.0",
"eslint-plugin-babel": "^5.3.1",
"parcel": "^2.0.1",
"prettier": "^2.6.0"
"prettier": "^2.6.0",
"stylelint": "^14.8.2",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard-scss": "^3.0.0"
},
"dependencies": {
"@babel/core": "^7.16.5",

File diff suppressed because it is too large Load Diff

@ -1,43 +0,0 @@
@use "sass:color"
//CSS
//Bulma
@import '../../node_modules/bulma/sass/utilities/_all'
@import '../../node_modules/bulma/sass/grid/columns'
//Colors
@import 'main/_colors'
//Mixins
@import 'main/_mixins'
//Normalize
@import 'main/_normalize'
//Typography
@import 'main/_typography'
//Main Structure
@import 'main/_structure'
//Index
@import 'main/_index'
//Settings
@import 'main/_settings'
//Error
@import 'main/_error'
//Navigation
@import 'main/_navigation'
//Forms
@import 'main/_forms'
//Posts
@import 'main/_posts'
//Editor
@import 'main/_calendar'
@import 'main/_editor'
@import 'main/_editor-highlight'

@ -0,0 +1,43 @@
@use "sass:color";
//CSS
//Bulma
@import "../../node_modules/bulma/sass/utilities/_all";
@import "../../node_modules/bulma/sass/grid/columns";
//Colors
@import "main/_colors";
//Mixins
@import "main/_mixins";
//Normalize
@import "main/_normalize";
//Typography
@import "main/_typography";
//Main Structure
@import "main/_structure";
//Index
@import "main/_index";
//Settings
@import "main/_settings";
//Error
@import "main/_error";
//Navigation
@import "main/_navigation";
//Forms
@import "main/_forms";
//Posts
@import "main/_posts";
//Editor
@import "main/_calendar";
@import "main/_editor";
@import "main/_editor-highlight";

@ -1,242 +0,0 @@
// TINY DATE
.dp-modal
position: fixed
top: 0
left: 0
right: 0
bottom: 0
// background rgba(255, 255, 255, 0.75)
@include background-opacity(color.adjust($primary, $lightness: -70%), 0.75)
z-index: 2000
.dp
position: relative
background: $primary
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25)
line-height: 1.4
border-radius: 4px
max-height: 400px
z-index: 5000
padding-top: 6px
overflow: hidden
-webkit-tap-highlight-color: transparent
.dp:before
content: ' '
height: 6px
position: absolute
top: 0
left: 0
right: 0
background: $highlight
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
.dp-permanent .dp
padding-top: 0
border: 1px solid #EEE
box-shadow: none
.dp-permanent .dp:before
display: none
.dp-cal
min-height: 300px
.dp-below
position: absolute
font-size: 0.8em
width: 400px
max-width: 90vw
.dp-permanent
position: relative
font-size: 0.8em
width: 400px
max-width: 100vw
.dp-permanent .dp
z-index: 0
.dp-modal .dp
position: absolute
top: 50%
left: 50%
max-width: 600px
width: calc(100% - 4em)
transform: translate(-50%, -50%)
animation: slide-up 0.3s forwards
.dp-months
padding: 24px
.dp-years
box-sizing: border-box
max-height: 400px
padding: 8px 0
/* HACK for Chrome on Android */
overflow: auto !important
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
box-sizing: border-box
text-align: center
text-decoration: none
position: relative
color: $white
border-radius: 2px
border: 0
background: transparent
.dp-cal-header
position: relative
text-align: center
padding-bottom: 16px
background: color.adjust($primary, $lightness: -10%)
.dp-next, .dp-prev
position: absolute
width: 30px
height: 30px
overflow: hidden
top: 14px
color: color.adjust($primary, $lightness: -50%)
border-radius: 2px
border: 0
background: transparent
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
outline: none
color: inherit
.dp-prev
left: 24px
.dp-next
right: 24px
.dp-prev:before, .dp-next:before
content: ''
border: 2px solid
width: 10px
height: 10px
display: inline-block
transform: rotate(-45deg)
transition: border-color 0.2s
margin: 9px 0 40px 4px
.dp-prev:before
border-right: 0
border-bottom: 0
.dp-next:before
border-left: 0
border-top: 0
margin-left: 0
margin-right: 4px
.dp-cal-month, .dp-cal-year
display: inline-block
font-size: 1.4em
padding: 16px 8px 8px
outline: none
.dp-cal-footer
text-align: center
background: color.adjust($primary, $lightness: -10%)
.dp-day-today:after
content: ''
height: 0
width: 0
border: 7px solid $highlight
border-bottom-color: transparent
border-left-color: transparent
position: absolute
top: 0
right: 0
.dp-close, .dp-clear, .dp-today
box-sizing: border-box
display: inline-block
width: 33%
padding: 8px
text-decoration: none
color: color.adjust($primary, $lightness: -50%)
border: 0
background: transparent
.dp-permanent .dp-close, .dp-permanent .dp-clear
display: none
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
background: $highlight
color: $white
@media screen and (min-device-width: 1200px)
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
background: $highlight
color: $white
.dp-col-header, .dp-day
width: 14.28571429%
display: inline-block
padding: 8px
text-align: center
.dp-col-header
color: #AAA
text-transform: uppercase
font-weight: 300
font-size: 0.8em
padding: 8px 0
.dp-month
width: 33%
display: inline-block
padding: 8px
.dp-year
display: block
padding: 8px 40px
width: 100%
.dp-edge-day
color: #AAA
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
outline: none
background: color.adjust($primary, $lightness: -40%)
color: $white
.dp-selected:hover, .dp-selected:focus, .dp-selected
background: $highlight
color: color.adjust($primary, $lightness: -60%)
.dp-day-disabled
background: transparent
color: #DDD
.dp-day-disabled:focus, .dp-day-disabled:hover
background: #DDD
.dp-focuser
position: absolute
z-index: 0
top: 50%
left: 50%
// Responsive
@media (max-width: 480px), (max-height: 480px)
.dp-modal .dp
font-size: 0.9em
width: auto
width: 100%
.dp-day-of-week, .dp-day
padding: 8px
@keyframes slide-up
0%
transform: translate(-50%, 100%)
100%
transform: translate(-50%, -50%)

@ -0,0 +1,288 @@
.dp-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
}
.dp {
position: relative;
background: $primary;
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
line-height: 1.4;
border-radius: 4px;
max-height: 400px;
z-index: 5000;
padding-top: 6px;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.dp:before {
content: " ";
height: 6px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: $highlight;
}
.dp-permanent .dp {
padding-top: 0;
border: 1px solid #eee;
box-shadow: none;
}
.dp-permanent .dp:before {
display: none;
}
.dp-cal {
min-height: 300px;
}
.dp-below {
position: absolute;
font-size: 0.8em;
width: 400px;
max-width: 90vw;
}
.dp-permanent {
position: relative;
font-size: 0.8em;
width: 400px;
max-width: 100vw;
}
.dp-permanent .dp {
z-index: 0;
}
.dp-modal .dp {
position: absolute;
top: 50%;
left: 50%;
max-width: 600px;
width: calc(100% - 4em);
transform: translate(-50%, -50%);
animation: slide-up 0.3s forwards;
}
.dp-months {
padding: 24px;
}
.dp-years {
box-sizing: border-box;
max-height: 400px;
padding: 8px 0;
/* HACK for Chrome on Android */
overflow: auto !important;
}
.dp-cal-month,
.dp-cal-year,
.dp-day,
.dp-month,
.dp-year {
box-sizing: border-box;
text-align: center;
text-decoration: none;
position: relative;
color: $white;
border-radius: 2px;
border: 0;
background: transparent;
}
.dp-cal-header {
position: relative;
text-align: center;
padding-bottom: 16px;
background: color.adjust($primary, $lightness: -10%);
}
.dp-next,
.dp-prev {
position: absolute;
width: 30px;
height: 30px;
overflow: hidden;
top: 14px;
color: color.adjust($primary, $lightness: -50%);
border-radius: 2px;
border: 0;
background: transparent;
}
.dp-next:focus,
.dp-prev:focus,
.dp-next:hover,
.dp-prev:hover {
outline: none;
color: inherit;
}
.dp-prev {
left: 24px;
}
.dp-next {
right: 24px;
}
.dp-prev:before,
.dp-next:before {
content: "";
border: 2px solid;
width: 10px;
height: 10px;
display: inline-block;
transform: rotate(-45deg);
transition: border-color 0.2s;
margin: 9px 0 40px 4px;
}
.dp-prev:before {
border-right: 0;
border-bottom: 0;
}
.dp-next:before {
border-left: 0;
border-top: 0;
margin-left: 0;
margin-right: 4px;
}
.dp-cal-month,
.dp-cal-year {
display: inline-block;
font-size: 1.4em;
padding: 16px 8px 8px;
outline: none;
}
.dp-cal-footer {
text-align: center;
background: color.adjust($primary, $lightness: -10%);
}
.dp-day-today:after {
content: "";
height: 0;
width: 0;
border: 7px solid $highlight;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 0;
right: 0;
}
.dp-close,
.dp-clear,
.dp-today {
box-sizing: border-box;
display: inline-block;
width: 33%;
padding: 8px;
text-decoration: none;
color: color.adjust($primary, $lightness: -50%);
border: 0;
background: transparent;
}
.dp-permanent .dp-close,
.dp-permanent .dp-clear {
display: none;
}
.dp-close:active,
.dp-clear:active,
.dp-today:active,
.dp-next:active,
.dp-prev:active,
.dp-cal-month:active,
.dp-cal-year:active {
background: $highlight;
color: $white;
}
@media screen and (min-device-width: 1200px) {
.dp-close:hover,
.dp-close:focus,
.dp-clear:hover,
.dp-clear:focus,
.dp-today:hover,
.dp-today:focus,
.dp-next:hover,
.dp-next:focus,
.dp-prev:hover,
.dp-prev:focus,
.dp-cal-month:focus,
.dp-cal-month:hover,
.dp-cal-year:hover,
.dp-cal-year:focus {
background: $highlight;
color: $white;
}
}
.dp-col-header,
.dp-day {
width: 14.28571429%;
display: inline-block;
padding: 8px;
text-align: center;
}
.dp-col-header {
color: #aaa;
text-transform: uppercase;
font-weight: 300;
font-size: 0.8em;
padding: 8px 0;
}
.dp-month {
width: 33%;
display: inline-block;
padding: 8px;
}
.dp-year {
display: block;
padding: 8px 40px;
width: 100%;
}
.dp-edge-day {
color: #aaa;
}
.dp-day:hover,
.dp-month:hover,
.dp-year:hover,
.dp-current:focus,
.dp-current,
.dp-day:focus,
.dp-month:focus,
.dp-year:focus {
outline: none;
background: color.adjust($primary, $lightness: -40%);
color: $white;
}
.dp-selected:hover,
.dp-selected:focus,
.dp-selected {
background: $highlight;
color: color.adjust($primary, $lightness: -60%);
}
.dp-day-disabled {
background: transparent;
color: #ddd;
}
.dp-day-disabled:focus,
.dp-day-disabled:hover {
background: #ddd;
}
.dp-focuser {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
}
// Responsive
@media (max-width: 480px), (max-height: 480px) {
.dp-modal .dp {
font-size: 0.9em;
width: auto;
width: 100%;
}
.dp-day-of-week,
.dp-day {
padding: 8px;
}
}
@keyframes slide-up {
0% {
transform: translate(-50%, 100%);
}
100% {
transform: translate(-50%, -50%);
}
} ;

@ -1,18 +0,0 @@
$primary: #1D3040 //gradient #2F4C65
//$primary = #200317; deep sexy purple
$secondary: #b2cce5
$tertiary: #f5ab35
$highlight: #fc6399
$white: #EFEBE3
$grey: #abb7b7
$black: #32302f
//editor colors
$eventCool: #32cd32
$eventLame: #F64747
$editorPrimary: #fde3a7
$editorSecondary: #e7903c
$editorTertiary: #6bb9f0
$editorString: #dcc6e0
$editorTag: #e73c4e

@ -0,0 +1,17 @@
$primary: #1d3040;
$secondary: #b2cce5;
$tertiary: #f5ab35;
$highlight: #fc6399;
$white: #efebe3;
$grey: #abb7b7;
$black: #32302f;
//editor colors
$eventCool: #32cd32;
$eventLame: #f64747;
$editorPrimary: #fde3a7;
$editorSecondary: #e7903c;
$editorTertiary: #6bb9f0;
$editorString: #dcc6e0;
$editorTag: #e73c4e;

@ -1,85 +0,0 @@
code[class*="language-"],
pre[class*="language-"]
color: $editorPrimary
background: none
text-shadow: 0 1px rgba(0, 0, 0, 0.3)
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
font-size: 1em
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
pre[class*="language-"]
//padding: 1em
margin: .1em 0
overflow: auto
border-radius: 0.3em
:not(pre) > code[class*="language-"],
pre[class*="language-"]
background: $primary
:not(pre)
& > code[class*="language-"]
padding: .1em
border-radius: .3em
white-space: normal
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #8292a2
.token
&.punctuation
color: $editorSecondary
&.namespace
opacity: .6
&.keyword
color: #66d9ef
&.italic
font-style: italic
&.entity
cursor: help
&.content
color: $editorTertiary
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted
color: $editorTag
.token.boolean,
.token.number
color: #ae81ff
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #a6e22e
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable
color: $editorString
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name
color: #e6db74
.token.regex,
.token.important
color: $editorSecondary
.token.important,
.token.bold
font-weight: bold

@ -0,0 +1,105 @@
code[class*="language-"],
pre[class*="language-"] {
color: $editorPrimary;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1em;
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;
}
pre[class*="language-"] {
//padding: 1em
margin: 0.1em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: $primary;
}
:not(pre) {
& > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8292a2;
}
.token {
&.punctuation {
color: $editorSecondary;
}
&.namespace {
opacity: 0.6;
}
&.keyword {
color: #66d9ef;
}
&.italic {
font-style: italic;
}
&.entity {
cursor: help;
}
&.content {
color: $editorTertiary;
}
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: $editorTag;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: $editorString;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.regex,
.token.important {
color: $editorSecondary;
}
.token.important,
.token.bold {
font-weight: bold;
}

@ -1,94 +0,0 @@
#edit-control
// margin 10px
top: 1px
border-radius: 3px
width: 100%
max-width: 880px
margin-top: 30px
z-index: 2000
button:nth-child(1)
border-radius: 3px 0 0 3px
button:nth-child(10)
border-radius: 0 3px 3px 0
button
background: $secondary
width: 10%
height: 39px
transition: all 0.3s linear
margin: 0
border-radius: 0
display: inline-block
vertical-align: top
text-align: center
button:hover
background: color.adjust($secondary, $lightness: -20%)
#option-update
padding: 5px 5px 1px 5px
display: inline-block
vertical-align: top
text-align: center
.icon-hide
display: none
visibility: hidden
.submit-start
background: $white
svg
fill: $eventCool
.submit-cool
background: $eventCool
svg
fill: $white
.submit-delete
background: $eventLame !important
svg
fill: $white !important
#option-date
height: 30px
padding-top: 6px
svg
margin: -13px 5px 0 0
display: inline-block
vertical-align: top
fill: $white
.content-editor-btn-icon
padding: 5px 5px 1px 5px
// border-radius 20px
color: $primary
svg
fill: $primary
.content-editor-btn-text
padding: 5px
// border-radius 20px
color: $primary
#option-bold
font-weight: bold
text-decoration: none
#option-italic
font-weight: bold
text-decoration: none
font-style: italic
#option-strikethrough
font-weight: bold
text-decoration: line-through
font-style: italic

@ -0,0 +1,100 @@
#edit-control {
// margin 10px
top: 1px;
border-radius: 3px;
width: 100%;
max-width: 880px;
margin-top: 30px;
z-index: 2000;
button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
button:nth-child(10) {
border-radius: 0 3px 3px 0;
}
button {
background: $secondary;
width: 10%;
height: 39px;
transition: all 0.3s linear;
margin: 0;
border-radius: 0;
display: inline-block;
vertical-align: top;
text-align: center;
}
button:hover {
background: color.adjust($secondary, $lightness: -20%);
}
#option-update {
padding: 5px 5px 1px 5px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.icon-hide {
display: none;
visibility: hidden;
}
.submit-start {
background: $white;
svg {
fill: $eventCool;
}
}
.submit-cool {
background: $eventCool;
svg {
fill: $white;
}
}
.submit-delete {
background: $eventLame !important;
svg {
fill: $white !important;
}
}
#option-date {
height: 30px;
padding-top: 6px;
svg {
margin: -13px 5px 0 0;
display: inline-block;
vertical-align: top;
fill: $white;
}
}
.content-editor-btn-icon {
padding: 5px 5px 1px 5px;
// border-radius 20px
color: $primary;
svg {
fill: $primary;
}
}
.content-editor-btn-text {
padding: 5px;
// border-radius 20px
color: $primary;
}
#option-bold {
font-weight: bold;
text-decoration: none;
}
#option-italic {
font-weight: bold;
text-decoration: none;
font-style: italic;
}
#option-strikethrough {
font-weight: bold;
text-decoration: line-through;
font-style: italic;
}
}

@ -1,22 +0,0 @@
#error-index
width: 100%
max-width: 900px
margin: 0 auto
padding: 10px
height: 100%
z-index: 10
position: relative
label#title
font-size: 100px
color: $highlight
font-weight: 500
label#message
font-size: 50px
color: $tertiary
font-weight: 500
label#error
font-size: 25px
color: $eventLame
font-weight: 500

@ -0,0 +1,24 @@
#error-index {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 10px;
height: 100%;
z-index: 10;
position: relative;
label#title {
font-size: 100px;
color: $highlight;
font-weight: 500;
}
label#message {
font-size: 50px;
color: $tertiary;
font-weight: 500;
}
label#error {
font-size: 25px;
color: $eventLame;
font-weight: 500;
}
}

@ -1,67 +0,0 @@
form
display: inline-block
a
color: $primary
p
background: $tertiary
color: $primary
padding: 5px
display: block
border-radius: 5px
text-align: left
input[type=email], input[type=password], input[type=text]
border: 0
border-radius: 5px
padding: 5px
margin: 10px 5px 0 0
font: 18px $baseType
display: inline-block
background: $primary
color: $tertiary
textarea
border: 0
border-radius: 3px
color: $white
font: 15px $baseType
background: $primary
button, input[type=submit]
background: $highlight
color: $primary
font: 20px $baseType
border-radius: 5px
position: relative
cursor: pointer
border: 0
padding: 10px 0 5px 0
transition: all 0.3s linear
select
font: 14px $baseType
border: 1px solid $secondary
-webkit-appearance: none
-moz-appearance: none
appearance: none
color: $primary