wulkanowy/wulkanowy.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move styles to external file

Browse source
This commit is contained in:
Mikołaj Pich 2018-05-04 11:26:16 +02:00
parent d458492c81
commit 0cd0e6939e
2 changed files with 76 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
app.css Normal file
View 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
View file

@ -6,72 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=1">
<title>Wulkanowy</title>
<style>
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>
<link rel="stylesheet" href="app.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99646499-3"></script>
<script>
window.dataLayer = window.dataLayer || [];