/politicalGeographySEA

assignment for my Master's degree

Primary LanguageHTML

Southeast Asia's Political Geography, Visualised

This is an assignment for my Master's course; it sought to "bring geogrpahy beyond the academy" by using web-gis and visual storytelling to explain the nuances of politics in the faraway for people in the West.

Attributions

Images

Geospatial Data

Palette

Maps

#F6EDDC
#D3C6B5
#7DA0C0
#c1e7ff
#C1E5F3
#E18169

Website

https://coolors.co/palette/cb997e-ddbea9-ffe8d6-b7b7a4-a5a58d-6b705c
/* CSS HEX */
--antique-brass: #cb997eff;
--desert-sand: #ddbea9ff;
--champagne-pink: #ffe8d6ff;
--ash-gray: #b7b7a4ff;
--artichoke: #a5a58dff;
--ebony: #6b705cff;

/* CSS HSL */
--antique-brass: hsla(21, 43%, 65%, 1);
--desert-sand: hsla(24, 43%, 76%, 1);
--champagne-pink: hsla(26, 100%, 92%, 1);
--ash-gray: hsla(60, 12%, 68%, 1);
--artichoke: hsla(60, 12%, 60%, 1);
--ebony: hsla(75, 10%, 40%, 1);

/* SCSS HEX */
$antique-brass: #cb997eff;
$desert-sand: #ddbea9ff;
$champagne-pink: #ffe8d6ff;
$ash-gray: #b7b7a4ff;
$artichoke: #a5a58dff;
$ebony: #6b705cff;

/* SCSS HSL */
$antique-brass: hsla(21, 43%, 65%, 1);
$desert-sand: hsla(24, 43%, 76%, 1);
$champagne-pink: hsla(26, 100%, 92%, 1);
$ash-gray: hsla(60, 12%, 68%, 1);
$artichoke: hsla(60, 12%, 60%, 1);
$ebony: hsla(75, 10%, 40%, 1);

/* SCSS RGB */
$antique-brass: rgba(203, 153, 126, 1);
$desert-sand: rgba(221, 190, 169, 1);
$champagne-pink: rgba(255, 232, 214, 1);
$ash-gray: rgba(183, 183, 164, 1);
$artichoke: rgba(165, 165, 141, 1);
$ebony: rgba(107, 112, 92, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-right: linear-gradient(90deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-bottom: linear-gradient(180deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-left: linear-gradient(270deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-top-right: linear-gradient(45deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-bottom-right: linear-gradient(135deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-top-left: linear-gradient(225deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-bottom-left: linear-gradient(315deg, #cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);
$gradient-radial: radial-gradient(#cb997eff, #ddbea9ff, #ffe8d6ff, #b7b7a4ff, #a5a58dff, #6b705cff);