Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Add Hello-World version by using SCSS

  • Loading branch information...
yungshenglu committed Oct 8, 2018
1 parent 488a714 commit 702cff023f13ac747bb0aafd0e410157290e7f5e
Showing with 127 additions and 0 deletions.
  1. +56 −0 SCSS/hello-world.css
  2. +7 −0 SCSS/hello-world.css.map
  3. +54 −0 SCSS/hello-world.scss
  4. +10 −0 SCSS/index.html
@@ -0,0 +1,56 @@
/* To try it, just go to about:blank and add the style */
body {
margin: 0;
padding: 0;
animation-name: bg;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background-color: #E63A36;
color: #333;
font-family: sans-serif;
height: 100vh;
background: linear-gradient(to bottom, #E63A36 20%, #F8D453 40%, #F8D453 60%, #E63A36 80%);
background-size: 100% 600%;
background-position: 0 0;
position: relative;
overflow: hidden; }
body:before {
content: "Hello World";
color: #FFF;
display: block;
text-align: center;
font-size: 5vw;
padding: 5vw;
text-shadow: 0 0 3vw rgba(230, 58, 54, 0.2); }
body:after {
content: "";
background: #ffe799;
width: 30vw;
height: 30vw;
border-radius: 15vw;
position: absolute;
bottom: 0;
left: 50%;
margin: 0 0 -15vw -15vw;
animation-name: sun;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 800%;
box-shadow: 0 0 10vw #ffe799; }

@keyframes bg {
0% {
background-position: 0 0; }
50% {
background-position: 0 50%; }
100% {
background-position: 0 100%; } }
@keyframes sun {
0% {
transform: rotate(30deg); }
100% {
transform: rotate(-30deg); } }

/*# sourceMappingURL=hello-world.css.map */

Some generated files are not rendered by default. Learn more.

@@ -0,0 +1,54 @@
/* To try it, just go to about:blank and add the style */

body {
margin: 0; padding: 0;
animation-name: bg;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background-color: #E63A36;
color: #333;
font-family: sans-serif;
height: 100vh;
background: linear-gradient(to bottom, #E63A36 20%, #F8D453 40%, #F8D453 60%, #E63A36 80%);
background-size: 100% 600%;
background-position: 0 0;
position: relative;
overflow: hidden;
&:before {
content: "Hello World";
color: #FFF;
display: block;
text-align: center;
font-size: 5vw;
padding: 5vw;
text-shadow: 0 0 3vw rgba(230, 58, 54, 0.2);
}
&:after {
content: "";
background: #ffe799;
width: 30vw;
height: 30vw;
border-radius: 15vw;
position: absolute;
bottom: 0;
left: 50%;
margin: 0 0 -15vw -15vw;
animation-name: sun;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 800%;
box-shadow: 0 0 10vw #ffe799;
}
}

@keyframes bg {
0% { background-position: 0 0; }
50% { background-position: 0 50%; }
100% { background-position: 0 100%; }
}
@keyframes sun {
0% { transform: rotate(30deg); }
100% { transform: rotate(-30deg); }
}
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello SCSS world</title>
<link rel="stylesheet" type="text/css" href="./hello-world.css">
</head>
<body>
</body>
</html>

0 comments on commit 702cff0

Please sign in to comment.
You can’t perform that action at this time.