Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Merge pull request #3907 from PaulAdamDavis/fix-about-styles

Browse source 
Update About page styles
This commit is contained in:
Hannah Wolfe 2014-09-02 21:16:50 +01:00
commit cfd987b748
1 changed files with 94 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
core/client/assets/sass/layouts/about.scss
View file

@ -5,15 +5,25 @@
.settings-about { .settings-about {
h1 {
letter-spacing: 0;
}
.ghost_logo { .ghost_logo {
@include icon($i-ghost, 1.28rem, $midgrey) { position: relative;
left: 3px;
@include icon($i-ghost, 1.7rem, $midgrey) {
position: relative; position: relative;
top: -6px; top: -6px;
}; };
@include icon-after($i-ghost-logo, 2.5rem, $darkgrey); @include icon-after($i-ghost-logo, 3.2rem, $darkgrey) {
position: relative;
left: -5px;
};
} }
p { h1 + p {
margin-top: 1px;
color: $midgrey; color: $midgrey;
} }
@ -31,9 +41,11 @@
.version { .version {
font-weight: 300; font-weight: 300;
font-size: 1.3rem; font-size: 1.8rem;
position: relative; position: relative;
top: -3px; top: -3px;
left: -9px;
color: $blue;
} }
} }
@ -48,27 +60,48 @@
} }
.about-environment { .about-environment {
p { dl {
@include clearfix;
color: $midgrey;
margin: 2px 0 0 0;
line-height: 1.6;
}
dt, dd {
width: auto;
float: left;
display: inline-block;
margin: 0; margin: 0;
line-height: 1.7; }
dt {
margin-right: 5px;
}
.about-environment-detail {
text-transform: capitalize;
} }
} }
.about-help { .about-help {
padding-top: 6px; padding-top: 8px;
@media (max-width: 500px) { @media (max-width: 500px) {
padding-top: 16px; padding-top: 16px;
} }
.btn-alt { .btn {
width: 100%; width: 100%;
display: block; display: block;
font-size: 0.85rem; font-size: 0.9rem;
padding-top: 8px; padding-top: 9px;
padding-bottom: 8px; padding-bottom: 9px;
min-height: 32px; min-height: 32px;
background: #A1ADB3;
color: #fff;
&:hover {
background: darken(#A1ADB3, 10%);
}
&:nth-child(1) { &:nth-child(1) {
margin-bottom: 11px; margin-bottom: 11px;
} }
@ -83,11 +116,11 @@
} }
.about-environment { .about-environment {
float: left; float: left;
width: calc(100% - 196px); width: calc(100% - 190px);
} }
.about-help { .about-help {
float: right; float: right;
width: 176px; width: 170px;
} }
} }
@ -98,7 +131,7 @@
.top-contributors { .top-contributors {
padding-left: 0; padding-left: 0;
max-width: 650px; max-width: 660px;
li { li {
float: left; float: left;
@ -123,6 +156,39 @@
border-radius: 100%; border-radius: 100%;
} }
position: relative;
&:before {
opacity: 0;
content: attr(title);
position: absolute;
top: -27px;
left: 50%;
transform: translateX(-50%);
background: $darkgrey;
color: #fff;
padding: 2px 6px 3px;
border-radius: $rounded;
transition: opacity 0.15s ease-in-out;
font-size: 1rem;
pointer-events: none;
}
&:after {
opacity: 0;
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
transition: opacity 0.15s ease-in-out;
@include triangle(8px, $darkgrey, "down");
}
&:hover {
&:before,
&:after {
opacity: 1;
}
}
} }
} // li } // li
@ -135,27 +201,32 @@
// -------------------------------------------------- // --------------------------------------------------
.about-credits { .about-credits {
margin-top: 48px; margin-top: 45px;
h1 { h1 {
font-size: 1.85rem; font-size: 2.4rem;
margin-bottom: 2rem; margin-bottom: 24px;
} }
} }
.about-contributors-info { .about-contributors-info {
margin-right: -0.9rem; margin-top: -12px;
font-size: 1.2rem; margin-bottom: 22px;
font-size: 1.6rem;
max-width: 620px; max-width: 620px;
} }
.about-get-involved { .about-get-involved {
margin-top: -0.1rem; font-size: 1.2rem;
font-size: 0.9rem; width: 100%;
display: inline-block;
max-width: 290px;
text-transform: uppercase;
text-align: center;
} }
.about-copyright { .about-copyright {
margin-top: 4.9rem; margin-top: 62px;
a { a {
&:link, &:link,