xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

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

Browse source 
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.
This commit is contained in:
Are0h 2022-05-10 14:13:31 -07:00
parent aa3301fb66
commit 61b9acb280
37 changed files with 5249 additions and 2567 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
.prettierrc
View file

@ -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,
@ -15,3 +31,6 @@
"tabWidth": 4,
"printWidth": 90
}
}
]
}

6
.stylelintrc Normal file
View file

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

2
brain/views/dash/_frame.twig
View file

@ -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>

3
brain/views/dash/page-edit.twig
View file

@ -155,8 +155,7 @@
</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>
<input id="form_token" name="token" type="hidden" value="{{ token }}"></div>
</div>
</div>
<div id="edit-post">

2207
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
package.json
View file

@ -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",

656
public/assets/css/dash.css
View file

File diff suppressed because it is too large Load diff

43
src/styles/dash.sass
View file

@ -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'

43
src/styles/dash.scss Normal file
View file

@ -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";

242
src/styles/main/_calendar.sass
View file

@ -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%)

288
src/styles/main/_calendar.scss Normal file
View file

@ -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%);
}
} ;

18
src/styles/main/_colors.sass
View file

@ -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

17
src/styles/main/_colors.scss Normal file
View file

@ -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;

85
src/styles/main/_editor-highlight.sass
View file

@ -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

105
src/styles/main/_editor-highlight.scss Normal file
View file

@ -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;
}

94
src/styles/main/_editor.sass
View file

@ -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

100
src/styles/main/_editor.scss Normal file
View file

@ -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;
}
}

22
src/styles/main/_error.sass
View file

@ -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

24
src/styles/main/_error.scss Normal file
View file

@ -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;
}
}

67
src/styles/main/_forms.sass
View file

@ -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
::-webkit-input-placeholder
font: 25px $baseType
color: $white
:-moz-placeholder
/* Firefox 18- */
font: 25px $baseType
color: $white
::-moz-placeholder
/* Firefox 19+ */
font: 15px $baseType
color: $white
:-ms-input-placeholder
font: 25px $baseType
color: $white

71
src/styles/main/_forms.scss Normal file
View file

@ -0,0 +1,71 @@
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;
}
::-webkit-input-placeholder {
font: 25px $baseType;
color: $white;
}
:-moz-placeholder {
/* Firefox 18- */
font: 25px $baseType;
color: $white;
}
::-moz-placeholder {
/* Firefox 19+ */
font: 15px $baseType;
color: $white;
}
:-ms-input-placeholder {
font: 25px $baseType;
color: $white;
}

283
src/styles/main/_index.sass
View file

@ -1,283 +0,0 @@
#dash-index-content
width: 100%
height: 100%
margin: 0 auto
#dash-index
width: 100%
height: 100%
z-index: 10
position: relative
#dash-index-wrapper
width: 100%
height: 100%
margin: 0 auto
.dash-init, .dash-restore
width: 100%
height: 100%
display: flex
align-items: center
justify-content: center
color: $primary
form
background: $white
padding: 15px
width: 300px
border-radius: 5px
text-align: center
#the-logo
width: 40px
margin: 20px
input
width: 290px
margin: 0 0 10px 0
height: 30px
button
width: 300px
div
background: $primary
color: $white
border-radius: 3px
padding: 5px
label
display: block
padding: 5px
color: $tertiary
.dash-restore
display: none
visibility: hidden
#dash-login
width: 100%
height: 100%
margin: 0 auto
display: flex
align-items: center
justify-content: center
#dash-form, #dash-reset
width: 300px
padding: 0.75em
background: $white
border-radius: 5px
color: $white
text-align: center
#the-logo
width: 40px
margin: 20px
input
width: 290px
margin: 0 0 10px 0
height: 30px
button
width: 300px
#dash-menu
padding: 10px
width: 90%
max-width: 900px
margin: 50px auto
a
display: inline-block
vertical-align: top
background: color.adjust($primary, $lightness: -60%)
width: 30%
padding: 5px
border-radius: 3px
color: $white
margin: 0 10px 10px 0
&:hover
background: color.adjust($primary, $lightness: -60%)
svg
display: inline-block
vertical-align: top
fill: $white
label
display: inline-block
margin-top: 5px
width: 85%
text-align: center
cursor: pointer
#dash-recent
width: 100%
max-width: 900px
height: 100%
padding: 5px 0 0 0
margin: 0 auto
#recent-list
//padding: 5px
position: relative
.recent-header
height: 50px
margin-top: 5px
.index-header-left
vertical-align: top
display: inline-block
width: 50%
color: $white
font-size: 3em
.index-header-right
width: 50%
text-align: right
vertical-align: top
display: inline-block
right: 10px
color: $white
a
button
border-radius: 3px
margin-left: 10px
svg
transition: all 0.2s linear
width: 40px
height: 20px
fill: $white
a.post-link, a.post-video-link
font-size: 1.5em
font-weight: 300
display: inline-block
border-radius: 3px
vertical-align: top
text-decoration: none
position: relative
overflow: hidden
.post-video
width: 100%
height: 100%
object-fit: cover
position: absolute
label
font-size: 1.4em
font-weight: 700
color: $white
padding: 5px
vertical-align: top
display: inline-block
word-wrap: break-word
width: 100%
text-align: center
position: relative
top: 35%
text-shadow: 2px 2px 0 rgba($black, 1)
div#options
width: 100%
position: absolute
bottom: 0
border-radius: 0 0 3px 3px
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
#option-left
display: inline-block
vertical-align: top
width: 50%
position: relative
background: none
button
border-radius: 3px
background: $primary
margin: 0 0 10px 10px
svg
//@include object-transitions(0.1s)
width: 40px
height: 20px
fill: $secondary
.item-options
border-radius: 3px
margin: 5px
display: inline-block
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#option-right
display: inline-block
width: 50%
text-align: right
span
font-weight: bold
display: block
background: $white
color: $primary
border-radius: 3px
font-size: .6em
text-align: center
position: relative
padding: 5px
float: right
margin: 0 10px 0 0
bottom: -15px
a:nth-child(3)
width: 100%
margin-bottom: 20px
height: 500px
a:nth-child(4), a:nth-child(6)
width: 48.6%
height: 350px
margin: 0 10px 20px 0
a:nth-child(5), a:nth-child(7)
width: 48.6%
height: 350px
margin: 0 0 20px 10px
//Reponsive
@media only screen and (max-width: 768px)
#dash-index-content
#dash-index
#dash-index-wrapper
#dash-recent
#recent-list
a:nth-child(4), a:nth-child(6)
width: 48.9%
@media only screen and (max-width: 640px)
#dash-index-content
#dash-index
#dash-index-wrapper
#dash-recent
#recent-list
a:nth-child(4), a:nth-child(6)
width: 48.5%
@media only screen and (max-width: 480px)
#dash-index-content
#dash-index
#dash-index-wrapper
#dash-recent
#recent-list
.recent-header
h3
width: 40%
.index-menu
width: 60%
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
width: 100%
margin: 15px 0 0 0
height: 400px

346
src/styles/main/_index.scss Normal file
View file

@ -0,0 +1,346 @@
#dash-index-content {
width: 100%;
height: 100%;
margin: 0 auto;
#dash-index {
width: 100%;
height: 100%;
z-index: 10;
position: relative;
#dash-index-wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
.dash-init,
.dash-restore {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: $primary;
form {
background: $white;
padding: 15px;
width: 300px;
border-radius: 5px;
text-align: center;
#the-logo {
width: 40px;
margin: 20px;
}
input {
width: 290px;
margin: 0 0 10px 0;
height: 30px;
}
button {
width: 300px;
}
div {
background: $primary;
color: $white;
border-radius: 3px;
padding: 5px;
label {
display: block;
padding: 5px;
color: $tertiary;
}
}
}
}
.dash-restore {
display: none;
visibility: hidden;
}
#dash-login {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
#dash-form,
#dash-reset {
width: 300px;
padding: 0.75em;
background: $white;
border-radius: 5px;
color: $white;
text-align: center;
#the-logo {
width: 40px;
margin: 20px;
}
input {
width: 290px;
margin: 0 0 10px 0;
height: 30px;
}
button {
width: 300px;
}
}
}
#dash-menu {
padding: 10px;
width: 90%;
max-width: 900px;
margin: 50px auto;
a {
display: inline-block;
vertical-align: top;
background: color.adjust($primary, $lightness: -60%);
width: 30%;
padding: 5px;
border-radius: 3px;
color: $white;
margin: 0 10px 10px 0;
&:hover {
background: color.adjust($primary, $lightness: -60%);
}
svg {
display: inline-block;
vertical-align: top;
fill: $white;
}
label {
display: inline-block;
margin-top: 5px;
width: 85%;
text-align: center;
cursor: pointer;
}
}
}
#dash-recent {
width: 100%;
max-width: 900px;
height: 100%;
padding: 5px 0 0 0;
margin: 0 auto;
#recent-list {
//padding: 5px
position: relative;
.recent-header {
height: 50px;
margin-top: 5px;
.index-header-left {
vertical-align: top;
display: inline-block;
width: 50%;
color: $white;
font-size: 3em;
}
.index-header-right {
width: 50%;
text-align: right;
vertical-align: top;
display: inline-block;
right: 10px;
color: $white;
a {
button {
border-radius: 3px;
margin-left: 10px;
svg {
transition: all 0.2s linear;
width: 40px;
height: 20px;
fill: $white;
}
}
}
}
}
a.post-link,
a.post-video-link {
font-size: 1.5em;
font-weight: 300;
display: inline-block;
border-radius: 3px;
vertical-align: top;
text-decoration: none;
position: relative;
overflow: hidden;
.post-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
label {
font-size: 1.4em;
font-weight: 700;
color: $white;
padding: 5px;
vertical-align: top;
display: inline-block;
word-wrap: break-word;
width: 100%;
text-align: center;
position: relative;
top: 35%;
text-shadow: 2px 2px 0 rgba($black, 1);
}
div#options {
width: 100%;
position: absolute;
bottom: 0;
border-radius: 0 0 3px 3px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.65) 100%
);
#option-left {
display: inline-block;
vertical-align: top;
width: 50%;
position: relative;
background: none;
button {
border-radius: 3px;
background: $primary;
margin: 0 0 10px 10px;
svg {
//@include object-transitions(0.1s)
width: 40px;
height: 20px;
fill: $secondary;
}
}
.item-options {
border-radius: 3px;
margin: 5px;
display: inline-block;
}
button[data-active="false"] {
background: $primary;
svg {
fill: $secondary;
}
}
button[data-active="true"] {
background: $tertiary;
svg {
fill: $primary;
}
}
}
#option-right {
display: inline-block;
width: 50%;
text-align: right;
span {
font-weight: bold;
display: block;
background: $white;
color: $primary;
border-radius: 3px;
font-size: 0.6em;
text-align: center;
position: relative;
padding: 5px;
float: right;
margin: 0 10px 0 0;
bottom: -15px;
}
}
}
}
a:nth-child(3) {
width: 100%;
margin-bottom: 20px;
height: 500px;
}
a:nth-child(4),
a:nth-child(6) {
width: 48.6%;
height: 350px;
margin: 0 10px 20px 0;
}
a:nth-child(5),
a:nth-child(7) {
width: 48.6%;
height: 350px;
margin: 0 0 20px 10px;
}
//Reponsive
}
}
}
}
}
@media only screen and (max-width: 768px) {
#dash-index-content {
#dash-index {
#dash-index-wrapper {
#dash-recent {
#recent-list {
a:nth-child(4),
a:nth-child(6) {
width: 48.9%;
}
}
}
}
}
}
}
@media only screen and (max-width: 640px) {
#dash-index-content {
#dash-index {
#dash-index-wrapper {
#dash-recent {
#recent-list {
a:nth-child(4),
a:nth-child(6) {
width: 48.5%;
}
}
}
}
}
}
}
@media only screen and (max-width: 480px) {
#dash-index-content {
#dash-index {
#dash-index-wrapper {
#dash-recent {
#recent-list {
.recent-header {
h3 {
width: 40%;
}
.index-menu {
width: 60%;
}
}
a:nth-child(3),
a:nth-child(4),
a:nth-child(5),
a:nth-child(6),
a:nth-child(7) {
width: 100%;
margin: 15px 0 0 0;
height: 400px;
}
}
}
}
}
}
} ;

6
src/styles/main/_mixins.sass
View file

@ -1,6 +0,0 @@
@mixin background-opacity($rgb_value, $opacity)
background: rgba($rgb_value, $opacity)
@mixin custom-header($weight, $size, $line_height, $color)
font: $weight $size/$line_height $bodyTypeSans
color: $color

7
src/styles/main/_mixins.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin background-opacity($rgb_value, $opacity) {
background: rgba($rgb_value, $opacity);
}
@mixin custom-header($weight, $size, $line_height, $color) {
font: $weight $size/$line_height $bodyTypeSans;
color: $color;
}

71
src/styles/main/_navigation.sass
View file

@ -1,71 +0,0 @@
#nav-index
width: 100%
max-width: 900px
margin: 0 auto
#nav-index-wrapper
#nav-pages
.nav-item
display: block
width: 98%
background: $white
border-radius: 3px
color: $highlight
height: 30px
padding: 10px
margin: 0 0 10px 0
font-size: 1.5em
cursor: move
#item-arrows
fill: $primary
width: 40px
height: 30px
label
display: inline-block
vertical-align: middle
padding: 0
margin: -15px 0 0 10px
cursor: move
#nav-btns
float: right
top: -5px
position: relative
button
color: $white
border-radius: 3px
width: 40px
margin: 0 10px 0 10px
svg
fill: $white
width: 25px
height: 20px
@media only screen and (max-width: 375px)
#nav-index
#nav-index-wrapper
#nav-pages
.nav-item
width: 94.5%
font-size: 1em
label
width: 40%
vertical-align: top
margin-top: 0px
line-height: 1em
@media only screen and (max-width: 320px)
#nav-index
#nav-index-wrapper
#nav-pages
.nav-item
width: 94.5%
font-size: 1em
label
width: 37%
vertical-align: top
margin-top: 0px
line-height: 1em

88
src/styles/main/_navigation.scss Normal file
View file

@ -0,0 +1,88 @@
#nav-index {
width: 100%;
max-width: 900px;
margin: 0 auto;
#nav-index-wrapper {
#nav-pages {
.nav-item {
display: block;
width: 98%;
background: $white;
border-radius: 3px;
color: $highlight;
height: 30px;
padding: 10px;
margin: 0 0 10px 0;
font-size: 1.5em;
cursor: move;
#item-arrows {
fill: $primary;
width: 40px;
height: 30px;
}
}
label {
display: inline-block;
vertical-align: middle;
padding: 0;
margin: -15px 0 0 10px;
cursor: move;
}
#nav-btns {
float: right;
top: -5px;
position: relative;
button {
color: $white;
border-radius: 3px;
width: 40px;
margin: 0 10px 0 10px;
svg {
fill: $white;
width: 25px;
height: 20px;
}
}
}
}
}
}
@media only screen and (max-width: 375px) {
#nav-index {
#nav-index-wrapper {
#nav-pages {
.nav-item {
width: 94.5%;
font-size: 1em;
label {
width: 40%;
vertical-align: top;
margin-top: 0px;
line-height: 1em;
}
}
}
}
}
}
@media only screen and (max-width: 320px) {
#nav-index {
#nav-index-wrapper {
#nav-pages {
.nav-item {
width: 94.5%;
font-size: 1em;
label {
width: 37%;
vertical-align: top;
margin-top: 0px;
line-height: 1em;
}
}
}
}
}
} ;

197
src/styles/main/_normalize.sass
View file

@ -1,197 +0,0 @@
html
line-height: 1.15
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%
body
margin: 0
article,
aside,
footer,
header,
nav,
section
display: block
h1
font-size: 2em
margin: 0.67em 0
line-height: 1em
figcaption,
figure,
main
display: block
figure
margin: 1em 40px
hr
box-sizing: content-box
height: 0
overflow: visible
pre
font-family: monospace, monospace
font-size: 1em
a
background-color: transparent
-webkit-text-decoration-skip: objects
a:active,
a:hover
outline-width: 0
abbr[title]
border-bottom: none
text-decoration: underline
text-decoration: underline dotted
b,
strong
font-weight: inherit
font-weight: bolder
//code,
kbd,
samp
font-family: monospace, monospace
font-size: 1em
dfn
font-style: italic
mark
background-color: #ff0
color: #000
small
font-size: 80%
sub,
sup
font-size: 60%
line-height: 0
position: relative
vertical-align: baseline
sub
bottom: -0.25em
sup
top: -0.55em
background: $primary
color: $primary
border-radius: 2px
padding: 0 2px 0 2px
margin: 0 2px 0 0
audio,
video
display: inline-block
audio
&:not([controls])
display: none
height: 0
img
border-style: none
svg
&:not(:root)
overflow: hidden
button,
input,
optgroup,
select,
textarea
font-family: sans-serif
font-size: 100%
line-height: 1.15
margin: 0
button,
input
overflow: visible
button,
select
text-transform: none
button, html [type="button"],
[type="reset"],
[type="submit"]
-webkit-appearance: button
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner
border-style: none
padding: 0
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring
outline: 1px dotted ButtonText
fieldset
border: 1px solid #c0c0c0
margin: 0 2px
padding: 0.35em 0.625em 0.75em
legend
box-sizing: border-box
color: inherit
display: table
max-width: 100%
padding: 0
white-space: normal
progress
display: inline-block
vertical-align: baseline
textarea
overflow: auto
[type="checkbox"],
[type="radio"]
box-sizing: border-box
padding: 0
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button
height: auto
[type="search"]
-webkit-appearance: textfield
outline-offset: -2px
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration
-webkit-appearance: none
::-webkit-file-upload-button
-webkit-appearance: button
font: inherit
details,
menu
display: block
summary
display: list-item
canvas
display: inline-block
template
display: none
[hidden]
display: none

202
src/styles/main/_normalize.scss Normal file
View file

@ -0,0 +1,202 @@
html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
footer,
header,
nav,
section {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
line-height: 1em;
}
figcaption,
figure,
main {
display: block;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
//code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
dfn {
font-style: italic;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 60%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.55em;
background: $primary;
color: $primary;
border-radius: 2px;
padding: 0 2px 0 2px;
margin: 0 2px 0 0;
}
audio,
video {
display: inline-block;
}
audio {
&:not([controls]) {
display: none;
height: 0;
}
}
img {
border-style: none;
}
svg {
&:not(:root) {
overflow: hidden;
}
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
display: inline-block;
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details,
menu {
display: block;
}
summary {
display: list-item;
}
canvas {
display: inline-block;
}
template {
display: none;
}
[hidden] {
display: none;
}

512
src/styles/main/_posts.sass
View file

@ -1,512 +0,0 @@
#post-index
width: 100%
max-width: 900px
margin: 0 auto
#post-index-wrapper
//padding: 0.75rem
overflow: hidden
#post-index-header
margin: 10px 0 0 0
#post-index-header-left
text-transform: capitalize
display: inline-block
width: 50%
color: $white
font-size: 3em
#post-index-header-right
text-align: right
display: inline-block
width: 50%
a
button
color: $white
border-radius: 3px
margin-left: 10px
width: 55px
svg
transition: all 0.1s linear
width: 20px
height: 17px
fill: $white
.current-filter
color: $highlight
text-decoration-color: $secondary
#posts-list
margin: 20px 0 0 0
a.page-link
background: $white
display: inline-block
vertical-align: top
width: 100%
text-decoration: none
margin: 0 0 20px 0
border-radius: 3px
overflow: hidden
color: color.adjust($primary, $lightness: -60%)
label
font-size: 2em
font-weight: 500
padding: 10px
display: inline-block
vertical-align: top
width: 100%
div.page-bg, div.page-video
video
width: 100%
position: absolute
width: 100%
height: 350px
background-color: $highlight
position: relative
label
font-size: 2em
font-weight: 700
color: $white
padding: 5px
vertical-align: top
display: inline-block
word-wrap: break-word
width: 100%
text-align: center
position: relative
top: 35%
text-shadow: 2px 2px 0 rgba($black, 1)
#meta
width: 100%
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
border-radius: 3px
margin: auto
bottom: 0
position: absolute
padding: 0 0 20px 0
#options
width: 100%
bottom: 0
position: absolute
#option-left
display: inline-block
vertical-align: top
width: 50%
position: relative
background: none
button
border-radius: 3px
background: $primary
margin: 0 0 10px 10px
svg
transition: all 0.2s linear
width: 40px
height: 20px
fill: $secondary
.item-options
border-radius: 3px
margin: 5px
display: inline-block
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#option-right
display: inline-block
width: 50%
text-align: right
span
font-weight: bold
display: block
background: $white
color: $primary
border-radius: 3px
font-size: .6em
text-align: center
position: relative
padding: 5px
float: right
margin: 0 10px 0 0
bottom: -15px
p
padding: 5px 10px 5px 10px
font-size: 1.2em
font-weight: 400
.paginate
width: 260px
display: block
margin: 0 auto
a
display: inline-block
vertical-align: top
span.count
text-align: center
padding: 5px
margin-top: -2px
display: inline-block
width: 190px
font-size: 1.5em
color: $tertiary
#post-edit-index
width: 100%
overflow: hidden
#post-edit-index-wrapper
width: 100%
#post-header
// width 100%
background: $highlight
#post-header-wrapper
max-width: 900px
margin: 0 auto
padding: 0.75rem
label
color: $white
font-size: 0.9em
font-family: $baseType
font-weight: 600
span
color: $primary
font-size: 0.9em
font-weight: 600
text-transform: uppercase
float: right
#post-title
#post_title
background: $white
font-family: $baseType
width: 97.6%
height: 80px
font-size: 2em
color: $primary
padding: 5px
margin: 0 0 5px 0
#calendar-icon
background: color.adjust($primary, $lightness: -15%)
border-radius: 3px 0 0 3px
display: inline-block
padding: 5.2px
color: $secondary
#layouts
select
background: $primary
color: $secondary
border-radius: 3px
border-color: $primary
margin: 0 0 10px 0
width: 100%
height: 45px
padding: 5px
font-size: 1.5em
#post-meta
#post_tags
background: $white
font-family: $baseType
width: 97.6%
height: 80px
color: $primary
padding: 5px
margin: 0 0 5px 0
#post-options
display: inline-block
vertical-align: top
width: 100%
padding: 0
margin: 0 0 10px 0
button:nth-child(1)
border-radius: 3px 0 0 3px
button:nth-child(4)
border-radius: 0 3px 3px 0
a
button
border-radius: 0 3px 3px 0 !important
button
width: 25%
height: 45px
transition: all 0.3s linear
margin: 0
border-radius: 0
display: inline-block
vertical-align: top
text-align: center
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#page-files-upload, #post-image-upload
display: none
#post-feature
width: 100%
#page-file-manager
background: $tertiary
width: 100%
min-height: 300px
#page-file-wrapper
width: 100%
max-width: 900px
padding: 10px
margin: 0 auto
font-weight: bold
font-color: $primary
font-size: 1em
#page-file-drop
display: flex
align-items: center
justify-content: center
width: 100%
min-height: 100px
background: $white
color: $primary
vertical-align: middle
border-radius: 5px
margin: 0 0 10px 0
label
cursor: pointer
font-weight: 600px
text-transform: capitalize
img
width: 100%
margin: 0
padding: 0
#page-images-list, #page-files-list
padding: 10px 0 0 0
.img-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
.audio-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-audio.png') no-repeat center center / cover
.video-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-video.png') no-repeat center center / cover
.file-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
background: $primary
background: url('/assets/images/global/upload-doc.png') no-repeat center center / cover
#edit-post
width: 100%
max-width: 880px
margin: 0 auto
#edit-post-wrapper
width: 100%
max-width: 900px
border-radius: 5px
//background $primary - 10%
//margin: 10px 0 50px 0
position: relative
//editor sometimes scrolls throwing it all out of wack
//turning of scrolling keeps it aligned
textarea:focus
outline: none
border-color: $highlight
#edit, #highlight
border: 0
width: 100%
min-height: 300px
height: auto
position: absolute
top: 0
left: 0
overflow: auto
word-wrap: normal
white-space: pre-wrap
line-break: normal
#highlight-content
word-wrap: normal
white-space: pre-wrap
line-break: normal
#edit, #highlight, #hightlight *
font-size: 1.2em
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace
line-height: 22pt
#edit
z-index: 1
color: transparent
background: transparent
caret-color: $highlight
#highlight
z-index: 0
pre
margin: 0
code
font-family: $monoType
padding: 5px
border-radius: 5px
line-height: 1.6em
font-size: 1.25em
color: $editorPrimary
word-wrap: normal
white-space: pre-wrap
line-break: normal
-webkit-line-break: normal
-o-line-break: normal
-moz-line-break: normal
display: inline-block
width: 100%
max-width: 900px
min-height: 200px
caret-color: $highlight
//Responsive
@media only screen and (max-width: 800px)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-date
width: 37.6%
@media only screen and (max-width: 768px)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-date
width: 43.1%
#post-meta
#edit-control
max-width: 100%
button
width: 9.91%
@media only screen and (max-width: 640px)
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-date
width: 42%
@media only screen and (max-width: 480px)
#post-index
#post-index-wrapper
#post-index-header
#post-index-header-left
font-size: 1.35em
width: 30%
#post-index-header-right
width: 70%
vertical-align: top
#post-index-menu
a
font-size: 0.95em
label
display: none
visibility: hidden
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post-options
margin: 5px 0 0 0
width: 100%
padding: 0
#post-date
width: 89.2%
#post-meta
#edit-control
button
width: 9.91%
@media only screen and (max-width: 320px)
#post-index
#post-index-wrapper
#post-index-menu
a
font-size: 0.95em
label
display: none
visibility: hidden
#post-edit-index
#post-edit-index-wrapper
#post-header
#post-title
#post_title
width: 96.4%
#post-options
margin: 5px 0 0 0
width: 100%
padding: 0
#post-date
width: 83.1%
#post-meta
#post_tags
width: 96.4%
#edit-control
.content-editor-btn-icon
svg.icons
width: 20px
.post-sumbit-btn
svg.icons
width: 20px
button
width: 10%

622
src/styles/main/_posts.scss Normal file
View file

@ -0,0 +1,622 @@
#post-index {
width: 100%;
max-width: 900px;
margin: 0 auto;
#post-index-wrapper {
//padding: 0.75rem
overflow: hidden;
#post-index-header {
margin: 10px 0 0 0;
#post-index-header-left {
text-transform: capitalize;
display: inline-block;
width: 50%;
color: $white;
font-size: 3em;
}
#post-index-header-right {
text-align: right;
display: inline-block;
width: 50%;
a {
button {
color: $white;
border-radius: 3px;
margin-left: 10px;
width: 55px;
}
svg {
transition: all 0.1s linear;
width: 20px;
height: 17px;
fill: $white;
}
}
.current-filter {
color: $highlight;
text-decoration-color: $secondary;
}
}
}
#posts-list {
margin: 20px 0 0 0;
a.page-link {
background: $white;
display: inline-block;
vertical-align: top;
width: 100%;
text-decoration: none;
margin: 0 0 20px 0;
border-radius: 3px;
overflow: hidden;
color: color.adjust($primary, $lightness: -60%);
label {
font-size: 2em;
font-weight: 500;
padding: 10px;
display: inline-block;
vertical-align: top;
width: 100%;
}
div.page-bg,
div.page-video {
video {
width: 100%;
position: absolute;
}
width: 100%;
height: 350px;
background-color: $highlight;
position: relative;
label {
font-size: 2em;
font-weight: 700;
color: $white;
padding: 5px;
vertical-align: top;
display: inline-block;
word-wrap: break-word;
width: 100%;
text-align: center;
position: relative;
top: 35%;
text-shadow: 2px 2px 0 rgba($black, 1);
}
#meta {
width: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.65) 100%
);
border-radius: 3px;
margin: auto;
bottom: 0;
position: absolute;
padding: 0 0 20px 0;
#options {
width: 100%;
bottom: 0;
position: absolute;
#option-left {
display: inline-block;
vertical-align: top;
width: 50%;
position: relative;
background: none;
button {
border-radius: 3px;
background: $primary;
margin: 0 0 10px 10px;
}
svg {
transition: all 0.2s linear;
width: 40px;
height: 20px;
fill: $secondary;
}
.item-options {
border-radius: 3px;
margin: 5px;
display: inline-block;
}
button[data-active="false"] {
background: $primary;
svg {
fill: $secondary;
}
}
button[data-active="true"] {
background: $tertiary;
svg {
fill: $primary;
}
}
}
#option-right {
display: inline-block;
width: 50%;
text-align: right;
span {
font-weight: bold;
display: block;
background: $white;
color: $primary;
border-radius: 3px;
font-size: 0.6em;
text-align: center;
position: relative;
padding: 5px;
float: right;
margin: 0 10px 0 0;
bottom: -15px;
}
}
}
}
}
p {
padding: 5px 10px 5px 10px;
font-size: 1.2em;
font-weight: 400;
}
}
}
.paginate {
width: 260px;
display: block;
margin: 0 auto;
a {
display: inline-block;
vertical-align: top;
}
span.count {
text-align: center;
padding: 5px;
margin-top: -2px;
display: inline-block;
width: 190px;
font-size: 1.5em;
color: $tertiary;
}
}
}
}
#post-edit-index {
width: 100%;
overflow: hidden;
#post-edit-index-wrapper {
width: 100%;
#post-header {
// width 100%
background: $highlight;
#post-header-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0.75rem;
label {
color: $white;
font-size: 0.9em;
font-family: $baseType;
font-weight: 600;
}
span {
color: $primary;
font-size: 0.9em;
font-weight: 600;
text-transform: uppercase;
float: right;
}
#post-title {
#post_title {
background: $white;
font-family: $baseType;
width: 97.6%;
height: 80px;
font-size: 2em;
color: $primary;
padding: 5px;
margin: 0 0 5px 0;
}
#calendar-icon {
background: color.adjust($primary, $lightness: -15%);
border-radius: 3px 0 0 3px;
display: inline-block;
padding: 5.2px;
color: $secondary;
}
#layouts {
select {
background: $primary;
color: $secondary;
border-radius: 3px;
border-color: $primary;
margin: 0 0 10px 0;
width: 100%;
height: 45px;
padding: 5px;
font-size: 1.5em;
}
}
}
#post-meta {
#post_tags {
background: $white;
font-family: $baseType;
width: 97.6%;
height: 80px;
color: $primary;
padding: 5px;
margin: 0 0 5px 0;
}
#post-options {
display: inline-block;
vertical-align: top;
width: 100%;
padding: 0;
margin: 0 0 10px 0;
button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
button:nth-child(4) {
border-radius: 0 3px 3px 0;
}
a {
button {
border-radius: 0 3px 3px 0 !important;
}
}
button {
width: 25%;
height: 45px;
transition: all 0.3s linear;
margin: 0;
border-radius: 0;
display: inline-block;
vertical-align: top;
text-align: center;
}
button[data-active="false"] {
background: $primary;
svg {
fill: $secondary;
}
}
button[data-active="true"] {
background: $tertiary;
svg {
fill: $primary;
}
}
}
#page-files-upload,
#post-image-upload {
display: none;
}
}
}
}
#post-feature {
width: 100%;
#page-file-manager {
background: $tertiary;
width: 100%;
min-height: 300px;
#page-file-wrapper {
width: 100%;
max-width: 900px;
padding: 10px;
margin: 0 auto;
font-weight: bold;
font-color: $primary;
font-size: 1em;
#page-file-drop {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100px;
background: $white;
color: $primary;
vertical-align: middle;
border-radius: 5px;
margin: 0 0 10px 0;
label {
cursor: pointer;
font-weight: 600px;
text-transform: capitalize;
}
img {
width: 100%;
margin: 0;
padding: 0;
}
}
#page-images-list,
#page-files-list {
padding: 10px 0 0 0;
.img-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
}
.audio-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: $primary;
background: url("/assets/images/global/upload-audio.png")
no-repeat center center / cover;
}
.video-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: $primary;
background: url("/assets/images/global/upload-video.png")
no-repeat center center / cover;
}
.file-item {
height: 150px;
width: 23.8%;
border-radius: 3px;
margin: 0 10px 10px 0;
display: inline-block;
cursor: pointer;
background: $primary;
background: url("/assets/images/global/upload-doc.png") no-repeat
center center / cover;
}
}
}
}
}
#edit-post {
width: 100%;
max-width: 880px;
margin: 0 auto;
#edit-post-wrapper {
width: 100%;
max-width: 900px;
border-radius: 5px;
//background $primary - 10%
//margin: 10px 0 50px 0
position: relative;
//editor sometimes scrolls throwing it all out of wack
//turning of scrolling keeps it aligned
textarea:focus {
outline: none;
border-color: $highlight;
}
#edit,
#highlight {
border: 0;
width: 100%;
min-height: 300px;
height: auto;
position: absolute;
top: 0;
left: 0;
overflow: auto;
word-wrap: normal;
white-space: pre-wrap;
line-break: normal;
}
#highlight-content {
word-wrap: normal;
white-space: pre-wrap;
line-break: normal;
}
#edit,
#highlight,
#hightlight * {
font-size: 1.2em;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
line-height: 22pt;
}
#edit {
z-index: 1;
color: transparent;
background: transparent;
caret-color: $highlight;
}
#highlight {
z-index: 0;
pre {
margin: 0;
code {
font-family: $monoType;
padding: 5px;
border-radius: 5px;
line-height: 1.6em;
font-size: 1.25em;
color: $editorPrimary;
word-wrap: normal;
white-space: pre-wrap;
line-break: normal;
-webkit-line-break: normal;
-o-line-break: normal;
-moz-line-break: normal;
display: inline-block;
width: 100%;
max-width: 900px;
min-height: 200px;
caret-color: $highlight;
}
//Responsive
}
}
}
}
}
}
@media only screen and (max-width: 800px) {
#post-edit-index {
#post-edit-index-wrapper {
#post-header {
#post-title {
#post-date {
width: 37.6%;
}
}
}
}
}
}
@media only screen and (max-width: 768px) {
#post-edit-index {
#post-edit-index-wrapper {
#post-header {
#post-title {
#post-date {
width: 43.1%;
}
}
#post-meta {
#edit-control {
max-width: 100%;
button {
width: 9.91%;
}
}
}
}
}
}
}
@media only screen and (max-width: 640px) {
#post-edit-index {
#post-edit-index-wrapper {
#post-header {
#post-title {
#post-date {
width: 42%;
}
}
}
}
}
}
@media only screen and (max-width: 480px) {
#post-index {
#post-index-wrapper {
#post-index-header {
#post-index-header-left {
font-size: 1.35em;
width: 30%;
}
#post-index-header-right {
width: 70%;
vertical-align: top;
}
}
#post-index-menu {
a {
font-size: 0.95em;
label {
display: none;
visibility: hidden;
}
}
}
}
}
#post-edit-index {
#post-edit-index-wrapper {
#post-header {
#post-title {
#post-options {
margin: 5px 0 0 0;
width: 100%;
padding: 0;
}
#post-date {
width: 89.2%;
}
}
#post-meta {
#edit-control {
button {
width: 9.91%;
}
}
}
}
}
}
}
@media only screen and (max-width: 320px) {
#post-index {
#post-index-wrapper {
#post-index-menu {
a {
font-size: 0.95em;
label {
display: none;
visibility: hidden;
}
}
}
}
}
#post-edit-index {
#post-edit-index-wrapper {
#post-header {
#post-title {
#post_title {
width: 96.4%;
}
#post-options {
margin: 5px 0 0 0;
width: 100%;
padding: 0;
}
#post-date {
width: 83.1%;
}
}
#post-meta {
#post_tags {
width: 96.4%;
}
#edit-control {
.content-editor-btn-icon {
svg.icons {
width: 20px;
}
}
.post-sumbit-btn {
svg.icons {
width: 20px;
}
}
button {
width: 10%;
}
}
}
}
}
}
} ;

282
src/styles/main/_settings.sass
View file

@ -1,282 +0,0 @@
#settings-actions
position: fixed
width: 40%
margin-top: -85px
left: 50%
margin-left: -20%
#buttons
width: 185px
margin: 28px auto
text-align: center
background: $white
padding: 2px
border-radius: 3px
button
color: $white
border-radius: 3px
width: 40px
margin: 0 10px 0 10px
svg
width: 25px
height: 20px
fill: $white
button[data-render='false']
background: $secondary
svg
fill: $primary
button[data-render='true']
background: $highlight
svg
fill: $white
#settings-index
width: 94%
max-width: 900px
margin: 0 auto
overflow: hidden
#settings-index-wrapper
padding: 0
button
margin-top: 5px
width: 100%
height: 33px
#member-settings, #feature-settings, #option-settings, #token-settings, #backup-settings
background: $white
padding: 0px
border-radius: 5px 0 5px 0
width: 100%
margin: 20px auto
label
font-family: $baseType
color: $primary
font-weight: bold
span
color: $secondary
input
width: 95%
margin: 0 5px 10px 0
height: 30px
padding: 10px
input#backup-upload
visibility: hidden
display: none
.backup-meta
background: $primary
color: $white
padding: 8px
border-radius: 3px
margin: 5px 0 0 0
text-align: center
#member-images
padding: 10px 15px 0 15px
#member-avatar-drop
display: inline-block
margin: 0 0 10px 0
img
width: 100%
border-radius: 5px
overflow: hidden
cursor: pointer
display: block
margin-bottom: 2px
input
visibility: hidden
display: none
#privacy-toggle
width: 50%
#render-toggle
width: 50%
#site-background
margin: 0 0 10px 0
img
width: 92.1%
height: 292px
border-radius: 3px
overflow: hidden
cursor: pointer
input
visibility: hidden
display: none
#member-meta
padding: 10px 15px 0 15px
position: relative
top: -30px
#features
padding: 10px 15px 0 15px
textarea
background: $primary
width: 70%
height: 89.5px
color: $tertiary
padding: 10px
display: inline-block
margin-bottom: 10px
span#key
color: $white
background: $primary
font-size: 0.9em
border-radius: 3px
padding: 5px
display: block
width: 95%
overflow: hidden
#feature-settings
#feature-api, #dynamic-api
background: $white
border-radius: 3px
padding: 5px
button
color: $white
border-radius: 3px
width: 200px
margin: 0
height: 200px
font-size: 1em
svg
width: 100px
height: 90px
fill: $white
position: relative
display: block
margin: 12px auto
span
color: $white
margin: 6px 0 0 5px
position: relative
vertical-align: middle
display: inline-block
font-weight: bold
button[data-enabled='false']
background: $secondary
svg
fill: $primary
span
color: $primary
button[data-enabled='true']
background: $highlight
svg
fill: $white
#token-settings
#keys-tokens
padding: 10px 15px 0 15px
#member-api-key, #form-token
background: $primary
border-radius: 3px
padding: 5px
color: $white
#option-settings
#theme-settings
a
width: 95%
margin: 0 5px 5px 0
height: 15px
padding: 10px
display: inline-block
a[data-enabled='false']
background: $white
color: $primary
border-radius: 3px
font-weight: bold
border-top: 1px $highlight solid
border-bottom: 1px $highlight solid
a[data-enabled='true']
background: $highlight
color: $primary
border-radius: 3px
font-weight: bold
border-top: 1px $primary solid
border-bottom: 1px $primary solid
svg
fill: $primary
display: inline-block
float: right
#mail-settings
min-height: 240px
a.mail-option
float: right
font-family: $monoType
font-size: 0.9em
border-radius: 3px
text-decoration: none
margin: 0 0 0 5px
// padding: 1px
a.mail-option[data-enabled='true']
color: $highlight
a.mail-option[data-enabled='false']
color: $primary
input
// width 94%
margin: 0 5px 5px 0
vertical-align: top
div[data-enabled='false']
display: none
visibility: hidden
#settings-api
background: $primary
border-radius: 3px
padding: 10px
span
color: $white !important
margin: -13px 0 0 5px
position: relative
vertical-align: middle
display: inline-block
font-weight: bold
button
color: $white
border-radius: 3px
width: 40px
margin: 0
svg
width: 25px
height: 20px
fill: $white
button[data-enabled='false']
background: $secondary
svg
fill: $primary
button[data-enabled='true']
background: $highlight
svg
fill: $white
// responsive
@media only screen and (max-width: 480px)
#settings-actions
margin-left: -42%
#buttons
width: 150px
background: none
button
margin: 0 5px 0 5px

328
src/styles/main/_settings.scss Normal file
View file

@ -0,0 +1,328 @@
#settings-actions {
position: fixed;
width: 40%;
margin-top: -85px;
left: 50%;
margin-left: -20%;
#buttons {
width: 185px;
margin: 28px auto;
text-align: center;
background: $white;
padding: 2px;
border-radius: 3px;
button {
color: $white;
border-radius: 3px;
width: 40px;
margin: 0 10px 0 10px;
svg {
width: 25px;
height: 20px;
fill: $white;
}
}
button[data-render="false"] {
background: $secondary;
svg {
fill: $primary;
}
}
button[data-render="true"] {
background: $highlight;
svg {
fill: $white;
}
}
}
}
#settings-index {
width: 94%;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
#settings-index-wrapper {
padding: 0;
button {
margin-top: 5px;
width: 100%;
height: 33px;
}
#member-settings,
#feature-settings,
#option-settings,
#token-settings,
#backup-settings {
background: $white;
padding: 0px;
border-radius: 5px 0 5px 0;
width: 100%;
margin: 20px auto;
label {
font-family: $baseType;
color: $primary;
font-weight: bold;
}
span {
color: $secondary;
}
input {
width: 95%;
margin: 0 5px 10px 0;
height: 30px;
padding: 10px;
}
input#backup-upload {
visibility: hidden;
display: none;
}
.backup-meta {
background: $primary;
color: $white;
padding: 8px;
border-radius: 3px;
margin: 5px 0 0 0;
text-align: center;
}
#member-images {
padding: 10px 15px 0 15px;
#member-avatar-drop {
display: inline-block;
margin: 0 0 10px 0;
img {
width: 100%;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
display: block;
margin-bottom: 2px;
}
input {
visibility: hidden;
display: none;
}
#privacy-toggle {
width: 50%;
}
#render-toggle {
width: 50%;
}
}
#site-background {
margin: 0 0 10px 0;
img {
width: 92.1%;
height: 292px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
input {
visibility: hidden;
display: none;
}
}
}
#member-meta {
padding: 10px 15px 0 15px;
position: relative;
top: -30px;
}
#features {
padding: 10px 15px 0 15px;
}
}
textarea {
background: $primary;
width: 70%;
height: 89.5px;
color: $tertiary;
padding: 10px;
display: inline-block;
margin-bottom: 10px;
}
span#key {
color: $white;
background: $primary;
font-size: 0.9em;
border-radius: 3px;
padding: 5px;
display: block;
width: 95%;
overflow: hidden;
}
#feature-settings {
#feature-api,
#dynamic-api {
background: $white;
border-radius: 3px;
padding: 5px;
button {
color: $white;
border-radius: 3px;
width: 200px;
margin: 0;
height: 200px;
font-size: 1em;
svg {
width: 100px;
height: 90px;
fill: $white;
position: relative;
display: block;
margin: 12px auto;
}
span {
color: $white;
margin: 6px 0 0 5px;
position: relative;
vertical-align: middle;
display: inline-block;
font-weight: bold;
}
}
button[data-enabled="false"] {
background: $secondary;
svg {
fill: $primary;
}
span {
color: $primary;
}
}
button[data-enabled="true"] {
background: $highlight;
svg {
fill: $white;
}
}
}
}
#token-settings {
#keys-tokens {
padding: 10px 15px 0 15px;
#member-api-key,
#form-token {
background: $primary;
border-radius: 3px;
padding: 5px;
color: $white;
}
}
}
#option-settings {
#theme-settings {
a {
width: 95%;
margin: 0 5px 5px 0;
height: 15px;
padding: 10px;
display: inline-block;
}
a[data-enabled="false"] {
background: $white;
color: $primary;
border-radius: 3px;
font-weight: bold;
border-top: 1px $highlight solid;
border-bottom: 1px $highlight solid;
}
a[data-enabled="true"] {
background: $highlight;
color: $primary;
border-radius: 3px;
font-weight: bold;
border-top: 1px $primary solid;
border-bottom: 1px $primary solid;
svg {
fill: $primary;
display: inline-block;
float: right;
}
}
}
#mail-settings {
min-height: 240px;
a.mail-option {
float: right;
font-family: $monoType;
font-size: 0.9em;
border-radius: 3px;
text-decoration: none;
margin: 0 0 0 5px;
}
a.mail-option[data-enabled="true"] {
color: $highlight;
}
a.mail-option[data-enabled="false"] {
color: $primary;
}
input {
// width 94%
margin: 0 5px 5px 0;
vertical-align: top;
}
div[data-enabled="false"] {
display: none;
visibility: hidden;
}
#settings-api {
background: $primary;
border-radius: 3px;
padding: 10px;
span {
color: $white !important;
margin: -13px 0 0 5px;
position: relative;
vertical-align: middle;
display: inline-block;
font-weight: bold;
}
button {
color: $white;
border-radius: 3px;
width: 40px;
margin: 0;
svg {
width: 25px;
height: 20px;
fill: $white;
}
}
button[data-enabled="false"] {
background: $secondary;
svg {
fill: $primary;
}
}
button[data-enabled="true"] {
background: $highlight;
svg {
fill: $white;
}
// responsive
}
}
}
}
}
}
@media only screen and (max-width: 480px) {
#settings-actions {
margin-left: -42%;
#buttons {
width: 150px;
background: none;
button {
margin: 0 5px 0 5px;
}
}
}
} ;

188
src/styles/main/_structure.sass
View file

@ -1,188 +0,0 @@
html, body
background: $primary linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%) no-repeat
font: 400 1em $baseType
height: 100%
a
font: 300 1em $baseType
color: $secondary
text-decoration: underline
transition: all 0.2s linear
svg.icons
width: 25px
fill: $secondary
#notifications
perspective: 1000px
position: fixed
z-index: 2000
height: 55px
width: 100%
display: block
align-items: center
justify-content: center
padding: 0
margin-top: -55px
#notifyMessage
margin: 0 auto
//ks-easing( "out-back" );
transition: all 0.6s cubic-bezier(.83,.05,.28,1.0)
//padding-top -125px
height: 50px
width: 500px
display: flex
align-items: center
justify-content: center
opacity: 1
transform-style: preserve-3d
transform: rotateX(120deg)
transform-origin: 50% 0
overflow: hidden
#notify-good, #notify-lame, #notify-working
display: block
#notify-working-icon
-webkit-animation: spin 2s linear infinite
-moz-animation: spin 2s linear infinite
animation: spin 2s linear infinite
@keyframes spin
transform: rotate(360deg)
.notify-icon
background: $black
padding: 8px 5px 5px 5px
border-radius: 5px 0 0 5px
height: 30px
width: 30px
text-align: center
border: 2px solid $white
#notify-text
color: $white
background: $black
width: 400px
height: 28px
padding: 15px 0 0 0
border-radius: 0 5px 5px 0
border: 2px solid $white
text-align: center
overflow: hidden
position: relative
#notify-progress
width: 0
background: $highlight
height: 43px
position: absolute
top: 0px
p
top: -15px
display: block
position: relative
.icons
fill: $white
.notify-close
transform-style: preserve-3d
transform: rotateX(-120deg)
.notify-open
transform-style: preserve-3d
transform: rotateX(0deg)
.blog-container
width: 100%
.main-container
margin: 0 auto
z-index: 10
position: relative
height: 100%
section
header
width: 100%
max-width: 900px
margin: 10px auto
background: $white
height: 50px
border-radius: 5px
#wrapper
padding: 5px
#left, #right
width: 49.7%
display: inline-block
vertical-align: top
min-height: 60px
#the-logo
width: 29px
#right
text-align: right
color: $white
// word-break: break-all;
#dash-menu
text-align: right
a
button
border-radius: 50px
svg
transition: all 0.2s linear
width: 40px
height: 20px
fill: $white
&:hover
button
background: $primary
svg
fill: $secondary
/* Mozilla based browsers */
::-moz-selection
background-color: $highlight
color: $white
/* Works in Safari */
::selection
background-color: $highlight
color: $white
/* Works in Opera */
::-o-selection
background-color: $highlight
color: $white
::-ms-selection
background-color: $highlight
color: $white
/* Works in Internet Explorer */
::-webkit-selection
background-color: $highlight
color: $white
//Responsive
@media only screen and (max-width: 901px)
.main-container
padding: 10px
@media only screen and (max-width: 800px)
.main-container
section
header
#wrapper
#left, #right
display: inline-block
@media only screen and (max-width: 480px)
.main-container
section
header
#wrapper
#left
width: 30%
#right
width: 70%

251
src/styles/main/_structure.scss Normal file
View file

@ -0,0 +1,251 @@
html,
body {
background: $primary
linear-gradient(
0deg,
rgba($primary, 1) 0%,
rgba(color.adjust($primary, $lightness: 10%), 1) 100%
)
no-repeat;
font: 400 1em $baseType;
height: 100%;
}
a {
font: 300 1em $baseType;
color: $secondary;
text-decoration: underline;
transition: all 0.2s linear;
}
svg.icons {
width: 25px;
fill: $secondary;
}
#notifications {
perspective: 1000px;
position: fixed;
z-index: 2000;
height: 55px;
width: 100%;
display: block;
align-items: center;
justify-content: center;
padding: 0;
margin-top: -55px;
#notify-message {
margin: 0 auto;
// ks-easing( "out-back" );
transition: all 0.6s cubic-bezier(0.83, 0.05, 0.28, 1);
// padding-top -125px
height: 50px;
width: 500px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transform-style: preserve-3d;
transform: rotateX(120deg);
transform-origin: 50% 0;
overflow: hidden;
#notify-good,
#notify-lame,
#notify-working {
display: block;
}
#notify-working-icon {
animation: spin 2s linear infinite;
@keyframes spin {
transform: rotate(360deg);
}
}
.notify-icon {
background: $black;
padding: 8px 5px 5px;
border-radius: 5px 0 0 5px;
height: 30px;
width: 30px;
text-align: center;
border: 2px solid $white;
}
#notify-text {
color: $white;
background: $black;
width: 400px;
height: 28px;
padding: 15px 0 0;
border-radius: 0 5px 5px 0;
border: 2px solid $white;
text-align: center;
overflow: hidden;
position: relative;
#notify-progress {
width: 0;
background: $highlight;
height: 43px;
position: absolute;
top: 0;
}
p {
top: -15px;
display: block;
position: relative;
}
}
.icons {
fill: $white;
}
}
}
.notify-close {
transform-style: preserve-3d;
transform: rotateX(-120deg);
}
.notify-open {
transform-style: preserve-3d;
transform: rotateX(0deg);
}
.blog-container {
width: 100%;
}
.main-container {
margin: 0 auto;
z-index: 10;
position: relative;
height: 100%;
section {
header {
width: 100%;
max-width: 900px;
margin: 10px auto;
background: $white;
height: 50px;
border-radius: 5px;
#wrapper {
padding: 5px;
#left,
#right {
width: 49.7%;
display: inline-block;
vertical-align: top;
min-height: 60px;
#the-logo {
width: 29px;
}
}
#right {
text-align: right;
color: $white;
// word-break: break-all;
#dash-menu {
text-align: right;
a {
button {
border-radius: 50px;
svg {
transition: all 0.2s linear;
width: 40px;
height: 20px;
fill: $white;
}
}
&:hover {
button {
background: $primary;
}
svg {
fill: $secondary;
}
}
}
}
}
}
}
}
} /* Mozilla based browsers */
::selection {
background-color: $highlight;
color: $white;
}
/* Works in Opera */
::-o-selection {
background-color: $highlight;
color: $white;
}
::-ms-selection {
background-color: $highlight;
color: $white;
}
/* Works in Internet Explorer */
::-webkit-selection {
background-color: $highlight;
color: $white;
}
// Responsive
@media only screen and (max-width: 901px) {
.main-container {
padding: 10px;
}
}
@media only screen and (max-width: 800px) {
.main-container {
section {
header {
#wrapper {
#left,
#right {
display: inline-block;
}
}
}
}
}
}
@media only screen and (max-width: 480px) {
.main-container {
section {
header {
#wrapper {
#left {
width: 30%;
}
#right {
width: 70%;
}
}
}
}
}
} ;

18
src/styles/main/_typography.sass
View file

@ -1,18 +0,0 @@
$baseType: Helvetica, Arial, sans-serif
$monoType: "Lucida Console", Monaco, monospace
h1, h2, h3
color: $white
h1
font-size: 2em
font-weight: 400
h2
font-size: 1.75em
font-weight: 400
h3
font-size: 1.5em
font-weight: 300

20
src/styles/main/_typography.scss Normal file
View file

@ -0,0 +1,20 @@
$baseType: Helvetica, Arial, sans-serif;
$monoType: "Lucida Console", Monaco, monospace;
h1,
h2,
h3 {
color: $white;
}
h1 {
font-size: 2em;
font-weight: 400;
}
h2 {
font-size: 1.75em;
font-weight: 400;
}
h3 {
font-size: 1.5em;
font-weight: 300;
}