add scss
This commit is contained in:
@@ -1,101 +1,7 @@
|
||||
#header {
|
||||
width: 100%;
|
||||
height: $header-height-large;
|
||||
border-bottom: 1px solid rgba($gray-color, 0.2);
|
||||
@extend .default-animation;
|
||||
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
|
||||
background: $light-color;
|
||||
color: $dark-color;
|
||||
|
||||
a {
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.logo svg path {
|
||||
fill: $header-color-dark;
|
||||
}
|
||||
|
||||
.header-dark &:not(.scrolled) {
|
||||
background: $header-color-dark;
|
||||
color: $light-color;
|
||||
a {
|
||||
color: rgba($light-color, 0.7) !important;
|
||||
}
|
||||
a.active {
|
||||
color: $light-color !important;
|
||||
}
|
||||
.dropmenu ul ul a {
|
||||
color: $dark-color !important;
|
||||
}
|
||||
.logo svg path {
|
||||
fill: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header-dark.header-transparent &:not(.scrolled) {
|
||||
background: rgba(#000, 0.05);
|
||||
}
|
||||
|
||||
.header-transparent &:not(.scrolled) {
|
||||
background: rgba(#fff, 0.05);
|
||||
//border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-section {
|
||||
height: $header-height-large;
|
||||
@extend .default-animation;
|
||||
|
||||
@include breakpoint(md) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-section.desktop-menu {
|
||||
@include breakpoint(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
svg, img {
|
||||
height: 42px;
|
||||
display: inherit;
|
||||
@extend .default-animation;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed Header solution
|
||||
.header-fixed & {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
Header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
h1{
|
||||
margin: 30px 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Animate Fixed Header
|
||||
body.header-fixed.header-animated {
|
||||
#header.scrolled {
|
||||
height: $header-height-small;
|
||||
|
||||
.navbar-section {
|
||||
height: $header-height-small;
|
||||
}
|
||||
|
||||
.logo {
|
||||
svg, img {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
~ .mobile-menu .button_container {
|
||||
top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-status-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
.modular-hero {
|
||||
#to-start {
|
||||
bottom: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modular-features {
|
||||
text-align: center;
|
||||
|
||||
&.offset-box {
|
||||
.frame-box {
|
||||
margin: -3rem (-1rem - $layout-spacing) 3rem;
|
||||
padding: 1rem 1rem;
|
||||
background: $light-color;
|
||||
box-shadow: 0 0 75px 0 rgba($dark-color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
|
||||
.columns {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.column:hover {
|
||||
.feature-icon i {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
display: block;
|
||||
justify-content: left;
|
||||
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
display: inherit;
|
||||
font-size: 70px;
|
||||
margin: 0 auto 1rem;
|
||||
transform: none;
|
||||
left: auto;
|
||||
top: auto;
|
||||
color: $gray-color;
|
||||
@extend .default-animation;
|
||||
|
||||
}
|
||||
h6 {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.frame-box {
|
||||
padding: 3rem 0;
|
||||
|
||||
> p {
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
padding: 1rem;
|
||||
|
||||
&:hover {
|
||||
.feature-icon {
|
||||
color: $gray-color;
|
||||
h6 {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.feature-content {
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 130px;
|
||||
height: 100px;
|
||||
color: $gray-color-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
@extend .default-animation;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
h6 {
|
||||
background: $light-color;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
display: block;
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
color: $gray-color;
|
||||
}
|
||||
}
|
||||
|
||||
.modular-text {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
.columns.left {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.sidebar-right{
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
ul{
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
a{
|
||||
color: grey;
|
||||
&:hover{
|
||||
&::after{
|
||||
content: "D";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
#start{
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -1,162 +1,18 @@
|
||||
html {
|
||||
@include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
|
||||
h1, h2, h3, p, ul, li, a{
|
||||
font-family: 'Montserrat-Regular';
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Header Overrides
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
font-family: $title-font-family;
|
||||
color: darken($body-font-color, 10%);
|
||||
h1{
|
||||
font-size: 1.2rem!important;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: 3rem;
|
||||
p{
|
||||
font-size: 8rem;
|
||||
line-height: 8rem;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: 1.8rem;
|
||||
ul{
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
h6, .h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.title-center {
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title-h1h2 {
|
||||
h1 {
|
||||
font-weight: 100;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.1;
|
||||
|
||||
strong, bold {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
h1 + h2 {
|
||||
line-height: 1.1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Typography Hints
|
||||
.title-h1h2, .title-center {
|
||||
h1 + h2 {
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Codeblocks
|
||||
pre code, pre.xdebug-var-dump{
|
||||
background: #fafafa;
|
||||
display: block;
|
||||
padding: 1rem !important;
|
||||
line-height: 1.5;
|
||||
color: inherit;
|
||||
border-radius: 2px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
code:not(.hljs) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon Tweaks
|
||||
i.fa {
|
||||
|
||||
|
||||
&.fa-heart, &.fa-heart-o {
|
||||
&.pulse {
|
||||
color: #920
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Font Weights
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.heavy {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
// Colors
|
||||
.text-light {
|
||||
color: rgba($light-color, 0.8);
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: rgba($light-color, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Error configuration
|
||||
#error {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 5rem;
|
||||
|
||||
.icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// Messages
|
||||
#messages {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $unit-8;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $unit-8;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
|
||||
// Notices
|
||||
.notices {
|
||||
margin: 1.5rem 0;
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
// Layout
|
||||
$horiz-padding: 1rem;
|
||||
$vert-padding: 2rem 0 2rem;
|
||||
|
||||
// Fonts
|
||||
$min-responsive-font-size: 16px;
|
||||
$title-font-family: $base-font-family, $fallback-font-family !default;
|
||||
|
||||
// Header
|
||||
$header-height-large: 4rem;
|
||||
$header-height-small: 2.3rem;
|
||||
$header-color-dark: #222;
|
||||
$header-text-light: $light-color;
|
||||
$header-text-dark: darken($dark-color, 15%);
|
||||
|
||||
// Dropdown Menu
|
||||
$dropmenu-bg: $light-color;
|
||||
$dropmenu-hover-text: $primary-color;
|
||||
$dropmenu-horiz-padding: 20px;
|
||||
$dropmenu-vert-padding: 7px;
|
||||
$dropmenu-child-padding: 10px;
|
||||
$dropmenu-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Mobile Menu
|
||||
$mobile-color-main: $primary-color;
|
||||
$mobile-color-active: #FFF;
|
||||
$mobile-color-link: #FFF;
|
||||
$mobile-button-height: 24px;
|
||||
$mobile-button-width: 28px;
|
||||
Reference in New Issue
Block a user