Skip to content

Commit c8b6cd8

Browse files
author
James Brundage
committed
style: Updating layout and HowTo include
1 parent be7c248 commit c8b6cd8

File tree

9 files changed

+140
-40
lines changed

9 files changed

+140
-40
lines changed

‎docs/About/4bitCSS-Animated-Palette.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
2-
layout: none
2+
layout: default
33
---
44

55
<div style='text-align:center'>
6-
76
<svg width='50%' height='50%' viewbox='0 0 1920 1080' id='animatedPalette'>
87
{% include Animated-Palette.svg %}
98
</svg>
@@ -12,7 +11,4 @@ layout: none
1211
Please enjoy this animated palette.
1312
<br/>
1413

15-
</div>
16-
17-
18-
14+
</div>

‎docs/About/4bitCSS-Color-Table.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: none
2+
layout: default
33
---
44
{% include ColorTable.md %}
55

‎docs/About/4bitCSS.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div style='text-align:center;font-size:1.1em'>
6+
7+
<p>
8+
4bitcss is a collection of CSS3 Color Palettes.
9+
</p>
10+
11+
<p>
12+
Each palette defines 16 beautiful bits of color <br/>
13+
(and a background, foreground, and sometimes a cursorColor)
14+
</p>
15+
16+
<br/>
17+
18+
It turns terminal color schemes into CSS variables and a fairly simple stylesheet.
19+
20+
<br/>
21+
22+
It is based off of the <a href='https://github.com/mbadolato/iTerm2-Color-Schemes'>amazing iTerm2-Color-Schemes repository by @mbadalato</a>
23+
24+
<br/>
25+
26+
There are currently {{site.data.Palettes | size}} palettes.
27+
28+
</div>

‎docs/About/Using-4bitCSS-In-CSS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: none
2+
layout: default
33
---
44

55
<h3 style='text-align:center'>CSS</h3>

‎docs/About/Using-4bitCSS-In-HTML.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: none
2+
layout: default
33
---
44

55
<h3 style='text-align:center'>HTML</h3>

‎docs/About/Using-4bitCSS-In-JavaScript.md‎

Lines changed: 71 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,38 @@
11
---
2-
layout: none
32
---
43

54
<h3 style='text-align:center'>JavaScript</h3>
65

6+
Because 4bitCSS sets CSS root variables, you can _get_ a value by using [getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)
7+
78
~~~javascript
89
var body = document.querySelector("body");
9-
var fourBitCssLink = document.getElementById("4bitcss");
1010
var foregroundValue = getComputedStyle(body).getPropertyValue('--foreground');
11-
var colorHexPreview = document.getElementById('ColorHexPreview');
12-
colorHexPreview.value = fourBitCssLink.style.getPropertyValue('--foreground');
13-
var colorHexPreviewText = document.getElementById('ColorHexPreviewText')
14-
colorHexPreviewText.value = foregroundValue;
11+
~~~
12+
13+
To set a value, we will want to be a little more clever.
14+
15+
We can set use [setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) to change the value.
16+
17+
In order to ensure that it can still be modified when the stylesheet changes, we'll want to find the stylesheet first.
18+
19+
~~~javascript
20+
// Get our stylesheet
21+
var FourBitCssLink = document.getElementById("4bitcss");
22+
// change the property in the first CSS rule.
23+
FourBitCssLink.sheet.cssRules[0].style.setProperty("--foreground","#ffffff")
24+
~~~
25+
26+
If we want to know when the property changes, we'll need to use a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
27+
28+
~~~javascript
29+
var observer = new MutationObserver(function(mutations) {
30+
mutations.forEach(function(mutationRecord) {
31+
console.log('style changed!');
32+
ForegroundPreview.value = getComputedStyle(FourBitCssLink).getPropertyValue('--foreground');
33+
ForegroundPreviewText.innerText = "Foreground " + ForegroundPreview.value;
34+
});
35+
});
1536
~~~
1637

1738
<div style='text-align:center'>
@@ -20,27 +41,56 @@ colorHexPreviewText.value = foregroundValue;
2041
var observer = new MutationObserver(function(mutations) {
2142
mutations.forEach(function(mutationRecord) {
2243
console.log('style changed!');
44+
ForegroundPreview.value = getComputedStyle(FourBitCssLink).getPropertyValue('--foreground');
45+
ForegroundPreviewText.innerText = "Foreground " + ForegroundPreview.value;
46+
BackgroundPreview.value = getComputedStyle(FourBitCssLink).getPropertyValue('--background');
47+
BackgroundPreviewText.innerText = "Background " + BackgroundPreview.value;
2348
});
2449
});
2550

26-
var colorHexPreview = document.getElementById('ColorHexPreview');
27-
var fourBitCssLink = document.getElementById("4bitcss");
28-
observer.observe(fourBitCssLink, { attributes : true, attributeFilter : ['href'] });
51+
var FourBitCssLink = document.getElementById("4bitcss");
52+
var ForegroundPreview = document.getElementById('ForegroundPreview');
53+
var ForegroundPreviewText = document.getElementById('ForegroundPreviewText')
54+
var BackgroundPreview = document.getElementById('BackgroundPreview');
55+
var BackgroundPreviewText = document.getElementById('BackgroundPreviewText');
2956

30-
fourBitCssLink.addEventListener('change', (event)=>{
31-
colorHexPreview.value = getComputedStyle(fourBitCssLink).getPropertyValue('--foreground');
32-
colorHexPreviewText.value = colorHexPreview.value;
33-
});
34-
colorHexPreview.value = getComputedStyle(fourBitCssLink).getPropertyValue('--foreground');
35-
colorHexPreview.addEventListener('change', (event)=>{
36-
var styleSheet = fourBitCssLink.sheet;
57+
observer.observe(FourBitCssLink, { attributes : true, attributeFilter : ['href'] });
58+
59+
var foregroundValue = getComputedStyle(FourBitCssLink).getPropertyValue('--foreground');
60+
ForegroundPreview.value = foregroundValue
61+
ForegroundPreviewText.innerText = "Foreground " + foregroundValue;
62+
ForegroundPreview.addEventListener('change', (event)=>{
63+
var styleSheet = FourBitCssLink.sheet;
3764
styleSheet.cssRules[0].style.setProperty("--foreground",event.target.value);
65+
ForegroundPreviewText.innerText = "Foreground" + ForegroundPreview.value;
66+
});
67+
68+
var backgroundValue = getComputedStyle(FourBitCssLink).getPropertyValue('--background')
69+
BackgroundPreview.value = backgroundValue;
70+
BackgroundPreviewText.innerText = "Background" + backgroundValue;
71+
BackgroundPreview.addEventListener('change', (event)=>{
72+
var styleSheet = FourBitCssLink.sheet;
73+
styleSheet.cssRules[0].style.setProperty("--background",event.target.value);
74+
BackgroundPreviewText.innerText = "Background" + BackgroundPreview.value;
3875
});
39-
var colorHexPreviewText = document.getElementById('ColorHexPreviewText')
40-
colorHexPreviewText.value = colorHexPreview.value;
4176

4277
</script>
43-
<input type='color' id='ColorHexPreview' />
44-
<input type='text' id='ColorHexPreviewText' />
45-
</div>
78+
<table>
79+
<tr>
80+
<td>
81+
<input type='color' id='ForegroundPreview' />
82+
</td>
83+
<td>
84+
<label for='ForegroundPreview' id='ForegroundPreviewText'>Foreground</label>
85+
</td>
86+
</tr>
87+
<tr>
88+
<td>
89+
<input type='color' id='BackgroundPreview' />
90+
</td>
91+
<td>
92+
<label for='BackgroundPreview' id='BackgroundPreviewText'>Background</label>
93+
</td>
94+
</tr>
95+
</table>
4696
<script>hljs.highlightAll();</script>

‎docs/About/Using-4bitCSS-In-SVG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: none
2+
layout: default
33
---
44

55
<h3 style='text-align:center'>SVG</h3>

‎docs/_includes/HowTo.md‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
1-
<menu class='centeredText' hx-target='#HowToContent'>
1+
<style>
2+
menu {
3+
display: flex;
4+
flex: 1 1 0;
5+
justify-content: center;
6+
}
7+
menu button {
8+
font-size: 1.1em;
9+
}
10+
</style>
11+
12+
<menu class='centeredText' hx-target='#HowToContent' hx-select='#PageContent'>
13+
<button hx-get='/About/4bitCSS'>About</button>
14+
<button hx-get='/About/4bitCSS-Animated-Palette' hx-trigger="load,click">Animation</button>
15+
<button hx-get='/About/Using-4bitCSS-In-CSS'>CSS</button>
216
<button hx-get='/About/Using-4bitCSS-In-HTML'>HTML</button>
17+
<button hx-get='/About/Using-4bitCSS-In-JavaScript'>JavaScript</button>
318
<button hx-get='/About/Using-4bitCSS-In-SVG'>SVG</button>
4-
<button hx-get='/About/Using-4bitCSS-In-CSS'>CSS</button>
5-
<button hx-get='/About/Using-4bitCSS-In-JavaScript'>JS</button>
6-
<button hx-get='/About/4bitCSS-Color-Table' hx-trigger="load,click">Table</button>
19+
<button hx-get='/About/4bitCSS-Color-Table'>Table</button>
720
</menu>
821

9-
<div id='HowToContent'>
22+
<br/>
23+
<style>
24+
.smooth {
25+
transition: all 1s ease-in;
26+
}
27+
</style>
28+
<div id='HowToContent' class='smooth'>
1029

1130
</div>

‎docs/_layouts/default.html‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
{% if page.stylesheet %}
3535
<link rel="stylesheet" type="text/css" href="{{page.stylesheet}}" id="4bitcss" />
3636
{% else %}
37-
<link rel="stylesheet" type="text/css" href="/Konsolas.css" id="4bitcss" />
37+
<link rel="stylesheet" type="text/css" href="/Konsolas/Konsolas.css" id="4bitcss" />
3838
{% endif %}
3939
<script type="text/javascript" src="/js/4bit.js"></script>
4040
<title>{{site.title}}{% if page.title %} - {{page.title}} {% elsif page.stylesheet %} - {{page.stylesheet}}{% endif %}</title>
@@ -164,16 +164,23 @@
164164
<a href='https://github.com/2bitdesigns/4bitcss'>
165165
{% include github-icon.svg %}
166166
</a></div>
167-
<div class="centered halfOrWholeWidth flexible centeredFlex" style="margin-top: -7%;">
168-
<svg viewbox='0 0 100 100' width='50%' height='16%' class='centered'>
167+
<div class="centered halfOrWholeWidth flexible centeredFlex" style="margin-top:-5%">
168+
<svg viewbox='0 0 100 100' width='33%' class='centered'>
169169
<a href='/'>{% include 4bitcss.svg %}</a>
170170
</svg>
171171
</div>
172172
{% if page.title %}
173173
<h1 class="centered halfOrWholeWidth flexible centered centeredFlex">{{ page.title }}</h1>
174174
{% endif %}
175-
<div class="centered" style="margin-top:-7%" id="PageContent">
175+
<div class="centered" style="margin-top:-5%">
176+
<div id="PaletteCount" class="centeredText">
177+
{{site.data.Palettes | size}} cool color palettes
178+
<a href='/'>for web</a>
179+
<a href='https://github.com/mbadolato/iTerm2-Color-Schemes'>or terminal</a>
180+
</div>
181+
<div id="PageContent">
176182
{{ content }}
183+
</div>
177184
</div>
178185
</body>
179186
</html>

0 commit comments

Comments
 (0)