/*---------------------------------------------------
[Table of Contents]
1. Global UI
1a. Variables: Colors
1b. Styles: Colors
1c. Box-Sizing
1d. Components
i. Cards
1e. Navbar
2. Section Styles
2a. Global Section Styles
2b. Section: Landing
2c. Section: About
2d. Section: Works
2e. Section: Contact
2f. Section: Extras
2g. Footer
3. Backgrounds
4. Responsive
5. Notes
---------------------------------------------------*/
/****************************************************/
/* GLOBAL UI*/
/****************************************************/
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Dosis:100,200,300,400,500,600,700,800,900);
html {
}
body {
font-family: 'Raleway', serif;
font-size: 1.4em;
}
/************** VARIABLES: COLORS **************/
$theme-gray: #bebebe;
$matching-blue: rgb(60, 213, 233);
$mostly-white: rgba(255, 255, 255, .95);
$darkest-gray: rgb(47,47, 47);
$primary-red: #E9503C;
$yellow: #F1F059;
$primary-blue: #2196f3;
$dark-blue: #1976d2;
$light-blue: #bbdefb;
$lime: #E4E948;
$semi-white: rgba(255, 255, 255, .7);
$red: rgba(255, 56, 56, .8);
$mint: #CBF0E9;
$skyblue: #04B9D3;
$brightblue: #80FDF9;
$greenblue: #04A0B9;
$greenblue-text: rgba(0, 104, 116, .9);
$mat-dark-primary: rgba(0, 0, 0, .87);
$mat-dark-primary-light: rgba(0, 0, 0, .7);
$mat-dark-secondary: rgba(0, 0, 0, .54);
$darkgray: #333;
$darkcyan: #111617;
$darkgray-on-red: #2a2a2a;
/************** STYLES: COLORS **************/
.bg-darkest-gray {
background-color: $darkest-gray;
}
.bg-darkcyan {
background-color: $darkcyan;
}
.bg-mint {
background-color: $mint;
}
.bg-greenblue {
background-color: $greenblue;
}
.bg-skyblue {
background-color: $skyblue;
}
.bg-brightblue {
background-color: $brightblue;
}
/************** BOX-SIZING **************/
.p-t-40 {
padding-top: 40px;
}
.p-t-100 {
padding-top: 100px;
}
.p-t-175 {
padding-top: 175px;
}
.p-t-200 {
padding-top: 200px;
}
.p-t-225 {
padding-top: 2250px;
}
.p-b-40 {
padding-bottom: 40px;
}
.p-b-50 {
padding-bottom: 50px;
}
.p-b-75 {
padding-bottom: 750px;
}
.p-b-100 {
padding-bottom: 100px;
}
.p-b-115 {
padding-bottom: 115px;
}
.p-l-65 {
padding-left: 65px;
}
.p-l-115 {
padding-left: 115px;
}
.p-r-50 {
padding-right: 50px;
}
.p-r-80 {
padding-right: 80px;
}
.p-r-100 {
padding-right: 100px;
}
/************** COMPONENTS **************/
/***** CARDS ****/
.card {
background: rgba(0, 0, 0, .7);
position: relative;
border-radius: 2px;
height: 540px;
width: 100%;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card-header {
background-color: $primary-red;
color: $darkgray-on-red;
border-radius: 2px;
height: 50px;
position: relative;
width: 100%;
margin-bottom: 5px;
text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
padding: 8px 0;
font-size: 1.5em;
font-weight: 400;
text-align: center;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card img {
height: 100%;
}
/************** NAVBAR **************/
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
/* right: 0; */
/* left: 0; */
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 45px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
/* margin-right: 30px; */
/* margin-left: 30px; */
}
nav.navbar {
font-size: 1.1em;
}
.navbar.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar.navbar-default a.navbar-brand.skewed {
margin-right: 5px;
margin-left: 5px;
height: 50px;
transform: skew(318deg);
background: #E7ED49;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.navbar-nav>li.skewed {
margin-right: 5px;
margin-left: 5px;
height: 50px;
transform: skew(318deg);
background: $primary-red;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.navbar-default .navbar-nav>li>a {
color : $darkgray-on-red;
font-weight: 300;
padding: 15px 25px;
transform: skew(42deg);
/* text-shadow: 2px 2px rgba(0,0,0, 0.1); */
text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
/****************************************************/
/* SECTION STYLES */
/****************************************************/
/************** GLOBAL SECTION STYLES **************/
section.component i.fa {
color: $primary-red;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
padding-top: 30px;
}
section.component {
color: $mostly-white;
padding-top: 70px;
font-family: 'Dosis', serif;
padding-bottom: 120px;
}
section.component h2 {
color: $matching-blue;
margin-bottom: 30px;
font-size: 2.8em;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
text-transform: uppercase;
}
section.component h3 {
margin-bottom: 20px;
font-size: 2.2em;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
color: $matching-blue;
}
section.component h5 {
margin-bottom: 40px;
font-size: 2em;
font-weight: 300;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
}
section.component p {
margin-bottom: 20px;
font-size: 1.6em;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
}
section.component.content {
padding: 30px;
}
section.component.parallax {
min-height: 1000px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/************** SECTION: LANDING **************/
#landing h2,
#landing p {
padding-right: 50px;
}
#landing p {
color: $theme-gray;
}
/************** SECTION: ABOUT **************/
/************** SECTION: WORKS **************/
#works div[class*="col-"] {
margin-bottom: 60px;
}
/************** SECTION: EXTRAS **************/
#extras p {
color: #fff;
}
/************** SECTION: FOOTER **************/
#footer {
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
#footer i.fa {
padding-top: 0;
color: $primary-red;
}
#footer i.fa.fa-stack-1x {
padding-top: 0;
color: $mostly-white;
}
#footer h2 {
font-size: 1.7em;
margin-bottom: 20px;
}
#footer p {
font-size: 1.3em;
}
#footer a {
font-size: 1.15em;
text-decoration: none;
color: $matching-blue;
text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
#footer div[class*="col-"] {
margin-bottom: 50px;
}
#footer p.copyright {
font-size: 1.15em;
margin-top: 50px;
color: $semi-white;
}
/****************************************************/
/* BACKGROUNDS */
/****************************************************/
section.component.image-2 {
background-image: url(http://lh3.googleusercontent.com/-alKGdDNrZpk/VF5nZFBacnI/AAAAAAAAZfM/u6LmXTEmysk/w958-h724-no/14%2B-%2B18);
}
section.component.image-3 {
background-image: url(http://www.topofandroid.com/wp-content/uploads/2015/05/Android-L-Material-Design-Wallpapers-12.jpg);
}
section.component.image-4 {
background-image: url(https://lh3.googleusercontent.com/-alKGdDNrZpk/VF5nZFBacnI/AAAAAAAAZfM/u6LmXTEmysk/w958-h724-no/14%2B-%2B18);
}
section.component.image-5 {
background-image: url(http://substantial.com/assets/images/blog/2015/05/materialdesign_blog.png);
}
section.component.image-5b {
background-image: url(https://cdn-images.xda-developers.com/direct/3/3/9/3/1/1/8/Design.jpg);
}
section.component.image-6 {
background-image: url(http://lh5.googleusercontent.com/-7fiskJ9M42I/VF5nZGXuOKI/AAAAAAAAZlU/kEXZl1E_QQc/w958-h539-no/14%2B-%2B110);
}
section.component.image-7 {
background-image: url(http://lh3.googleusercontent.com/-b_fSb0VJPYk/VF5nZCpXx3I/AAAAAAAAavs/tVSt6--l1Yk/s765-no/14%2B-%2B14);
}
section.component.image-8 {
background-image: url(http://www.topofandroid.com/wp-content/uploads/2015/05/Android-L-Material-Design-Wallpapers-12.jpg);
}
section.component.image-9 {
background-image: url(http://wallpaperspal.com/wp-content/uploads/Material-Design-Blue-Scheme-Wallpaper.jpg);
}
section.component.image-10 {
background-image: url(https://4.bp.blogspot.com/-LM_oSHCnkLo/VJmEHDx_BQI/AAAAAAAAGGM/6a6PDdHyIJE/s0/2.png);
}
section.component.image-12 {
background-image: url(http://likefon.com/uploads/p1g/android-l-material-design-3707.jpg);
}
section.component.image-dark-red-a {
background-image: url(http://orig11.deviantart.net/20eb/f/2015/030/6/f/_minflat__dark_material_design_wallpaper__4k__by_dakoder-d8fjqzu.jpg);
}
section.component.image-dark-red-b {
background-image: url(http://4kwallpapers.co/wp-content/uploads/2015/07/Dark-Material-Design-4K-Wallpaper.jpg);
}
section.component.image-dark-red-c{
background-image: url(https://4.bp.blogspot.com/-flxbcly7cB8/VYUiSrhkj3I/AAAAAAABofw/kwrMmHvsyWY/s0/Dark_Material_Design3_wallpaper.jpg);
}
/****************************************************/
/* RESPONSIVE */
/****************************************************/
@media (min-width: 992px) {
// SECTION: LANDING
#landing p {
font-size: 1.8em;
padding-right: 100px;
}
// SECTION: WORKS
.card {
height: 385px
}
// SECTION: FOOTER
#footer {
text-align: left;
}
#footer p.copyright {
margin-top: 41px;
}
}
@media (min-width: 1200px) {
// SECTION: LANDING
#landing h2 {
padding-right: 10px;
}
#landing p {
padding-right: 70px;
}
}
/****************************************************/
/* Notes */
/****************************************************/
/*---------------------------------------------------
Images in the Works section - not properly scaled
prior to using them as they are just random
placeholders (no credits)
Backgrounds - pulled from Deviantart, credited
in footer. http://dakoder.deviantart.com/
Social Links - not connected
Responsive - minor responsive work to make
sure things worked properly at most viewports
- have not done font resizing, etc. Also - the navbar
dropdown when collapsed doesn't seem to be working
at small viewports. Likely the styling that is
breaking it.
Design - design originated from the fact that I knew
I wanted a parallelogram based navbar. From there,
I was going to go with something more in line
with a graffiti theme but I wanted to use
material design images which didn't match up with that.
I started with a "lighter" version of the site but
abandoned it upon finding a set of matching high
quality material design backgrounds.
The shape / color of the backgrounds gives off a sci-fi
feel and I think the blue accent for the headers
fits that perfectly.
This is far more than anyone will ever want to read, and no,
I typically wouldn't put this in a CSS file.
- Dephora
---------------------------------------------------*/
!
