mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-06 07:15:32 -06:00
fix border
This commit is contained in:
Brittany Chiang
210
_scss/main.scss
210
_scss/main.scss
@@ -2,6 +2,7 @@
|
|||||||
@import 'partials/mixins';
|
@import 'partials/mixins';
|
||||||
@import 'partials/variables';
|
@import 'partials/variables';
|
||||||
@import 'partials/fonts';
|
@import 'partials/fonts';
|
||||||
|
@import 'partials/base';
|
||||||
@import 'partials/dotNav';
|
@import 'partials/dotNav';
|
||||||
@import 'partials/mobileMenu';
|
@import 'partials/mobileMenu';
|
||||||
@import 'partials/blockBtn';
|
@import 'partials/blockBtn';
|
||||||
@@ -15,212 +16,3 @@
|
|||||||
@import 'partials/footer';
|
@import 'partials/footer';
|
||||||
@import 'partials/404';
|
@import 'partials/404';
|
||||||
|
|
||||||
*,
|
|
||||||
*:after,
|
|
||||||
*:before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
// background: $midpointBlue;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: $Whitney, $sans-serif-stack;
|
|
||||||
height: 100%;
|
|
||||||
color: $white;
|
|
||||||
background-color: $dark-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: $Chronicle, $serif-stack;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2, h3 {
|
|
||||||
font-family: $Gotham, $sans-serif-stack;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-family: $Whitney, $sans-serif-stack;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noScroll {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
text-align: center;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
min-height: 700px;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
color: $white;
|
|
||||||
position: relative;
|
|
||||||
&:first-of-type {
|
|
||||||
background-color: #0054c7
|
|
||||||
}
|
|
||||||
&:nth-of-type(odd) {
|
|
||||||
background-color: #5b5b5b;
|
|
||||||
}
|
|
||||||
&:nth-of-type(even) {
|
|
||||||
background-color: $dark-grey;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.overlay-wrapper,
|
|
||||||
.section-wrapper {
|
|
||||||
padding: 100px;
|
|
||||||
@include MQ(MM) {
|
|
||||||
padding: 100px 50px;
|
|
||||||
}
|
|
||||||
@include MQ(S400) {
|
|
||||||
padding: 100px 25px;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3em;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 1.3em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
@include MQ(SM) {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.divider {
|
|
||||||
display: block;
|
|
||||||
margin: 30px 0px;
|
|
||||||
width: 100px;
|
|
||||||
height: 2px;
|
|
||||||
background-color: $blue;
|
|
||||||
}
|
|
||||||
.center {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.overlay-wrapper {
|
|
||||||
background: linear-gradient(to bottom, rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity));
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skrollr-desktop body {
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skrollr-body {
|
|
||||||
height: 100%;
|
|
||||||
overflow: visible;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap,
|
|
||||||
.skrollr .gap {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#intro-section .bg {
|
|
||||||
z-index: 0;
|
|
||||||
background-image: url('../img/bg-intro/intro-xl.jpg');
|
|
||||||
@include MQ(L) {
|
|
||||||
background-image: url('../img/bg-intro/intro-lg.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(MM) {
|
|
||||||
background-image: url('../img/bg-intro/intro-md.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(S660) {
|
|
||||||
background-image: url('../img/bg-intro/intro-sm.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(SM) {
|
|
||||||
background-image: url('../img/bg-intro/intro-xs.jpg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#services-section .bg {
|
|
||||||
background-image: url('../img/bg-services/services-xl.jpg');
|
|
||||||
@include MQ(L) {
|
|
||||||
background-image: url('../img/bg-services/services-lg.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(MM) {
|
|
||||||
background-image: url('../img/bg-services/services-md.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(S660) {
|
|
||||||
background-image: url('../img/bg-services/services-sm.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(SM) {
|
|
||||||
background-image: url('../img/bg-services/services-xs.jpg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#experience-section .bg {
|
|
||||||
background-image: url('../img/bg-experience/experience-xl.jpg');
|
|
||||||
@include MQ(L) {
|
|
||||||
background-image: url('../img/bg-experience/experience-lg.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(MM) {
|
|
||||||
background-image: url('../img/bg-experience/experience-md.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(S660) {
|
|
||||||
background-image: url('../img/bg-experience/experience-sm.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(SM) {
|
|
||||||
background-image: url('../img/bg-experience/experience-xs.jpg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#contact-section .bg {
|
|
||||||
background-image: url('../img/bg-contact/contact-xl.jpg');
|
|
||||||
@include MQ(L) {
|
|
||||||
background-image: url('../img/bg-contact/contact-lg.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(MM) {
|
|
||||||
background-image: url('../img/bg-contact/contact-md.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(S660) {
|
|
||||||
background-image: url('../img/bg-contact/contact-sm.jpg');
|
|
||||||
}
|
|
||||||
@include MQ(SM) {
|
|
||||||
background-image: url('../img/bg-contact/contact-xs.jpg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
209
_scss/partials/_base.scss
Normal file
209
_scss/partials/_base.scss
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
*,
|
||||||
|
*:after,
|
||||||
|
*:before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
// background: $midpointBlue;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: $Whitney, $sans-serif-stack;
|
||||||
|
height: 100%;
|
||||||
|
color: $white;
|
||||||
|
background-color: $dark-grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: $Chronicle, $serif-stack;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3 {
|
||||||
|
font-family: $Gotham, $sans-serif-stack;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: $Whitney, $sans-serif-stack;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noScroll {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: 700px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: $white;
|
||||||
|
position: relative;
|
||||||
|
&:first-of-type {
|
||||||
|
background-color: #0054c7
|
||||||
|
}
|
||||||
|
&:nth-of-type(odd) {
|
||||||
|
background-color: #5b5b5b;
|
||||||
|
}
|
||||||
|
&:nth-of-type(even) {
|
||||||
|
background-color: $dark-grey;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.overlay-wrapper,
|
||||||
|
.section-wrapper {
|
||||||
|
padding: 100px;
|
||||||
|
@include MQ(MM) {
|
||||||
|
padding: 100px 50px;
|
||||||
|
}
|
||||||
|
@include MQ(S400) {
|
||||||
|
padding: 100px 25px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
@include MQ(SM) {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
display: block;
|
||||||
|
margin: 30px 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: $blue;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.overlay-wrapper {
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity), rgba(0, 0, 0, $overlayOpacity));
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skrollr-desktop body {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skrollr-body {
|
||||||
|
height: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap,
|
||||||
|
.skrollr .gap {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#intro-section .bg {
|
||||||
|
z-index: 0;
|
||||||
|
background-image: url('../img/bg-intro/intro-xl.jpg');
|
||||||
|
@include MQ(L) {
|
||||||
|
background-image: url('../img/bg-intro/intro-lg.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(MM) {
|
||||||
|
background-image: url('../img/bg-intro/intro-md.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(S660) {
|
||||||
|
background-image: url('../img/bg-intro/intro-sm.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(SM) {
|
||||||
|
background-image: url('../img/bg-intro/intro-xs.jpg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#services-section .bg {
|
||||||
|
background-image: url('../img/bg-services/services-xl.jpg');
|
||||||
|
@include MQ(L) {
|
||||||
|
background-image: url('../img/bg-services/services-lg.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(MM) {
|
||||||
|
background-image: url('../img/bg-services/services-md.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(S660) {
|
||||||
|
background-image: url('../img/bg-services/services-sm.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(SM) {
|
||||||
|
background-image: url('../img/bg-services/services-xs.jpg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#experience-section .bg {
|
||||||
|
background-image: url('../img/bg-experience/experience-xl.jpg');
|
||||||
|
@include MQ(L) {
|
||||||
|
background-image: url('../img/bg-experience/experience-lg.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(MM) {
|
||||||
|
background-image: url('../img/bg-experience/experience-md.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(S660) {
|
||||||
|
background-image: url('../img/bg-experience/experience-sm.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(SM) {
|
||||||
|
background-image: url('../img/bg-experience/experience-xs.jpg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact-section .bg {
|
||||||
|
background-image: url('../img/bg-contact/contact-xl.jpg');
|
||||||
|
@include MQ(L) {
|
||||||
|
background-image: url('../img/bg-contact/contact-lg.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(MM) {
|
||||||
|
background-image: url('../img/bg-contact/contact-md.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(S660) {
|
||||||
|
background-image: url('../img/bg-contact/contact-sm.jpg');
|
||||||
|
}
|
||||||
|
@include MQ(SM) {
|
||||||
|
background-image: url('../img/bg-contact/contact-xs.jpg');
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.25s ease;
|
||||||
@include MQ(M) {
|
@include MQ(M) {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: padding-box;
|
box-sizing: padding-box;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.25s ease;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
|||||||
@@ -57,8 +57,8 @@
|
|||||||
@include MQ(SM) {
|
@include MQ(SM) {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
&:nth-of-type(odd) {
|
&:nth-of-type(even) {
|
||||||
border-right: 1px solid $whiteRGBA;
|
border-left: 1px solid $whiteRGBA;
|
||||||
@include MQ(S660) {
|
@include MQ(S660) {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user