ui overall part 2: dash index, pages index
This commit is contained in:
Ro
parent
8e3d359486
commit
033fe5e48b
11 changed files with 533 additions and 354 deletions
|
|
@ -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 %}
|
||||||
|
{% endapply %}
|
||||||
|
|
||||||
{% block mainContent %}{% endblock %}
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,49 +11,88 @@
|
||||||
{% 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">
|
<label>
|
||||||
<span>
|
{{ page.title }}
|
||||||
{{ page.updated }}
|
</label>
|
||||||
</span>
|
<div id="meta">
|
||||||
<label>
|
|
||||||
{{ page.title }}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{% 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">
|
<div id="options">
|
||||||
<span class="meta-options" data-active="{{ menu }}">
|
{% if page.menu == 'true' %}
|
||||||
Menu Item</span>
|
{% set menu = "true" %}
|
||||||
<span class="meta-options" data-active="{{ published }}">
|
{% else %}
|
||||||
Published</span>
|
{% set menu = "false" %}
|
||||||
<span class="meta-options" data-active="{{ featured }}">
|
{% endif %}
|
||||||
Featured</span>
|
{% 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>
|
</div>
|
||||||
<span>{{ page.prettyDate }}</span>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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'>
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
{{ include("dash/partials/index.twig") }}
|
{% apply spaceless %}
|
||||||
|
{{ include("dash/partials/index.twig") }}
|
||||||
|
{% endapply %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ include("dash/forms/login.twig") }}
|
{{ include("dash/forms/login.twig") }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,36 @@
|
||||||
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
|
||||||
.current-filter
|
width: 50%
|
||||||
color: $highlight
|
a
|
||||||
text-decoration-color: $secondary
|
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
|
#posts-list
|
||||||
margin: 20px 0 0 0
|
margin: 20px 0 0 0
|
||||||
|
|
@ -49,19 +57,24 @@
|
||||||
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
|
||||||
|
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
|
#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%)
|
||||||
|
|
@ -70,41 +83,55 @@
|
||||||
bottom: 0
|
bottom: 0
|
||||||
position: absolute
|
position: absolute
|
||||||
padding: 0 0 20px 0
|
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
|
#options
|
||||||
margin: 0 auto
|
width: 100%
|
||||||
width: 275px
|
bottom: 0
|
||||||
.meta-options
|
position: absolute
|
||||||
border-radius: 3px
|
#option-left
|
||||||
margin: 5px
|
|
||||||
display: inline-block
|
display: inline-block
|
||||||
text-align: center
|
vertical-align: top
|
||||||
padding: 2px
|
width: 50%
|
||||||
.meta-options[data-active='false']
|
position: relative
|
||||||
width: 70px
|
background: none
|
||||||
background: color.adjust($primary, $lightness: -60%)
|
button
|
||||||
color: $white
|
border-radius: 3px
|
||||||
|
background: $primary
|
||||||
.meta-options[data-active='true']
|
margin: 0 0 10px 10px
|
||||||
width: 75px
|
svg
|
||||||
background: color.adjust($tertiary, $lightness: 60%)
|
//@include object-transitions(0.1s)
|
||||||
color: color.adjust($primary, $lightness: -60%)
|
width: 40px
|
||||||
|
height: 20px
|
||||||
|
fill: $secondary
|
||||||
|
.item-options
|
||||||
|
border-radius: 3px
|
||||||
|
margin: 5px
|
||||||
|
display: inline-block
|
||||||
|
button[data-active='false']
|
||||||
|
background: $primary
|
||||||
|
svg
|
||||||
|
fill: $secondary
|
||||||
|
|
||||||
|
button[data-active='true']
|
||||||
|
background: $tertiary
|
||||||
|
svg
|
||||||
|
fill: $primary
|
||||||
|
#option-right
|
||||||
|
display: inline-block
|
||||||
|
width: 50%
|
||||||
|
text-align: right
|
||||||
|
span
|
||||||
|
font-weight: bold
|
||||||
|
display: block
|
||||||
|
background: $white
|
||||||
|
color: $primary
|
||||||
|
border-radius: 3px
|
||||||
|
font-size: .6em
|
||||||
|
text-align: center
|
||||||
|
position: relative
|
||||||
|
padding: 5px
|
||||||
|
float: right
|
||||||
|
margin: 0 10px 0 0
|
||||||
|
bottom: -15px
|
||||||
|
|
||||||
p
|
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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue