зеркало из https://github.com/github/vitess-gh.git
471 строка
8.5 KiB
SCSS
471 строка
8.5 KiB
SCSS
// MASTHEAD
|
|
// --------------------------------------------------
|
|
|
|
#masthead {
|
|
padding: $gutter;
|
|
z-index: 5;
|
|
@include transform(translate(0,0));
|
|
@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
|
|
&.slide {
|
|
@include transform(translate(-1600px,0));
|
|
}
|
|
.inner-wrap {
|
|
@include outer-container;
|
|
}
|
|
}
|
|
.site-title {
|
|
@include row;
|
|
@include media($large) {
|
|
@include span-columns(4);
|
|
}
|
|
padding: (.25 * $masthead-height) 0; // fourth the height to center vertically
|
|
height: $masthead-height;
|
|
text-decoration: none;
|
|
color: $black;
|
|
font-family: $alt-font;
|
|
font-weight: 700;
|
|
@include font-size(20,no);
|
|
line-height: .5 * $masthead-height; // half the height to center vertically
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
// NAVIGATIONS
|
|
// --------------------------------------------------
|
|
|
|
.menu {
|
|
li {
|
|
float: left;
|
|
&:last-child a {
|
|
@include media($medium) {
|
|
margin-right: 0; // remove spacing from last menu link
|
|
}
|
|
}
|
|
a {
|
|
// line hover effect
|
|
position: relative;
|
|
display: block;
|
|
margin-right: $gutter;
|
|
padding: (.25 * $masthead-height) 0 (.25 * $masthead-height) ;
|
|
height: $masthead-height;
|
|
font-family: $alt-font;
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2px;
|
|
@include transition(width 0.3s);
|
|
}
|
|
&:before {
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
&:after {
|
|
width: 0;
|
|
background: $black;
|
|
}
|
|
&:active:after,
|
|
&:hover:after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-menu {
|
|
display: none;
|
|
position: relative;
|
|
@include media($medium) {
|
|
@include span-columns(12);
|
|
}
|
|
@include media($large) {
|
|
@include span-columns(7);
|
|
ul {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
.home,
|
|
.sub-menu-item {
|
|
display: none;
|
|
}
|
|
li {
|
|
a {
|
|
font-weight: 700;
|
|
@include font-size(16,no);
|
|
line-height: .5 * $masthead-height; // half the height to center vertically
|
|
color: $black;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
.bottom-menu {
|
|
@include clearfix;
|
|
font-weight: 700;
|
|
a {
|
|
color: lighten($black,60);
|
|
}
|
|
}
|
|
|
|
|
|
// PAGE WRAPPER
|
|
// --------------------------------------------------
|
|
|
|
#page-wrapper {
|
|
padding: 0 $gutter; // add white space for smaller screens
|
|
@include size(100% 100%);
|
|
-webkit-overflow-scrolling: touch;
|
|
z-index: 2;
|
|
@include transform(translate(0,0));
|
|
@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
|
|
&.slide {
|
|
@include transform(translate(-60rem,0));
|
|
}
|
|
}
|
|
|
|
|
|
// BROWSER UPGRADE
|
|
// --------------------------------------------------
|
|
|
|
.upgrade {
|
|
text-align: center;
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
// MAIN
|
|
// --------------------------------------------------
|
|
|
|
#main {
|
|
.inner-wrap {
|
|
@include media($medium) {
|
|
@include span-columns(12);
|
|
}
|
|
}
|
|
.toc {
|
|
@include media($medium) {
|
|
@include row($direction: RTL);
|
|
}
|
|
@include media($large) {
|
|
@include span-columns(2 of 9);
|
|
}
|
|
}
|
|
.page-title {
|
|
@include fill-parent;
|
|
}
|
|
@at-root {
|
|
.page-content {
|
|
@include media($medium) {
|
|
@include row($direction: RTL);
|
|
//@include span-columns(7 of 9);
|
|
}
|
|
@include media($large) {
|
|
@include span-columns(7 of 9);
|
|
}
|
|
// larger font for intro paragraph
|
|
> p {
|
|
&:first-child {
|
|
@include font-size(20,yes,30);
|
|
}
|
|
}
|
|
// cleaner underlines for links
|
|
a { text-decoration: none; }
|
|
p > a,
|
|
li > a {
|
|
border-bottom: 1px dotted lighten($link-color, 50);
|
|
&:hover {
|
|
border-bottom-style: solid;
|
|
}
|
|
}
|
|
p > a.reversefootnote {
|
|
border-bottom-width: 0;
|
|
}
|
|
.page-footer,
|
|
.pagination {
|
|
@include fill-parent;
|
|
}
|
|
.page-meta {
|
|
p{
|
|
@include font-size(14,no);
|
|
font-family: $alt-font;
|
|
color: lighten($black,60);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@at-root {
|
|
.archive-wrap {
|
|
@include fill-parent;
|
|
.page-content {
|
|
@include reset-all;
|
|
@include fill-parent;
|
|
}
|
|
}
|
|
}
|
|
.ads {
|
|
position: relative;
|
|
text-align: center;
|
|
margin-top: $gutter;
|
|
margin-left: -$gutter;
|
|
margin-right: -$gutter;
|
|
padding: 10px 0 20px;
|
|
background: lighten($border-color,5);
|
|
@include media($medium) {
|
|
@include span-columns(3);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
&:after {
|
|
content: 'Advertisement';
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
display: block;
|
|
@include font-size(9,no);
|
|
font-family: $alt-font;
|
|
}
|
|
ins {
|
|
border-width: 0;
|
|
}
|
|
}
|
|
}
|
|
// page lead
|
|
.page-lead {
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
text-align: center;
|
|
color: $white;
|
|
@include media($large) {
|
|
background-size: cover;
|
|
}
|
|
}
|
|
.page-lead-content {
|
|
padding: 1em;
|
|
@include media($medium) {
|
|
padding: 2em;
|
|
}
|
|
@include media($large) {
|
|
padding: 3em;
|
|
}
|
|
h1 {
|
|
@include font-size(48);
|
|
@include media($medium) {
|
|
@include font-size(60);
|
|
}
|
|
@include media($large) {
|
|
@include font-size(72);
|
|
}
|
|
}
|
|
h2 {
|
|
@include font-size(20);
|
|
@include media($medium) {
|
|
@include font-size(24);
|
|
}
|
|
@include media($large) {
|
|
@include font-size(32);
|
|
}
|
|
}
|
|
}
|
|
// page header
|
|
.page-feature {
|
|
@include fill-parent;
|
|
// expand image to cover full width of header
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
// make image flush with edges on small screens
|
|
.page-image {
|
|
position: relative;
|
|
margin-left: -1 * $gutter;
|
|
margin-right: -1 * $gutter;
|
|
// Feature Image Caption
|
|
.image-credit {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
padding: 10px 15px;
|
|
background-color: rgba($black,.5);
|
|
color: $white;
|
|
font-family: $alt-font;
|
|
@include font-size(12,no);
|
|
text-align: right;
|
|
z-index: 10;
|
|
a {
|
|
color: $white;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
// breadcrumbs
|
|
.breadcrumbs {
|
|
@include row;
|
|
margin-top: $gutter;
|
|
@include font-size(10,no);
|
|
a {
|
|
display: inline-block;
|
|
font-family: $alt-font;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
// table of contents
|
|
.toc {
|
|
min-height: 1px;
|
|
ul {
|
|
margin-top: $gutter;
|
|
border: 1px solid $border-color;
|
|
border-radius: $border-radius;
|
|
}
|
|
li {
|
|
@include media($micro) { @include font-size(16,no,18); }
|
|
@include media($small) { @include font-size(16,no,18); }
|
|
@include font-size(12,no,16);
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
font-family: $alt-font;
|
|
a {
|
|
display: block;
|
|
padding: (.25 * $gutter) (.5 * $gutter);
|
|
border-left: 2px solid transparent;
|
|
&:hover,
|
|
&:focus {
|
|
background: lighten($border-color,5);
|
|
}
|
|
}
|
|
}
|
|
// tiles
|
|
.tile {
|
|
@include outer-container;
|
|
margin-bottom: $gutter;
|
|
@include media($micro) {
|
|
@include fill-parent;
|
|
}
|
|
@include media($small) {
|
|
@include span-columns(6);
|
|
@include omega(2n);
|
|
}
|
|
@include media($medium) {
|
|
@include span-columns(3);
|
|
@include omega(4n);
|
|
}
|
|
.entry-date {
|
|
@include font-size(16,no);
|
|
color: lighten($text-color,25);
|
|
}
|
|
.post-title {
|
|
@include font-size(18,no);
|
|
}
|
|
.post-excerpt {
|
|
@include font-size(16);
|
|
}
|
|
.post-teaser {
|
|
position: relative;
|
|
display: block;
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba($base-color,0);
|
|
pointer-events: none;
|
|
@include transition(background 0.3s);
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
background: rgba($base-color,0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// footnotes
|
|
.footnotes {
|
|
font-family: $alt-font;
|
|
p, li {
|
|
@include font-size(12,no);
|
|
}
|
|
&:before {
|
|
content: 'Footnotes:';
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
// page footer
|
|
.page-footer {
|
|
position: relative;
|
|
}
|
|
.author-image {
|
|
position: absolute;
|
|
left: 0;
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
.author-content {
|
|
word-wrap: break-word;
|
|
padding-left: 100px; //avatar width + 20px padding
|
|
min-height: 80px; //mirrors avatar height
|
|
}
|
|
.author-name {
|
|
@include font-size(20,no);
|
|
}
|
|
.author-bio {
|
|
margin-top: 0;
|
|
@include font-size(16);
|
|
}
|
|
|
|
|
|
// SCROLL ARROW CUE
|
|
// --------------------------------------------------
|
|
|
|
#scroll-cue {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
@include media($short) {
|
|
bottom: 0;
|
|
}
|
|
left: 50%;
|
|
width: 2 * $button-size;
|
|
height: 2 * $button-size;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: $white;
|
|
@include font-size(12);
|
|
font-family: $alt-font;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
|
|
// FOOTER
|
|
// --------------------------------------------------
|
|
|
|
#site-footer {
|
|
@include outer-container;
|
|
margin-top: (3 * (0px + $doc-line-height));
|
|
margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size)));
|
|
padding-bottom: $gutter;
|
|
font-family: $alt-font;
|
|
.copyright {
|
|
@include font-size(12);
|
|
color: lighten($black,60);
|
|
a {
|
|
color: lighten($black,60);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
} |