From 76c8c86ada69f8bcd6bffaf358d9fd5ddc4dfa9a Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Mon, 28 Jul 2014 23:21:02 +0200 Subject: [PATCH] Clean up --- .../assets/sass/components/navigation.scss | 60 +++- core/client/assets/sass/patterns/global.scss | 1 + core/client/docs/_includes/nav/global.html | 268 ++---------------- core/client/docs/dist/css/ghost-ui.css | 68 +++-- core/client/docs/dist/css/ghost-ui.min.css | 2 +- 5 files changed, 131 insertions(+), 268 deletions(-) diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss index 0d5d879209..67ed0604b7 100644 --- a/core/client/assets/sass/components/navigation.scss +++ b/core/client/assets/sass/components/navigation.scss @@ -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; + } + } } \ No newline at end of file diff --git a/core/client/assets/sass/patterns/global.scss b/core/client/assets/sass/patterns/global.scss index 2ed4b6fb02..751fa4f2e8 100644 --- a/core/client/assets/sass/patterns/global.scss +++ b/core/client/assets/sass/patterns/global.scss @@ -7,6 +7,7 @@ } html { + font: 62.5%/1.65 "Open Sans", sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } diff --git a/core/client/docs/_includes/nav/global.html b/core/client/docs/_includes/nav/global.html index 6692dfaded..e56a2bfc8a 100644 --- a/core/client/docs/_includes/nav/global.html +++ b/core/client/docs/_includes/nav/global.html @@ -1,244 +1,36 @@ -
-
+
- + -
+ +
Content
+ + +
New Post
+ + +
Settings
+ + +
Thing
+ + +
Thing2
+ -
-
Categories
- -
-
-
-
- -
-
- Business -
- -
- Sales & Marketing -
- -
- Funding -
- -
- Product & Design -
-
- Technology -
-
- Skills & Management -
-
- Industries -
-
- Other -
-
- -
-
-
Business
-
Career Advice
-
Branding
-
Financial Consulting
-
Customer Engagement
-
Strategy
-
Sectors
-
Getting Started
-
Human Resources
-
Business Development
-
Legal
-
Other
-
-
-
Sales & Marketing
-
Social Media Marketing
-
Search Engine Optimization
-
Public Relations
-
Branding
-
Publishing
-
Inbound Marketing
-
Email Marketing
-
Copywriting
-
Growth Strategy
-
Search Engine Marketing
-
Sales & Lead Generation
-
Advertising
-
Other
-
-
-
Funding
-
Crowdfunding
-
Kickstarter
-
Venture Capital
-
Finance
-
Bootstrapping
-
Nonprofit
-
Other
-
-
-
Product & Design
-
Identity
-
User Experience
-
Lean Startup
-
Product Management
-
Metrics & Analytics
-
Other
-
-
-
Technology
-
Wordpress
-
Software Development
-
Mobile
-
Ruby
-
CRM
-
Innovation
-
Cloud
-
Other
-
-
-
Skills & Management
-
Productivity
-
Entrepreneurship
-
Public Speaking
-
Leadership
-
Coaching
-
Other
-
-
-
Industries
-
SaaS
-
E-commerce
-
Education
-
Real Estate
-
Restaurant & Retail
-
Marketplaces
-
Nonprofit
-
Other
-
-
- -
-
-
-
-
- -
-
-
- -
-
- - -
-
+
+
+
John O'Nolan
+
+ John O'Nolan + Profile & Settings
- -
- -
Browse
- - -
Answers
- - -
- Live - NEW -
- - -
- Calls -
-
-
-
- - -
- Inbox -
-
-
-
- -
- -
- -
-
-
John O'Nolan
-
- John O'Nolan - Profile & Settings -
-
- - Me - -
+
+ Me
+
+
-
-
- -
Account
- - -
- Calls -
-
-
-
- - -
- Inbox -
-
-
-
- - -
Favorites
- - -
Edit Profile
- - -
Settings
- - -
Support
- -
-
Logout
-
-
-
-
- - -
Favorites
- - -
-
\ No newline at end of file +
\ No newline at end of file diff --git a/core/client/docs/dist/css/ghost-ui.css b/core/client/docs/dist/css/ghost-ui.css index 73089885c6..6bccce82d4 100644 --- a/core/client/docs/dist/css/ghost-ui.css +++ b/core/client/docs/dist/css/ghost-ui.css @@ -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; } diff --git a/core/client/docs/dist/css/ghost-ui.min.css b/core/client/docs/dist/css/ghost-ui.min.css index 86d18721ff..3cf88db7af 100644 --- a/core/client/docs/dist/css/ghost-ui.min.css +++ b/core/client/docs/dist/css/ghost-ui.min.css @@ -1 +1 @@ -@font-face{font-family:'GhostIcons';src:url("../fonts/icons.eot");src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),url("../fonts/icons.woff") format("woff"),url("../fonts/icons.ttf") format("truetype"),url("../fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}[class*=icon-]:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased}[class*=icon-]:hover{text-decoration:none}.icon-ghost:before{content:"\e000"}.icon-ghost-logo:before{content:"\e600"}.icon-chevron-down:before{content:"\e001"}.icon-users:before{content:"\e002"}.icon-tag:before{content:"\e003"}.icon-tablet:before{content:"\e004"}.icon-menu:before{content:"\e005"}.icon-settings:before{content:"\e006"}.icon-search:before{content:"\e007"}.icon-search-left:before{content:"\e008"}.icon-rss:before{content:"\e009"}.icon-preview:before{content:"\e00a"}.icon-app:before{content:"\e00b"}.icon-pin:before{content:"\e00c"}.icon-pc:before{content:"\e00d"}.icon-pacman:before{content:"\e00e"}.icon-edit:before{content:"\e00f"}.icon-mobile:before{content:"\e010"}.icon-image:before{content:"\e011"}.icon-mail:before{content:"\e012"}.icon-list:before{content:"\e013"}.icon-info:before{content:"\e014"}.icon-home:before{content:"\e015"}.icon-grid:before{content:"\e016"}.icon-fullscreen:before{content:"\e017"}.icon-question:before{content:"\e018"}.icon-external:before{content:"\e019"}.icon-error:before{content:"\e01a"}.icon-comments:before{content:"\e01b"}.icon-close:before{content:"\e01c"}.icon-chevron:before{content:"\e01d"}.icon-chevron-left:before{content:"\e11d"}.icon-calendar:before{content:"\e01e"}.icon-archive:before{content:"\e01f"}.icon-services:before{content:"\e020"}.icon-appearance:before{content:"\e021"}.icon-video:before{content:"\e022"}.icon-trash:before{content:"\e023"}.icon-reply:before{content:"\e024"}.icon-stats:before{content:"\e025"}.icon-featured:before{content:"\e026"}.icon-unfeatured:before{content:"\e027"}.icon-clock:before{content:"\e028"}.icon-settings2:before{content:"\e029"}.icon-camera:before{content:"\e036"}.icon-power:before{content:"\e02b"}.icon-lock:before{content:"\e02c"}.icon-content:before{content:"\e02d"}.icon-user:before{content:"\e02e"}.icon-support:before{content:"\e02f"}.icon-success:before{content:"\e030"}.icon-notification:before{content:"\e031"}.icon-add:before{content:"\e032"}.icon-check:before{content:"\e033"}.icon-x:before{content:"\e034"}.icon-link:before{content:"\e035"}.icon-camera:before{content:"\e036"}.icon-repost:before{content:"\e037"}.icon-weather-rain:before{content:"\e038"}.icon-weather-sun:before{content:"\e039"}.icon-weather-partial:before{content:"\e03a"}.icon-weather-snow:before{content:"\e03b"}.icon-weather-cloudy:before{content:"\e03c"}.icon-lightning:before{content:"\e03d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{-webkit-tap-highlight-color:transparent}body{width:100%}a,a:active{text-decoration:none}.show{display:block !important}.hidden{display:none !important;visibility:hidden !important}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only:active,.sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.globalnav{height:60px;position:fixed;top:0px;right:0px;bottom:auto;left:0px;z-index:9999;background:#242628;box-shadow:0 0 2px rgba(6,8,8,0.15)}.nav-item{position:relative;display:block;float:left;color:#fff}.nav-label{height:34px;line-height:34px;margin-top:13px;padding:0 10px;border-radius:4px;-webkit-transition:background 0.4s;-moz-transition:background 0.4s;transition:background 0.4s}.nav-item:hover .nav-label{background:#1f2123}.ghost-logo{display:inline-block;float:left;height:60px;width:60px;padding:22px;color:#656d71}.ghost-logo:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000";font-size:16px;line-height:0}.ghost-logo:hover{text-decoration:none}.ghost-logo:hover,.ghost-logo:focus{color:#e2edf2}.user-item{float:right}.user-item .image{display:inline-block}.user-item .image img{display:block;width:32px;height:32px;border-radius:100%} +@font-face{font-family:'GhostIcons';src:url("../fonts/icons.eot");src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),url("../fonts/icons.woff") format("woff"),url("../fonts/icons.ttf") format("truetype"),url("../fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}[class*=icon-]:before{font-family:"GhostIcons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased}[class*=icon-]:hover{text-decoration:none}.icon-ghost:before{content:"\e000"}.icon-ghost-logo:before{content:"\e600"}.icon-chevron-down:before{content:"\e001"}.icon-users:before{content:"\e002"}.icon-tag:before{content:"\e003"}.icon-tablet:before{content:"\e004"}.icon-menu:before{content:"\e005"}.icon-settings:before{content:"\e006"}.icon-search:before{content:"\e007"}.icon-search-left:before{content:"\e008"}.icon-rss:before{content:"\e009"}.icon-preview:before{content:"\e00a"}.icon-app:before{content:"\e00b"}.icon-pin:before{content:"\e00c"}.icon-pc:before{content:"\e00d"}.icon-pacman:before{content:"\e00e"}.icon-edit:before{content:"\e00f"}.icon-mobile:before{content:"\e010"}.icon-image:before{content:"\e011"}.icon-mail:before{content:"\e012"}.icon-list:before{content:"\e013"}.icon-info:before{content:"\e014"}.icon-home:before{content:"\e015"}.icon-grid:before{content:"\e016"}.icon-fullscreen:before{content:"\e017"}.icon-question:before{content:"\e018"}.icon-external:before{content:"\e019"}.icon-error:before{content:"\e01a"}.icon-comments:before{content:"\e01b"}.icon-close:before{content:"\e01c"}.icon-chevron:before{content:"\e01d"}.icon-chevron-left:before{content:"\e11d"}.icon-calendar:before{content:"\e01e"}.icon-archive:before{content:"\e01f"}.icon-services:before{content:"\e020"}.icon-appearance:before{content:"\e021"}.icon-video:before{content:"\e022"}.icon-trash:before{content:"\e023"}.icon-reply:before{content:"\e024"}.icon-stats:before{content:"\e025"}.icon-featured:before{content:"\e026"}.icon-unfeatured:before{content:"\e027"}.icon-clock:before{content:"\e028"}.icon-settings2:before{content:"\e029"}.icon-camera:before{content:"\e036"}.icon-power:before{content:"\e02b"}.icon-lock:before{content:"\e02c"}.icon-content:before{content:"\e02d"}.icon-user:before{content:"\e02e"}.icon-support:before{content:"\e02f"}.icon-success:before{content:"\e030"}.icon-notification:before{content:"\e031"}.icon-add:before{content:"\e032"}.icon-check:before{content:"\e033"}.icon-x:before{content:"\e034"}.icon-link:before{content:"\e035"}.icon-camera:before{content:"\e036"}.icon-repost:before{content:"\e037"}.icon-weather-rain:before{content:"\e038"}.icon-weather-sun:before{content:"\e039"}.icon-weather-partial:before{content:"\e03a"}.icon-weather-snow:before{content:"\e03b"}.icon-weather-cloudy:before{content:"\e03c"}.icon-lightning:before{content:"\e03d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font:62.5%/1.65 "Open Sans", sans-serif;-webkit-tap-highlight-color:transparent}body{width:100%}a,a:active{text-decoration:none}.show{display:block !important}.hidden{display:none !important;visibility:hidden !important}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only:active,.sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.global-nav{height:60px;position:fixed;top:0px;right:0px;bottom:auto;left:0px;z-index:9999;background:#242628;box-shadow:0 0 2px rgba(6,8,8,0.15)}.nav-item{position:relative;display:block;float:left;padding-left:10px;color:rgba(255,255,255,0.8);font-size:1.5rem;line-height:1}.nav-label{height:34px;margin-top:13px;padding:8px 10px;border-radius:4px;-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:#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: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;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e000";font-size:14px;line-height:0}.ghost-logo:hover{text-decoration:none}.ghost-logo:hover,.ghost-logo:focus{color:#e2edf2;-webkit-transition:color 0.1s;-moz-transition:color 0.1s;transition:color 0.1s}.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}