mirror of
https://github.com/picturepan2/instagram.css
synced 2024-06-09 09:22:26 +02:00
139 lines
1.9 KiB
SCSS
139 lines
1.9 KiB
SCSS
// Variables
|
|
@import "../../src/variables";
|
|
|
|
/*! Instagram.css v#{$version} | MIT License | github.com/picturepan2/instagram.css */
|
|
.version::after {
|
|
content: "#{$version}";
|
|
}
|
|
|
|
/* Core style */
|
|
.section-hero {
|
|
padding: 1.5rem .5rem;
|
|
}
|
|
|
|
.section-ad {
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.section-filters {
|
|
.container {
|
|
padding-bottom: 3rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.column {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.card {
|
|
border: 0;
|
|
}
|
|
|
|
.card-image {
|
|
box-shadow: 0 .3rem 2rem rgba(#333, .15);
|
|
|
|
img {
|
|
border-radius: .2rem;
|
|
}
|
|
}
|
|
|
|
.c-select-all {
|
|
user-select: all;
|
|
}
|
|
}
|
|
|
|
.section-footer {
|
|
color: $gray-color;
|
|
padding: 1.8rem .75rem 1rem .75rem;
|
|
position: relative;
|
|
|
|
p {
|
|
line-height: 1;
|
|
}
|
|
|
|
a {
|
|
color: $gray-color-dark;
|
|
}
|
|
}
|
|
|
|
.grid-hero {
|
|
letter-spacing: -.021em;
|
|
padding-bottom: 2rem;
|
|
padding-top: 3rem;
|
|
position: relative;
|
|
|
|
h1 {
|
|
color: $dark-color;
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
color: lighten($dark-color, 5%);
|
|
font-size: .9rem;
|
|
font-weight: 400;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.docs-ad {
|
|
background: $bg-color;
|
|
border-radius: .2rem;
|
|
display: block;
|
|
margin: 2rem 0;
|
|
padding: .5rem;
|
|
position: relative;
|
|
|
|
ins {
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.carbon-wrap {
|
|
.carbon-img {
|
|
display: block;
|
|
}
|
|
|
|
.carbon-text {
|
|
color: $gray-color-dark;
|
|
display: block;
|
|
font-size: .6rem;
|
|
}
|
|
}
|
|
|
|
.carbon-poweredby {
|
|
color: $gray-color;
|
|
font-size: .6rem;
|
|
}
|
|
}
|
|
|
|
.code {
|
|
.hljs-tag {
|
|
color: lighten($dark-color, 10%);
|
|
}
|
|
|
|
.hljs-comment {
|
|
color: $gray-color;
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-class,
|
|
.hljs-string {
|
|
color: $primary-color;
|
|
}
|
|
|
|
.hljs-name,
|
|
.hljs-attribute,
|
|
.hljs-variable,
|
|
.hljs-keyword,
|
|
.hljs-built_in {
|
|
color: $code-color;
|
|
}
|
|
|
|
.hljs-value,
|
|
.hljs-hexcolor {
|
|
color: lighten($dark-color, 10%);
|
|
}
|
|
} |