all repos — www @ a1400b2de17c4b349c744c65bfd1ab9460e8a146

deserthorns.net content + generator

site/style.html (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 
{{ define "styles" }}
<style>
.palette {
    display: flex;
    flex-direction: row;
}
.palette > div {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin: 0.5rem;
}
.stripes > div {
    height: 1rem;
}
.box {
    width: 3rem;
    height: 3rem;
    border: 1px solid;
    margin: 1rem;
}
.box.blue {
    border-color: var(--col-blue);
    background-color: var(--col-blue-t);
}
.box.purple {
    border-color: var(--col-purple);
    background-color: var(--col-purple-t);
}
.box.green {
    border-color: var(--col-green);
    background-color: var(--col-green-t);
}
.box.orange {
    border-color: var(--col-orange);
    background-color: var(--col-orange-t);
}
</style>
{{ end }}


{{ define "content" }}
<h1>Style</h1>
<h2>Colors - Dark</h2>
<strong>Uses:</strong> borders, highlighted text, decoration
<div class="palette">
    <div style="background: var(--col-blue);"></div>
    <div style="background: var(--col-purple);"></div>
    <div style="background: var(--col-green);"></div>
    <div style="background: var(--col-orange);"></div>      
</div>
<hr>
<h2>Colors - Light</h2>
<strong>Uses:</strong> colored text
<div class="palette">
    <div style="background: var(--col-blue-l);"></div>
    <div style="background: var(--col-purple-l);"></div>
    <div style="background: var(--col-green-l);"></div>
    <div style="background: var(--col-orange-l);"></div> 
</div>
<hr>
<h2>Colors - Tints</h2>
<strong>Uses:</strong> text highlights, contrast areas/cards
<div class="palette">
    <div style="background: var(--col-blue-t);"></div>
    <div style="background: var(--col-purple-t);"></div>
    <div style="background: var(--col-green-t);"></div>
    <div style="background: var(--col-orange-t);"></div> 
</div>
<hr>
<h2>Contrasts</h2>
<strong>Uses:</strong> text, structure, contrast areas/cards
<div class="palette">
    <div style="background: var(--col-black);"></div>
    <div style="background: var(--col-gray);"></div>
</div>
<hr>
<div class="palette">
    <div class="box blue"></div>
    <div class="box purple"></div>
    <div class="box green"></div>
    <div class="box orange"></div>
</div>
<p>
    Text with <span style="color: var(--col-blue-l)">colors</span> and <span style="color: var(--col-purple-l)">colors</span> and <span style="color: var(--col-orange-l)">colors</span> and <span style="color: var(--col-green-l)">colors</span>.
</p>
<p>
    Text with highlight <span class="txt-hl-blue">colors</span> and <span class="txt-hl-purple">colors</span> and <span class="txt-hl-green">colors</span> and <span class="txt-hl-orange">colors</span>.
</p>
<p>
    Text with an <a href="https://deserthorns.net">inline link</a> in it.
</p>
<pre>
Preformatted text...
<span style="color: var(--col-orange)">...with color!</span>
</pre>
<pre style="background-color: var(--col-gray);">
// Code block
public foo() {
  return "bar";
}
</pre>
{{ end }}

{{ define "scripts" }}
{{ end }}