Чистка говнокода. Часть 1.

Главный герой сумел превести все элементы LESS в порядок. Но он не проверял, как они устроены внутри. И правильно сделал, иначе пришлось бы лечиться вином еще неделю после этого. То, что отвечает за пейзажи переселили в отдельный файл. Девочка очень просит сделать ей пластику носа и новую прическу. Поэтому в следующих частях ГГ обязательно ее спасет. Но наш ГГ столкнулся с другой проблемой. В букете цветов девочки просто адский говнокод, которому поможет лишь javascript. ГГ не знает, что ему делать в первую очередь, спасать девочку или ее букет. Об этом вы сможете почитать в следующих частях. Приятного просмотра. Продолжение следует...
ValentinaKozlova · May 12, 2016 · c5b98a5 · c5b98a5
1 parent aec0016
commit c5b98a5
Show file tree

Hide file tree

Showing 6 changed files with 286 additions and 282 deletions.
diff --git a/css/human.css b/css/human.css
@@ -3,7 +3,7 @@ body {
   padding: 0;
 }
 .person {
-  top: 160px;
+  bottom: 340px;
   left: 30%;
   position: absolute;
   z-index: 100;
@@ -16,6 +16,17 @@ body {
   border-radius: 35px 35px 80px 80px;
   box-shadow: 0 1px 1px 0 #EBC3A9;
 }
+.face:before,
+.face:after {
+  position: absolute;
+  content: '';
+  top: 70px;
+  width: 85px;
+  height: 120px;
+  background: #FFE8DC;
+  border-radius: 50px 50px 30px 30px;
+  z-index: 1;
+}
 .face:before {
   transform: rotate(-45deg);
   transform-origin: 0 100%;
@@ -28,17 +39,6 @@ body {
   transform-origin: 100% 100%;
   box-shadow: 1px 1px 1px 0 #E9C8B4;
 }
-.face:before,
-.face:after {
-  position: absolute;
-  content: '';
-  top: 70px;
-  width: 85px;
-  height: 120px;
-  background: #FFE8DC;
-  border-radius: 50px 50px 30px 30px;
-  z-index: 1;
-}
 .neck {
   position: relative;
   width: 60px;
@@ -121,8 +121,7 @@ body {
   margin: 60px 0 0 33px;
   z-index: 2;
 }
-.eye:before,
-eye:after {
+.eye:before {
   content: '';
   display: block;
   width: 27px;
@@ -136,17 +135,17 @@ eye:after {
   box-shadow: -1px -3px 4px 1px #2C1F1A, inset 0px 4px 2px 0px #323232, -2px -1px 6px 1px #0978D7;
   transform: rotate(-30deg);
 }
-.left .hotspot {
+.left .spot {
   transform: rotate(30deg);
 }
-.right .hotspot {
-  transform: rotate(70deg);
-}
 .right {
   box-shadow: 2px 3px 4px 1px #2C1F1A, inset -4px 0px 2px 0px #323232, 1px 3px 6px 1px #0978E7;
   transform: rotate(-70deg);
 }
-.hotspot {
+.right .spot {
+  transform: rotate(70deg);
+}
+.spot {
   width: 13px;
   height: 16px;
   border-radius: 50%;
@@ -156,7 +155,7 @@ eye:after {
   margin: 12px 0 0 11px;
   box-shadow: 0 0 1px 1px #3B322A;
 }
-.hotspot:before {
+.spot:before {
   content: '';
   width: 10px;
   position: absolute;
@@ -167,7 +166,7 @@ eye:after {
   box-shadow: 0 0 5px 1px #FFFFFF, 0 0 5px 1px #CDF0FF;
   opacity: .8;
 }
-.hotspot:after {
+.spot:after {
   content: '';
   width: 3px;
   position: absolute;
@@ -246,51 +245,6 @@ eye:after {
   position: absolute;
   z-index: 1;
 }
-#heart {
-  display: none;
-  position: relative;
-  width: 100px;
-  height: 90px;
-}
-.field1 {
-  width: 80%;
-  bottom: -400px;
-  left: 0;
-  position: fixed;
-  height: 600px;
-  border-radius: 0 50% 50% 0;
-  background: linear-gradient(to bottom, #5CBA4C 10%, #279414 25%, #0B4D00);
-  display: inline-block;
-}
-.field2 {
-  width: 50%;
-  bottom: -250px;
-  right: -100px;
-  position: fixed;
-  z-index: -1;
-  height: 400px;
-  border-radius: 50% 50% 0 0;
-  background: linear-gradient(to bottom, #71BA52, #338924);
-  display: inline-block;
-}
-.field3 {
-  width: 70%;
-  bottom: 0;
-  right: -50px;
-  position: fixed;
-  z-index: -2;
-  height: 200px;
-  border-radius: 50%;
-  background: linear-gradient(to bottom, #D6FADA, #AAD793, #9EBE99, #77A171);
-  display: inline-block;
-}
-.sky {
-  width: 100%;
-  height: 850px;
-  z-index: -3;
-  background: linear-gradient(to bottom, #6BC3FF, #51CBFF, #52CAFF, #7BD5FF, #C9EAFA, #EAFBFF, #FFFEE8);
-  position: relative;
-}
 .forelock:before,
 .forelock:after {
   content: '';

diff --git a/css/nature.css b/css/nature.css
@@ -0,0 +1,39 @@
+.field1 {
+  width: 80%;
+  bottom: -400px;
+  left: 0;
+  position: fixed;
+  height: 600px;
+  border-radius: 0 50% 50% 0;
+  background: linear-gradient(to bottom, #5CBA4C 10%, #279414 25%, #0B4D00);
+  display: inline-block;
+}
+.field2 {
+  width: 50%;
+  bottom: -250px;
+  right: -100px;
+  position: fixed;
+  z-index: -1;
+  height: 400px;
+  border-radius: 50% 50% 0 0;
+  background: linear-gradient(to bottom, #71BA52, #338924);
+  display: inline-block;
+}
+.field3 {
+  width: 70%;
+  bottom: 0;
+  right: -50px;
+  position: fixed;
+  z-index: -2;
+  height: 200px;
+  border-radius: 50%;
+  background: linear-gradient(to bottom, #D6FADA, #AAD793, #9EBE99, #77A171);
+  display: inline-block;
+}
+.sky {
+  width: 100%;
+  min-height: 850px;
+  z-index: -3;
+  background: linear-gradient(to bottom, #6BC3FF, #51CBFF, #52CAFF, #7BD5FF, #C9EAFA, #EAFBFF, #FFFEE8) no-repeat;
+  position: relative;
+}
diff --git a/human.html b/human.html
@@ -5,6 +5,7 @@
 
 	<link rel="stylesheet" type="text/css" href="css/human.css">
 	<link rel="stylesheet" type="text/css" href="css/flowers.css">
+	<link rel="stylesheet" type="text/css" href="css/nature.css">
 	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 </head>
 <body>
@@ -20,10 +21,10 @@
 			</div>
 			<div class="face">
 				<div class="left eye">
-					<div class="hotspot"></div>
+					<div class="spot"></div>
 				</div>
 				<div class="right eye">
-					<div class="hotspot"></div>
+					<div class="spot"></div>
 				</div>
 				<div class="nose"></div>
 				<div class="lips"></div>

diff --git a/human.js b/human.js
@@ -0,0 +1,15 @@
+function Human() {
+	return this;
+}
+
+Human.prototype.generatePerson = function() {
+
+};
+
+Human.prototype.generateFlowers = function() {
+
+};
+
+Human.prototype.generateFlower = function() {
+
+}