mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-11 09:53:32 +03:00
Clean up
This commit is contained in:
John O'Nolan
parent
24f51e0e37
commit
76c8c86ada
@ -3,7 +3,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// The main wrapper, sets position and bg colour.
|
||||
.globalnav {
|
||||
.global-nav {
|
||||
height: 60px;
|
||||
@include position(fixed, 0px 0px auto 0px);
|
||||
z-index: 9999;
|
||||
@ -11,45 +11,63 @@
|
||||
box-shadow: 0 0 2px rgba(6,8,8,0.15)
|
||||
}
|
||||
|
||||
// Wrapper for each item
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
color: #fff;
|
||||
padding-left: 10px;
|
||||
color: rgba(255,255,255,0.8);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Pill shaped background
|
||||
.nav-label {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin-top: 13px;
|
||||
padding: 0 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
@include transition(background 0.4s);
|
||||
@include transition(background 0.5s);
|
||||
}
|
||||
.nav-item.active .nav-label {
|
||||
background: darken($darkgrey, 5%);
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-label {
|
||||
background: darken($darkgrey, 2%);
|
||||
background: darken($darkgrey, 10%);
|
||||
@include transition(background 0.1s);
|
||||
}
|
||||
|
||||
// Ghost branding
|
||||
.ghost-logo {
|
||||
@include icon($i-ghost, 16px) { line-height: 0; }
|
||||
@include icon($i-ghost, 14px) { line-height: 0; }
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
padding: 22px;
|
||||
padding: 23px;
|
||||
color: lighten($grey, 20%);
|
||||
font-size: 1.5rem;
|
||||
@include transition(color 0.5s);
|
||||
}
|
||||
.ghost-logo:hover,
|
||||
.ghost-logo:focus {
|
||||
color: $lightgrey;
|
||||
@include transition(color 0.1s);
|
||||
}
|
||||
|
||||
.user-item {
|
||||
float: right;
|
||||
// Right hand dropdown
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// Profile picture
|
||||
.image {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 0 7px 0 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@ -58,4 +76,22 @@
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Descriptive label for mobile menu
|
||||
.name {
|
||||
display: none; // Hide until mobile
|
||||
float: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 19px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
color: #cacaca;
|
||||
margin-top: 0;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font: 62.5%/1.65 "Open Sans", sans-serif;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
@ -1,244 +1,36 @@
|
||||
<div class="globalnav">
|
||||
<div class="navigation">
|
||||
<div class="global-nav">
|
||||
|
||||
<a class="ghost-logo nav-item" data-item="search" href="/">
|
||||
<div class="invisible">Ghost</div>
|
||||
</a>
|
||||
<a class="ghost-logo nav-item" href="/">
|
||||
<div class="invisible">Ghost</div>
|
||||
</a>
|
||||
|
||||
<div class="desktop-center">
|
||||
<a href="/" class="nav-item content active" href="#">
|
||||
<div class="nav-label">Content</div>
|
||||
</a>
|
||||
<a class="nav-item new-post" href="#">
|
||||
<div class="nav-label">New Post</div>
|
||||
</a>
|
||||
<a class="nav-item settings" href="#">
|
||||
<div class="nav-label">Settings</div>
|
||||
</a>
|
||||
<a class="nav-item thing" href="#">
|
||||
<div class="nav-label">Thing</div>
|
||||
</a>
|
||||
<a class="nav-item thing2" href="#">
|
||||
<div class="nav-label">Thing2</div>
|
||||
</a>
|
||||
|
||||
<div class="nav-item categories menu-holder no-tablet no-mobile active" data-item="search" href="/" data-element="categories-dropdown" data-header-dropdown="categories">
|
||||
<div class="nav-label"><em>Categories<span class="menu-arrow"></span></em></div>
|
||||
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu">
|
||||
<div class="categories-dropdown">
|
||||
<div class="inner">
|
||||
|
||||
<div class="categories">
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="141" data-href="/browse/business" data-tappable="true">
|
||||
<span class="category-label">Business</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="84" data-href="/browse/sales-marketing" data-tappable="true">
|
||||
<span class="category-label">Sales & Marketing</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="80" data-href="/browse/funding" data-tappable="true">
|
||||
<span class="category-label">Funding</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="87" data-href="/browse/product-design" data-tappable="true">
|
||||
<span class="category-label">Product & Design</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="94" data-href="/browse/technology" data-tappable="true">
|
||||
<span class="category-label">Technology</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="93" data-href="/browse/skills-management" data-tappable="true">
|
||||
<span class="category-label">Skills & Management</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="132" data-href="/browse/industries" data-tappable="true">
|
||||
<span class="category-label">Industries</span>
|
||||
</div>
|
||||
<div class="category-item" data-hover="show-subcategory" data-category-id="150" data-href="/browse/other" data-tappable="true">
|
||||
<span class="category-label">Other</span>
|
||||
</div>
|
||||
</div><!--.categories-->
|
||||
|
||||
<div class="side-menu">
|
||||
<div class="subcategories" data-category-id="141">
|
||||
<div class="subcategory-item root-category" data-href="/browse/business">Business</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/career-advice">Career Advice</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/branding">Branding</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/financial-consulting">Financial Consulting</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/customer-engagement">Customer Engagement</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/strategy">Strategy</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/sectors">Sectors</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/getting-started">Getting Started</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/human-resources">Human Resources</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/business-development">Business Development</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/legal">Legal</div>
|
||||
<div class="subcategory-item" data-href="/browse/business/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="84">
|
||||
<div class="subcategory-item root-category" data-href="/browse/sales-marketing">Sales & Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/social-media-marketing">Social Media Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/search-engine-optimization">Search Engine Optimization</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/public-relations">Public Relations</div>
|
||||
<div class="subcategory-item" data-href="/browse/marketing-advertising/branding">Branding</div>
|
||||
<div class="subcategory-item" data-href="/browse/marketing-advertising/publishing">Publishing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/inbound-marketing">Inbound Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/email-marketing">Email Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/marketing-advertising/copywriting">Copywriting</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/growth-strategy">Growth Strategy</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/search-engine-marketing">Search Engine Marketing</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/sales-lead-generation">Sales & Lead Generation</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/advertising">Advertising</div>
|
||||
<div class="subcategory-item" data-href="/browse/sales-marketing/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="80">
|
||||
<div class="subcategory-item root-category" data-href="/browse/funding">Funding</div>
|
||||
<div class="subcategory-item" data-href="/browse/raising-capital/crowdfunding">Crowdfunding</div>
|
||||
<div class="subcategory-item" data-href="/browse/raising-capital/kickstarter">Kickstarter</div>
|
||||
<div class="subcategory-item" data-href="/browse/raising-capital/venture-capital">Venture Capital</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/finance">Finance</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/bootstrapping">Bootstrapping</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/nonprofit">Nonprofit</div>
|
||||
<div class="subcategory-item" data-href="/browse/funding/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="87">
|
||||
<div class="subcategory-item root-category" data-href="/browse/product-design">Product & Design</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/identity">Identity</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/user-experience">User Experience</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/lean-startup">Lean Startup</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/product-management">Product Management</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/metrics-analytics">Metrics & Analytics</div>
|
||||
<div class="subcategory-item" data-href="/browse/product-design/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="94">
|
||||
<div class="subcategory-item root-category" data-href="/browse/technology">Technology</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/wordpress">Wordpress</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/software-development">Software Development</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/mobile">Mobile</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/ruby">Ruby</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/crm">CRM</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/innovation">Innovation</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/cloud">Cloud</div>
|
||||
<div class="subcategory-item" data-href="/browse/technology/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="93">
|
||||
<div class="subcategory-item root-category" data-href="/browse/skills-management">Skills & Management</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/productivity">Productivity</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/entrepreneurship">Entrepreneurship</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/public-speaking">Public Speaking</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/leadership">Leadership</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/coaching">Coaching</div>
|
||||
<div class="subcategory-item" data-href="/browse/skills-management/other">Other</div>
|
||||
</div>
|
||||
<div class="subcategories" data-category-id="132">
|
||||
<div class="subcategory-item root-category" data-href="/browse/industries">Industries</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/saas">SaaS</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/e-commerce">E-commerce</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/education">Education</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/real-estate">Real Estate</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/restaurant-retail">Restaurant & Retail</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/marketplaces">Marketplaces</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/nonprofit">Nonprofit</div>
|
||||
<div class="subcategory-item" data-href="/browse/industries/other">Other</div>
|
||||
</div>
|
||||
</div><!--.side-menu-->
|
||||
|
||||
</div><!--.inner-->
|
||||
</div><!--.categories-dropdown-->
|
||||
</div><!--.menu-->
|
||||
</div><!--.menu-wrapper-->
|
||||
</div><!--.menu-holder-->
|
||||
|
||||
<div class="search-box no-tablet no-mobile">
|
||||
<form action="#" onsubmit="return false;">
|
||||
<div class="input-wrapper">
|
||||
<input placeholder="Search" type="text" name="search_query" class="search_query noglow" value="">
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<i class="clear-search"></i>
|
||||
<button type="submit" class="btn-clear submit-search">
|
||||
<span>Search</span>
|
||||
<i class="search-glass"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="nav-item user-menu menu-holder" data-href="#">
|
||||
<div class="nav-label">
|
||||
<div class="image"><img src="https://pbs.twimg.com/profile_images/2424666637/rm02mq43w94amr8jbhz3.jpeg" alt="John O'Nolan"></div>
|
||||
<div class="name">
|
||||
John O'Nolan
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
|
||||
<div class="sections">
|
||||
<a href="/" class="nav-item search internal active" data-item="search">
|
||||
<div class="nav-label"><em>Browse</em></div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="questions" href="/questions">
|
||||
<div class="nav-label"><em>Answers</em></div>
|
||||
</a>
|
||||
<a class="nav-item live internal" data-item="live" href="/live/upcoming">
|
||||
<div class="nav-label">
|
||||
<em>Live</em>
|
||||
<sup>NEW</sup>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item calls internal" data-item="calls" href="/calls">
|
||||
<div class="nav-label">
|
||||
<em>Calls</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="incoming-calls"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item inbox internal" data-item="inbox" href="/inbox">
|
||||
<div class="nav-label">
|
||||
<em>Inbox</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="unread-messages"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div><!--.sections-->
|
||||
|
||||
</div><!--.desktop-center-->
|
||||
|
||||
<div class="nav-item user-item menu-holder internal" data-item="settings" data-href="/account" data-header-dropdown="me-menu">
|
||||
<div class="nav-label">
|
||||
<div class="image"><img src="https://s3.amazonaws.com/clarityfm-production/users/pictures/8389/list_square/75e958a6674a7d68fe0d575fb235116c.jpg?1354967814" alt="John O'Nolan"></div>
|
||||
<div class="name">
|
||||
John O'Nolan
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
<div class="me">
|
||||
<em>
|
||||
Me<span class="count hidden" data-burger-menu-badge=""></span><span class="menu-arrow"></span>
|
||||
</em>
|
||||
</div>
|
||||
<div class="me">
|
||||
Me<span class="count hidden"></span><span class="menu-arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--menu-holder-->
|
||||
|
||||
<div class="menu-wrapper">
|
||||
<div class="menu">
|
||||
<a class="nav-item internal" data-item="settings" href="/account">
|
||||
<div class="nav-label">Account</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="calls" href="/calls">
|
||||
<div class="nav-label">
|
||||
<em>Calls</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="incoming-calls"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="inbox" href="/inbox">
|
||||
<div class="nav-label">
|
||||
<em>Inbox</em>
|
||||
<div class="unread-badge-wrapper">
|
||||
<div class="unread-badge" data-badge="unread-messages"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="favorites" href="/favorites">
|
||||
<div class="nav-label">Favorites</div>
|
||||
</a>
|
||||
<a class="nav-item internal separator" data-item="settings" href="/settings/profile">
|
||||
<div class="nav-label">Edit Profile</div>
|
||||
</a>
|
||||
<a class="nav-item internal" data-item="settings" href="/settings/account">
|
||||
<div class="nav-label">Settings</div>
|
||||
</a>
|
||||
<a class="nav-item external separator" target="_blank" href="http://help.clarity.fm">
|
||||
<div class="nav-label">Support</div>
|
||||
</a>
|
||||
<div class="nav-item internal logout separator" data-action="logout">
|
||||
<div class="nav-label">Logout</div>
|
||||
</div>
|
||||
</div><!--menu-->
|
||||
</div><!--menu-wrapper-->
|
||||
</div><!--menu-holder-->
|
||||
|
||||
<a class="nav-item favorites-item internal" data-item="favorites" href="/favorites">
|
||||
<div class="nav-label"><em>Favorites</em></div>
|
||||
</a>
|
||||
|
||||
</div><!--navigation-->
|
||||
</div><!--globalnav-->
|
||||
</div><!--global-nav-->
|
||||
68
core/client/docs/dist/css/ghost-ui.css
vendored
68
core/client/docs/dist/css/ghost-ui.css
vendored
@ -585,6 +585,7 @@ th {
|
||||
box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
font: 62.5%/1.65 "Open Sans", sans-serif;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
body {
|
||||
@ -620,7 +621,7 @@ a, a:active {
|
||||
overflow: visible;
|
||||
clip: auto; }
|
||||
|
||||
.globalnav {
|
||||
.global-nav {
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
@ -635,28 +636,40 @@ a, a:active {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
color: #fff; }
|
||||
padding-left: 10px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1; }
|
||||
|
||||
.nav-label {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin-top: 13px;
|
||||
padding: 0 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: background 0.4s;
|
||||
-moz-transition: background 0.4s;
|
||||
transition: background 0.4s; }
|
||||
-webkit-transition: background 0.5s;
|
||||
-moz-transition: background 0.5s;
|
||||
transition: background 0.5s; }
|
||||
|
||||
.nav-item.active .nav-label {
|
||||
background: #18191b; }
|
||||
|
||||
.nav-item:hover .nav-label {
|
||||
background: #1f2123; }
|
||||
background: #0c0d0d;
|
||||
-webkit-transition: background 0.1s;
|
||||
-moz-transition: background 0.1s;
|
||||
transition: background 0.1s; }
|
||||
|
||||
.ghost-logo {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
padding: 22px;
|
||||
color: #656d71; }
|
||||
padding: 23px;
|
||||
color: #656d71;
|
||||
font-size: 1.5rem;
|
||||
-webkit-transition: color 0.5s;
|
||||
-moz-transition: color 0.5s;
|
||||
transition: color 0.5s; }
|
||||
.ghost-logo:before {
|
||||
font-family: "GhostIcons";
|
||||
font-weight: normal;
|
||||
@ -667,21 +680,42 @@ a, a:active {
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e000";
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 0; }
|
||||
.ghost-logo:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
.ghost-logo:hover,
|
||||
.ghost-logo:focus {
|
||||
color: #e2edf2; }
|
||||
color: #e2edf2;
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
transition: color 0.1s; }
|
||||
|
||||
.user-item {
|
||||
float: right; }
|
||||
.user-item .image {
|
||||
display: inline-block; }
|
||||
.user-item .image img {
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
.user-menu .image {
|
||||
float: left;
|
||||
margin: 0 7px 0 0; }
|
||||
.user-menu .image img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%; }
|
||||
.user-menu .name {
|
||||
display: none;
|
||||
float: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 19px;
|
||||
padding-bottom: 5px; }
|
||||
.user-menu .name small {
|
||||
font-size: 12px;
|
||||
color: #cacaca;
|
||||
margin-top: 0;
|
||||
line-height: 19px; }
|
||||
|
||||
2
core/client/docs/dist/css/ghost-ui.min.css
vendored
2
core/client/docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user