| Current Path : /home/p/o/n/poneycluc/www/templates/ja_stark/scss/ |
| Current File : /home/p/o/n/poneycluc/www/templates/ja_stark/scss/_typo.scss |
/**
* $JA#COPYRIGHT$
*/
// ------------------------------------
// Ovveride of BS "type.scss".
// Leave blank to use default styles
// ------------------------------------
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
small,
.small {
font-weight: normal;
line-height: 1;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: $spacer;
margin-bottom: ($spacer / 2);
small,
.small {
font-size: 65%;
}
}
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: ($spacer / 2);
margin-bottom: ($spacer / 2);
small,
.small {
font-size: 75%;
}
}
h1, .h1 {
font-size: $h1-font-size;
@include media-breakpoint-down(md) {
font-size: $h1-font-size*0.75 !important;
}
}
h2, .h2 {
font-size: $h2-font-size;
@include media-breakpoint-down(md) {
font-size: $h2-font-size*0.75 !important;
}
}
h3, .h3 {
font-size: $h3-font-size;
@include media-breakpoint-down(md) {
font-size: $h3-font-size*0.75 !important;
}
}
h4, .h4 {
font-size: $h4-font-size;
@include media-breakpoint-down(md) {
font-size: $h4-font-size*0.75 !important;
}
}
h5, .h5 {
font-size: $h5-font-size;
@include media-breakpoint-down(md) {
font-size: $h5-font-size*0.75 !important;
}
}
h6, .h6 {
font-size: $h6-font-size;
@include media-breakpoint-down(md) {
font-size: $h6-font-size*0.75 !important;
}
}
.lead {
font-size: $lead-font-size;
line-height: 1.875;
}
// Type display classes
.display-1 {
}
.display-2 {
}
.display-3 {
}
.display-4 {
}
//
// Horizontal rules
//
hr {
}
//
// Emphasis
//
small,
.small {
font-size: $font-size-sm;
font-weight: $font-weight-normal;
}
mark,
.mark {
}
//
// Image
//
.img-rounded {
border-radius: 5px;
}
//
// Lists
//
.list-unstyled {
}
// Inline turns list items into inline-block
.list-inline {
}
.list-inline-item {
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Alert message
.alert-error {
@extend .alert-danger;
}
//
// Misc
//
// Builds on `abbr`
.initialism {
}
// Blockquotes
.blockquote {
}
.blockquote-footer {
}
// Font weight
.fw-thin { font-weight: 300; }
.fw-semi-bold { font-weight: 500; }
.fw-bold { font-weight: 600; }
.fs-xs { font-size: ($font-size-base * .725); }
.fs-sm { font-size: ($font-size-base * .875); }
.fs-base { font-size: $font-size-base; }
.fs-lg { font-size: ($font-size-base * 1.25); }
//
// Feature list (Custom style for)
// ------------------------------------
.features-list {
> div {
margin-bottom: $spacer*2;
@include media-breakpoint-up(md) {
margin-bottom: 0;
}
}
.item {
height: 100%;
margin-bottom: $spacer*2.5;
.icon {
display: inline-block;
border-radius: 50%;
height: 80px;
text-align: center;
width: 80px;
i {
color: $gray-500;
font-size: $font-size-base*2.5;
line-height: 80px;
}
}
}
.card {
background-color: $white;
border: 1px solid lighten($border-color, 25%);
border-radius: 9px;
height: 100%;
padding: $spacer*3 $spacer*1.5;
transition: $transition-base;
&:hover {
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
border-color: $border-color;
.icon {
box-shadow: none;
color: $blue;
}
}
}
.icon {
background-color: $gray-100;
border-radius: 50%;
color: $gray-500;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 auto $spacer*2;
transition: $transition-base;
width: 100px;
}
.block-title {
font-size: $h5-font-size;
margin-bottom: $spacer;
}
}
//
// Dark background
// ----------------------
.t4-section.sec-bg-dark {
// Feature list
.features-list {
.card {
background-color: rgba($black, .1);
}
.icon {
background-color: rgba($black, .15);
}
.item {
.icon {
i {
color: rgba($white, .4);
}
}
}
}
.testimonial-block {
background-color: rgba($black, .1);
&:after {
background: rgba($white, .1);
}
}
}
//
// Introduction
// ------------
.t4-introduction {
background-color: $gray-100;
padding-top: $spacer*5;
padding-bottom: $spacer*5;
h3 {
font-weight: 600;
margin-bottom: $spacer*2;
}
p {
margin-bottom: $spacer*2;
}
}
// T4 EXTRA CUSTOM TYPOGRAPHY
// ----------------------------------------
// Section heading
.section-heading {
margin-bottom: $spacer*3;
@include media-breakpoint-up(sm) {
margin-left: 15%;
margin-right: 15%;
}
h2 {
font-size: $h2-font-size;
font-weight: 600;
@include media-breakpoint-up(sm) {
font-size: $h1-font-size*1.1;
}
}
p {
font-size: $font-size-lg;
}
}
//
// Testimonials block
ul.testimonial-list {
list-style: none;
margin: 0;
padding: $spacer*3 0 0;
text-align: center;
@include clearfix();
li {
margin-bottom: $spacer*5;
&:last-child {
margin-bottom: 0;
}
@include media-breakpoint-up(md) {
margin-bottom: 0;
}
}
}
.testimonial-block {
border-radius: $border-radius-lg;
box-shadow: 0 -2px 10px rgba(0,0,0,0.085);
padding: 0 $spacer*3 $spacer*2;
position: relative;
&:after {
background-color: $gray-400;
border-radius: 5px;
content: "";
display: block;
height: 4px;
position: absolute;
left: $spacer*3;
right: $spacer*3;
bottom: -2px;
transition: all 0.25s;
}
&:hover {
&:after {
background-color: $blue;
}
}
img {
max-width: $spacer*6;
margin-top: -$spacer*3;
margin-bottom: $spacer*1.5;
&.img-rounded {
border-radius: $border-radius-lg;
}
&.img-circle {
border-radius: 50%;
}
}
.author-name {
font-size: $font-size-base;
font-weight: $font-weight-bold;
letter-spacing: 0.5px;
margin: 0 0 $spacer;
text-transform: uppercase;
}
}
//
// Pre code
pre {
background-color: $gray-100;
border-radius: 3px;
font-family: Consolas, monospace;
padding: $spacer/2 $spacer;
}
// ---------------------------------
// HERO
// ---------------------------------
#t4-hero {
background: $black;
padding-top: 20rem;
padding-bottom: 20rem;
@include media-breakpoint-down(md) {
padding-top: 10rem;
padding-bottom: 10rem;
}
.bg-overlay {
&:before {
content: "";
position: absolute;
background: $black;
opacity: .5;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
#t4-header + & {
margin-top: -79px;
@include media-breakpoint-down(md) {
margin-top: -53px;
}
}
}
// ---------------------------------
// CUSTOM STYLE FOR EXAMPLE PAGE
// ---------------------------------
.docs-section {
}
.t4-typo-example {
padding: $spacer;
margin-right: 0;
margin-left: 0;
margin-bottom: $spacer;
border: 1px solid $border-color;
& + .t4-typo-example {
margin-top: $spacer;
}
}