something something colors

This commit is contained in:
Ben Visness 2022-08-06 23:12:23 -05:00
parent 4289a1e27a
commit 9f88ce1223
5 changed files with 51 additions and 3 deletions

View File

@ -41,7 +41,7 @@
</template> </template>
<template id="project_link"> <template id="project_link">
<a data-tmpl="root" class="flex flex-row items-center bg-theme-dimmer ph2 pv1 br2"> <a data-tmpl="root" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
<img data-tmpl="logo" class="db mr1 br1 h1-5" /> <img data-tmpl="logo" class="db mr1 br1 h1-5" />
<div data-tmpl="name"></div> <div data-tmpl="name"></div>
</a> </a>

View File

@ -57,7 +57,7 @@
<input data-tmpl="projectId" type="hidden" name="project_id" /> <input data-tmpl="projectId" type="hidden" name="project_id" />
<img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/> <img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/>
<div data-tmpl="projectName"></div> <div data-tmpl="projectName"></div>
<a data-tmpl="removeButton" class="ml1" href="javascript:;">&#10006;</a> <a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">&#10006;</a>
</div> </div>
</template> </template>
<script> <script>

View File

@ -71,7 +71,7 @@
{{ with .Projects }} {{ with .Projects }}
<div class="mt3 flex g2 projects"> <div class="mt3 flex g2 projects">
{{ range $i, $proj := . }} {{ range $i, $proj := . }}
<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="flex flex-row items-center bg-theme-dimmer ph2 pv1 br2"> <a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
<img src="{{ $proj.Logo }}" class="db mr1 br1 h1-5" /> <img src="{{ $proj.Logo }}" class="db mr1 br1 h1-5" />
<div>{{ $proj.Name }}</div> <div>{{ $proj.Name }}</div>
</a> </a>

View File

@ -34,10 +34,27 @@
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}"> <link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
<style> <style>
/* Copy-paste from project.css yay */
{{ $c := hex2color "346ba6" }}
{{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
{{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
{{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }}
{{ $themeDark := eq .Theme "dark" | ternary (lightness 0.30 $c) (lightness 0.35 $c) | color2css }}
{{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }}
{{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}
:root { :root {
--content-background: #f8f8f8; --content-background: #f8f8f8;
--card-background: rgba(255, 255, 255, 0.1); --card-background: rgba(255, 255, 255, 0.1);
--card-background-hover: rgba(255, 255, 255, 0.16); --card-background-hover: rgba(255, 255, 255, 0.16);
--theme-color: {{ $c | color2css }};
--theme-color-dim: {{ $themeDim }};
--theme-color-dimmer: {{ $themeDimmer }};
--theme-color-dimmest: {{ $themeDimmest }};
} }
body { body {
@ -288,6 +305,32 @@
.back-to-normal a { .back-to-normal a {
text-decoration: none; text-decoration: none;
} }
.snippet-project {
background-color: rgba(255, 255, 255, 0.1);
text-decoration: none !important;
}
/* More copy-paste from project.css */
.bg-theme {
background-color: {{ $c | color2css }};
background-color: var(--theme-color);
}
.bg-theme-dim {
background-color: {{ $themeDim }};
background-color: var(--theme-color-dim);
}
.bg-theme-dimmer {
background-color: {{ $themeDimmer }};
background-color: var(--theme-color-dimmer);
}
.bg-theme-dimmest {
background-color: {{ $themeDimmest }};
background-color: var(--theme-color-dimmest);
}
</style> </style>
<script src="{{ static "js/carousel.js" }}"></script> <script src="{{ static "js/carousel.js" }}"></script>

View File

@ -2,6 +2,11 @@
{{ define "content" }} {{ define "content" }}
<style> <style>
:root {
--theme-color: white;
--theme-color-dimmer: rgba(255, 255, 255, 0.1);
}
#title { #title {
margin-top: 0; margin-top: 0;
} }