Skip to content

Commit 0874958

Browse files
PascalPixelPascalPixel
committed
CSS cleanup
1 parent 22c2406 commit 0874958

File tree

4 files changed

+103
-149
lines changed

4 files changed

+103
-149
lines changed

‎css-browsers.css‎

Lines changed: 1 addition & 58 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css-browsers.sass‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,78 @@
1-
// All sizing based on rem units
2-
// 1px / 16px = 0.0625rem
1+
// all sizing based on *$px units
2+
$px: 1 / 16 + rem
33

44
.css-browsers
55
position: relative
6-
background-color: #ffffff
7-
border: 0.0625rem solid #bbbbbb
6+
border: 1*$px solid rgba(0,0,0,0.5)
7+
background-color: rgba(255,255,255,1.0)
88

9-
.pull-right
10-
float: right
9+
.css-browsers-toolbar
10+
padding: 7*$px
11+
border-bottom: 1*$px solid rgba(0,0,0,0.5)
1112

12-
a
13+
.css-browsers-btn
14+
display: inline-block
15+
width: 40*$px
16+
height: 35*$px
17+
padding-top: 5*$px
18+
border: 1*$px solid rgba(0,0,0,0.5)
19+
color: rgba(0,0,0,0.5)
20+
text-align: center
1321
text-decoration: none
22+
cursor: pointer
23+
24+
.css-browsers-forward
25+
margin-left: -5*$px
26+
border-left: none
1427

15-
.address
16-
background: #ffffff
17-
border: 0.0625rem solid rgba(0, 0, 0, 0.4)
28+
.css-browsers-address
1829
display: inline-block
19-
left: 5.375rem
20-
padding: 0.5rem 0.5rem 0.438rem
2130
position: absolute
22-
right: 0.375rem
23-
24-
.content
25-
height: 25rem
26-
overflow: hidden
27-
position: relative
28-
29-
.reload
30-
color: #788083
31+
right: 7*$px
32+
left: 95*$px
33+
height: 35*$px
34+
padding: 5*$px 10*$px
35+
border: 1*$px solid rgba(0,0,0,0.5)
36+
background: rgba(255,255,255,1.0)
37+
38+
.css-browsers-reload
39+
float: right
3140
font-weight: 700
41+
color: rgba(0,0,0,0.5)
3242

33-
.toolbar
34-
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.4)
35-
padding: 0.438rem
36-
37-
.brbtn
38-
border: 0.0625rem solid rgba(0, 0, 0, 0.3)
39-
color: #788083
40-
cursor: pointer
41-
display: inline-block
42-
margin-right: -0.375rem
43-
padding: 0.375rem 0.563rem
43+
.css-browsers-content
44+
position: relative
45+
height: 300*$px
46+
overflow: scroll
4447

4548
.css-browsers-safari-7
46-
border-radius: 0
47-
border-radius: 0.438rem 0.438rem 0 0
48-
box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.1)
49+
border-radius: 7*$px 7*$px 0*$px 0*$px
50+
box-shadow: 0*$px 3*$px 5*$px rgba(0,0,0,0.1)
4951

50-
.address
51-
border-radius: 0.3125rem
52-
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
53-
font-size: 0.75rem
52+
.css-browsers-address
53+
padding: 8*$px
54+
font-size: 12*$px
55+
border-radius: 5*$px
56+
box-shadow: inset 0*$px 1*$px 2*$px rgba(0,0,0,0.2), 0*$px 1*$px 0*$px rgba(255,255,255,0.7)
5457

55-
.back
56-
border-radius: 0.3125rem 0 0 0.3125rem
58+
.css-browsers-back
59+
border-radius: 5*$px 0*$px 0*$px 5*$px
5760

58-
.forward
59-
border-radius: 0 0.3125rem 0.3125rem 0
61+
.css-browsers-forward
62+
border-radius: 0*$px 5*$px 5*$px 0*$px
6063

61-
.toolbar
62-
border-radius: 0.438rem 0.438rem 0 0
63-
box-shadow: inset 0 0.0625rem 0 #FFF
64-
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%)
64+
.css-browsers-toolbar
65+
border-radius: 7*$px 7*$px 0*$px 0*$px
66+
box-shadow: inset 0*$px 1*$px 0*$px rgba(255,255,255,1.0)
67+
background: linear-gradient(rgba(226, 226, 226, 1) 0%, rgba(200, 200, 200, 1) 100%)
6568

66-
.brbtn
67-
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%)
68-
box-shadow: inset 0 0.0625rem 0 white, 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
69-
text-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
69+
.css-browsers-btn
70+
box-shadow: inset 0*$px 1*$px 0*$px rgba(255,255,255,1.0), 0*$px 1*$px 0*$px rgba(255,255,255,0.7)
71+
background: linear-gradient(rgba(226, 226, 226, 1) 0%, rgba(200, 200, 200, 1) 100%)
72+
text-shadow: 0*$px 1*$px 0*$px rgba(255,255,255,0.7)
7073

7174
&:hover
72-
background: linear-gradient(to bottom, #ededed 0%, #c8c8c8 100%)
73-
75+
background: linear-gradient(rgba(237, 237, 237, 1) 0%, rgba(200, 200, 200, 1) 100%)
7476
&:active,
7577
&.active
76-
background: linear-gradient(to bottom, #c8c8c8 0%, #e2e2e2 100%)
78+
background: linear-gradient(rgba(200, 200, 200, 1) 0%, rgba(226, 226, 226, 1) 100%)

‎index.html‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
77
<meta http-equiv="x-ua-compatible" content="ie=edge">
88
<title>css-browsers v2.1.0</title>
9-
109
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
1110
<link href="css-browsers.css" rel="stylesheet" type="text/css">
1211
<style>
@@ -15,20 +14,17 @@
1514
color: #555555;
1615
}
1716

18-
.superpencil .tag-primary {
17+
.superpencil {
1918
background-color: #FCE400;
2019
color: #774701;
2120
font-family: "Avenir Next", "Avenir", "Helvetica", "Arial", sans-serif;
22-
padding: 4px 5px 3px;
23-
color: #774701;
24-
font-size: 10px;
25-
font-smooth: auto;
26-
-webkit-font-smoothing: subpixel-antialiased;
2721
}
2822

2923
.superpencil img {
30-
width: 15px;
31-
margin-top: -1px;
24+
height: 1.2em;
25+
width: auto;
26+
display: inline-block;
27+
margin-top: -0.1em;
3228
}
3329
</style>
3430
</head>
@@ -38,12 +34,12 @@
3834
<br />
3935
<h1>css-browsers v2.1.0</h1>
4036
<p>
41-
Easily print out different browsers into a shared HTML frame
37+
Easily print out different browsers into a shared HTML frame &#x262f;
4238
</p>
4339
<p>
4440
Github
4541
<a href="https://github.com/Superpencil/css-browsers">css-browsers</a>
46-
<iframe src="https://ghbtns.com/github-btn.html?user=Superpencil&repo=css-browsers&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
42+
<iframe src="https://ghbtns.com/github-btn.html?user=Superpencil&amp;repo=css-browsers&amp;type=star&amp;count=true" frameborder="0" scrolling="0" width="90px" height="25px" style="padding-top: 5px; margin-bottom: -5px;"></iframe>
4743
</p>
4844
<p>
4945
Demo
@@ -55,46 +51,59 @@ <h1>css-browsers v2.1.0</h1>
5551
</p>
5652
<p>
5753
Design and Development by
58-
<a alt="Superpencil" class="superpencil" href="http://www.superpencil.com/?utm_source=css-browsers&utm_medium=footer+link&utm_campaign=project">
59-
<b class="tag tag-primary">
60-
<img src="superpencil.svg" alt="Superpencil" />
61-
Superpencil
62-
</b>
54+
<a alt="Superpencil" href="http://www.superpencil.com/?utm_source=css-browsers&utm_medium=footer+link&utm_campaign=project" class="tag tag-primary superpencil">
55+
<img src="superpencil.svg" alt="Superpencil" /> Superpencil
6356
</a>
6457
</p>
65-
6658
<hr />
67-
6859
<div class="css-browsers">
69-
<div class="toolbar">
70-
<a class="brbtn back" href="#">&#9668;</a>
71-
<a class="brbtn forward" href="#">&#9658;</a>
72-
<div class="address">
73-
<span class="url">http://polygon.com/</span>
74-
<a class="reload pull-right" href="#">&#x21bb;</a>
60+
<div class="css-browsers-toolbar">
61+
<a class="css-browsers-btn css-browsers-back" href="#">
62+
◄
63+
</a>
64+
<a class="css-browsers-btn css-browsers-forward" href="#">
65+
►
66+
</a>
67+
<div class="css-browsers-address">
68+
<span class="css-browsers-url">
69+
http://superpencil.com/
70+
</span>
71+
<a class="css-browsers-reload" href="#">
72+
↻
73+
</a>
7574
</div>
7675
</div>
77-
<div class="content">
78-
<h1 class="centered">Basic frame</h1>
76+
<div class="css-browsers-content">
77+
<h1>
78+
Basic frame
79+
</h1>
7980
</div>
8081
</div>
8182
<br />
82-
8383
<div class="css-browsers css-browsers-safari-7">
84-
<div class="toolbar">
85-
<a class="brbtn back" href="#">&#9668;</a>
86-
<a class="brbtn forward" href="#">&#9658;</a>
87-
<div class="address">
88-
<span class="url">http://polygon.com/</span>
89-
<a class="reload pull-right" href="#">&#x21bb;</a>
84+
<div class="css-browsers-toolbar">
85+
<a class="css-browsers-btn css-browsers-back" href="#">
86+
◄
87+
</a>
88+
<a class="css-browsers-btn css-browsers-forward" href="#">
89+
►
90+
</a>
91+
<div class="css-browsers-address">
92+
<span class="css-browsers-url">
93+
http://superpencil.com/
94+
</span>
95+
<a class="css-browsers-reload" href="#">
96+
↻
97+
</a>
9098
</div>
9199
</div>
92-
<div class="content">
93-
<h1 class="centered">Safari 7</h1>
100+
<div class="css-browsers-content">
101+
<h1>
102+
Safari 7
103+
</h1>
94104
</div>
95105
</div>
96106
<br />
97-
98107
</div>
99108
</body>
100109

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "css-browsers",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "CSS based browser frames",
55
"style": "css-browsers.css",
66
"scripts": {

0 commit comments

Comments
 (0)