hmml_to_html.c: Switch to hsl colours [#23]
These colours should be visible on both dark and light backgrounds
This commit is contained in:
Matt Mascarenhas
parent
1b3db237f5
commit
6925dfb565
|
|
@ -154,39 +154,65 @@ StringsDiffer(char *A, char *B)
|
|||
return *A - *B;
|
||||
}
|
||||
|
||||
int
|
||||
typedef struct
|
||||
{
|
||||
int Hue;
|
||||
int Saturation;
|
||||
int Lightness;
|
||||
} hsl_colour;
|
||||
|
||||
hsl_colour
|
||||
CharToColour(char Char)
|
||||
{
|
||||
// Hue between 0 - 256
|
||||
// Saturation between 0 - 100
|
||||
// Lightness = 74
|
||||
// hsl(120, 100%, 50%)
|
||||
|
||||
hsl_colour Colour;
|
||||
|
||||
if(Char >= 'a' && Char <= 'z')
|
||||
{
|
||||
return (((float)Char - 'a') / ('z' - 'a') * 0xFFFFFF);
|
||||
Colour.Hue = (((float)Char - 'a') / ('z' - 'a') * 256);
|
||||
Colour.Saturation = (((float)Char - 'a') / ('z' - 'a') * 100);
|
||||
}
|
||||
else if(Char >= 'A' && Char <= 'Z')
|
||||
{
|
||||
return (((float)Char - 'A') / ('Z' - 'A') * 0xFFFFFF);
|
||||
Colour.Hue = (((float)Char - 'A') / ('Z' - 'A') * 256);
|
||||
Colour.Saturation = (((float)Char - 'A') / ('Z' - 'A') * 100);
|
||||
}
|
||||
else if(Char >= '0' && Char <= '9')
|
||||
{
|
||||
return (((float)Char - '0') / ('9' - '0') * 0xFFFFFF);
|
||||
Colour.Hue = (((float)Char - '0') / ('9' - '0') * 256);
|
||||
Colour.Saturation = (((float)Char - '0') / ('9' - '0') * 100);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 0x777777;
|
||||
Colour.Hue = 180;
|
||||
Colour.Saturation = 50;
|
||||
}
|
||||
|
||||
return Colour;
|
||||
}
|
||||
|
||||
int
|
||||
StringToColourHash(char *String)
|
||||
char *
|
||||
StringToColourHash(buffer *Buffer, char *String)
|
||||
{
|
||||
int Result = 0;
|
||||
hsl_colour Colour = {0, 0, 26};
|
||||
|
||||
int i;
|
||||
for(i = 0; String[i]; ++i)
|
||||
{
|
||||
Result += CharToColour(String[i]);
|
||||
Colour.Hue += CharToColour(String[i]).Hue;
|
||||
Colour.Saturation += CharToColour(String[i]).Saturation;
|
||||
}
|
||||
|
||||
return Result / i;
|
||||
// hsl(120, 100%, 50%)
|
||||
Colour.Hue = Colour.Hue % 360;
|
||||
Colour.Saturation = Colour.Saturation % 100;
|
||||
Buffer->Ptr = Buffer->Location;
|
||||
CopyStringToBuffer(Buffer, "hsl(%d, %d%%, %d%%)", Colour.Hue, Colour.Saturation, Colour.Lightness);
|
||||
return(Buffer->Location);
|
||||
}
|
||||
|
||||
int
|
||||
|
|
@ -258,7 +284,7 @@ BuildCategories(buffer *AnnotationClass, buffer *Category, int *MarkerIndex, boo
|
|||
}
|
||||
|
||||
void
|
||||
GenerateTopicColours(char *Topic)
|
||||
GenerateTopicColours(buffer *Colour, char *Topic)
|
||||
{
|
||||
for(int i = 0; i < ArrayCount(CategoryMedium); ++i)
|
||||
{
|
||||
|
|
@ -301,8 +327,8 @@ GenerateTopicColours(char *Topic)
|
|||
++TopicsPtr;
|
||||
}
|
||||
|
||||
fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: #%X; background: #%X; }\n",
|
||||
SanitisePunctuation(Topic), StringToColourHash(Topic), StringToColourHash(Topic));
|
||||
fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: %s; background: %s; }\n",
|
||||
SanitisePunctuation(Topic), StringToColourHash(Colour, Topic), StringToColourHash(Colour, Topic));
|
||||
|
||||
fclose(TopicsFile);
|
||||
free(TopicsBuffer);
|
||||
|
|
@ -347,6 +373,7 @@ main(int ArgC, char **Args)
|
|||
buffer AnnotationData;
|
||||
buffer Text;
|
||||
buffer Category;
|
||||
buffer Colour;
|
||||
|
||||
buffer Master;
|
||||
|
||||
|
|
@ -397,6 +424,7 @@ main(int ArgC, char **Args)
|
|||
ClaimBuffer(MemoryArena, &ClaimedMemory, &Category, 256);
|
||||
ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationClass, 256);
|
||||
ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, 1024 * 4);
|
||||
ClaimBuffer(MemoryArena, &ClaimedMemory, &Colour, 32);
|
||||
|
||||
CopyStringToBuffer(&AnnotationHeader,
|
||||
" <div data-timestamp=\"%d\"",
|
||||
|
|
@ -409,8 +437,8 @@ TimecodeToSeconds(Anno->time));
|
|||
{
|
||||
CopyStringToBuffer(&AnnotationClass, " authored");
|
||||
CopyStringToBuffer(&Text,
|
||||
"<span class=\"author\" style=\"color: #%X;\">%s</span> ",
|
||||
StringToColourHash(Anno->author),
|
||||
"<span class=\"author\" style=\"color: %s;\">%s</span> ",
|
||||
StringToColourHash(&Colour, Anno->author),
|
||||
Anno->author);
|
||||
}
|
||||
|
||||
|
|
@ -428,9 +456,10 @@ Anno->author);
|
|||
if(Anno->markers[MarkerIndex].type == HMML_MEMBER)
|
||||
{
|
||||
CopyStringToBuffer(&Text,
|
||||
"<a href=\"https://handmade.network/m/%s\" target=\"blank\" style=\"color: #%X; text-decoration: none\">%.*s</a>",
|
||||
// TODO(matt): Hoverbox
|
||||
"<a href=\"https://handmade.network/m/%s\" target=\"blank\" style=\"color: %s; text-decoration: none\">%.*s</a>",
|
||||
Anno->markers[MarkerIndex].marker,
|
||||
StringToColourHash(Anno->markers[MarkerIndex].marker),
|
||||
StringToColourHash(&Colour, Anno->markers[MarkerIndex].marker),
|
||||
StringLength(Readable), InPtr);
|
||||
InPtr += StringLength(Readable);
|
||||
++MarkerIndex;
|
||||
|
|
@ -438,16 +467,18 @@ StringLength(Readable), InPtr);
|
|||
else if(Anno->markers[MarkerIndex].type == HMML_PROJECT)
|
||||
{
|
||||
CopyStringToBuffer(&Text,
|
||||
"<a href=\"https://%s.handmade.network/\" target=\"blank\" style=\"color: #%X; text-decoration: none\">%s</a>",
|
||||
// TODO(matt): Hoverbox
|
||||
"<a href=\"https://%s.handmade.network/\" target=\"blank\" style=\"color: %s; text-decoration: none\">%s</a>",
|
||||
Anno->markers[MarkerIndex].marker,
|
||||
StringToColourHash(Anno->markers[MarkerIndex].marker),
|
||||
StringToColourHash(&Colour, Anno->markers[MarkerIndex].marker),
|
||||
Readable);
|
||||
InPtr += StringLength(Readable);
|
||||
++MarkerIndex;
|
||||
}
|
||||
else if(Anno->markers[MarkerIndex].type == HMML_CATEGORY)
|
||||
{
|
||||
GenerateTopicColours(Anno->markers[MarkerIndex].marker);
|
||||
// TODO(matt): Uncomment
|
||||
GenerateTopicColours(&Colour, Anno->markers[MarkerIndex].marker);
|
||||
BuildCategories(&AnnotationClass, &Category, &MarkerIndex, &HasCategory, Anno->markers[MarkerIndex].marker);
|
||||
}
|
||||
}
|
||||
|
|
@ -466,7 +497,7 @@ Readable);
|
|||
" <div class=\"mouse_catcher\"></div>\n"
|
||||
" <div class=\"refs\">\n");
|
||||
|
||||
CopyString(ReferencesArray[RefIdentifier - 1].ID, CurrentRef->editor);
|
||||
CopyString(ReferencesArray[RefIdentifier - 1].ID, CurrentRef->editor);
|
||||
CopyString(ReferencesArray[RefIdentifier - 1].RefTitle, "Title");
|
||||
CopyString(ReferencesArray[RefIdentifier - 1].URL, "http://example.com/");
|
||||
CopyString(ReferencesArray[RefIdentifier - 1].Source, "Source");
|
||||
|
|
@ -578,7 +609,8 @@ Anno->time);
|
|||
|
||||
while(MarkerIndex < Anno->marker_count)
|
||||
{
|
||||
GenerateTopicColours(Anno->markers[MarkerIndex].marker);
|
||||
//TODO(matt): Uncomment
|
||||
GenerateTopicColours(&Colour, Anno->markers[MarkerIndex].marker);
|
||||
BuildCategories(&AnnotationClass, &Category, &MarkerIndex, &HasCategory, Anno->markers[MarkerIndex].marker);
|
||||
}
|
||||
|
||||
|
|
@ -630,6 +662,7 @@ Anno->time);
|
|||
|
||||
CopyBuffer(&Player, &Annotation);
|
||||
|
||||
ClaimedMemory -= Colour.Size;
|
||||
ClaimedMemory -= Text.Size;
|
||||
ClaimedMemory -= AnnotationHeader.Size;
|
||||
ClaimedMemory -= Category.Size;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
* Main Purple: #372F46 or rgba(55, 47, 70, 1);
|
||||
* Highlight Green: #3A4A3F or rbga(58, 74, 63, 1);
|
||||
*/
|
||||
|
||||
.title.obbg {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
background-color: #EEE;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #372F46;
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
}
|
||||
|
||||
.title.obbg .refs_container .refs {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
border: 2px solid #372F46;
|
||||
border-top: none;
|
||||
}
|
||||
|
|
@ -56,34 +57,33 @@
|
|||
|
||||
/* Regular */
|
||||
.markers_container.obbg {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker {
|
||||
border-bottom: 1px solid #2A3172;
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover > .content {
|
||||
background-color: #FFF8E7;
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover > .faded .content {
|
||||
background-color: rgba(42, 49, 114, 0.7);
|
||||
background-color: #68557E;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker > .content {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.current > .content {
|
||||
color: #2A3172;
|
||||
color: #102369;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker > .progress .content {
|
||||
background-color: #2A3172;
|
||||
color: #FFFFFF;
|
||||
background-color: #372C44;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
/* Blackboard */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.title.riscy {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid rgba(246, 178, 26, 0.8);
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.title.riscy .refs_container .refs {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
border: 2px solid rgba(246, 178, 26, 0.8);
|
||||
border-top: none;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.title.riscy .refs_container > .refs .ref.current {
|
||||
background-color: #2A3172;
|
||||
color: #FFFFFF;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.title.riscy .refs_container > .refs .ref:hover {
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
/* Regular */
|
||||
.markers_container.riscy {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.markers_container.riscy > .marker {
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
.markers_container.riscy > .marker > .content {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
}
|
||||
|
||||
.markers_container.riscy > .marker.blackboard > .content {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #EEE;
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
|
||||
|
|
|
|||
|
|
@ -126,6 +126,8 @@
|
|||
|
||||
.markers_container > .marker.authored .content .author {
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markers_container > .marker.authored {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
.marker .content .categories .category.rendering { border-color: #60B60A; background: #60B60A; }
|
||||
.marker .content .categories .category.mathematics { border-color: #5E0595; background: #5E0595; }
|
||||
.marker .content .categories .category.simulation { border-color: #7DF3B5; background: #7DF3B5; }
|
||||
.marker .content .categories .category.animation { border-color: #62FC95; background: #62FC95; }
|
||||
.marker .content .categories .category.sorting { border-color: #8AF8AE; background: #8AF8AE; }
|
||||
.marker .content .categories .category.parsing { border-color: #70A3D6; background: #70A3D6; }
|
||||
.marker .content .categories .category.language { border-color: #4CCCCC; background: #4CCCCC; }
|
||||
.marker .content .categories .category.ai { border-color: #28F5C2; background: #28F5C2; }
|
||||
.marker .content .categories .category.demo { border-color: #547AE0; background: #547AE0; }
|
||||
.marker .content .categories .category.debug-visualisation { border-color: #6DC3FE; background: #6DC3FE; }
|
||||
.marker .content .categories .category.physics { border-color: #869535; background: #869535; }
|
||||
.marker .content .categories .category.experience { border-color: #604188; background: #604188; }
|
||||
.marker .content .categories .category.trivia { border-color: #7C962E; background: #7C962E; }
|
||||
.marker .content .categories .category.pathfinding { border-color: #5A4C54; background: #5A4C54; }
|
||||
.marker .content .categories .category.optimisation { border-color: #7E4B17; background: #7E4B17; }
|
||||
.marker .content .categories .category.memory { border-color: #8DA740; background: #8DA740; }
|
||||
.marker .content .categories .category.maths { border-color: #72B020; background: #72B020; }
|
||||
.marker .content .categories .category.demo { border-color: hsl(335, 32%, 26%); background: hsl(335, 32%, 26%); }
|
||||
.marker .content .categories .category.simulation { border-color: hsl(174, 92%, 26%); background: hsl(174, 92%, 26%); }
|
||||
.marker .content .categories .category.threading { border-color: hsl(64, 8%, 26%); background: hsl(64, 8%, 26%); }
|
||||
.marker .content .categories .category.language { border-color: hsl(251, 40%, 26%); background: hsl(251, 40%, 26%); }
|
||||
.marker .content .categories .category.physics { border-color: hsl(218, 68%, 26%); background: hsl(218, 68%, 26%); }
|
||||
.marker .content .categories .category.profiling { border-color: hsl(269, 88%, 26%); background: hsl(269, 88%, 26%); }
|
||||
.marker .content .categories .category.optimisation { border-color: hsl(69, 92%, 26%); background: hsl(69, 92%, 26%); }
|
||||
.marker .content .categories .category.input-handling { border-color: hsl(126, 94%, 26%); background: hsl(126, 94%, 26%); }
|
||||
.marker .content .categories .category.ui { border-color: hsl(285, 12%, 26%); background: hsl(285, 12%, 26%); }
|
||||
.marker .content .categories .category.rendering { border-color: hsl(146, 40%, 26%); background: hsl(146, 40%, 26%); }
|
||||
.marker .content .categories .category.memory { border-color: hsl(126, 32%, 26%); background: hsl(126, 32%, 26%); }
|
||||
.marker .content .categories .category.experience { border-color: hsl(236, 76%, 26%); background: hsl(236, 76%, 26%); }
|
||||
.marker .content .categories .category.trivia { border-color: hsl(25, 92%, 26%); background: hsl(25, 92%, 26%); }
|
||||
.marker .content .categories .category.audio { border-color: hsl(98, 80%, 26%); background: hsl(98, 80%, 26%); }
|
||||
.marker .content .categories .category.sorting { border-color: hsl(250, 80%, 26%); background: hsl(250, 80%, 26%); }
|
||||
.marker .content .categories .category.animation { border-color: hsl(167, 48%, 26%); background: hsl(167, 48%, 26%); }
|
||||
.marker .content .categories .category.inventory { border-color: hsl(278, 32%, 26%); background: hsl(278, 32%, 26%); }
|
||||
.marker .content .categories .category.font { border-color: hsl(161, 4%, 26%); background: hsl(161, 4%, 26%); }
|
||||
.marker .content .categories .category.mathematics { border-color: hsl(308, 4%, 26%); background: hsl(308, 4%, 26%); }
|
||||
|
|
|
|||
Loading…
Reference in New Issue