[update] Style Home page
This commit is contained in:
brunosimon
@@ -2,17 +2,10 @@ var gulp = require( 'gulp' ),
|
||||
concat = require( 'gulp-concat' ),
|
||||
uglify = require( 'gulp-uglify' ),
|
||||
watch = require( 'gulp-watch' ),
|
||||
minify_css = require( 'gulp-minify-css' ),
|
||||
autoprefixer = require( 'gulp-autoprefixer' ),
|
||||
postcss = require( 'gulp-postcss' ),
|
||||
precss = require( 'precss' ),
|
||||
postcss_import = require( 'postcss-import' ),
|
||||
cssnano = require( 'cssnano' ),
|
||||
sourcemaps = require( 'gulp-sourcemaps' ),
|
||||
spritesmith = require( 'gulp.spritesmith' ),
|
||||
merge = require( 'merge-stream' ),
|
||||
gulp_sourcemaps = require( 'gulp-sourcemaps' ),
|
||||
plumber = require( 'gulp-plumber' ),
|
||||
gulp_rename = require( 'gulp-rename' ),
|
||||
gulp_stylus = require( 'gulp-stylus' ),
|
||||
browser_sync = require( 'browser-sync' ).create();
|
||||
|
||||
var path = '../';
|
||||
@@ -44,66 +37,43 @@ var path = '../';
|
||||
|
||||
gulp.task( 'stylesheet', function()
|
||||
{
|
||||
var requires = [
|
||||
autoprefixer,
|
||||
precss,
|
||||
postcss_import,
|
||||
cssnano,
|
||||
];
|
||||
|
||||
// Post CSS
|
||||
return gulp.src( path + 'stylesheet/main.css' )
|
||||
.pipe( sourcemaps.init() )
|
||||
.pipe( plumber( function( error )
|
||||
{
|
||||
console.log( error );
|
||||
this.emit( 'end' );
|
||||
return gulp.src( path + 'stylus/style.styl' )
|
||||
.pipe( gulp_sourcemaps.init() )
|
||||
.pipe( plumber() )
|
||||
.pipe( gulp_stylus( {
|
||||
compress: true,
|
||||
} ) )
|
||||
.pipe( postcss( requires ) )
|
||||
.pipe( gulp_rename( {
|
||||
// dirname: "main/text/ciao",
|
||||
// basename: "aloha",
|
||||
// prefix: "bonjour-",
|
||||
suffix: ".min",
|
||||
// extname: ".md"
|
||||
} ) )
|
||||
.pipe( sourcemaps.write( '.' ) )
|
||||
.pipe( gulp.dest( path + 'stylesheet/' ) )
|
||||
.pipe( gulp_sourcemaps.write( '.' ) )
|
||||
.pipe( gulp.dest( path + 'stylesheet' ) )
|
||||
.pipe( browser_sync.stream( { match: '**/*.css' } ) );
|
||||
});
|
||||
|
||||
/**
|
||||
* SPRITES
|
||||
*/
|
||||
gulp.task( 'sprites', function()
|
||||
{
|
||||
var sprite_data = gulp.src( path + 'images/sprites/**/*.{png,jpg}' )
|
||||
.pipe( plumber() )
|
||||
.pipe( spritesmith( {
|
||||
|
||||
// Options
|
||||
padding : 4,
|
||||
// var requires = [
|
||||
// autoprefixer,
|
||||
// precss,
|
||||
// postcss_import,
|
||||
// cssnano,
|
||||
// ];
|
||||
|
||||
// Default
|
||||
imgName : 'sprites.png',
|
||||
cssName : '_sprites.scss',
|
||||
imgPath : path + 'images/sprites.png',
|
||||
|
||||
// Retina
|
||||
retinaSrcFilter: [path + 'images/sprites/*-2x.png'],
|
||||
retinaImgName: 'sprites-2x.png',
|
||||
retinaImgPath: path + 'images/sprites-2x.png'
|
||||
} ) );
|
||||
|
||||
var img_stream = sprite_data.img
|
||||
.pipe( plumber() )
|
||||
.pipe( gulp.dest( path + 'images/' ) );
|
||||
|
||||
var css_stream = sprite_data.css
|
||||
.pipe( plumber() )
|
||||
.pipe( gulp.dest( path + 'sass/base/' ) );
|
||||
|
||||
return merge( img_stream, css_stream );
|
||||
// // Post CSS
|
||||
// return gulp.src( path + 'stylesheet/main.css' )
|
||||
// .pipe( gulp_sourcemaps.init() )
|
||||
// .pipe( plumber( function( error )
|
||||
// {
|
||||
// console.log( error );
|
||||
// this.emit( 'end' );
|
||||
// } ) )
|
||||
// .pipe( postcss( requires ) )
|
||||
// .pipe( gulp_rename( {
|
||||
// // dirname: "main/text/ciao",
|
||||
// // basename: "aloha",
|
||||
// // prefix: "bonjour-",
|
||||
// suffix: '.min',
|
||||
// // extname: ".md"
|
||||
// } ) )
|
||||
// .pipe( gulp_sourcemaps.write( '.' ) )
|
||||
// .pipe( gulp.dest( path + 'stylesheet/' ) )
|
||||
// .pipe( browser_sync.stream( { match: '**/*.css' } ) );
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -111,10 +81,11 @@ gulp.task( 'sprites', function()
|
||||
*/
|
||||
gulp.task( 'browser_sync', function()
|
||||
{
|
||||
console.log('ok');
|
||||
browser_sync.init( {
|
||||
proxy:
|
||||
{
|
||||
target: 'http://localhost:3000',
|
||||
target: 'http://localhost:1571',
|
||||
ws : true
|
||||
}
|
||||
} );
|
||||
@@ -125,7 +96,6 @@ gulp.task( 'browser_sync', function()
|
||||
*/
|
||||
gulp.task( 'watch', function()
|
||||
{
|
||||
console.log('ok');
|
||||
// // JS
|
||||
// watch(
|
||||
// [
|
||||
@@ -140,9 +110,7 @@ gulp.task( 'watch', function()
|
||||
// Stylesheet
|
||||
watch(
|
||||
[
|
||||
path + 'stylesheet/**',
|
||||
'!' + path + 'stylesheet/main.min.css',
|
||||
'!' + path + 'stylesheet/main.min.css.map'
|
||||
path + 'stylus/**',
|
||||
],
|
||||
function()
|
||||
{
|
||||
|
||||
@@ -7,20 +7,13 @@
|
||||
"dependencies": {
|
||||
"autoprefixer": "^6.4.0",
|
||||
"browser-sync": "^2.13.0",
|
||||
"cssnano": "^3.7.4",
|
||||
"gulp": "^3.8.10",
|
||||
"gulp-autoprefixer": "^2.1.0",
|
||||
"gulp-concat": "^2.4.3",
|
||||
"gulp-minify-css": "^0.3.13",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sourcemaps": "^1.6.0",
|
||||
"gulp-stylus": "^2.5.0",
|
||||
"gulp-uglify": "^1.1.0",
|
||||
"gulp-watch": "^3.0.0",
|
||||
"gulp.spritesmith": "^6.2.1",
|
||||
"merge-stream": "^1.0.0",
|
||||
"postcss-import": "^8.1.2",
|
||||
"precss": "^1.4.0"
|
||||
"gulp-watch": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,10 +0,0 @@
|
||||
body
|
||||
{
|
||||
|
||||
}
|
||||
::-moz-selection {background:#888; }
|
||||
::selection {background:#888; }
|
||||
.clearfix
|
||||
{
|
||||
overflow:auto;zoom:1;
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
font-size:100%;
|
||||
font:inherit;
|
||||
vertical-align:baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display:block;
|
||||
}
|
||||
body {
|
||||
line-height:1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style:none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes:none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content:'';
|
||||
content:none;
|
||||
}
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
/* apply a natural box layout model to all elements */
|
||||
*,*::before,*::after,*:before,*:after {
|
||||
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
|
||||
}
|
||||
|
||||
/* inputs */
|
||||
input,button,textarea,select {
|
||||
color:inherit;
|
||||
font-size:inherit;
|
||||
font-style:inherit;
|
||||
font-family:inherit;
|
||||
-webkit-border-radius:0;
|
||||
border-radius:0;
|
||||
-webkit-padding-start:0;
|
||||
align-items:flex-start;
|
||||
text-index:0;
|
||||
border:none;
|
||||
outline:none;
|
||||
background:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
width:auto;
|
||||
height:auto;
|
||||
line-height:1em;
|
||||
}
|
||||
|
||||
/* inputs appearance (not for every input) */
|
||||
input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],
|
||||
input[type=submit],input[type=reset],input[type=color],input[type=file],
|
||||
button,textarea,select {
|
||||
height:1em;
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
appearance:none;
|
||||
}
|
||||
|
||||
/* input color width */
|
||||
input[type=color] {
|
||||
width:1em;
|
||||
}
|
||||
|
||||
/* IE clear cross */
|
||||
input::-ms-clear {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* details and summary */
|
||||
details, summary {
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
appearance:none;
|
||||
}
|
||||
|
||||
/* text size adjusting */
|
||||
body {
|
||||
-webkit-text-size-adjust:100%;
|
||||
-moz-text-size-adjust:100%;
|
||||
text-size-adjust:100%;
|
||||
}
|
||||
|
||||
/* mark */
|
||||
mark {background:none;}
|
||||
|
||||
/* hr */
|
||||
hr {
|
||||
height:1px;
|
||||
margin:0;padding:0;
|
||||
}
|
||||
|
||||
/* u */
|
||||
u {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* th */
|
||||
table th {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
/* a */
|
||||
a {
|
||||
color:inherit;
|
||||
outline:none;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@import "mixins/image-2x.css";
|
||||
@import "mixins/touch.css";
|
||||
@import "mixins/font-smoothing.css";
|
||||
@import "mixins/breakpoints.css";
|
||||
|
||||
@import "base/fonts.css";
|
||||
@import "base/reset.css";
|
||||
@import "base/general.css";
|
||||
|
||||
@import "pages/index_index.css";
|
||||
@import "pages/index_project.css";
|
||||
Vendored
-2
@@ -1,2 +0,0 @@
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}button,input,select,textarea{color:inherit;font-size:inherit;font-style:inherit;font-family:inherit;border-radius:0;-webkit-padding-start:0;align-items:flex-start;text-index:0;border:none;outline:none;background:none;padding:0;margin:0;width:auto;height:auto;line-height:1em}button,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=reset],input[type=search],input[type=submit],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=color]{width:1em}input::-ms-clear{display:none}details,summary{-webkit-appearance:none;-moz-appearance:none;appearance:none}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}mark{background:none}hr{height:1px;margin:0;padding:0}u{text-decoration:none}table th{text-align:left}a{color:inherit;outline:none}::-moz-selection{background:#888}::selection{background:#888}.clearfix{overflow:auto;zoom:1}
|
||||
/*# sourceMappingURL=main.min.css.map */
|
||||
@@ -1,20 +0,0 @@
|
||||
$breakpoint-xxsmall: 480px;
|
||||
$breakpoint-xsmall: 600px;
|
||||
$breakpoint-small: 840px;
|
||||
$breakpoint-medium: 960px;
|
||||
$breakpoint-large: 1280px;
|
||||
$breakpoint-xlarge: 1440px;
|
||||
$breakpoint-xxlarge: 1600px;
|
||||
|
||||
@define-mixin max-width $value
|
||||
{
|
||||
@media only screen and (max-width:$value){
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
@define-mixin max-height $value
|
||||
{
|
||||
@media only screen and (max-height:$value){
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@define-mixin font-smoothing $value: antialiased
|
||||
{
|
||||
@if $value == antialiased
|
||||
{
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@else
|
||||
{
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
@define-mixin image-2x $image, $width, $height
|
||||
{
|
||||
@media (min--moz-device-pixel-ratio: 1.3),
|
||||
(-o-min-device-pixel-ratio: 2.6/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.3),
|
||||
(min-device-pixel-ratio: 1.3),
|
||||
(min-resolution: 1.3dppx)
|
||||
{
|
||||
background-image: url($image);
|
||||
background-size: $width $height;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@define-mixin no-touch
|
||||
{
|
||||
html.features-no-touch & {
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin touch
|
||||
{
|
||||
html.features-touch & {
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
||||
@font-face
|
||||
font-family 'Stellar'
|
||||
src url('../fonts/Stellar-Regular.eot')
|
||||
src url('../fonts/Stellar-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Stellar-Regular.woff2') format('woff2'), url('../fonts/Stellar-Regular.woff') format('woff'), url('../fonts/Stellar-Regular.ttf') format('truetype')
|
||||
font-weight normal
|
||||
font-style normal
|
||||
|
||||
@font-face
|
||||
font-family 'Ubuntu Mono'
|
||||
src url('../fonts/UbuntuMono-Regular.eot')
|
||||
src url('../fonts/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/UbuntuMono-Regular.woff2') format('woff2'), url('../fonts/UbuntuMono-Regular.woff') format('woff'), url('../fonts/UbuntuMono-Regular.ttf') format('truetype')
|
||||
font-weight normal
|
||||
font-style normal
|
||||
@@ -0,0 +1,9 @@
|
||||
body
|
||||
font-family Helvetica, Arial
|
||||
font-size 12px
|
||||
font-smoothing(antialiased)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video
|
||||
margin 0
|
||||
padding 0
|
||||
border 0
|
||||
font-size 100%
|
||||
font inherit
|
||||
vertical-align baseline
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section
|
||||
display block
|
||||
|
||||
body
|
||||
line-height 1
|
||||
-webkit-text-size-adjust 100%
|
||||
-moz-text-size-adjust 100%
|
||||
text-size-adjust 100%
|
||||
|
||||
ol, ul
|
||||
list-style none
|
||||
|
||||
blockquote, q
|
||||
quotes none
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after
|
||||
content ''
|
||||
content none
|
||||
|
||||
table
|
||||
border-collapse collapse
|
||||
border-spacing 0
|
||||
th
|
||||
text-align left
|
||||
|
||||
*,*::before,*::after,*:before,*:after
|
||||
-moz-box-sizing border-box
|
||||
-webkit-box-sizing border-box
|
||||
box-sizing border-box
|
||||
|
||||
input,button,textarea,select
|
||||
color inherit
|
||||
font-size inherit
|
||||
font-style inherit
|
||||
font-family inherit
|
||||
-webkit-border-radius 0
|
||||
border-radius 0
|
||||
-webkit-padding-start 0
|
||||
align-items flex-start
|
||||
text-index 0
|
||||
border none
|
||||
outline none
|
||||
background none
|
||||
padding 0
|
||||
margin 0
|
||||
width auto
|
||||
height auto
|
||||
line-height 1em
|
||||
|
||||
input[type=text],input[type=reset],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=time],input[type=week],input[type=month],input[type=date],input[type=datetime],input[type=datetime-local],input[type=number],
|
||||
input[type=submit],input[type=reset],input[type=color],input[type=file],
|
||||
button,textarea,select
|
||||
height 1em
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
appearance none
|
||||
|
||||
input[type=color]
|
||||
width 1em
|
||||
|
||||
input
|
||||
&::-ms-clear
|
||||
display none
|
||||
|
||||
details, summary
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
appearance none
|
||||
|
||||
mark
|
||||
background none
|
||||
|
||||
hr
|
||||
height 1px
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
u
|
||||
text-decoration none
|
||||
|
||||
a
|
||||
color inherit
|
||||
outline none
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
font-smoothing($smoothing = auto) {
|
||||
-webkit-font-smoothing $smoothing
|
||||
if $smoothing == antialiased {
|
||||
-moz-osx-font-smoothing grayscale
|
||||
}
|
||||
if $smoothing == subpixel-antialiased {
|
||||
-moz-osx-font-smoothing auto
|
||||
}
|
||||
font-smoothing $smoothing
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
base-font-size ?= 16px
|
||||
rasterise-media-queries ?= false
|
||||
|
||||
rupture = {
|
||||
rasterise-media-queries: rasterise-media-queries
|
||||
mobile-cutoff: 400px
|
||||
desktop-cutoff: 1050px
|
||||
hd-cutoff: 1800px
|
||||
enable-em-breakpoints: false
|
||||
base-font-size: base-font-size
|
||||
anti-overlap: false
|
||||
density-queries: 'dppx' 'webkit' 'moz' 'dpi'
|
||||
retina-density: 1.5
|
||||
use-device-width: false
|
||||
}
|
||||
rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff) (rupture.hd-cutoff)
|
||||
rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'hd'
|
||||
|
||||
-is-string(val)
|
||||
if typeof(val) is not 'unit'
|
||||
if val is a 'string' or val is a 'ident'
|
||||
true
|
||||
else
|
||||
false
|
||||
else
|
||||
false
|
||||
|
||||
-get-scale-number(scale-name)
|
||||
for list-item, i in rupture.scale-names
|
||||
if list-item is scale-name
|
||||
return i + 1
|
||||
return false
|
||||
|
||||
-convert-to(to-unit, value, context = rupture.base-font-size)
|
||||
from-unit = unit(value)
|
||||
return value if to-unit is from-unit
|
||||
if to-unit in ('em' 'rem')
|
||||
return value if from-unit in ('em' 'rem')
|
||||
return unit((value / context), to-unit)
|
||||
if to-unit is 'px'
|
||||
return unit((value * context), 'px')
|
||||
|
||||
-on-scale(n)
|
||||
return unit(n) is ''
|
||||
|
||||
-larger-than-scale(n)
|
||||
return (n > (length(rupture.scale) - 1)) and -on-scale(n)
|
||||
|
||||
-is-zero(n)
|
||||
return n is 0
|
||||
|
||||
-overlap-shift(anti-overlap, n)
|
||||
shift-unit = unit(n)
|
||||
anti-overlap = 0px unless anti-overlap
|
||||
anti-overlap = 1px if anti-overlap is true
|
||||
if length(anti-overlap) is 1
|
||||
return -convert-to(shift-unit, anti-overlap)
|
||||
for val in anti-overlap
|
||||
return val if unit(val) is shift-unit
|
||||
|
||||
-adjust-overlap(anti-overlap, n, side = 'min')
|
||||
-shift = -overlap-shift(anti-overlap, n)
|
||||
if (side is 'min' and -shift > 0) or (side is 'max' and -shift < 0)
|
||||
n = n + -shift
|
||||
return n
|
||||
|
||||
-is-positive(n)
|
||||
return n >= 0
|
||||
|
||||
-density-queries(density)
|
||||
if typeof(density) is not 'unit'
|
||||
if not -is-string(density)
|
||||
density = '%s' % density
|
||||
density = rupture.retina-density if density is 'retina'
|
||||
queries = ()
|
||||
for query in rupture.density-queries
|
||||
if query is 'webkit'
|
||||
push(queries, '(-webkit-min-device-pixel-ratio: %s)' % (density))
|
||||
else if query is 'moz'
|
||||
push(queries, '(min--moz-device-pixel-ratio: %s)' % (density))
|
||||
else if query is 'o'
|
||||
push(queries, '(-o-min-device-pixel-ratio: %s/1)' % (density))
|
||||
else if query is 'ratio'
|
||||
push(queries, '(min-device-pixel-ratio: %s)' % (density))
|
||||
else if query is 'dpi'
|
||||
if -is-string(density)
|
||||
density=convert(density)
|
||||
push(queries, '(min-resolution: %sdpi)' % (round(density * 96, 1)))
|
||||
else if query is 'dppx'
|
||||
push(queries, '(min-resolution: %sdppx)' % (density))
|
||||
return queries
|
||||
|
||||
create-fallback-class(selected, class)
|
||||
/{'' + class + ' ' + selected}
|
||||
{block}
|
||||
|
||||
// +between(min, max)
|
||||
// usage (scale can be mixed with custom values):
|
||||
// - +between(1, 3) scale:scale
|
||||
// - +between(0, 3) 0 width:scale
|
||||
// - +between(200px, 500px) custom:custom
|
||||
// - +between(0, 300px) 0 width:custom
|
||||
// - +between(1, 300px) scale:custom
|
||||
// - +between(200px, 4) custom:scale
|
||||
|
||||
between(min, max, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
selected = selector()
|
||||
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
if -is-string(min)
|
||||
min = -get-scale-number(min)
|
||||
if -is-string(max)
|
||||
max = -get-scale-number(max)
|
||||
|
||||
-min = rupture.scale[min - 1] unless -is-zero(min) or (not -on-scale(min))
|
||||
-max = rupture.scale[max] unless not -on-scale(max)
|
||||
-min ?= min
|
||||
-max ?= max
|
||||
|
||||
if (rupture.rasterise-media-queries)
|
||||
if not (density or -max or orientation)
|
||||
{block}
|
||||
else
|
||||
condition = 'only screen'
|
||||
use-device-width = use-device-width ? 'device-' : ''
|
||||
unless -min is 0
|
||||
-min = -convert-to('em', -min) if rupture.enable-em-breakpoints
|
||||
-min = -adjust-overlap(anti-overlap, -min, side: 'min')
|
||||
condition = condition + ' and (min-' + use-device-width + 'width: %s)' % (-min)
|
||||
unless -larger-than-scale(max)
|
||||
-max = -convert-to('em', -max) if rupture.enable-em-breakpoints
|
||||
-max = -adjust-overlap(anti-overlap, -max, side: 'max')
|
||||
condition = condition + ' and (max-' + use-device-width + 'width: %s)' % (-max)
|
||||
if orientation
|
||||
condition = condition + ' and (orientation: %s)' % (orientation)
|
||||
if density
|
||||
conditions = ()
|
||||
for query in -density-queries(density)
|
||||
push(conditions, condition + ' and %s' % (query))
|
||||
condition = join(', ', conditions)
|
||||
@media condition
|
||||
{block}
|
||||
if fallback-class
|
||||
+create-fallback-class(selected, fallback-class)
|
||||
{block}
|
||||
|
||||
at(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+between(scale-point, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
from-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+between(scale-point, length(rupture.scale), anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
above = from-width
|
||||
|
||||
to-width(scale-point, anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+between(1, scale-point, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
below = to-width
|
||||
|
||||
mobile(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+below(rupture.mobile-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
tablet(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width, fallback-class = null)
|
||||
if -is-string(orientation)
|
||||
orientation = convert(orientation)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
+above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width, fallback-class)
|
||||
{block}
|
||||
|
||||
density(density, orientation = null, fallback-class = null)
|
||||
selected = selector()
|
||||
if not (rupture.rasterise-media-queries)
|
||||
conditions = ()
|
||||
for query in -density-queries(density)
|
||||
condition = 'only screen and %s' % (query)
|
||||
if orientation
|
||||
condition = condition + ' and (orientation: %s)' % (orientation)
|
||||
push(conditions, condition)
|
||||
condition = join(', ', conditions)
|
||||
@media condition
|
||||
{block}
|
||||
if fallback-class
|
||||
+create-fallback-class(selected, fallback-class)
|
||||
{block}
|
||||
|
||||
pixel-ratio = density
|
||||
|
||||
retina(orientation = null, fallback-class = null)
|
||||
+density('retina', orientation, fallback-class)
|
||||
{block}
|
||||
|
||||
landscape(density = null, fallback-class = null)
|
||||
selected = selector()
|
||||
if not (rupture.rasterise-media-queries)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
if density
|
||||
+pixel-ratio(density, orientation: landscape, fallback-class)
|
||||
{block}
|
||||
else
|
||||
@media only screen and (orientation: landscape)
|
||||
{block}
|
||||
if fallback-class
|
||||
+create-fallback-class(selected, fallback-class)
|
||||
{block}
|
||||
|
||||
portrait(density = null, fallback-class = null)
|
||||
selected = selector()
|
||||
if not (rupture.rasterise-media-queries)
|
||||
if -is-string(density)
|
||||
density = convert(density)
|
||||
if density
|
||||
+pixel-ratio(density, orientation: portrait, fallback-class)
|
||||
{block}
|
||||
else
|
||||
@media only screen and (orientation: portrait)
|
||||
{block}
|
||||
if fallback-class
|
||||
+create-fallback-class(selected, fallback-class)
|
||||
{block}
|
||||
@@ -0,0 +1,201 @@
|
||||
body.projects
|
||||
background #323759
|
||||
color #fff
|
||||
|
||||
::-moz-selection
|
||||
background #f1eff9
|
||||
::selection
|
||||
background #f1eff9
|
||||
|
||||
.gradient-backgroud
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 920px
|
||||
background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd )
|
||||
|
||||
p,
|
||||
ul
|
||||
font-size 14px
|
||||
line-height 18px
|
||||
margin-bottom 1em
|
||||
|
||||
code
|
||||
font-family 'Ubuntu Mono'
|
||||
|
||||
section.landing
|
||||
position relative
|
||||
margin-bottom 60px
|
||||
|
||||
.logo
|
||||
position absolute
|
||||
top 315px
|
||||
left 50%
|
||||
|
||||
.disks
|
||||
.disk
|
||||
position absolute
|
||||
border-radius 50%
|
||||
background #fff
|
||||
transform translateX(-50%) translateY(-50%)
|
||||
opacity 0.2
|
||||
|
||||
&.index-0
|
||||
width 100px
|
||||
height 100px
|
||||
opacity 0.7
|
||||
&.index-1
|
||||
width 200px
|
||||
height 200px
|
||||
&.index-2
|
||||
width 300px
|
||||
height 300px
|
||||
&.index-3
|
||||
width 400px
|
||||
height 400px
|
||||
&.index-4
|
||||
width 500px
|
||||
height 500px
|
||||
.title
|
||||
font-size 45px
|
||||
|
||||
.letter
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
line-height 0
|
||||
|
||||
&.index-0
|
||||
left 100px - 15px
|
||||
&.index-1
|
||||
left 150px - 15px
|
||||
&.index-2
|
||||
left 200px - 15px
|
||||
&.index-3
|
||||
left 250px - 15px
|
||||
&.index-4
|
||||
left 300px - 15px
|
||||
&.index-5
|
||||
left 350px - 15px
|
||||
&.index-6
|
||||
left 400px - 15px
|
||||
|
||||
.punch-line
|
||||
padding-top 600px
|
||||
text-align center
|
||||
|
||||
.text
|
||||
text-transform uppercase
|
||||
font-size 18px
|
||||
margin 0 0 8px 0
|
||||
|
||||
.links
|
||||
a.link
|
||||
display inline-block
|
||||
padding 5px 10px
|
||||
margin 0 5px
|
||||
background rgba(255,255,255,0.2)
|
||||
text-decoration none
|
||||
transition background 0.15s
|
||||
&:hover
|
||||
background rgba(255,255,255,0.30)
|
||||
|
||||
section.projects
|
||||
position relative
|
||||
width 640px
|
||||
margin 0 auto 90px auto
|
||||
|
||||
.head
|
||||
height 45px
|
||||
line-height 45px
|
||||
background #333759
|
||||
text-align center
|
||||
font-size 14px
|
||||
|
||||
.content
|
||||
width 100%
|
||||
|
||||
span.no-project
|
||||
display block
|
||||
padding 17px 0
|
||||
background #eef0fa
|
||||
text-align center
|
||||
color #6c6e7c
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
|
||||
.title
|
||||
opacity 0.4
|
||||
|
||||
a.project
|
||||
display block
|
||||
background #eef0fa
|
||||
color #6c6e7c
|
||||
border-bottom 1px solid #dadada
|
||||
transition background 0.15s
|
||||
|
||||
.title
|
||||
display inline-block
|
||||
vertical-align top
|
||||
width 400px
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
padding 17px
|
||||
|
||||
.details
|
||||
display inline-block
|
||||
vertical-align top
|
||||
width 240px
|
||||
text-align right
|
||||
|
||||
.detail
|
||||
display inline-block
|
||||
padding 11px 10px
|
||||
text-align right
|
||||
|
||||
.label
|
||||
font-size 10px
|
||||
opacity 0.5
|
||||
margin-bottom 2px
|
||||
|
||||
.value
|
||||
font-weight bold
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
&:hover
|
||||
background #f6f7fc
|
||||
|
||||
section.text
|
||||
position relative
|
||||
width 640px
|
||||
margin 0 auto 90px auto
|
||||
text-align center
|
||||
|
||||
.title
|
||||
margin-bottom 18px
|
||||
font-family 'Stellar'
|
||||
font-size 32px
|
||||
|
||||
ul
|
||||
display inline-block
|
||||
text-align left
|
||||
|
||||
pre
|
||||
width 400px
|
||||
margin 0 auto 2em auto
|
||||
background #282c47
|
||||
padding 12px 18px
|
||||
text-align left
|
||||
|
||||
span.line
|
||||
&:before
|
||||
display inline-block
|
||||
content '$'
|
||||
padding 0 8px 0 0
|
||||
.opacity-20
|
||||
opacity 0.2
|
||||
pointer-events none
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
@import 'mixins/font-smoothing'
|
||||
@import 'mixins/rupture'
|
||||
|
||||
@import 'base/reset'
|
||||
@import 'base/fonts'
|
||||
@import 'base/general'
|
||||
|
||||
@import 'pages/projects'
|
||||
@import 'pages/project'
|
||||
Reference in New Issue
Block a user