something something colors
This commit is contained in:
parent
4289a1e27a
commit
9f88ce1223
|
@ -41,7 +41,7 @@
|
|||
</template>
|
||||
|
||||
<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" />
|
||||
<div data-tmpl="name"></div>
|
||||
</a>
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
<input data-tmpl="projectId" type="hidden" name="project_id" />
|
||||
<img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/>
|
||||
<div data-tmpl="projectName"></div>
|
||||
<a data-tmpl="removeButton" class="ml1" href="javascript:;">✖</a>
|
||||
<a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">✖</a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
@ -71,7 +71,7 @@
|
|||
{{ with .Projects }}
|
||||
<div class="mt3 flex g2 projects">
|
||||
{{ 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" />
|
||||
<div>{{ $proj.Name }}</div>
|
||||
</a>
|
||||
|
|
|
@ -34,10 +34,27 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
|
||||
|
||||
<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 {
|
||||
--content-background: #f8f8f8;
|
||||
--card-background: rgba(255, 255, 255, 0.1);
|
||||
--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 {
|
||||
|
@ -288,6 +305,32 @@
|
|||
.back-to-normal a {
|
||||
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>
|
||||
|
||||
<script src="{{ static "js/carousel.js" }}"></script>
|
||||
|
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
{{ define "content" }}
|
||||
<style>
|
||||
:root {
|
||||
--theme-color: white;
|
||||
--theme-color-dimmer: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue