mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
Refactor about page
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
170ae14ef3
commit
6b5c11414e
3 changed files with 84 additions and 195 deletions
|
|
@ -1,159 +1,101 @@
|
|||
/* About /ghost/settings/about/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.settings-about h1 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.settings-content .settings-about {
|
||||
padding: 25px 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.about-ghost-intro h1 {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -21px;
|
||||
}
|
||||
|
||||
.about-ghost-intro .ghost_logo {
|
||||
content: "Ghost";
|
||||
}
|
||||
|
||||
.about-ghost-intro .version {
|
||||
.gh-logo {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -9px;
|
||||
color: var(--blue);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about-ghost-intro h1 + p {
|
||||
margin-top: 1px;
|
||||
color: var(--midgrey);
|
||||
.gh-env-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.about-environment-help {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.about-environment dl {
|
||||
margin: 2px 0 0 0;
|
||||
color: var(--midgrey);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.about-environment dt,
|
||||
.about-environment dd {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
.gh-env-list {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
padding: 0 40px 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.about-environment dt {
|
||||
margin-right: 5px;
|
||||
.gh-env-help {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.about-environment .about-environment-detail {
|
||||
text-transform: capitalize;
|
||||
.gh-env-help .btn {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.about-help {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.about-help {
|
||||
padding-top: 16px;
|
||||
@media (max-width: 670px) {
|
||||
.gh-env-details {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.gh-env-help {
|
||||
margin: 1em 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.about-help .btn {
|
||||
display: block;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 32px;
|
||||
width: 100%;
|
||||
background: #a1adb3;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
.gh-credits {
|
||||
margin: 2em 0;
|
||||
max-width: 650px;
|
||||
color: var(--midgrey);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.about-help .btn:hover {
|
||||
background: color(#a1adb3 lightness(-10%));
|
||||
@media (max-width: 890px) {
|
||||
.gh-credits {
|
||||
max-width: 460px;
|
||||
}
|
||||
}
|
||||
|
||||
.about-help .btn:nth-child(1) {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
.about-environment-help {
|
||||
max-width: 430px;
|
||||
}
|
||||
.about-environment {
|
||||
float: left;
|
||||
width: calc(100% - 190px);
|
||||
}
|
||||
.about-help {
|
||||
float: right;
|
||||
width: 170px;
|
||||
}
|
||||
.gh-credits h2 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
|
||||
/* Contributors
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.top-contributors {
|
||||
padding-left: 0;
|
||||
max-width: 660px;
|
||||
.gh-contributors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.top-contributors li {
|
||||
float: left;
|
||||
width: 10%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.top-contributors li a {
|
||||
.gh-contributors a {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.top-contributors li a {
|
||||
margin-right: 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.gh-contributors img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.top-contributors li a {
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-contributors li a:before {
|
||||
.gh-contributors a:before {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
top: -27px;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
padding: 2px 6px 3px;
|
||||
padding: 2px 6px;
|
||||
background: var(--darkgrey);
|
||||
border-radius: var(--border-radius);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-contributors li a:after {
|
||||
.gh-contributors a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
|
|
@ -163,58 +105,15 @@
|
|||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top-contributors li a:hover:before,
|
||||
.top-contributors li a:hover:after {
|
||||
.gh-contributors a:hover:before,
|
||||
.gh-contributors a:hover:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.top-contributors li a img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
/* Copyright Info
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.about-credits {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.about-credits h1 {
|
||||
margin-bottom: 24px;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.about-contributors-info {
|
||||
margin-top: -12px;
|
||||
margin-bottom: 22px;
|
||||
max-width: 620px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.about-get-involved {
|
||||
display: inline-block;
|
||||
max-width: 290px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
.gh-copyright-info {
|
||||
color: var(--midgrey);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.about-copyright {
|
||||
margin-top: 62px;
|
||||
}
|
||||
|
||||
.about-copyright a:link,
|
||||
.about-copyright a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.about-copyright a:hover,
|
||||
.about-copyright a:focus,
|
||||
.about-copyright a:active {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,41 @@
|
|||
<section class="view-content settings-about">
|
||||
<section class="about-ghost-intro">
|
||||
<h1>
|
||||
<span class="ghost_logo">
|
||||
<span class="hidden">Ghost</span>
|
||||
</span>
|
||||
<span class="version blue">v{{model.version}}</span>
|
||||
</h1>
|
||||
{{gh-notifications location="settings-about-upgrade" notify="updateNotificationChange"}}
|
||||
{{#unless updateNotificationCount}}
|
||||
<p>A free, open, simple publishing platform</p>
|
||||
{{/unless}}
|
||||
<section class="view-content">
|
||||
|
||||
<div class="about-environment-help clearfix">
|
||||
<div class="about-environment">
|
||||
<dl>
|
||||
<dt>Version:</dt>
|
||||
<dd class="about-environment-detail">{{model.version}}</dd>
|
||||
<dt>Environment:</dt>
|
||||
<dd class="about-environment-detail">{{model.environment}}</dd>
|
||||
<dt>Database:</dt>
|
||||
<dd class="about-environment-detail about-environment-database">{{model.database}}</dd>
|
||||
<dt>Mail:</dt>
|
||||
<dd class="about-environment-detail">{{#if model.mail}}{{model.mail}}{{else}}Native{{/if}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="about-help">
|
||||
<a href="http://support.ghost.org" class="btn">User Documentation</a>
|
||||
<a href="https://ghost.org/slack/" class="btn">Get Help With Ghost</a>
|
||||
</div>
|
||||
<header class="gh-about-header">
|
||||
<img class="gh-logo" src="{{gh-path 'admin' '/img/ghost-logo.png'}}" alt="Ghost" />
|
||||
<!-- TODO: fix about notifications -->
|
||||
{{gh-notifications location="settings-about-upgrade" notify="updateNotificationChange"}}
|
||||
</header>
|
||||
|
||||
<section class="gh-env-details">
|
||||
<ul class="gh-env-list">
|
||||
<li><strong>Version</strong> {{model.version}}</li>
|
||||
<li><strong>Environment</strong> {{model.environment}}</li>
|
||||
<li><strong>Database</strong> {{model.database}}</li>
|
||||
<li><strong>Mail</strong> {{#if model.mail}}{{model.mail}}{{else}}Native{{/if}}</li>
|
||||
</ul>
|
||||
<div class="gh-env-help">
|
||||
<a href="http://support.ghost.org" class="btn btn-minor" target="_blank">User Documentation</a>
|
||||
<a href="https://ghost.org/slack/" class="btn btn-minor" target="_blank">Get Help With Ghost</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-credits">
|
||||
<h1>The People Who Made it Possible</h1>
|
||||
<section class="gh-credits">
|
||||
<h2>The People Who Made it Possible</h2>
|
||||
|
||||
<ul class="top-contributors clearfix">
|
||||
<section class="gh-contributors">
|
||||
{{partial "contributors"}}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p class="about-contributors-info">Ghost is built by an incredible group of contributors from all over the world. Here are just a few of the people who helped create the version you’re using right now.</p>
|
||||
<p>Ghost is built by an incredible group of contributors from all over the world. Here are just a few of the people who helped create the version you’re using right now.</p>
|
||||
|
||||
<a href="https://ghost.org/about/contribute/" class="about-get-involved btn-blue btn-lg btn">Find out how you can get involved</a>
|
||||
<a href="https://ghost.org/about/contribute/" class="btn btn-blue btn-lg">Find out how you can get involved</a>
|
||||
|
||||
<p class="about-copyright">
|
||||
Copyright 2013 - 2015 Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE">MIT license</a>.
|
||||
<br>
|
||||
<a href="https://ghost.org/">Ghost</a> is a trademark of the <a href="https://ghost.org/about/">Ghost Foundation</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer class="gh-copyright-info">
|
||||
Copyright 2013 - 2015 Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE">MIT license</a>.
|
||||
<br>
|
||||
<a href="https://ghost.org/">Ghost</a> is a trademark of the <a href="https://ghost.org/about/">Ghost Foundation</a>.
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
BIN
public/assets/img/ghost-logo.png
Normal file
BIN
public/assets/img/ghost-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in a new issue