From bf5971a9eacc293e93a50bcc7d78eb0a5c27cf04 Mon Sep 17 00:00:00 2001
From: Pixelastic
Date: Thu, 20 Apr 2017 23:44:05 +0200
Subject: [PATCH 1/6] Removing unused favicon
---
favicon.ico | 0
1 file changed, 0 insertions(+), 0 deletions(-)
delete mode 100644 favicon.ico
diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644
index e69de29..0000000
From ebce2b952f4292f7973c4df8f730b008cde768fb Mon Sep 17 00:00:00 2001
From: Tao Guo
Date: Tue, 9 May 2017 13:42:37 -0700
Subject: [PATCH 2/6] Fix the flag of China stars rotating issue #11
1. Create helper function to link polygen points.
2. Draw five angle stars with polygen() for css clip-path.
---
app/styles/_flags/bra.scss | 2 +-
app/styles/_flags/chn.scss | 26 ++++-----
app/styles/_helpers/helper.scss | 23 ++++++++
app/styles/_helpers/stars.scss | 96 +++++----------------------------
4 files changed, 51 insertions(+), 96 deletions(-)
diff --git a/app/styles/_flags/bra.scss b/app/styles/_flags/bra.scss
index cf0cbdb..44d7e2c 100644
--- a/app/styles/_flags/bra.scss
+++ b/app/styles/_flags/bra.scss
@@ -78,7 +78,7 @@
// // top: ($height - $circle-width) / 2;
// // left: ($width - $circle-width) / 2;
// // background-color: $white;
- // clip-path: five-pointed-star($circle-width, 100px, 100px);
+ // clip-path: polygon(five-pointed-star($circle-width, 100px, 100px));
// }
};
diff --git a/app/styles/_flags/chn.scss b/app/styles/_flags/chn.scss
index bd1b8df..c221590 100644
--- a/app/styles/_flags/chn.scss
+++ b/app/styles/_flags/chn.scss
@@ -6,20 +6,22 @@
$red: #de2910;
$yellow: #FDDA24;
$star-size: 6 * $unit;
- $star-offset-top: 5 * $unit;
- $star-offset-left: 5 * $unit;
$star-size-small: 2 * $unit;
- $star-offset-top-small: 2 * $unit;
- $star-offset-left-small: 10 * $unit;
background-color: $red;
&:before {
- @include star($yellow, $star-size, $star-offset-left, $star-offset-top);
+ content: '';
+ display: block;
+ position: relative;
+ width: $width;
+ height: $height;
+ background: $yellow;
+ clip-path: polygon(link_list(
+ five-pointed-star($star-size, 5 * $unit, 5 * $unit),
+ five-pointed-star($star-size-small, 10 * $unit, 2 * $unit, -120.96),
+ five-pointed-star($star-size-small, 12 * $unit, 4 * $unit, -98.13),
+ five-pointed-star($star-size-small, 12 * $unit, 7 * $unit, -74.055),
+ five-pointed-star($star-size-small, 10 * $unit, 9 * $unit, -54.34)
+ ));
}
- &:after {
- @include star($yellow, $star-size-small, $star-offset-left-small, $star-offset-top-small);
- text-shadow:(2 * $unit) (2 * $unit) 0px $yellow,
- (2 * $unit) (5 * $unit) 0px $yellow,
- (0) (7 * $unit) 0px $yellow;
- }
-};
+};
\ No newline at end of file
diff --git a/app/styles/_helpers/helper.scss b/app/styles/_helpers/helper.scss
index c28a3c2..e96f17d 100644
--- a/app/styles/_helpers/helper.scss
+++ b/app/styles/_helpers/helper.scss
@@ -5,6 +5,29 @@
@return $value / ($value * 0 + 1);
}
+// Link polygen point lists to a single one
+// @args: lists with positions
+// @returns: New single list which can be used in polygen()
+@function link_list($args...) {
+ $result: ();
+ $len: length($args);
+
+ @for $i from 1 to $len + 1 {
+ $list: nth($args, $i);
+ $result: append($result, $list, comma);
+ }
+
+ @if ($len <= 2) {
+ @return $result;
+ }
+
+ @for $i from $len - 1 to 1 {
+ $list: nth($args, $i);
+ $result: append($result, nth($list, 1), comma);
+ }
+ @return $result;
+}
+
// Sets the flag ratio and update all magic variables
// @args ratio: Ratio of height / width
@mixin ratio($ratio:1) {
diff --git a/app/styles/_helpers/stars.scss b/app/styles/_helpers/stars.scss
index 267d1e5..1e27bae 100644
--- a/app/styles/_helpers/stars.scss
+++ b/app/styles/_helpers/stars.scss
@@ -5,7 +5,8 @@
// http://www.mathalino.com/sites/default/files/images/005-planegeom-pentagram.jpg
// http://musicians4freedom.com/wp-content/uploads/2014/06/phi-dimentions-in-pentagram_0.gif
//
-@function five-pointed-star($diameter, $left, $top) {
+@function five-pointed-star($diameter, $left, $top, $rotate:0) {
+ $result: ();
$radius: _($diameter / 2);
$golden-ratio: 1.618;
// There are two circles that make a five pointed star.
@@ -14,86 +15,15 @@
// Both radius have a ratio equal to the golden ratio
$inner-radius: $radius - $radius / $golden-ratio;
- // Whatever the size of the star, the inner angle of the peaks is always 36°
- $teta: 36deg;
- // The other angles of the triangles are 72°
- $beta: 72deg;
- $pentagram-side: 2 * (sin($teta) * $inner-radius);
- // teta is also equal to the angle from the center of the star to one inner
- // peak and with a right angle to the base of one of the triangles
- $inner-top-padding-x: $pentagram-side / 2;
- $inner-top-padding-y: cos($teta) * $inner-radius;
- $outer-top-padding-x: sqrt($radius * $radius - $inner-top-padding-y * $inner-top-padding-y);
- $outer-top-padding-y: $inner-top-padding-y;
- $inner-bottom-padding-x: ($pentagram-side / 2) + (cos($beta) * $pentagram-side);
- $inner-bottom-padding-y: sqrt($inner-radius * $inner-radius - $inner-bottom-padding-x * $inner-bottom-padding-x);
- $outer-bottom-padding-x: sin($teta) * $radius;
- $outer-bottom-padding-y: cos($teta) * $radius;
-
- // We'll name the points of the star starting from the top and in clockwise
- // order
- $A-x: 0;
- $A-y: -$radius;
-
- $B-x: $inner-top-padding-x;
- $B-y: -$inner-top-padding-y;
-
- $C-x: $outer-top-padding-x;
- $C-y: -$outer-top-padding-y;
-
- $D-x: $inner-bottom-padding-x;
- $D-y: $inner-bottom-padding-y;
-
- $E-x: $outer-bottom-padding-x;
- $E-y: $outer-bottom-padding-y;
-
- $F-x: 0;
- $F-y: $inner-radius;
-
- $G-x: -$outer-bottom-padding-x;
- $G-y: $outer-bottom-padding-y;
-
- $H-x: -$inner-bottom-padding-x;
- $H-y: $inner-bottom-padding-y;
-
- $I-x: -$outer-top-padding-x;
- $I-y: -$outer-top-padding-y;
-
- $J-x: -$inner-top-padding-x;
- $J-y: -$inner-top-padding-y;
-
- // Converting to px and placing relative to origin
- $A-x: $A-x * 1px + $left;
- $A-y: $A-y * 1px + $top;
- $B-x: $B-x * 1px + $left;
- $B-y: $B-y * 1px + $top;
- $C-x: $C-x * 1px + $left;
- $C-y: $C-y * 1px + $top;
- $D-x: $D-x * 1px + $left;
- $D-y: $D-y * 1px + $top;
- $E-x: $E-x * 1px + $left;
- $E-y: $E-y * 1px + $top;
- $F-x: $F-x * 1px + $left;
- $F-y: $F-y * 1px + $top;
- $G-x: $G-x * 1px + $left;
- $G-y: $G-y * 1px + $top;
- $H-x: $H-x * 1px + $left;
- $H-y: $H-y * 1px + $top;
- $I-x: $I-x * 1px + $left;
- $I-y: $I-y * 1px + $top;
- $J-x: $J-x * 1px + $left;
- $J-y: $J-y * 1px + $top;
-
- @return polygon(
- $A-x $A-y,
- $B-x $B-y,
- $C-x $C-y,
- $D-x $D-y,
- $E-x $E-y,
- $F-x $F-y,
- $G-x $G-y,
- $H-x $H-y,
- $I-x $I-y,
- $J-x $J-y
- );
+ $ang: $rotate;
+ @for $i from 0 to 11 {
+ $r: $radius;
+ @if ($i % 2 == 1) {
+ $r: $inner-radius;
+ }
+ $result: append($result, ($left + $r * sin($ang) $top - $r * cos($ang)), comma);
+ $ang: $ang + 36;
+ }
+
+ @return $result;
}
From a58a850550876d9dd4297af4b0706e26221b1bc7 Mon Sep 17 00:00:00 2001
From: Pixelastic
Date: Mon, 15 May 2017 18:50:21 +0200
Subject: [PATCH 3/6] Adding comments on the clever way to draw stars
---
app/assets/fonts/Symbols.ttf | Bin 63160 -> 63160 bytes
app/assets/fonts/Symbols.woff | Bin 39276 -> 39272 bytes
app/assets/index.html | 2 +-
app/styles/_flags/chn.scss | 8 +-
app/styles/_helpers/helper.scss | 8 +-
app/styles/_helpers/stars.scss | 18 +-
app/styles/yarn.lock | 4 +
package.json | 2 +-
yarn.lock | 541 +++++++++++++++++---------------
9 files changed, 321 insertions(+), 262 deletions(-)
create mode 100644 app/styles/yarn.lock
diff --git a/app/assets/fonts/Symbols.ttf b/app/assets/fonts/Symbols.ttf
index c0c0ba78dad44d59e5c6209887182625520d7305..506f4fbed18c2363db4ebd7dbdcf2d64961b678c 100644
GIT binary patch
delta 50
ycmdn-mU+ip<_Q5Tyz_$?Cx%RsDHprs8P9L?m4Tau0R*nvw>87)%`A*tz5)QgauB)z
delta 50
ycmdn-mU+ip<_Q5T+&hY$Cx%Rsse00XG@jq)D+4zR0|;F45m$lHn^_pQd<6jEkr287
diff --git a/app/assets/fonts/Symbols.woff b/app/assets/fonts/Symbols.woff
index 095ec858b4c8ad4e6e48b0d3e6309af1f031194b..de9d71c87f9f69de5625c3364a7a56f13bd1528b 100644
GIT binary patch
delta 200
zcmaE}iRr~ACZ2MCH#Y`G1|XQ3F_EXb-T=rl<}25MMdL^Z#2;elk$qv;ZJK2ZY%T&AoCHD++*Odw_g-AXZ>1=4Z@H%uNM~
z-C1=4Z@H%uNM~
zJz!v9RAXRZ;?h3uJ-;BoxP*aW1_w|KXa*CH`0CAUjLWBJuljvn`ti@)eMSYF4H^!J
m$`^`C{Qdv_zrBu*j*o*LJ99@01B0tDw>i-4%~z&QVFm!se>sN$
diff --git a/app/assets/index.html b/app/assets/index.html
index 4b1bf55..e52209e 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -431,7 +431,7 @@