[update] Style Home page
This commit is contained in:
brunosimon
@@ -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