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

finished scss stylint refactor for remaining pages

Browse source 
finished up refacting all of the style sheets to be brought in line with
the stylint scss standard. the standard will probably change as i tweak
the rules but the foundation is solid and it's rendering so it's a
great place to start

i'll go through the ui to make sure everything is in tact and i'll make
the necessary adjustments

i should probably refactor some structures as well as they nesting is a
bit overly complicated
This commit is contained in:
Are0h 2022-05-10 17:19:46 -07:00
parent 61b9acb280
commit b8b763637f
16 changed files with 2532 additions and 2075 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -118,7 +118,7 @@
<div id="post-header-wrapper" class="columns"> <div id="post-header-wrapper" class="columns">
<div id="post-title" class="column"> <div id="post-title" class="column">
<label>TITLE</label> <label>TITLE</label>
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE"> <textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
{{ - _title - }} {{ - _title - }}
</textarea> </textarea>
@ -142,7 +142,7 @@
</div> </div>
<div id="post-meta" class="column"> <div id="post-meta" class="column">
<label>TAGS</label> <label>TAGS</label>
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]"> <textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
{{ - tags - }} {{ - tags - }}
</textarea> </textarea>
<label>OPTIONS</label> <label>OPTIONS</label>

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

File diff suppressed because it is too large Load diff

77
src/styles/main/_calendar.scss
View file

@ -6,10 +6,11 @@
bottom: 0; bottom: 0;
z-index: 2000; z-index: 2000;
} }
.dp { .dp {
position: relative; position: relative;
background: $primary; background: $primary;
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25); box-shadow: 2px 2px 16px rgba(#000, 0.25);
line-height: 1.4; line-height: 1.4;
border-radius: 4px; border-radius: 4px;
max-height: 400px; max-height: 400px;
@ -18,8 +19,9 @@
overflow: hidden; overflow: hidden;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.dp:before {
content: " "; .dp::before {
content: ' ';
height: 6px; height: 6px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -27,32 +29,39 @@
right: 0; right: 0;
background: $highlight; background: $highlight;
} }
.dp-permanent .dp { .dp-permanent .dp {
padding-top: 0; padding-top: 0;
border: 1px solid #eee; border: 1px solid #eee;
box-shadow: none; box-shadow: none;
} }
.dp-permanent .dp:before {
.dp-permanent .dp::before {
display: none; display: none;
} }
.dp-cal { .dp-cal {
min-height: 300px; min-height: 300px;
} }
.dp-below { .dp-below {
position: absolute; position: absolute;
font-size: 0.8em; font-size: 0.8em;
width: 400px; width: 400px;
max-width: 90vw; max-width: 90vw;
} }
.dp-permanent { .dp-permanent {
position: relative; position: relative;
font-size: 0.8em; font-size: 0.8em;
width: 400px; width: 400px;
max-width: 100vw; max-width: 100vw;
} }
.dp-permanent .dp { .dp-permanent .dp {
z-index: 0; z-index: 0;
} }
.dp-modal .dp { .dp-modal .dp {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -62,16 +71,20 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: slide-up 0.3s forwards; animation: slide-up 0.3s forwards;
} }
.dp-months { .dp-months {
padding: 24px; padding: 24px;
} }
.dp-years { .dp-years {
box-sizing: border-box; box-sizing: border-box;
max-height: 400px; max-height: 400px;
padding: 8px 0; padding: 8px 0;
/* HACK for Chrome on Android */ /* HACK for Chrome on Android */
overflow: auto !important; overflow: auto !important;
} }
.dp-cal-month, .dp-cal-month,
.dp-cal-year, .dp-cal-year,
.dp-day, .dp-day,
@ -86,12 +99,14 @@
border: 0; border: 0;
background: transparent; background: transparent;
} }
.dp-cal-header { .dp-cal-header {
position: relative; position: relative;
text-align: center; text-align: center;
padding-bottom: 16px; padding-bottom: 16px;
background: color.adjust($primary, $lightness: -10%); background: color.adjust($primary, $lightness: -10%);
} }
.dp-next, .dp-next,
.dp-prev { .dp-prev {
position: absolute; position: absolute;
@ -104,6 +119,15 @@
border: 0; border: 0;
background: transparent; background: transparent;
} }
.dp-prev {
left: 24px;
}
.dp-next {
right: 24px;
}
.dp-next:focus, .dp-next:focus,
.dp-prev:focus, .dp-prev:focus,
.dp-next:hover, .dp-next:hover,
@ -111,15 +135,10 @@
outline: none; outline: none;
color: inherit; color: inherit;
} }
.dp-prev {
left: 24px; .dp-prev::before,
} .dp-next::before {
.dp-next { content: '';
right: 24px;
}
.dp-prev:before,
.dp-next:before {
content: "";
border: 2px solid; border: 2px solid;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -128,16 +147,19 @@
transition: border-color 0.2s; transition: border-color 0.2s;
margin: 9px 0 40px 4px; margin: 9px 0 40px 4px;
} }
.dp-prev:before {
.dp-prev::before {
border-right: 0; border-right: 0;
border-bottom: 0; border-bottom: 0;
} }
.dp-next:before {
.dp-next::before {
border-left: 0; border-left: 0;
border-top: 0; border-top: 0;
margin-left: 0; margin-left: 0;
margin-right: 4px; margin-right: 4px;
} }
.dp-cal-month, .dp-cal-month,
.dp-cal-year { .dp-cal-year {
display: inline-block; display: inline-block;
@ -145,12 +167,14 @@
padding: 16px 8px 8px; padding: 16px 8px 8px;
outline: none; outline: none;
} }
.dp-cal-footer { .dp-cal-footer {
text-align: center; text-align: center;
background: color.adjust($primary, $lightness: -10%); background: color.adjust($primary, $lightness: -10%);
} }
.dp-day-today:after {
content: ""; .dp-day-today::after {
content: '';
height: 0; height: 0;
width: 0; width: 0;
border: 7px solid $highlight; border: 7px solid $highlight;
@ -160,6 +184,7 @@
top: 0; top: 0;
right: 0; right: 0;
} }
.dp-close, .dp-close,
.dp-clear, .dp-clear,
.dp-today { .dp-today {
@ -172,10 +197,12 @@
border: 0; border: 0;
background: transparent; background: transparent;
} }
.dp-permanent .dp-close, .dp-permanent .dp-close,
.dp-permanent .dp-clear { .dp-permanent .dp-clear {
display: none; display: none;
} }
.dp-close:active, .dp-close:active,
.dp-clear:active, .dp-clear:active,
.dp-today:active, .dp-today:active,
@ -208,11 +235,12 @@
.dp-col-header, .dp-col-header,
.dp-day { .dp-day {
width: 14.28571429%; width: 14.2857%;
display: inline-block; display: inline-block;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
} }
.dp-col-header { .dp-col-header {
color: #aaa; color: #aaa;
text-transform: uppercase; text-transform: uppercase;
@ -220,24 +248,28 @@
font-size: 0.8em; font-size: 0.8em;
padding: 8px 0; padding: 8px 0;
} }
.dp-month { .dp-month {
width: 33%; width: 33%;
display: inline-block; display: inline-block;
padding: 8px; padding: 8px;
} }
.dp-year { .dp-year {
display: block; display: block;
padding: 8px 40px; padding: 8px 40px;
width: 100%; width: 100%;
} }
.dp-edge-day { .dp-edge-day {
color: #aaa; color: #aaa;
} }
.dp-current,
.dp-day:hover, .dp-day:hover,
.dp-month:hover, .dp-month:hover,
.dp-year:hover, .dp-year:hover,
.dp-current:focus, .dp-current:focus,
.dp-current,
.dp-day:focus, .dp-day:focus,
.dp-month:focus, .dp-month:focus,
.dp-year:focus { .dp-year:focus {
@ -245,26 +277,31 @@
background: color.adjust($primary, $lightness: -40%); background: color.adjust($primary, $lightness: -40%);
color: $white; color: $white;
} }
.dp-selected:hover, .dp-selected:hover,
.dp-selected:focus, .dp-selected:focus,
.dp-selected { .dp-selected {
background: $highlight; background: $highlight;
color: color.adjust($primary, $lightness: -60%); color: color.adjust($primary, $lightness: -60%);
} }
.dp-day-disabled { .dp-day-disabled {
background: transparent; background: transparent;
color: #ddd; color: #ddd;
} }
.dp-day-disabled:focus, .dp-day-disabled:focus,
.dp-day-disabled:hover { .dp-day-disabled:hover {
background: #ddd; background: #ddd;
} }
.dp-focuser { .dp-focuser {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
top: 50%; top: 50%;
left: 50%; left: 50%;
} }
// Responsive // Responsive
@media (max-width: 480px), (max-height: 480px) { @media (max-width: 480px), (max-height: 480px) {
.dp-modal .dp { .dp-modal .dp {
@ -272,6 +309,7 @@
width: auto; width: auto;
width: 100%; width: 100%;
} }
.dp-day-of-week, .dp-day-of-week,
.dp-day { .dp-day {
padding: 8px; padding: 8px;
@ -282,6 +320,7 @@
0% { 0% {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
} }
100% { 100% {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

15
src/styles/main/_colors.scss
View file

@ -7,11 +7,10 @@ $grey: #abb7b7;
$black: #32302f; $black: #32302f;
// editor colors // editor colors
$eventCool: #32cd32; $event-cool: #32cd32;
$eventLame: #f64747; $event-lame: #f64747;
$editor-primary: #fde3a7;
$editorPrimary: #fde3a7; $editor-secondary: #e7903c;
$editorSecondary: #e7903c; $editor-tertiary: #6bb9f0;
$editorTertiary: #6bb9f0; $editor-string: #dcc6e0;
$editorString: #dcc6e0; $editor-tag: #e73c4e;
$editorTag: #e73c4e;

50
src/styles/main/_editor-highlight.scss
View file

@ -1,9 +1,9 @@
code[class*="language-"], code[class*='language-'],
pre[class*="language-"] { pre[class*='language-'] {
color: $editorPrimary; color: $editor-primary;
background: none; background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3); text-shadow: 0 1px rgba(#000, 0.3);
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
@ -11,68 +11,76 @@ pre[class*="language-"] {
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
line-height: 1.5; line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4; tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; hyphens: none;
} }
pre[class*="language-"] {
pre[class*='language-'] {
// padding: 1em // padding: 1em
margin: 0.1em 0; margin: 0.1em 0;
overflow: auto; overflow: auto;
border-radius: 0.3em; border-radius: 0.3em;
} }
:not(pre) > code[class*="language-"],
pre[class*="language-"] { :not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: $primary; background: $primary;
} }
:not(pre) { :not(pre) {
& > code[class*="language-"] { & > code[class*='language-'] {
padding: 0.1em; padding: 0.1em;
border-radius: 0.3em; border-radius: 0.3em;
white-space: normal; white-space: normal;
} }
} }
.token.comment, .token.comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: #8292a2; color: #8292a2;
} }
.token { .token {
&.punctuation { &.punctuation {
color: $editorSecondary; color: $editor-secondary;
} }
&.namespace { &.namespace {
opacity: 0.6; opacity: 0.6;
} }
&.keyword { &.keyword {
color: #66d9ef; color: #66d9ef;
} }
&.italic { &.italic {
font-style: italic; font-style: italic;
} }
&.entity { &.entity {
cursor: help; cursor: help;
} }
&.content { &.content {
color: $editorTertiary; color: $editor-tertiary;
} }
} }
.token.property, .token.property,
.token.tag, .token.tag,
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: $editorTag; color: $editor-tag;
} }
.token.boolean, .token.boolean,
.token.number { .token.number {
color: #ae81ff; color: #ae81ff;
} }
.token.selector, .token.selector,
.token.attr-name, .token.attr-name,
.token.string, .token.string,
@ -81,24 +89,28 @@ pre[class*="language-"] {
.token.inserted { .token.inserted {
color: #a6e22e; color: #a6e22e;
} }
.token.operator, .token.operator,
.token.entity, .token.entity,
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string, .style .token.string,
.token.variable { .token.variable {
color: $editorString; color: $editor-string;
} }
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.function, .token.function,
.token.class-name { .token.class-name {
color: #e6db74; color: #e6db74;
} }
.token.regex, .token.regex,
.token.important { .token.important {
color: $editorSecondary; color: $editor-secondary;
} }
.token.important, .token.important,
.token.bold { .token.bold {
font-weight: bold; font-weight: bold;

40
src/styles/main/_editor.scss
View file

@ -7,12 +7,6 @@
margin-top: 30px; margin-top: 30px;
z-index: 2000; z-index: 2000;
button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
button:nth-child(10) {
border-radius: 0 3px 3px 0;
}
button { button {
background: $secondary; background: $secondary;
width: 10%; width: 10%;
@ -24,40 +18,55 @@
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
} }
button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
button:nth-child(10) {
border-radius: 0 3px 3px 0;
}
button:hover { button:hover {
background: color.adjust($secondary, $lightness: -20%); background: color.adjust($secondary, $lightness: -20%);
} }
#option-update { #option-update {
padding: 5px 5px 1px 5px; padding: 5px 5px 1px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
} }
.icon-hide { .icon-hide {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.submit-start { .submit-start {
background: $white; background: $white;
svg { svg {
fill: $eventCool; fill: $event-cool;
} }
} }
.submit-cool { .submit-cool {
background: $eventCool; background: $event-cool;
svg { svg {
fill: $white; fill: $white;
} }
} }
.submit-delete { .submit-delete {
background: $eventLame !important; background: $event-lame !important;
svg { svg {
fill: $white !important; fill: $white !important;
} }
} }
#option-date { #option-date {
height: 30px; height: 30px;
padding-top: 6px; padding-top: 6px;
@ -69,29 +78,36 @@
fill: $white; fill: $white;
} }
} }
.content-editor-btn-icon { .content-editor-btn-icon {
padding: 5px 5px 1px 5px; padding: 5px 5px 1px;
// border-radius 20px // border-radius 20px
color: $primary; color: $primary;
svg { svg.edit-btn-icon {
fill: $primary; fill: $primary;
} }
} }
.content-editor-btn-text { .content-editor-btn-text {
padding: 5px; padding: 5px;
// border-radius 20px // border-radius 20px
color: $primary; color: $primary;
} }
#option-bold { #option-bold {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
#option-italic { #option-italic {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-style: italic; font-style: italic;
} }
#option-strikethrough { #option-strikethrough {
font-weight: bold; font-weight: bold;
text-decoration: line-through; text-decoration: line-through;

5
src/styles/main/_error.scss
View file

@ -6,19 +6,22 @@
height: 100%; height: 100%;
z-index: 10; z-index: 10;
position: relative; position: relative;
label#title { label#title {
font-size: 100px; font-size: 100px;
color: $highlight; color: $highlight;
font-weight: 500; font-weight: 500;
} }
label#message { label#message {
font-size: 50px; font-size: 50px;
color: $tertiary; color: $tertiary;
font-weight: 500; font-weight: 500;
} }
label#error { label#error {
font-size: 25px; font-size: 25px;
color: $eventLame; color: $event-lame;
font-weight: 500; font-weight: 500;
} }
} }

16
src/styles/main/_forms.scss
View file

@ -19,7 +19,7 @@ input[type="text"] {
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
font: 18px $baseType; font: 18px $basetype;
display: inline-block; display: inline-block;
background: $primary; background: $primary;
color: $tertiary; color: $tertiary;
@ -28,14 +28,14 @@ textarea {
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
color: $white; color: $white;
font: 15px $baseType; font: 15px $basetype;
background: $primary; background: $primary;
} }
button, button,
input[type="submit"] { input[type="submit"] {
background: $highlight; background: $highlight;
color: $primary; color: $primary;
font: 20px $baseType; font: 20px $basetype;
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -44,7 +44,7 @@ input[type="submit"] {
transition: all 0.3s linear; transition: all 0.3s linear;
} }
select { select {
font: 14px $baseType; font: 14px $basetype;
border: 1px solid $secondary; border: 1px solid $secondary;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -52,20 +52,20 @@ select {
color: $primary; color: $primary;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
font: 25px $baseType; font: 25px $basetype;
color: $white; color: $white;
} }
:-moz-placeholder { :-moz-placeholder {
/* Firefox 18- */ /* Firefox 18- */
font: 25px $baseType; font: 25px $basetype;
color: $white; color: $white;
} }
::-moz-placeholder { ::-moz-placeholder {
/* Firefox 19+ */ /* Firefox 19+ */
font: 15px $baseType; font: 15px $basetype;
color: $white; color: $white;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
font: 25px $baseType; font: 25px $basetype;
color: $white; color: $white;
} }

73
src/styles/main/_index.scss
View file

@ -29,23 +29,28 @@
width: 300px; width: 300px;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
#the-logo { #the-logo {
width: 40px; width: 40px;
margin: 20px; margin: 20px;
} }
input { input {
width: 290px; width: 290px;
margin: 0 0 10px 0; margin: 0 0 10px;
height: 30px; height: 30px;
} }
button { button {
width: 300px; width: 300px;
} }
div { div {
background: $primary; background: $primary;
color: $white; color: $white;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
label { label {
display: block; display: block;
padding: 5px; padding: 5px;
@ -54,10 +59,12 @@
} }
} }
} }
.dash-restore { .dash-restore {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
#dash-login { #dash-login {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -74,20 +81,24 @@
border-radius: 5px; border-radius: 5px;
color: $white; color: $white;
text-align: center; text-align: center;
#the-logo { #the-logo {
width: 40px; width: 40px;
margin: 20px; margin: 20px;
} }
input { input {
width: 290px; width: 290px;
margin: 0 0 10px 0; margin: 0 0 10px;
height: 30px; height: 30px;
} }
button { button {
width: 300px; width: 300px;
} }
} }
} }
#dash-menu { #dash-menu {
padding: 10px; padding: 10px;
width: 90%; width: 90%;
@ -107,11 +118,13 @@
&:hover { &:hover {
background: color.adjust($primary, $lightness: -60%); background: color.adjust($primary, $lightness: -60%);
} }
svg { svg {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
fill: $white; fill: $white;
} }
label { label {
display: inline-block; display: inline-block;
margin-top: 5px; margin-top: 5px;
@ -121,11 +134,12 @@
} }
} }
} }
#dash-recent { #dash-recent {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
height: 100%; height: 100%;
padding: 5px 0 0 0; padding: 5px 0 0;
margin: 0 auto; margin: 0 auto;
#recent-list { #recent-list {
@ -135,6 +149,7 @@
.recent-header { .recent-header {
height: 50px; height: 50px;
margin-top: 5px; margin-top: 5px;
.index-header-left { .index-header-left {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
@ -142,6 +157,7 @@
color: $white; color: $white;
font-size: 3em; font-size: 3em;
} }
.index-header-right { .index-header-right {
width: 50%; width: 50%;
text-align: right; text-align: right;
@ -149,10 +165,12 @@
display: inline-block; display: inline-block;
right: 10px; right: 10px;
color: $white; color: $white;
a { a {
button { button {
border-radius: 3px; border-radius: 3px;
margin-left: 10px; margin-left: 10px;
svg { svg {
transition: all 0.2s linear; transition: all 0.2s linear;
width: 40px; width: 40px;
@ -163,6 +181,7 @@
} }
} }
} }
a.post-link, a.post-link,
a.post-video-link { a.post-video-link {
font-size: 1.5em; font-size: 1.5em;
@ -173,12 +192,14 @@
text-decoration: none; text-decoration: none;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.post-video { .post-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
position: absolute; position: absolute;
} }
label { label {
font-size: 1.4em; font-size: 1.4em;
font-weight: 700; font-weight: 700;
@ -193,6 +214,7 @@
top: 35%; top: 35%;
text-shadow: 2px 2px 0 rgba($black, 1); text-shadow: 2px 2px 0 rgba($black, 1);
} }
div#options { div#options {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -200,8 +222,8 @@
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0) 0%, rgba(#000, 0) 0%,
rgba(0, 0, 0, 0.65) 100% rgba(#000, 0.65) 100%
); );
#option-left { #option-left {
@ -210,10 +232,12 @@
width: 50%; width: 50%;
position: relative; position: relative;
background: none; background: none;
button { button {
border-radius: 3px; border-radius: 3px;
background: $primary; background: $primary;
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
svg { svg {
// @include object-transitions(0.1s) // @include object-transitions(0.1s)
width: 40px; width: 40px;
@ -221,28 +245,35 @@
fill: $secondary; fill: $secondary;
} }
} }
.item-options { .item-options {
border-radius: 3px; border-radius: 3px;
margin: 5px; margin: 5px;
display: inline-block; display: inline-block;
} }
button[data-active="false"] {
button[data-active='false'] {
background: $primary; background: $primary;
svg { svg {
fill: $secondary; fill: $secondary;
} }
} }
button[data-active="true"] {
button[data-active='true'] {
background: $tertiary; background: $tertiary;
svg { svg {
fill: $primary; fill: $primary;
} }
} }
} }
#option-right { #option-right {
display: inline-block; display: inline-block;
width: 50%; width: 50%;
text-align: right; text-align: right;
span { span {
font-weight: bold; font-weight: bold;
display: block; display: block;
@ -260,24 +291,26 @@
} }
} }
} }
a:nth-child(3) {
a.dash-link:nth-child(3) {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
height: 500px; height: 500px;
} }
a:nth-child(4),
a:nth-child(6) { a.dash-link:nth-child(4),
a.dash-link:nth-child(6) {
width: 48.6%; width: 48.6%;
height: 350px; height: 350px;
margin: 0 10px 20px 0; margin: 0 10px 20px 0;
} }
a:nth-child(5),
a:nth-child(7) { a.dash-link:nth-child(5),
a.dash-link:nth-child(7) {
width: 48.6%; width: 48.6%;
height: 350px; height: 350px;
margin: 0 0 20px 10px; margin: 0 0 20px 10px;
} }
//Reponsive
} }
} }
} }
@ -325,17 +358,19 @@
h3 { h3 {
width: 40%; width: 40%;
} }
.index-menu { .index-menu {
width: 60%; width: 60%;
} }
} }
a:nth-child(3),
a:nth-child(4), a.dash-link:nth-child(3),
a:nth-child(5), a.dash-link:nth-child(4),
a:nth-child(6), a.dash-link:nth-child(5),
a:nth-child(7) { a.dash-link:nth-child(6),
a.dash-link:nth-child(7) {
width: 100%; width: 100%;
margin: 15px 0 0 0; margin: 15px 0 0;
height: 400px; height: 400px;
} }
} }

13
src/styles/main/_navigation.scss
View file

@ -13,15 +13,17 @@
color: $highlight; color: $highlight;
height: 30px; height: 30px;
padding: 10px; padding: 10px;
margin: 0 0 10px 0; margin: 0 0 10px;
font-size: 1.5em; font-size: 1.5em;
cursor: move; cursor: move;
#item-arrows { #item-arrows {
fill: $primary; fill: $primary;
width: 40px; width: 40px;
height: 30px; height: 30px;
} }
} }
label { label {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -29,15 +31,18 @@
margin: -15px 0 0 10px; margin: -15px 0 0 10px;
cursor: move; cursor: move;
} }
#nav-btns { #nav-btns {
float: right; float: right;
top: -5px; top: -5px;
position: relative; position: relative;
button { button {
color: $white; color: $white;
border-radius: 3px; border-radius: 3px;
width: 40px; width: 40px;
margin: 0 10px 0 10px; margin: 0 10px;
svg { svg {
fill: $white; fill: $white;
width: 25px; width: 25px;
@ -59,7 +64,7 @@
label { label {
width: 40%; width: 40%;
vertical-align: top; vertical-align: top;
margin-top: 0px; margin-top: 0;
line-height: 1em; line-height: 1em;
} }
} }
@ -78,7 +83,7 @@
label { label {
width: 37%; width: 37%;
vertical-align: top; vertical-align: top;
margin-top: 0px; margin-top: 0;
line-height: 1em; line-height: 1em;
} }
} }

371
src/styles/main/_normalize.scss
View file

@ -1,202 +1,351 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html { html {
line-height: 1.15; line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; // -webkit-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%;
} }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body { body {
margin: 0; margin: 0;
} }
article,
aside, /**
footer, * Render the `main` element consistently in IE.
header, */
nav,
section {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
line-height: 1em;
}
figcaption,
figure,
main { main {
display: block; display: block;
} }
figure {
margin: 1em 40px; /**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
} }
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr { hr {
box-sizing: content-box; box-sizing: content-box; /* 1 */
height: 0; height: 0; /* 1 */
overflow: visible; overflow: visible; /* 2 */
} }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre { pre {
font-family: monospace, monospace; font-family: monospace; /* 1 */
font-size: 1em; font-size: 1em; /* 2 */
} }
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a { a {
background-color: transparent; background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
} }
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] { abbr[title] {
border-bottom: none; border-bottom: none; /* 1 */
text-decoration: underline; text-decoration: underline; /* 2 */
text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */
} }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b, b,
strong { strong {
font-weight: inherit;
font-weight: bolder; font-weight: bolder;
} }
//code,
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd, kbd,
samp { samp {
font-family: monospace, monospace; font-family: monospace; /* 1 */
font-size: 1em; font-size: 1em; /* 2 */
}
dfn {
font-style: italic;
}
mark {
background-color: #ff0;
color: #000;
} }
/**
* Add the correct font size in all browsers.
*/
small { small {
font-size: 80%; font-size: 80%;
} }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub, sub,
sup { sup {
font-size: 60%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.55em; top: -0.5em;
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;
}
} }
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img { img {
border-style: none; border-style: none;
} }
svg {
&:not(:root) { /* Forms
overflow: hidden; ========================================================================== */
}
} /**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: sans-serif; font-family: inherit; /* 1 */
font-size: 100%; font-size: 100%; /* 1 */
line-height: 1.15; line-height: 1.15; /* 1 */
margin: 0; margin: 0; /* 2 */
} }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button, button,
input { input {
/* 1 */
overflow: visible; overflow: visible;
} }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button, button,
select { select {
/* 1 */
text-transform: none; text-transform: none;
} }
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button, button,
html [type="button"], [type='button'],
[type="reset"], [type='reset'],
[type="submit"] { [type='submit'] {
-webkit-appearance: button; // -webkit-appearance: button;
} }
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, /**
[type="submit"]::-moz-focus-inner, * Remove the inner border and padding in Firefox.
button::-moz-focus-inner { */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, /**
[type="submit"]:-moz-focusring, * Restore the focus styles unset by the previous rule.
button:-moz-focusring { */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
/**
* Correct the padding in Firefox.
*/
fieldset { fieldset {
border: 1px solid #c0c0c0; padding: 0.35em 0.75em 0.625em;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend { legend {
box-sizing: border-box; box-sizing: border-box; /* 1 */
color: inherit; color: inherit; /* 2 */
display: table; display: table; /* 1 */
max-width: 100%; max-width: 100%; /* 1 */
padding: 0; padding: 0; /* 3 */
white-space: normal; white-space: normal; /* 1 */
} }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress { progress {
display: inline-block;
vertical-align: baseline; vertical-align: baseline;
} }
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea { textarea {
overflow: auto; overflow: auto;
} }
[type="checkbox"],
[type="radio"] { /**
box-sizing: border-box; * 1. Add the correct box sizing in IE 10.
padding: 0; * 2. Remove the padding in IE 10.
*/
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
} }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { /**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
[type="search"] {
-webkit-appearance: textfield; /**
outline-offset: -2px; * 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type='search'] {
// -webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
} }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { /**
-webkit-appearance: none; * Remove the inner padding in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-decoration {
// -webkit-appearance: none;
} }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; // -webkit-appearance: button; /* 1 */
font: inherit; font: inherit; /* 2 */
} }
details,
menu { /* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block; display: block;
} }
/*
* Add the correct display in all browsers.
*/
summary { summary {
display: list-item; display: list-item;
} }
canvas {
display: inline-block; /* Misc
} ========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template { template {
display: none; display: none;
} }
/**
* Add the correct display in IE 10.
*/
[hidden] { [hidden] {
display: none; display: none;
} }

164
src/styles/main/_posts.scss
View file

@ -2,11 +2,14 @@
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
#post-index-wrapper { #post-index-wrapper {
// padding: 0.75rem // padding: 0.75rem
overflow: hidden; overflow: hidden;
#post-index-header { #post-index-header {
margin: 10px 0 0 0; margin: 10px 0 0;
#post-index-header-left { #post-index-header-left {
text-transform: capitalize; text-transform: capitalize;
display: inline-block; display: inline-block;
@ -14,10 +17,12 @@
color: $white; color: $white;
font-size: 3em; font-size: 3em;
} }
#post-index-header-right { #post-index-header-right {
text-align: right; text-align: right;
display: inline-block; display: inline-block;
width: 50%; width: 50%;
a { a {
button { button {
color: $white; color: $white;
@ -25,6 +30,7 @@
margin-left: 10px; margin-left: 10px;
width: 55px; width: 55px;
} }
svg { svg {
transition: all 0.1s linear; transition: all 0.1s linear;
width: 20px; width: 20px;
@ -32,14 +38,16 @@
fill: $white; fill: $white;
} }
} }
.current-filter { .current-filter {
color: $highlight; color: $highlight;
text-decoration-color: $secondary; text-decoration-color: $secondary;
} }
} }
} }
#posts-list { #posts-list {
margin: 20px 0 0 0; margin: 20px 0 0;
a.page-link { a.page-link {
background: $white; background: $white;
@ -47,7 +55,7 @@
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
margin: 0 0 20px 0; margin: 0 0 20px;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
color: color.adjust($primary, $lightness: -60%); color: color.adjust($primary, $lightness: -60%);
@ -60,16 +68,19 @@
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
} }
div.page-bg, div.page-bg,
div.page-video { div.page-video {
video { video {
width: 100%; width: 100%;
position: absolute; position: absolute;
} }
width: 100%; width: 100%;
height: 350px; height: 350px;
background-color: $highlight; background-color: $highlight;
position: relative; position: relative;
label { label {
font-size: 2em; font-size: 2em;
font-weight: 700; font-weight: 700;
@ -84,61 +95,73 @@
top: 35%; top: 35%;
text-shadow: 2px 2px 0 rgba($black, 1); text-shadow: 2px 2px 0 rgba($black, 1);
} }
#meta { #meta {
width: 100%; width: 100%;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0) 0%, rgba(#000, 0%) 0%,
rgba(0, 0, 0, 0.65) 100% rgba(#000, 0.65%) 100%
); );
border-radius: 3px; border-radius: 3px;
margin: auto; margin: auto;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
padding: 0 0 20px 0; padding: 0 0 20px;
#options { #options {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
#option-left { #option-left {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 50%; width: 50%;
position: relative; position: relative;
background: none; background: none;
button { button {
border-radius: 3px; border-radius: 3px;
background: $primary; background: $primary;
margin: 0 0 10px 10px; margin: 0 0 10px 10px;
} }
svg { svg {
transition: all 0.2s linear; transition: all 0.2s linear;
width: 40px; width: 40px;
height: 20px; height: 20px;
fill: $secondary; fill: $secondary;
} }
.item-options { .item-options {
border-radius: 3px; border-radius: 3px;
margin: 5px; margin: 5px;
display: inline-block; display: inline-block;
} }
button[data-active="false"] {
button[data-active='false'] {
background: $primary; background: $primary;
svg { svg {
fill: $secondary; fill: $secondary;
} }
} }
button[data-active="true"] {
button[data-active='true'] {
background: $tertiary; background: $tertiary;
svg { svg {
fill: $primary; fill: $primary;
} }
} }
} }
#option-right { #option-right {
display: inline-block; display: inline-block;
width: 50%; width: 50%;
text-align: right; text-align: right;
span { span {
font-weight: bold; font-weight: bold;
display: block; display: block;
@ -157,21 +180,25 @@
} }
} }
} }
p { p {
padding: 5px 10px 5px 10px; padding: 5px 10px;
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
} }
} }
} }
.paginate { .paginate {
width: 260px; width: 260px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
a {
a.paginate-link {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
span.count { span.count {
text-align: center; text-align: center;
padding: 5px; padding: 5px;
@ -184,44 +211,51 @@
} }
} }
} }
#post-edit-index { #post-edit-index {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
#post-edit-index-wrapper { #post-edit-index-wrapper {
width: 100%; width: 100%;
#post-header { #post-header {
// width 100% // width 100%
background: $highlight; background: $highlight;
#post-header-wrapper { #post-header-wrapper {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0.75rem; padding: 0.75rem;
label { label {
color: $white; color: $white;
font-size: 0.9em; font-size: 0.9em;
font-family: $baseType; font-family: $basetype;
font-weight: 600; font-weight: 600;
} }
span {
span#post-span {
color: $primary; color: $primary;
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
float: right; float: right;
} }
#post-title { #post-title {
#post_title { #post-title-text {
background: $white; background: $white;
font-family: $baseType; font-family: $basetype;
width: 97.6%; width: 97.6%;
height: 80px; height: 80px;
font-size: 2em; font-size: 2em;
color: $primary; color: $primary;
padding: 5px; padding: 5px;
margin: 0 0 5px 0; margin: 0 0 5px;
} }
#calendar-icon { #calendar-icon {
background: color.adjust($primary, $lightness: -15%); background: color.adjust($primary, $lightness: -15%);
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
@ -229,13 +263,14 @@
padding: 5.2px; padding: 5.2px;
color: $secondary; color: $secondary;
} }
#layouts { #layouts {
select { select {
background: $primary; background: $primary;
color: $secondary; color: $secondary;
border-radius: 3px; border-radius: 3px;
border-color: $primary; border-color: $primary;
margin: 0 0 10px 0; margin: 0 0 10px;
width: 100%; width: 100%;
height: 45px; height: 45px;
padding: 5px; padding: 5px;
@ -243,35 +278,40 @@
} }
} }
} }
#post-meta { #post-meta {
#post_tags { #post-tags {
background: $white; background: $white;
font-family: $baseType; font-family: $basetype;
width: 97.6%; width: 97.6%;
height: 80px; height: 80px;
color: $primary; color: $primary;
padding: 5px; padding: 5px;
margin: 0 0 5px 0; margin: 0 0 5px;
} }
#post-options { #post-options {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0 0 10px 0; margin: 0 0 10px;
button:nth-child(1) { button.option-button:nth-child(1) {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
button:nth-child(4) {
button.option-button:nth-child(4) {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
a { a {
button { button.button-link {
border-radius: 0 3px 3px 0 !important; border-radius: 0 3px 3px 0 !important;
} }
} }
button {
button.option-btn {
width: 25%; width: 25%;
height: 45px; height: 45px;
transition: all 0.3s linear; transition: all 0.3s linear;
@ -281,19 +321,24 @@
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
} }
button[data-active="false"] {
button.btn-active[data-active='false'] {
background: $primary; background: $primary;
svg {
svg.svg-toggle {
fill: $secondary; fill: $secondary;
} }
} }
button[data-active="true"] {
button.btn-active[data-active='true'] {
background: $tertiary; background: $tertiary;
svg {
svg.svg-toggle {
fill: $primary; fill: $primary;
} }
} }
} }
#page-files-upload, #page-files-upload,
#post-image-upload { #post-image-upload {
display: none; display: none;
@ -301,6 +346,7 @@
} }
} }
} }
#post-feature { #post-feature {
width: 100%; width: 100%;
@ -308,14 +354,16 @@
background: $tertiary; background: $tertiary;
width: 100%; width: 100%;
min-height: 300px; min-height: 300px;
#page-file-wrapper { #page-file-wrapper {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
padding: 10px; padding: 10px;
margin: 0 auto; margin: 0 auto;
font-weight: bold; font-weight: bold;
font-color: $primary; color: $primary;
font-size: 1em; font-size: 1em;
#page-file-drop { #page-file-drop {
display: flex; display: flex;
align-items: center; align-items: center;
@ -326,22 +374,25 @@
color: $primary; color: $primary;
vertical-align: middle; vertical-align: middle;
border-radius: 5px; border-radius: 5px;
margin: 0 0 10px 0; margin: 0 0 10px;
label { label {
cursor: pointer; cursor: pointer;
font-weight: 600px; font-weight: 600px;
text-transform: capitalize; text-transform: capitalize;
} }
img { img {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
} }
#page-images-list, #page-images-list,
#page-files-list { #page-files-list {
padding: 10px 0 0 0; padding: 10px 0 0;
.img-item { .img-item {
height: 150px; height: 150px;
width: 23.8%; width: 23.8%;
@ -350,6 +401,7 @@
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.audio-item { .audio-item {
height: 150px; height: 150px;
width: 23.8%; width: 23.8%;
@ -358,9 +410,10 @@
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background: $primary; background: $primary;
background: url("/assets/images/global/upload-audio.png") background: url('/assets/images/global/upload-audio.png')
no-repeat center center / cover; no-repeat center center / cover;
} }
.video-item { .video-item {
height: 150px; height: 150px;
width: 23.8%; width: 23.8%;
@ -369,9 +422,10 @@
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background: $primary; background: $primary;
background: url("/assets/images/global/upload-video.png") background: url('/assets/images/global/upload-video.png')
no-repeat center center / cover; no-repeat center center / cover;
} }
.file-item { .file-item {
height: 150px; height: 150px;
width: 23.8%; width: 23.8%;
@ -380,13 +434,14 @@
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background: $primary; background: $primary;
background: url("/assets/images/global/upload-doc.png") no-repeat background: url('/assets/images/global/upload-doc.png')
center center / cover; no-repeat center center / cover;
} }
} }
} }
} }
} }
#edit-post { #edit-post {
width: 100%; width: 100%;
max-width: 880px; max-width: 880px;
@ -396,15 +451,13 @@
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
border-radius: 5px; border-radius: 5px;
//background $primary - 10%
//margin: 10px 0 50px 0
position: relative; position: relative;
//editor sometimes scrolls throwing it all out of wack
//turning of scrolling keeps it aligned
textarea:focus { textarea:focus {
outline: none; outline: none;
border-color: $highlight; border-color: $highlight;
} }
#edit, #edit,
#highlight { #highlight {
border: 0; border: 0;
@ -419,36 +472,41 @@
white-space: pre-wrap; white-space: pre-wrap;
line-break: normal; line-break: normal;
} }
#highlight-content { #highlight-content {
word-wrap: normal; word-wrap: normal;
white-space: pre-wrap; white-space: pre-wrap;
line-break: normal; line-break: normal;
} }
#edit, #edit,
#highlight, #highlight,
#hightlight * { #hightlight * {
font-size: 1.2em; font-size: 1.2em;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 22pt; line-height: 22pt;
} }
#edit { #edit {
z-index: 1; z-index: 1;
color: transparent; color: transparent;
background: transparent; background: transparent;
caret-color: $highlight; caret-color: $highlight;
} }
#highlight { #highlight {
z-index: 0; z-index: 0;
pre { pre {
margin: 0; margin: 0;
code { code {
font-family: $monoType; font-family: $monotype;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
line-height: 1.6em; line-height: 1.6em;
font-size: 1.25em; font-size: 1.25em;
color: $editorPrimary; color: $editor-primary;
word-wrap: normal; word-wrap: normal;
white-space: pre-wrap; white-space: pre-wrap;
line-break: normal; line-break: normal;
@ -461,7 +519,6 @@
min-height: 200px; min-height: 200px;
caret-color: $highlight; caret-color: $highlight;
} }
//Responsive
} }
} }
} }
@ -490,6 +547,7 @@
width: 43.1%; width: 43.1%;
} }
} }
#post-meta { #post-meta {
#edit-control { #edit-control {
max-width: 100%; max-width: 100%;
@ -524,11 +582,13 @@
font-size: 1.35em; font-size: 1.35em;
width: 30%; width: 30%;
} }
#post-index-header-right { #post-index-header-right {
width: 70%; width: 70%;
vertical-align: top; vertical-align: top;
} }
} }
#post-index-menu { #post-index-menu {
a { a {
font-size: 0.95em; font-size: 0.95em;
@ -541,19 +601,22 @@
} }
} }
} }
#post-edit-index { #post-edit-index {
#post-edit-index-wrapper { #post-edit-index-wrapper {
#post-header { #post-header {
#post-title { #post-title {
#post-options { #post-options {
margin: 5px 0 0 0; margin: 5px 0 0;
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
#post-date { #post-date {
width: 89.2%; width: 89.2%;
} }
} }
#post-meta { #post-meta {
#edit-control { #edit-control {
button { button {
@ -580,37 +643,44 @@
} }
} }
} }
#post-edit-index { #post-edit-index {
#post-edit-index-wrapper { #post-edit-index-wrapper {
#post-header { #post-header {
#post-title { #post-title {
#post_title { #post-title-text {
width: 96.4%; width: 96.4%;
} }
#post-options { #post-options {
margin: 5px 0 0 0; margin: 5px 0 0;
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
#post-date { #post-date {
width: 83.1%; width: 83.1%;
} }
} }
#post-meta { #post-meta {
#post_tags { #post-tags {
width: 96.4%; width: 96.4%;
} }
#edit-control { #edit-control {
.content-editor-btn-icon { .content-editor-btn-icon {
svg.icons { svg.icons {
width: 20px; width: 20px;
} }
} }
.post-sumbit-btn { .post-sumbit-btn {
svg.icons { svg.icons {
width: 20px; width: 20px;
} }
} }
button { button {
width: 10%; width: 10%;
} }

223
src/styles/main/_settings.scss
View file

@ -4,6 +4,7 @@
margin-top: -85px; margin-top: -85px;
left: 50%; left: 50%;
margin-left: -20%; margin-left: -20%;
#buttons { #buttons {
width: 185px; width: 185px;
margin: 28px auto; margin: 28px auto;
@ -11,36 +12,44 @@
background: $white; background: $white;
padding: 2px; padding: 2px;
border-radius: 3px; border-radius: 3px;
button { button {
color: $white; color: $white;
border-radius: 3px; border-radius: 3px;
width: 40px; width: 40px;
margin: 0 10px 0 10px; margin: 0 10px;
svg { svg {
width: 25px; width: 25px;
height: 20px; height: 20px;
fill: $white; fill: $white;
} }
} }
button[data-render="false"] {
button[data-render='false'] {
background: $secondary; background: $secondary;
svg { svg {
fill: $primary; fill: $primary;
} }
} }
button[data-render="true"] {
button[data-render='true'] {
background: $highlight; background: $highlight;
svg { svg {
fill: $white; fill: $white;
} }
} }
} }
} }
#settings-index { #settings-index {
width: 94%; width: 94%;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
#settings-index-wrapper { #settings-index-wrapper {
padding: 0; padding: 0;
@ -49,49 +58,55 @@
width: 100%; width: 100%;
height: 33px; height: 33px;
} }
#member-settings, #member-settings,
#feature-settings, #feature-settings,
#option-settings, #option-settings,
#token-settings, #token-settings,
#backup-settings { #backup-settings {
background: $white; background: $white;
padding: 0px; padding: 0;
border-radius: 5px 0 5px 0; border-radius: 5px 0;
width: 100%; width: 100%;
margin: 20px auto; margin: 20px auto;
label { label {
font-family: $baseType; font-family: $basetype;
color: $primary; color: $primary;
font-weight: bold; font-weight: bold;
} }
span { span {
color: $secondary; color: $secondary;
} }
input { input {
width: 95%; width: 95%;
margin: 0 5px 10px 0; margin: 0 5px 10px 0;
height: 30px; height: 30px;
padding: 10px; padding: 10px;
} }
input#backup-upload { input#backup-upload {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
.backup-meta { .backup-meta {
background: $primary; background: $primary;
color: $white; color: $white;
padding: 8px; padding: 8px;
border-radius: 3px; border-radius: 3px;
margin: 5px 0 0 0; margin: 5px 0 0;
text-align: center; text-align: center;
} }
#member-images { #member-images {
padding: 10px 15px 0 15px; padding: 10px 15px 0;
#member-avatar-drop { #member-avatar-drop {
display: inline-block; display: inline-block;
margin: 0 0 10px 0; margin: 0 0 10px;
img { img {
width: 100%; width: 100%;
@ -101,19 +116,23 @@
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px;
} }
input { input {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#privacy-toggle { #privacy-toggle {
width: 50%; width: 50%;
} }
#render-toggle { #render-toggle {
width: 50%; width: 50%;
} }
} }
#site-background { #site-background {
margin: 0 0 10px 0; margin: 0 0 10px;
img { img {
width: 92.1%; width: 92.1%;
@ -122,21 +141,102 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
input { input {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
} }
} }
#member-meta { #member-meta {
padding: 10px 15px 0 15px; padding: 10px 15px 0;
position: relative; position: relative;
top: -30px; top: -30px;
} }
#features { #features {
padding: 10px 15px 0 15px; padding: 10px 15px 0;
} }
} }
#mail-settings {
min-height: 240px;
/*
input {
margin: 0 5px 5px 0;
vertical-align: top;
}
*/
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;
}
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;
}
}
}
}
textarea { textarea {
background: $primary; background: $primary;
width: 70%; width: 70%;
@ -146,6 +246,7 @@
display: inline-block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
} }
span#key { span#key {
color: $white; color: $white;
background: $primary; background: $primary;
@ -156,6 +257,7 @@
width: 95%; width: 95%;
overflow: hidden; overflow: hidden;
} }
#feature-settings { #feature-settings {
#feature-api, #feature-api,
#dynamic-api { #dynamic-api {
@ -170,7 +272,8 @@
margin: 0; margin: 0;
height: 200px; height: 200px;
font-size: 1em; font-size: 1em;
svg {
svg.icons {
width: 100px; width: 100px;
height: 90px; height: 90px;
fill: $white; fill: $white;
@ -178,6 +281,7 @@
display: block; display: block;
margin: 12px auto; margin: 12px auto;
} }
span { span {
color: $white; color: $white;
margin: 6px 0 0 5px; margin: 6px 0 0 5px;
@ -187,26 +291,33 @@
font-weight: bold; font-weight: bold;
} }
} }
button[data-enabled="false"] {
button[data-enabled='false'] {
background: $secondary; background: $secondary;
svg { svg {
fill: $primary; fill: $primary;
} }
span { span {
color: $primary; color: $primary;
} }
} }
button[data-enabled="true"] {
button[data-enabled='true'] {
background: $highlight; background: $highlight;
svg { svg {
fill: $white; fill: $white;
} }
} }
} }
} }
#token-settings { #token-settings {
#keys-tokens { #keys-tokens {
padding: 10px 15px 0 15px; padding: 10px 15px 0;
#member-api-key, #member-api-key,
#form-token { #form-token {
background: $primary; background: $primary;
@ -216,6 +327,7 @@
} }
} }
} }
#option-settings { #option-settings {
#theme-settings { #theme-settings {
a { a {
@ -225,7 +337,8 @@
padding: 10px; padding: 10px;
display: inline-block; display: inline-block;
} }
a[data-enabled="false"] {
a[data-enabled='false'] {
background: $white; background: $white;
color: $primary; color: $primary;
border-radius: 3px; border-radius: 3px;
@ -233,95 +346,37 @@
border-top: 1px $highlight solid; border-top: 1px $highlight solid;
border-bottom: 1px $highlight solid; border-bottom: 1px $highlight solid;
} }
a[data-enabled="true"] {
a[data-enabled='true'] {
background: $highlight; background: $highlight;
color: $primary; color: $primary;
border-radius: 3px; border-radius: 3px;
font-weight: bold; font-weight: bold;
border-top: 1px $primary solid; border-top: 1px $primary solid;
border-bottom: 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 { svg {
fill: $primary; fill: $primary;
} display: inline-block;
} float: right;
button[data-enabled="true"] {
background: $highlight;
svg {
fill: $white;
}
// responsive
} }
} }
} }
} }
} }
} }
// Responsive for Settings
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
#settings-actions { #settings-actions {
margin-left: -42%; margin-left: -42%;
#buttons { #buttons {
width: 150px; width: 150px;
background: none; background: none;
button { button {
margin: 0 5px 0 5px; margin: 0 5px;
} }
} }
} }

4
src/styles/main/_structure.scss
View file

@ -7,12 +7,12 @@ body {
rgba(color.adjust($primary, $lightness: 10%), 1) 100% rgba(color.adjust($primary, $lightness: 10%), 1) 100%
) )
no-repeat; no-repeat;
font: 400 1em $baseType; font: 400 1em $basetype;
height: 100%; height: 100%;
} }
a { a {
font: 300 1em $baseType; font: 300 1em $basetype;
color: $secondary; color: $secondary;
text-decoration: underline; text-decoration: underline;
transition: all 0.2s linear; transition: all 0.2s linear;

7
src/styles/main/_typography.scss
View file

@ -1,19 +1,22 @@
$baseType: Helvetica, Arial, sans-serif; $basetype: helvetica, arial, sans-serif;
$monoType: "Lucida Console", Monaco, monospace; $monotype: 'Lucida Console', monaco, monospace;
h1, h1,
h2, h2,
h3 { h3 {
color: $white; color: $white;
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
font-weight: 400; font-weight: 400;
} }
h2 { h2 {
font-size: 1.75em; font-size: 1.75em;
font-weight: 400; font-weight: 400;
} }
h3 { h3 {
font-size: 1.5em; font-size: 1.5em;
font-weight: 300; font-weight: 300;