Skip to content

Commit 2bdd7f7

Browse files
GabrielCzarGabrielCzar
committed
isolate styles
1 parent 5b84125 commit 2bdd7f7

File tree

2 files changed

+83
-86
lines changed

2 files changed

+83
-86
lines changed

‎render-gist.html‎

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -6,92 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Render Raw Gist</title>
9-
10-
<style>
11-
@import url('https://fonts.googleapis.com/css?family=Lato');
12-
13-
* {
14-
font-family: 'Lato', sans-serif;
15-
font-size: 22px;
16-
padding: 0;
17-
margin: 0;
18-
}
19-
20-
body {
21-
background: linear-gradient(0deg, #0288d1 0%, #53cde2 100%);
22-
}
23-
24-
main {
25-
display: flex;
26-
flex-flow: column;
27-
align-items: center;
28-
justify-content: center;
29-
}
30-
31-
h1 {
32-
font-size: 54px;
33-
font-weight: 800;
34-
text-transform: uppercase;
35-
color: #edf9fc;
36-
}
37-
38-
input {
39-
margin: 8px;
40-
padding: 14px;
41-
border: none;
42-
border-bottom: 1px solid white;
43-
width: 300px;
44-
outline: white;
45-
line-height: 1.5em;
46-
background-color: transparent;
47-
color: white;
48-
49-
}
50-
51-
::placeholder { color: #53cde2 }
52-
:-ms-input-placeholder { color: #53cde2 }
53-
::-ms-input-placeholder { color: #53cde2 }
54-
55-
button {
56-
margin: 23px;
57-
padding: 12px 34px 12px 34px;
58-
border: 1px solid white;
59-
border-radius: 160px;
60-
background: transparent;
61-
color: white;
62-
font-weight: 600;
63-
outline: none;
64-
}
65-
66-
button {
67-
-webkit-transition: color 250ms linear;
68-
-moz-transition: color 250ms linear;
69-
-o-transition: color 250ms linear;
70-
-ms-transition: color 250ms linear;
71-
transition: color 250ms linear;
72-
73-
-webkit-transition: background-color 300ms linear;
74-
-moz-transition: background-color 300ms linear;
75-
-o-transition: background-color 300ms linear;
76-
-ms-transition: background-color 300ms linear;
77-
transition: background-color 300ms linear;
78-
}
79-
80-
button:hover {
81-
background-color: #edf9fc;
82-
border: 1px solid #edf9fc;
83-
color: #0289d1ce ;
84-
}
85-
86-
@media (max-height: 950px) { main { height: 860px; } }
87-
@media (max-height: 850px) { main { height: 760px; } }
88-
@media (max-height: 750px) { main { height: 660px; } }
89-
@media (max-height: 650px) { main { height: 560px; } }
90-
@media (max-height: 550px) { main { height: 460px; } }
91-
@media (max-height: 350px) { main { height: 320px; } }
92-
@media (min-height: 950px) { main { height: 1000px; } }
93-
94-
</style>
9+
<link rel="stylesheet" href="style.css" />
9510
</head>
9611
<body>
9712

‎style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url('https://fonts.googleapis.com/css?family=Lato');
2+
3+
* {
4+
font-family: 'Lato', sans-serif;
5+
font-size: 22px;
6+
padding: 0;
7+
margin: 0;
8+
}
9+
10+
body {
11+
background: linear-gradient(0deg, #0288d1 0%, #53cde2 100%);
12+
}
13+
14+
main {
15+
display: flex;
16+
flex-flow: column;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
h1 {
22+
font-size: 54px;
23+
font-weight: 800;
24+
text-transform: uppercase;
25+
color: #edf9fc;
26+
}
27+
28+
input {
29+
margin: 8px;
30+
padding: 14px;
31+
border: none;
32+
border-bottom: 1px solid white;
33+
width: 300px;
34+
outline: white;
35+
line-height: 1.5em;
36+
background-color: transparent;
37+
color: white;
38+
39+
}
40+
41+
::placeholder { color: #53cde2 }
42+
:-ms-input-placeholder { color: #53cde2 }
43+
::-ms-input-placeholder { color: #53cde2 }
44+
45+
button {
46+
margin: 23px;
47+
padding: 12px 34px 12px 34px;
48+
border: 1px solid white;
49+
border-radius: 160px;
50+
background: transparent;
51+
color: white;
52+
font-weight: 600;
53+
outline: none;
54+
}
55+
56+
button {
57+
-webkit-transition: color 250ms linear;
58+
-moz-transition: color 250ms linear;
59+
-o-transition: color 250ms linear;
60+
-ms-transition: color 250ms linear;
61+
transition: color 250ms linear;
62+
63+
-webkit-transition: background-color 300ms linear;
64+
-moz-transition: background-color 300ms linear;
65+
-o-transition: background-color 300ms linear;
66+
-ms-transition: background-color 300ms linear;
67+
transition: background-color 300ms linear;
68+
}
69+
70+
button:hover {
71+
background-color: #edf9fc;
72+
border: 1px solid #edf9fc;
73+
color: #0289d1ce ;
74+
}
75+
76+
@media (max-height: 950px) { main { height: 860px; } }
77+
@media (max-height: 850px) { main { height: 760px; } }
78+
@media (max-height: 750px) { main { height: 660px; } }
79+
@media (max-height: 650px) { main { height: 560px; } }
80+
@media (max-height: 550px) { main { height: 460px; } }
81+
@media (max-height: 350px) { main { height: 320px; } }
82+
@media (min-height: 950px) { main { height: 1000px; } }

0 commit comments

Comments
 (0)