Skip to content

Commit 7976623

Browse files
jgthmsjgthms
committed
Fix mobile view
1 parent 8948d10 commit 7976623

17 files changed

Lines changed: 88 additions & 68 deletions

File tree

‎_includes/lists/main-list.html‎

Lines changed: 29 additions & 29 deletions
Large diffs are not rendered by default.

‎_includes/menu.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<aside class="menu">
22
<header class="menu-header">
3-
<a class="menu-logo" href="{{site.url}}">
3+
<a id="logo" class="menu-logo" href="{{site.url}}">
44
<figure>
55
<img src="{{site.url}}/images/css-reference-icon.png" alt="CSS Reference icon">
66
<img src="{{site.url}}/images/css-reference-type.png" alt="CSS Reference type">
@@ -30,10 +30,10 @@
3030
</p>
3131
</header>
3232
<nav id="menu-nav" class="menu-nav">
33-
<form class="menu-search">
34-
<input id="menu-search-input" type="search" name="CSSPropertySearch" placeholder="Search for a property">
33+
<div class="menu-search">
34+
<input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
3535
<i class="icon is-search"></i>
36-
</form>
36+
</div>
3737
<div id="menu-list" class="menu-list">
3838
<ul id="menu-list-ul" class="menu-list-ul">
3939
{% include lists/menu-list.html %}

‎css/website.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎javascript/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
document.addEventListener('DOMContentLoaded', function() {
2+
// Logo
3+
var $logo = document.getElementById('logo');
4+
5+
$logo.addEventListener('click', function(event) {
6+
event.preventDefault();
7+
history.replaceState('', document.title, ' ');
8+
window.scrollTo(0,0);
9+
});
10+
211
// Hashes
312
var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a');
413

514
Array.prototype.forEach.call($hashes, function($el) {
615
$el.addEventListener('click', function(event) {
716
event.preventDefault();
17+
var propertyName = $el.dataset.propertyName;
818
var $target = document.getElementById($el.dataset.propertyName);
19+
history.replaceState('', document.title, '#' + propertyName);
920

1021
if ($target) {
1122
$target.scrollIntoView();

‎javascript/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ document.addEventListener('DOMContentLoaded', function() {
2424
});
2525

2626
$searchInput.addEventListener('keyup', function(event) {
27-
var query = this.value;
27+
var query = this.value.toLowerCase();
2828
isFocused = (this === document.activeElement);
2929

3030
if (isFocused) {
@@ -66,7 +66,7 @@ document.addEventListener('DOMContentLoaded', function() {
6666

6767
switch (key) {
6868
case 'Enter':
69-
if (isSearching) {
69+
if (isSearching && currentMatch > -1) {
7070
var propertyName = matches[currentMatch].propertyName;
7171

7272
if (template === 'index') {

‎property/animation-delay/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h2 class="property-name">
4646
<aside class="example-preview">
4747
<div class="example-browser"><i></i><i></i><i></i></div>
4848
<div class="example-output">
49-
<div class="example-output-div animation-delay square" id="animation-delay-0s">Hello<br>World</div>
49+
<div class="example-output-div animation-delay square is-plum" id="animation-delay-0s">Hello<br>World</div>
5050
</div>
5151
</aside>
5252
<style type="text/css">#animation-delay-0s{ animation-delay:0s;}</style>
@@ -67,7 +67,7 @@ <h2 class="property-name">
6767
<aside class="example-preview">
6868
<div class="example-browser"><i></i><i></i><i></i></div>
6969
<div class="example-output">
70-
<div class="example-output-div animation-delay square" id="animation-delay-12s">Hello<br>World</div>
70+
<div class="example-output-div animation-delay square is-plum" id="animation-delay-12s">Hello<br>World</div>
7171
</div>
7272
</aside>
7373
<style type="text/css">#animation-delay-12s{ animation-delay:1.2s;}</style>
@@ -88,7 +88,7 @@ <h2 class="property-name">
8888
<aside class="example-preview">
8989
<div class="example-browser"><i></i><i></i><i></i></div>
9090
<div class="example-output">
91-
<div class="example-output-div animation-delay square" id="animation-delay-2400ms">Hello<br>World</div>
91+
<div class="example-output-div animation-delay square is-plum" id="animation-delay-2400ms">Hello<br>World</div>
9292
</div>
9393
</aside>
9494
<style type="text/css">#animation-delay-2400ms{ animation-delay:2400ms;}</style>
@@ -109,7 +109,7 @@ <h2 class="property-name">
109109
<aside class="example-preview">
110110
<div class="example-browser"><i></i><i></i><i></i></div>
111111
<div class="example-output">
112-
<div class="example-output-div animation-delay square" id="animation-delay--500ms">Hello<br>World</div>
112+
<div class="example-output-div animation-delay square is-plum" id="animation-delay--500ms">Hello<br>World</div>
113113
</div>
114114
</aside>
115115
<style type="text/css">#animation-delay--500ms{ animation-delay:-500ms;}</style>

‎property/animation-direction/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h2 class="property-name">
4646
<aside class="example-preview">
4747
<div class="example-browser"><i></i><i></i><i></i></div>
4848
<div class="example-output">
49-
<div class="example-output-div animation-direction square" id="animation-direction-normal">Hello<br>World</div>
49+
<div class="example-output-div animation-direction square is-plum" id="animation-direction-normal">Hello<br>World</div>
5050
</div>
5151
</aside>
5252
<style type="text/css">#animation-direction-normal{ animation-direction:normal;}</style>
@@ -67,7 +67,7 @@ <h2 class="property-name">
6767
<aside class="example-preview">
6868
<div class="example-browser"><i></i><i></i><i></i></div>
6969
<div class="example-output">
70-
<div class="example-output-div animation-direction square" id="animation-direction-reverse">Hello<br>World</div>
70+
<div class="example-output-div animation-direction square is-plum" id="animation-direction-reverse">Hello<br>World</div>
7171
</div>
7272
</aside>
7373
<style type="text/css">#animation-direction-reverse{ animation-direction:reverse;}</style>
@@ -88,7 +88,7 @@ <h2 class="property-name">
8888
<aside class="example-preview">
8989
<div class="example-browser"><i></i><i></i><i></i></div>
9090
<div class="example-output">
91-
<div class="example-output-div animation-direction square" id="animation-direction-alternate">Hello<br>World</div>
91+
<div class="example-output-div animation-direction square is-plum" id="animation-direction-alternate">Hello<br>World</div>
9292
</div>
9393
</aside>
9494
<style type="text/css">#animation-direction-alternate{ animation-direction:alternate;}</style>
@@ -109,7 +109,7 @@ <h2 class="property-name">
109109
<aside class="example-preview">
110110
<div class="example-browser"><i></i><i></i><i></i></div>
111111
<div class="example-output">
112-
<div class="example-output-div animation-direction square" id="animation-direction-alternate-reverse">Hello<br>World</div>
112+
<div class="example-output-div animation-direction square is-plum" id="animation-direction-alternate-reverse">Hello<br>World</div>
113113
</div>
114114
</aside>
115115
<style type="text/css">#animation-direction-alternate-reverse{ animation-direction:alternate-reverse;}</style>

‎property/animation-duration/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h2 class="property-name">
4646
<aside class="example-preview">
4747
<div class="example-browser"><i></i><i></i><i></i></div>
4848
<div class="example-output">
49-
<div class="example-output-div animation-duration square" id="animation-duration-0s">Hello<br>World</div>
49+
<div class="example-output-div animation-duration square is-plum" id="animation-duration-0s">Hello<br>World</div>
5050
</div>
5151
</aside>
5252
<style type="text/css">#animation-duration-0s{ animation-duration:0s;}</style>
@@ -67,7 +67,7 @@ <h2 class="property-name">
6767
<aside class="example-preview">
6868
<div class="example-browser"><i></i><i></i><i></i></div>
6969
<div class="example-output">
70-
<div class="example-output-div animation-duration square" id="animation-duration-12s">Hello<br>World</div>
70+
<div class="example-output-div animation-duration square is-plum" id="animation-duration-12s">Hello<br>World</div>
7171
</div>
7272
</aside>
7373
<style type="text/css">#animation-duration-12s{ animation-duration:1.2s;}</style>
@@ -88,7 +88,7 @@ <h2 class="property-name">
8888
<aside class="example-preview">
8989
<div class="example-browser"><i></i><i></i><i></i></div>
9090
<div class="example-output">
91-
<div class="example-output-div animation-duration square" id="animation-duration-2400ms">Hello<br>World</div>
91+
<div class="example-output-div animation-duration square is-plum" id="animation-duration-2400ms">Hello<br>World</div>
9292
</div>
9393
</aside>
9494
<style type="text/css">#animation-duration-2400ms{ animation-duration:2400ms;}</style>

‎property/animation-iteration-count/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h2 class="property-name">
4646
<aside class="example-preview">
4747
<div class="example-browser"><i></i><i></i><i></i></div>
4848
<div class="example-output">
49-
<div class="example-output-div animation-iteration-count square" id="animation-iteration-count-1">Hello<br>World</div>
49+
<div class="example-output-div animation-iteration-count square is-plum" id="animation-iteration-count-1">Hello<br>World</div>
5050
</div>
5151
</aside>
5252
<style type="text/css">#animation-iteration-count-1{ animation-iteration-count:1;}</style>
@@ -67,7 +67,7 @@ <h2 class="property-name">
6767
<aside class="example-preview">
6868
<div class="example-browser"><i></i><i></i><i></i></div>
6969
<div class="example-output">
70-
<div class="example-output-div animation-iteration-count square" id="animation-iteration-count-2">Hello<br>World</div>
70+
<div class="example-output-div animation-iteration-count square is-plum" id="animation-iteration-count-2">Hello<br>World</div>
7171
</div>
7272
</aside>
7373
<style type="text/css">#animation-iteration-count-2{ animation-iteration-count:2;}</style>
@@ -88,7 +88,7 @@ <h2 class="property-name">
8888
<aside class="example-preview">
8989
<div class="example-browser"><i></i><i></i><i></i></div>
9090
<div class="example-output">
91-
<div class="example-output-div animation-iteration-count square" id="animation-iteration-count-infinite">Hello<br>World</div>
91+
<div class="example-output-div animation-iteration-count square is-plum" id="animation-iteration-count-infinite">Hello<br>World</div>
9292
</div>
9393
</aside>
9494
<style type="text/css">#animation-iteration-count-infinite{ animation-iteration-count:infinite;}</style>

‎property/animation-name/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h2 class="property-name">
4646
<aside class="example-preview">
4747
<div class="example-browser"><i></i><i></i><i></i></div>
4848
<div class="example-output">
49-
<div class="example-output-div animation-name square" id="animation-name-none">Hello<br>World</div>
49+
<div class="example-output-div animation-name square is-plum" id="animation-name-none">Hello<br>World</div>
5050
</div>
5151
</aside>
5252
<style type="text/css">#animation-name-none{ animation-name:none;}</style>
@@ -76,7 +76,7 @@ <h2 class="property-name">
7676
<aside class="example-preview">
7777
<div class="example-browser"><i></i><i></i><i></i></div>
7878
<div class="example-output">
79-
<div class="example-output-div animation-name square" id="animation-name-fadein">Hello<br>World</div>
79+
<div class="example-output-div animation-name square is-plum" id="animation-name-fadein">Hello<br>World</div>
8080
</div>
8181
</aside>
8282
<style type="text/css">#animation-name-fadein{ animation-name:fadeIn;}</style>
@@ -105,7 +105,7 @@ <h2 class="property-name">
105105
<aside class="example-preview">
106106
<div class="example-browser"><i></i><i></i><i></i></div>
107107
<div class="example-output">
108-
<div class="example-output-div animation-name square" id="animation-name-moveright">Hello<br>World</div>
108+
<div class="example-output-div animation-name square is-plum" id="animation-name-moveright">Hello<br>World</div>
109109
</div>
110110
</aside>
111111
<style type="text/css">#animation-name-moveright{ animation-name:moveRight;}</style>

0 commit comments

Comments
 (0)