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

ui overall part 2: dash index, pages index

Browse source
This commit is contained in:
Ro 2021-05-23 19:27:33 -07:00
parent 8e3d359486
commit 033fe5e48b
11 changed files with 533 additions and 354 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

75
brain/views/dash/book.twig
View file

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

58
brain/views/dash/partials/index.twig
View file

@ -1,22 +1,35 @@
<div id="dash-recent"> <div id="dash-recent">
<div id="recent-list"> <div id="recent-list">
<div class="recent-header"> <div class="recent-header">
<h3>Recent</h3> <div class="index-header-left">
<div class="index-menu"> Recent
<a href='/dashboard/pages'>View Pages</a> </div>
. <div class="index-header-right">
<a href='/dashboard/page/add/new'>Create Page</a> <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>
</div> </div>
<br/> <br/>
{% if data["entryCount"] != 0 %} {% if data["entryCount"] != 0 %}
{% for page in data['pages'] %} {% 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"> <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> <label>
{{ page.title }} {{ page.title }}
</label> </label>
<div id="options">
{% if page.menu == 'true' %} {% if page.menu == 'true' %}
{% set menu = "true" %} {% set menu = "true" %}
{% else %} {% else %}
@ -32,15 +45,30 @@
{% else %} {% else %}
{% set featured = "false" %} {% set featured = "false" %}
{% endif %} {% endif %}
<div id="options"> <div id="option-left">
<span class="item-options" data-active="{{ menu }}">
Menu Item</span> <button data-active="{{ menu }}">
<span class="item-options" data-active="{{ published }}"> <svg>
Published</span> <use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
<span class="item-options" data-active="{{ featured }}"> </svg>
Featured</span> </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.updated }}</span>
</div> </div>
</a> </a>

24
brain/views/dash/partials/navigation.twig
View file

@ -1,5 +1,23 @@
<div id="dash-menu"> <div id="dash-menu">
<a id="settings" href="/dashboard/settings" >Settings</a> . <a id="settings" href="/dashboard/settings" title="settings">
<a id="navigation" href="/dashboard/navigation" >Navigation</a> . <button>
<a id="navigation" href="/dashboard/logout" >Log Out</a> <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> </div>

2
brain/views/dash/partials/options.twig
View file

@ -19,7 +19,7 @@
<div id="post-options"> <div id="post-options">
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'> <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"> <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> </svg>
</button> </button>
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'> <button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>

4
brain/views/dash/start.twig
View file

@ -5,14 +5,16 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<div id="dash-index"> <div id="dash-index">
<div id="dash-index-wrapper"> <div id="dash-index-wrapper">
{% if status %} {% if status %}
{% apply spaceless %}
{{ include("dash/partials/index.twig") }} {{ include("dash/partials/index.twig") }}
{% endapply %}
{% else %} {% else %}
{{ include("dash/forms/login.twig") }} {{ include("dash/forms/login.twig") }}
{% endif %} {% endif %}

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

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

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

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

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

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

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

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

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

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