Move styles to external file
This commit is contained in:
Mikołaj Pich
parent
d458492c81
commit
0cd0e6939e
2 changed files with 76 additions and 66 deletions
75
app.css
Normal file
75
app.css
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, .wrapper {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: url(wallpaper.jpg) no-repeat center / cover fixed;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||||
|
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
align-items: center;
|
||||||
|
background: -moz-radial-gradient(center center, circle cover, transparent, #000);
|
||||||
|
background: -ms-radial-gradient(center center, circle cover, transparent, #000);
|
||||||
|
background: -webkit-radial-gradient(center center, circle cover, transparent, #000);
|
||||||
|
background: radial-gradient(center center, circle cover, transparent, #000);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 60px;
|
||||||
|
font-size: calc(50px + 16 * (100vw - 320px) / (960 - 320));
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: #000 5px 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin: 0 0 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: rgb(112, 50, 50);
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #eee;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 15px 25px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--nightly {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover, .button:focus, .button:active {
|
||||||
|
background: rgb(90, 45, 45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.github {
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github:hover, .github:focus, .github:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
67
index.html
67
index.html
|
|
@ -6,72 +6,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=1">
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=1">
|
||||||
<title>Wulkanowy</title>
|
<title>Wulkanowy</title>
|
||||||
<style>
|
<link rel="stylesheet" href="app.css">
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
*, *:before, *:after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
html, body, .wrapper {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background: url(wallpaper.jpg) no-repeat center / cover fixed;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
|
||||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
||||||
}
|
|
||||||
.wrapper {
|
|
||||||
align-items: center;
|
|
||||||
background: -moz-radial-gradient(center center, circle cover, transparent, #000);
|
|
||||||
background: -ms-radial-gradient(center center, circle cover, transparent, #000);
|
|
||||||
background: -webkit-radial-gradient(center center, circle cover, transparent, #000);
|
|
||||||
background: radial-gradient(center center, circle cover, transparent, #000);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.header__title {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 60px;
|
|
||||||
font-size: calc(50px + 16 * (100vw - 320px) / (960 - 320));
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: #000 5px 5px 5px;
|
|
||||||
}
|
|
||||||
.main {
|
|
||||||
margin: 0 0 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
margin: 10px 0;
|
|
||||||
background: rgb(112, 50, 50);
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #eee;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 25px;
|
|
||||||
padding: 15px 25px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
.button--nightly {
|
|
||||||
background: #333;
|
|
||||||
}
|
|
||||||
.button:hover, .button:focus, .button:active {
|
|
||||||
background: rgb(90, 45, 45);
|
|
||||||
}
|
|
||||||
.github {
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
.github:hover, .github:focus, .github:active {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99646499-3"></script>
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99646499-3"></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue