are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 Wiki Activity

ui overall part 2: dash index, pages index

Browse Source
pull/84/head
Ro 4 years ago
parent 8e3d359486
commit 033fe5e48b
11 changed files with 529 additions and 350 deletions
Show Stats Download Patch File Download Diff File

5
brain/views/dash/_frame.twig
Unescape Escape View File

@ -32,7 +32,6 @@
<div id="left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
</div>
<div id="right">
{% if status %}
{% apply spaceless %}
@ -44,8 +43,10 @@
</header>
{% endif %}
{% apply spaceless %}
{% block mainContent %}{% endblock %}
{% endapply %}
{% block mainContent %}{% endblock %}
</section>

109
brain/views/dash/book.twig
Unescape Escape View File

@ -11,49 +11,88 @@
{% block mainContent %}
<div id="post-index">
<div id="post-index-wrapper">
<div id="post-index-menu">
<a href="/dashboard/pages/all">All Pages ({{ stats['all'] }})</a>
.
<a href="/dashboard/pages/published">Published ({{ stats['published'] }})</a>
.
<a href="/dashboard/pages/deleted">Deleted ({{ stats['deleted'] }})</a>
<div id="post-index-header">
<div id="post-index-header-left">
{{ filter }} Pages
</div>
<div id="post-index-header-right">
<a href="/dashboard/pages/all" title="view all pages">
<button>
<svg >
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
</svg>
{{ stats['all'] }}
</button>
</a>
<a href="/dashboard/pages/published" title="view publised pages">
<button>
<svg >
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
{{ stats['published'] }}
</button>
</a>
<a href="/dashboard/pages/deleted" title="view deleted pages">
<button>
<svg >
<use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>
</svg>
{{ stats['deleted'] }}
</button>
</a>
</div>
</div>
<div id="posts-list">
{% for page in pages %}
<a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
<div class="page-bg" style="background: url({{ page.feature }}) no-repeat center center / cover">
<div id="meta">
<span>
{{ page.updated }}
</span>
<label>
{{ page.title }}
</label>
<label>
{{ page.title }}
</label>
<div id="meta">
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="options">
<span class="meta-options" data-active="{{ menu }}">
Menu Item</span>
<span class="meta-options" data-active="{{ published }}">
Published</span>
<span class="meta-options" data-active="{{ featured }}">
Featured</span>
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
{% set menu = "false" %}
{% endif %}
{% if page.published == 'true' %}
{% set published = "true" %}
{% else %}
{% set published = "false" %}
{% endif %}
{% if page.featured == 'true' %}
{% set featured = "true" %}
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="option-left">
<button data-active="{{ menu }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button data-active="{{ published }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ featured }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</div>
<div id="option-right">
<span>
{{ page.updated }}
</span>
</div>
</div>
<span>{{ page.prettyDate }}</span>
</div>
</div>

64
brain/views/dash/partials/index.twig
Unescape Escape View File

@ -1,22 +1,35 @@
<div id="dash-recent">
<div id="recent-list">
<div class="recent-header">
<h3>Recent</h3>
<div class="index-menu">
<a href='/dashboard/pages'>View Pages</a>
.
<a href='/dashboard/page/add/new'>Create Page</a>
<div class="index-header-left">
Recent
</div>
<div class="index-header-right">
<a href='/dashboard/pages' title="view pages">
<button>
<svg class="page-link">
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
</svg>
</button>
</a>
<a href='/dashboard/page/add/new' title="add new page">
<button>
<svg class="page-link">
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
</svg>
</button>
</a>
</div>
</div>
<br/>
{% if data["entryCount"] != 0 %}
{% for page in data['pages'] %}
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.feature }}) no-repeat center center / cover">
<div>
<label>
{{ page.title }}
</label>
<label>
{{ page.title }}
</label>
<div id="options">
{% if page.menu == 'true' %}
{% set menu = "true" %}
{% else %}
@ -32,15 +45,30 @@
{% else %}
{% set featured = "false" %}
{% endif %}
<div id="options">
<span class="item-options" data-active="{{ menu }}">
Menu Item</span>
<span class="item-options" data-active="{{ published }}">
Published</span>
<span class="item-options" data-active="{{ featured }}">
Featured</span>
<div id="option-left">
<button data-active="{{ menu }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button data-active="{{ published }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg>
</button>
<button data-active="{{ featured }}">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg>
</button>
</div>
<div id="option-right">
<span>
{{ page.updated }}
</span>
</div>
<span>{{ page.updated }}</span>
</div>
</a>

24
brain/views/dash/partials/navigation.twig
Unescape Escape View File

@ -1,5 +1,23 @@
<div id="dash-menu">
<a id="settings" href="/dashboard/settings" >Settings</a> .
<a id="navigation" href="/dashboard/navigation" >Navigation</a> .
<a id="navigation" href="/dashboard/logout" >Log Out</a>
<a id="settings" href="/dashboard/settings" title="settings">
<button>
<svg class="menu">
<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
</svg>
</button>
</a> .
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
<button>
<svg class="menu">
<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
</svg>
</button>
</a> .
<a id="navigation" href="/dashboard/logout" title="log out">
<button>
<svg class="menu">
<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
</svg>
</button>
</a>
</div>

2
brain/views/dash/partials/options.twig
Unescape Escape View File

@ -19,7 +19,7 @@
<div id="post-options">
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'>
<svg id="option-page-icon" viewbox="0 0 20 20" class="icons">
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg>
</button>
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>

6
brain/views/dash/start.twig
Unescape Escape View File

@ -5,14 +5,16 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adsfdfdf">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfddfdfdfd">
{% endblock %}
{% block mainContent %}
<div id="dash-index">
<div id="dash-index-wrapper">
{% if status %}
{{ include("dash/partials/index.twig") }}
{% apply spaceless %}
{{ include("dash/partials/index.twig") }}
{% endapply %}
{% else %}
{{ include("dash/forms/login.twig") }}
{% endif %}

333
public/assets/css/dash.css
Unescape Escape View File

@ -1904,8 +1904,7 @@ h3 {
}
html, body {
background: #1D3040;
background: linear-gradient(0deg, #1d3040 0%, #2d4a63 100%);
background: #1D3040 linear-gradient(0deg, #1d3040 0%, #2d4a63 100%) no-repeat;
font: 400 1em Helvetica, Arial, sans-serif;
height: 100%;
}
@ -1914,16 +1913,6 @@ a {
font: 300 1em Helvetica, Arial, sans-serif;
color: #b2cce5;
text-decoration: underline;
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
a:hover {
background: #1D3040;
color: #b2cce5;
border-radius: 5px;
padding: 5px;
}
svg.icons {
@ -2026,10 +2015,13 @@ svg.icons {
.main-container section header {
width: 100%;
max-width: 900px;
margin: 0 auto;
margin: 10px auto;
background: #EFEBE3;
height: 50px;
border-radius: 5px;
}
.main-container section header #wrapper {
padding: 0.75rem;
padding: 5px;
}
.main-container section header #wrapper #left, .main-container section header #wrapper #right {
width: 49.7%;
@ -2038,27 +2030,33 @@ svg.icons {
min-height: 60px;
}
.main-container section header #wrapper #left #the-logo, .main-container section header #wrapper #right #the-logo {
width: 40px;
width: 29px;
}
.main-container section header #wrapper #right {
text-align: right;
color: #EFEBE3;
}
.main-container section header #wrapper #right a {
text-decoration-color: #fc6399;
font-weight: 400;
}
.main-container section header #wrapper #right label#the-title {
font-size: 1.2em;
font-weight: 400;
color: #f5ab35;
text-decoration: none;
display: block;
line-height: 0.8;
}
.main-container section header #wrapper #right #dash-menu {
text-align: right;
}
.main-container section header #wrapper #right #dash-menu a button {
border-radius: 50px;
}
.main-container section header #wrapper #right #dash-menu a button svg {
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
width: 40px;
height: 20px;
fill: #EFEBE3;
}
.main-container section header #wrapper #right #dash-menu a:hover button {
background: #1D3040;
}
.main-container section header #wrapper #right #dash-menu a:hover svg {
fill: #b2cce5;
}
/* Mozilla based browsers */
::-moz-selection {
@ -2227,28 +2225,39 @@ svg.icons {
margin: 0 auto;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list {
padding: 0.75em;
position: relative;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header {
height: 50px;
margin-top: 5px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header h3 {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-left {
vertical-align: top;
display: inline-block;
width: 49%;
width: 50%;
color: #EFEBE3;
font-size: 3em;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right {
width: 50%;
text-align: right;
vertical-align: top;
display: inline-block;
margin: 24px 0 24px 0;
right: 10px;
color: #EFEBE3;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu a {
text-decoration-color: #fc6399;
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right a button {
border-radius: 3px;
margin-left: 10px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right a button svg {
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
width: 40px;
height: 20px;
fill: #EFEBE3;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link {
font-size: 1.5em;
@ -2269,74 +2278,84 @@ svg.icons {
word-wrap: break-word;
width: 100%;
text-align: center;
position: relative;
top: 35%;
text-shadow: 2px 2px 0 #32302f;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link span {
vertical-align: top;
margin: 0 auto;
width: 300px;
display: block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 0.5em;
padding: 7px;
color: #EFEBE3;
text-align: center;
border-radius: 0 0 3px 3px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link 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%);
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options {
display: block;
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left {
display: inline-block;
vertical-align: top;
width: 300px;
width: 50%;
position: relative;
text-align: center;
margin: 0 auto;
background: none;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button {
border-radius: 3px;
background: #1D3040;
margin: 0 0 10px 10px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg {
width: 40px;
height: 20px;
fill: #b2cce5;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options {
border-radius: 3px;
margin: 5px;
display: inline-block;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active=false] {
width: 65px;
background: black;
color: #EFEBE3;
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] {
background: #1D3040;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active=true] {
width: 70px;
background: #fad396;
color: black;
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg {
fill: #b2cce5;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] {
background: #f5ab35;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg {
fill: #1D3040;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right {
display: inline-block;
width: 50%;
text-align: right;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span {
font-weight: bold;
display: block;
background: #EFEBE3;
color: #1D3040;
border-radius: 3px;
font-size: 0.6em;
text-align: center;
position: relative;
padding: 5px;
float: right;
margin: 0 10px 0 0;
bottom: -15px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3) {
width: 100%;
margin-bottom: 20px;
height: 500px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) {
width: 48.7%;
height: 275px;
margin: 0 15px 15px 0;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
width: 48.7%;
height: 550px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
width: 48.7%;
height: 550px;
margin: -260px 15px 0 0;
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
width: 48.6%;
height: 350px;
margin: 0 10px 20px 0;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) {
width: 49%;
height: 275px;
margin: 15px 0 0 0;
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) {
width: 48.6%;
height: 350px;
margin: 0 0 20px 10px;
}
@media only screen and (max-width: 768px) {
@ -2699,7 +2718,7 @@ select {
::-moz-placeholder {
/* Firefox 19+ */
font: 25px Helvetica, Arial, sans-serif;
font: 15px Helvetica, Arial, sans-serif;
color: #EFEBE3;
}
@ -2714,26 +2733,35 @@ select {
margin: 0 auto;
}
#post-index #post-index-wrapper {
padding: 0.75rem;
overflow: hidden;
}
#post-index #post-index-wrapper #post-index-menu {
color: #EFEBE3;
#post-index #post-index-wrapper #post-index-header {
margin: 10px 0 0 0;
}
#post-index #post-index-wrapper #post-index-menu a {
text-decoration-color: #fc6399;
#post-index #post-index-wrapper #post-index-header #post-index-header-left {
text-transform: capitalize;
display: inline-block;
width: 50%;
color: #EFEBE3;
font-size: 3em;
}
#post-index #post-index-wrapper #post-index-menu a.add-new-post {
#post-index #post-index-wrapper #post-index-header #post-index-header-right {
text-align: right;
display: inline-block;
background: #fc6399;
border-radius: 3px;
padding: 3px;
width: 50%;
}
#post-index #post-index-wrapper #post-index-header #post-index-header-right a button {
color: #EFEBE3;
text-align: center;
margin-bottom: 10px;
float: right;
border-radius: 3px;
margin-left: 10px;
width: 55px;
}
#post-index #post-index-wrapper #post-index-header #post-index-header-right a button svg {
width: 20px;
height: 17px;
fill: #EFEBE3;
}
#post-index #post-index-wrapper #post-index-menu .current-filter {
#post-index #post-index-wrapper #post-index-header #post-index-header-right .current-filter {
color: #fc6399;
text-decoration-color: #b2cce5;
}
@ -2759,20 +2787,26 @@ select {
vertical-align: top;
width: 100%;
}
#post-index #post-index-wrapper #posts-list a.page-link span {
display: inline-block;
vertical-align: top;
font-size: 0.8em;
font-family: "Lucida Console", Monaco, monospace;
width: 50%;
padding: 0 0 0 10px;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg {
width: 100%;
height: 350px;
background-color: #fc6399;
position: relative;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg label {
font-size: 2em;
font-weight: 700;
color: #EFEBE3;
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 #32302f;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta {
width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
@ -2782,44 +2816,63 @@ select {
position: absolute;
padding: 0 0 20px 0;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta span {
color: #EFEBE3;
text-align: center;
margin: 0 auto;
display: block;
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options {
width: 100%;
bottom: 0;
position: absolute;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta label {
font-size: 1.4em;
font-weight: 700;
color: #EFEBE3;
padding: 5px;
vertical-align: top;
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left {
display: inline-block;
word-wrap: break-word;
width: 100%;
text-align: center;
text-shadow: 2px 2px 0 #32302f;
vertical-align: top;
width: 50%;
position: relative;
background: none;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options {
margin: 0 auto;
width: 275px;
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button {
border-radius: 3px;
background: #1D3040;
margin: 0 0 10px 10px;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button svg {
width: 40px;
height: 20px;
fill: #b2cce5;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left .item-options {
border-radius: 3px;
margin: 5px;
display: inline-block;
text-align: center;
padding: 2px;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active=false] {
width: 70px;
background: black;
color: #EFEBE3;
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] {
background: #1D3040;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active=true] {
width: 75px;
background: white;
color: black;
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] svg {
fill: #b2cce5;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] {
background: #f5ab35;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] svg {
fill: #1D3040;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right {
display: inline-block;
width: 50%;
text-align: right;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right span {
font-weight: bold;
display: block;
background: #EFEBE3;
color: #1D3040;
border-radius: 3px;
font-size: 0.6em;
text-align: center;
position: relative;
padding: 5px;
float: right;
margin: 0 10px 0 0;
bottom: -15px;
}
#post-index #post-index-wrapper #posts-list a.page-link p {
padding: 5px 10px 5px 10px;
@ -2863,20 +2916,20 @@ select {
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper label {
color: #EFEBE3;
font-size: 0.8em;
font-family: "Lucida Console", Monaco, monospace;
font-family: Helvetica, Arial, sans-serif;
font-weight: 600;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper span {
color: black;
color: #1D3040;
font-size: 1.5em;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #post_title {
background: #fd95ba;
background: #EFEBE3;
font-family: Helvetica, Arial, sans-serif;
width: 97.6%;
height: 80px;
font-size: 2em;
color: black;
color: #1D3040;
padding: 5px;
margin: 0 0 5px 0;
}
@ -2888,11 +2941,11 @@ select {
color: #b2cce5;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post_tags {
background: #fd95ba;
background: #EFEBE3;
font-family: Helvetica, Arial, sans-serif;
width: 97.6%;
height: 80px;
color: black;
color: #1D3040;
padding: 5px;
margin: 0 0 5px 0;
}
@ -2910,7 +2963,7 @@ select {
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button {
width: 33.3%;
height: 39px;
height: 45px;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
@ -2922,16 +2975,16 @@ select {
text-align: center;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] {
background: black;
background: #1D3040;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] svg {
fill: #EFEBE3;
fill: #b2cce5;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] {
background: #f6b54d;
background: #f5ab35;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] svg {
fill: black;
fill: #1D3040;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #featured-image-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-image-upload {
display: none;

2
src/styles/main/_forms.sass
Unescape Escape View File

@ -57,7 +57,7 @@ select
::-moz-placeholder
/* Firefox 19+ */
font: 25px $baseType
font: 15px $baseType
color: $white
:-ms-input-placeholder

117
src/styles/main/_index.sass
Unescape Escape View File

@ -118,28 +118,34 @@
margin: 0 auto
#recent-list
padding: 0.75em
//padding: 5px
position: relative
.recent-header
height: 50px
h3
margin-top: 5px
.index-header-left
vertical-align: top
display: inline-block
width: 49%
.index-menu
width: 50%
color: $white
font-size: 3em
.index-header-right
width: 50%
text-align: right
vertical-align: top
display: inline-block
margin: 24px 0 24px 0
right: 10px
color: $white
a
text-decoration-color: $highlight
button
border-radius: 3px
margin-left: 10px
svg
@include object-transitions(0.1s)
width: 40px
height: 20px
fill: $white
a.post-link
font-size: 1.5em
@ -160,22 +166,11 @@
word-wrap: break-word
width: 100%
text-align: center
position: relative
top: 35%
@include text-drop-shadow($black, 1, 2px, 2px, 0)
span
vertical-align: top
margin: 0 auto
width: 300px
display: block
font-family: $monoType
font-size: 0.5em
padding: 7px
color: $white
text-align: center
//background $primary - 60%
border-radius: 0 0 3px 3px
div
div#options
width: 100%
position: absolute
bottom: 0
@ -183,51 +178,67 @@
//background-opacity($black, .35)
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
#options
display: block
#option-left
display: inline-block
vertical-align: top
width: 300px
width: 50%
position: relative
text-align: center
margin: 0 auto
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
.item-options[data-active='false']
width: 65px
background: color.adjust($primary, $lightness: -60%)
color: $white
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
.item-options[data-active='true']
width: 70px
background: color.adjust($tertiary, $lightness: 20%)
color: color.adjust($primary, $lightness: -60%)
a:nth-child(3)
width: 100%
margin-bottom: 20px
height: 500px
a:nth-child(4)
width: 48.7%
height: 275px
margin: 0 15px 15px 0
a:nth-child(5)
width: 48.7%
height: 550px
a:nth-child(6)
width: 48.7%
height: 550px
margin :-260px 15px 0 0
a:nth-child(4), a:nth-child(6)
width: 48.6%
height: 350px
margin: 0 10px 20px 0
a:nth-child(7)
width: 49%
height: 275px
margin: 15px 0 0 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)

167
src/styles/main/_posts.sass
Unescape Escape View File

@ -4,28 +4,36 @@
margin: 0 auto
#post-index-wrapper
padding: 0.75rem
//padding: 0.75rem
overflow: hidden
#post-index-menu
color: $white
a
text-decoration-color: $highlight
a.add-new-post
#post-index-header
margin: 10px 0 0 0
#post-index-header-left
text-transform: capitalize
display: inline-block
background: $highlight
border-radius: 3px
padding: 3px
width: 50%
color: $white
text-align: center
margin-bottom: 10px
float: right
.current-filter
color: $highlight
text-decoration-color: $secondary
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
//@include object-transitions(0.1s)
width: 20px
height: 17px
fill: $white
.current-filter
color: $highlight
text-decoration-color: $secondary
#posts-list
margin: 20px 0 0 0
@ -49,19 +57,24 @@
vertical-align: top
width: 100%
span
display: inline-block
vertical-align: top
font-size: 0.8em
font-family: $monoType
width: 50%
padding: 0 0 0 10px
div.page-bg
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%
@include text-drop-shadow($black, 1, 2px, 2px, 0)
#meta
width: 100%
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
@ -70,41 +83,55 @@
bottom: 0
position: absolute
padding: 0 0 20px 0
span
color: $white
text-align: center
margin: 0 auto
display: block
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
@include text-drop-shadow($black, 1, 2px, 2px, 0)
#options
margin: 0 auto
width: 275px
.meta-options
border-radius: 3px
margin: 5px
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
//@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
text-align: center
padding: 2px
.meta-options[data-active='false']
width: 70px
background: color.adjust($primary, $lightness: -60%)
color: $white
.meta-options[data-active='true']
width: 75px
background: color.adjust($tertiary, $lightness: 60%)
color: color.adjust($primary, $lightness: -60%)
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
@ -145,20 +172,20 @@
label
color: $white
font-size: 0.8em
font-family: $monoType
font-family: $baseType
font-weight: 600
span
color: color.adjust($primary, $lightness: -60%)
color: $primary
font-size: 1.5em
#post-title
#post_title
background: color.adjust($highlight, $lightness: 10%)
background: $white
font-family: $baseType
width: 97.6%
height: 80px
font-size: 2em
color: color.adjust($primary, $lightness: -60%)
color: $primary
padding: 5px
margin: 0 0 5px 0
@ -172,11 +199,11 @@
#post-meta
#post_tags
background: color.adjust($highlight, $lightness: 10%)
background: $white
font-family: $baseType
width: 97.6%
height: 80px
color: color.adjust($primary, $lightness: -60%)
color: $primary
padding: 5px
margin: 0 0 5px 0
@ -194,7 +221,7 @@
button
width: 33.3%
height: 39px
height: 45px
@include object-transitions(0.3s)
margin: 0
border-radius: 0
@ -203,14 +230,14 @@
text-align: center
button[data-active='false']
background: color.adjust($primary, $lightness: -60%)
background: $primary
svg
fill: $white
fill: $secondary
button[data-active='true']
background: color.adjust($tertiary, $lightness: 5%)
background: $tertiary
svg
fill: color.adjust($primary, $lightness: -60%)
fill: $primary
#featured-image-upload, #post-image-upload
display: none

46
src/styles/main/_structure.sass
Unescape Escape View File

@ -1,6 +1,5 @@
html, body
background: $primary
background: linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%)
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%
@ -8,12 +7,7 @@ a
font: 300 1em $baseType
color: $secondary
text-decoration: underline
@include object-transitions(0.1s)
&:hover
background: $primary
color: $secondary
border-radius: 5px
padding: 5px
//@include object-transitions(0.1s)
svg.icons
width: 25px
@ -102,10 +96,13 @@ svg.icons
header
width: 100%
max-width: 900px
margin: 0 auto
margin: 10px auto
background: $white
height: 50px
border-radius: 5px
#wrapper
padding: 0.75rem
padding: 5px
#left, #right
width: 49.7%
@ -114,27 +111,30 @@ svg.icons
min-height: 60px
#the-logo
width: 40px
width: 29px
#right
text-align: right
color: $white
a
text-decoration-color: $highlight
font-weight: 400
label#the-title
font-size: 1.2em
font-weight: 400
color: $tertiary
text-decoration: none
display: block
line-height: 0.8
// word-break: break-all;
#dash-menu
text-align: right
a
button
border-radius: 50px
svg
@include object-transitions(0.1s)
width: 40px
height: 20px
fill: $white
&:hover
button
background: $primary
svg
fill: $secondary
/* Mozilla based browsers */
::-moz-selection

Write Preview
Loading…
Cancel
Save