Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
149 lines (129 sloc) 4.33 KB
// Nepal
// http://www.crwflags.com/fotw/flags/np.html
// http://www.vexilla-mundi.com/nepal_flag.html
// http://crwflags.com/fotw/flags/np%27.html
// This one is one of the hardest of the lot. The peculiar shape is done
// through clip-path. We first cut the blue shape in the main div, then we cut
// the red one in an :after. The two symbols are positionned through :before
// and :first-letter. Symbols are simply displayed on the first line each one
// is then placed at the correct position using text-shadow.
// A lot of geometry is involved, don't hesitate to draw it on a sheet of
// paper.
@mixin flag-npl() {
@include ratio(2 / 3);
$unit: $h800;
$red: #c8102e;
$blue: #0c2340;
$white: #FFFFFF;
// We'll name points from A to E, starting on the top and rotating clockwise
$DE: 600 * $unit;
$CD: 600 * $unit;
$AE: 800 * $unit;
$A-x: 0;
$A-y: 0;
$D-x: $DE;
$D-y: $AE;
$E-x: 0;
$E-y: $AE;
// To get the two missing points, we'll need to calculate the width of the
// inner triangle formed by (DC), (AE) and the perpendicular of (AE) coming
// through B.
// Let's consider K the intersection of (DC) with (AE)
$EK: 600 * $unit;
$AK: 200 * $unit;
$DK: hypotenuse($EK, $DE);
$CK: $DK - $CD;
// Let's consider J the intersection of (CB) with (AE)
$alpha-DKE: asin($DE / $DK);
$alpha-CKJ: $alpha-DKE;
$JK: cos($alpha-CKJ) * $CK;
$CJ: sin($alpha-CKJ) * $CK;
$AJ: $AK + $JK;
$B-x: $DE;
$B-y: $AJ;
$C-x: $CJ;
$C-y: $AJ;
background: $blue;
clip-path: polygon(
$A-x $A-y,
$B-x $B-y,
$C-x $C-y,
$D-x $D-y,
$E-x $E-y
);
// We need to add the blue border around the flag. The border size is
// consistent, but we need to re-calculate all the coordinates.
$border-width: 25 * $unit;
$BJ: $DE;
$AB: hypotenuse($AJ, $BJ);
$alpha-JAB: asin($BJ / $AB);
$alpha-JAB-prime: $alpha-JAB / 2;
$A-x-offset: - $border-width;
$A-y-offset: - $border-width / tan($alpha-JAB-prime);
$alpha-ABJ: 90deg - $alpha-JAB;
$alpha-ABJ-prime: $alpha-ABJ / 2;
$B-x-offset: $border-width / tan($alpha-ABJ-prime);
$B-y-offset: $border-width;
$alpha-JCK: 90deg - $alpha-CKJ;
$alpha-BCD: $alpha-JCK;
$alpha-BCD-prime: $alpha-BCD / 2;
$C-x-offset: $border-width / tan($alpha-BCD-prime);
$C-y-offset: $border-width;
$alpha-CDE: 90deg - $alpha-CKJ;
$alpha-CDE-prime: $alpha-CDE / 2;
$D-x-offset: $border-width / tan($alpha-CDE-prime);
$D-y-offset: $border-width;
$E-x-offset: - $border-width;
$E-y-offset: $border-width;
&:after {
content: '';
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: $width;
height: $height;
background-color: $red;
clip-path: polygon(
($A-x - $A-x-offset) ($A-y - $A-y-offset),
($B-x - $B-x-offset) ($B-y - $B-y-offset),
($C-x - $C-x-offset) ($C-y - $C-y-offset),
($D-x - $D-x-offset) ($D-y - $D-y-offset),
($E-x - $E-x-offset) ($E-y - $E-y-offset)
);
}
// Let's roughly calculate the scale difference between the red and blue
// shapes and apply it to everything we calculated here.
$red-rectangle-area: $AE * $DE;
$blue-rectangle-area: ($AE + 2 * $border-width) * ($DE + 2 * $border-width);
$blue-red-ratio: $red-rectangle-area / $blue-rectangle-area;
$star-width: 256 * $unit * $blue-red-ratio;
$star-height: $star-width;
$crescent-width: 240 * $unit * $blue-red-ratio;
$crescent-height: 80 * $unit * $blue-red-ratio;
$crescent-left: $border-width + 150 * $unit * $blue-red-ratio - $crescent-width / 2;
$crescent-top: - $star-height / 2 + 240 * $unit;
// Let's consider M the center of [CD] and L the point where the
// perpendicular to (DE) goes through M
$DM: $CD / 2;
$LM: sin($alpha-CDE) * $DM;
$star-top: - $star-height / 2 + ($height - $LM) + $border-width;
$star-left: - $crescent-width + $crescent-left;
&:before {
content: $UTF8_NPL_CRESCENT+$UTF8_NPL_STAR;
position: relative; // needed for first-letter and z-index to work
z-index: 10;
color: transparent;
font-family: Symbols;
font-size: $star-width;
line-height: $star-width;
text-shadow: $star-left $star-top 0 $white;
}
&:first-letter {
font-family: Symbols;
color: transparent;
line-height: $star-width; // Use a line-height equal to the biggest of the two
font-size: $crescent-width;
text-shadow: $crescent-left $crescent-top 0 $white;
}
};