Skip to content

Commit 490f794

Browse files
PascalPixelPascalPixel
committed
HAML, SASS, rem's
1 parent c20b08d commit 490f794

File tree

6 files changed

+215
-194
lines changed

6 files changed

+215
-194
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
config.codekit
2+
.sass-cache
3+
.DS_Store

‎browsers.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
html {
2+
font-size: 16px; }
3+
4+
body {
5+
background: #eee;
6+
color: #979374;
7+
padding: 1.25rem;
8+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
9+
10+
.browser {
11+
background-color: #FFF;
12+
border: 0.0625rem solid #BBB;
13+
border-radius: 0;
14+
border-radius: 0.438rem 0.438rem 0 0;
15+
box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.1);
16+
position: relative; }
17+
.browser .pull-right {
18+
float: right; }
19+
.browser a {
20+
text-decoration: none; }
21+
.browser .address {
22+
background: #FFF;
23+
border: 0.0625rem solid rgba(0, 0, 0, 0.4);
24+
border-radius: 0.3125rem;
25+
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
26+
display: inline-block;
27+
font-size: 0.75rem;
28+
left: 5.375rem;
29+
padding: 0.5rem 0.5rem 0.438rem;
30+
position: absolute;
31+
right: 0.375rem; }
32+
.browser .back {
33+
border-radius: 0.3125rem 0 0 0.3125rem; }
34+
.browser .content {
35+
height: 25rem;
36+
overflow: hidden;
37+
position: relative; }
38+
.browser .forward {
39+
border-radius: 0 0.3125rem 0.3125rem 0; }
40+
.browser .reload {
41+
color: #788083;
42+
font-weight: 700; }
43+
.browser .toolbar {
44+
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.4);
45+
border-radius: 0.438rem 0.438rem 0 0;
46+
box-shadow: inset 0 0.0625rem 0 #FFF;
47+
padding: 0.438rem;
48+
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%);
49+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2',endColorstr='#c8c8c8',GradientType=0); }
50+
.browser .brbtn {
51+
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%);
52+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2',endColorstr='#c8c8c8',GradientType=0);
53+
border: 0.0625rem solid rgba(0, 0, 0, 0.3);
54+
box-shadow: inset 0 0.0625rem 0 white, 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
55+
color: #788083;
56+
cursor: pointer;
57+
display: inline-block;
58+
margin-right: -0.375rem;
59+
padding: 0.375rem 0.563rem;
60+
text-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
61+
transition: background 0.2s; }
62+
.browser .brbtn:hover {
63+
background: linear-gradient(to bottom, #ededed 0%, #c8c8c8 100%);
64+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#c8c8c8',GradientType=0); }
65+
.browser .brbtn:active, .browser .brbtn.active {
66+
background: linear-gradient(to bottom, #c8c8c8 0%, #e2e2e2 100%);
67+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c8c8c8',endColorstr='#e2e2e2',GradientType=0); }
68+
.browser .css3-browser {
69+
border: none;
70+
height: 100%;
71+
position: absolute;
72+
top: 0;
73+
transition: top 240s;
74+
width: 100%;
75+
height: 200rem;
76+
transition: top 200s; }
77+
.browser .css3-browser.moving {
78+
top: -200rem; }

‎browsers.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<title>CSS3 Browser</title>
4+
<meta charset='utf-8'>
5+
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
6+
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
7+
<link href='browsers.css' rel='stylesheet' type='text/css'>
8+
</head>
9+
<body>
10+
<div class='browser safari-7'>
11+
<div class='toolbar'>
12+
<a class='brbtn back' href='#'>&#9668;</a>
13+
<a class='brbtn forward' href='#'>&#9658;</a>
14+
<div class='address'>
15+
<span class='url'>http://polygon.com/</span>
16+
<a class='reload pull-right' href='#'>&#x21bb;</a>
17+
</div>
18+
</div>
19+
<div class='content'>
20+
<h1 class='centered'>Safari 7</h1>
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎index.html

-194
This file was deleted.

‎source/browsers.haml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
%html
2+
%head
3+
%title CSS3 Browser
4+
%meta{charset: 'utf-8'}
5+
%meta{content: 'IE=edge,chrome=1', :'http-equiv' => 'X-UA-Compatible'}
6+
%meta{content: 'width=device-width, initial-scale=1.0', name: 'viewport'}
7+
%link{rel: 'stylesheet', type: 'text/css', href: 'browsers.css'}
8+
9+
%body
10+
.browser.safari-7
11+
.toolbar
12+
%a.brbtn.back{href: '#'} &#9668;
13+
%a.brbtn.forward{href: '#'} &#9658;
14+
.address
15+
%span.url http://polygon.com/
16+
%a.reload.pull-right{href: '#'} &#x21bb;
17+
.content
18+
%h1.centered Safari 7

0 commit comments

Comments
 (0)