Skip to content

Commit 229ce2b

Browse files
jgthmsjgthms
committed
Update index
1 parent b2bf625 commit 229ce2b

15 files changed

Lines changed: 1783 additions & 131 deletions

‎_config.local.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
title: CSS Reference
2-
subtitle: "A free visual guide to the most popular CSS properties"
2+
subtitle: "A free visual guide to CSS"
33
description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
44
share: "CSS Reference: a free visual guide to the most popular CSS properties."
55
url: http://localhost:4000

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
title: CSS Reference
2-
subtitle: "A free visual guide to the most popular CSS properties"
2+
subtitle: "A free visual guide to CSS"
33
description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
44
share: "CSS Reference: a free visual guide to the most popular CSS properties."
55
url: http://cssreference.io

‎_includes/carbon.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script type="text/javascript">
2+
window.carbonLoaded = false;
3+
4+
window.helloCarbon = function() {
5+
window.carbonLoaded = true;
6+
}
7+
8+
document.addEventListener('DOMContentLoaded', function() {
9+
// Hello
10+
var $hello = document.getElementById('hello');
11+
var $huggingFace = document.getElementById('huggingFace');
12+
var $carbon = document.getElementById('carbon');
13+
var $placeholder = document.getElementById('placeholder');
14+
15+
setTimeout(function() {
16+
if (window.carbonLoaded) {
17+
$hello.style.minHeight = '218px';
18+
$huggingFace.style.display = 'none';
19+
$carbon.style.display = 'block';
20+
} else {
21+
$hello.style.minHeight = '0';
22+
$huggingFace.style.display = 'block';
23+
$carbon.style.display = 'none';
24+
}
25+
$placeholder.style.display = 'none';
26+
}, 2000);
27+
});
28+
</script>
29+
30+
<div id="hello">
31+
<div id="huggingFace">
32+
<p>CSS Reference is <strong>free</strong> and always will be!</p>
33+
<p>Please whitelist us in your ad blocker.</p>
34+
<p>Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji"></p>
35+
</div>
36+
37+
<div id="placeholder" class="placeholder">
38+
<div class="placeholder-image"><div></div></div>
39+
<div class="placeholder-content"><div></div><div></div><div></div></div>
40+
<div class="placeholder-footer"><div></div></div>
41+
</div>
42+
43+
<div id="carbon">
44+
<!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script> -->
45+
</div>
46+
</div>

‎_includes/menu.html‎

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -70,28 +70,8 @@
7070
</a>
7171
</nav>
7272
{% endif %}
73-
<footer id="menuHello" class="menu-hello">
74-
<div id="huggingFace">
75-
<p>
76-
CSS Reference is <strong>free</strong> and <br>
77-
always will be!
78-
</p>
79-
<p>
80-
Please whitelist us in <br>
81-
your ad blocker.
82-
</p>
83-
<p>
84-
Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji">
85-
</p>
86-
</div>
87-
<div id="placeholder" class="placeholder">
88-
<div class="placeholder-image"><div></div></div>
89-
<div class="placeholder-content"><div></div><div></div><div></div></div>
90-
<div class="placeholder-footer"><div></div></div>
91-
</div>
92-
<div id="carbon">
93-
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
94-
</div>
73+
<footer class="menu-hello">
74+
{% include carbon.html %}
9575
</footer>
9676
</aside>
9777

@@ -101,21 +81,8 @@
10181
</p>
10282
<p class="footer-share footer-share--social">
10383
<strong class="footer-share-label">Share</strong>
104-
<a class="footer-share-button is-twitter"
105-
data-social-network="Twitter"
106-
data-social-action="tweet"
107-
data-social-target="{{site.url}}{{page.url}}"
108-
href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}&text={{site.share | url_encode}}"
109-
rel="external nofollow"
110-
target="_blank">
111-
{% include svg/twitter.html %}
112-
</a>
113-
<a class="footer-share-button is-facebook"
114-
href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
115-
rel="external nofollow"
116-
target="_blank">
117-
{% include svg/facebook.html %}
118-
</a>
84+
{% include social/button-twitter.html %}
85+
{% include social/button-facebook.html %}
11986
<a id="menu-nav-open" class="footer-share-nav">Menu</a>
12087
</p>
12188
<div class="footer-facebook">

‎_includes/social/button-facebook.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<a class="share-button share-button--facebook"
2+
href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
3+
data-tooltip-after="Share on Facebook"
4+
rel="external nofollow"
5+
target="_blank">
6+
{% include svg/facebook.html %}
7+
</a>

‎_includes/social/button-twitter.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<a class="share-button share-button--twitter"
2+
data-social-network="Twitter"
3+
data-social-action="tweet"
4+
data-social-target="{{site.url}}{{page.url}}"
5+
data-tooltip-after="Share on Twitter"
6+
href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}&text={{site.share | url_encode}}"
7+
rel="external nofollow"
8+
target="_blank">
9+
{% include svg/twitter.html %}
10+
</a>

‎css/website.css‎

Lines changed: 1561 additions & 1 deletion
Large diffs are not rendered by default.

‎css/website.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "../sass/menu"
1212
@import "../sass/header"
1313
@import "../sass/footer"
14+
@import "../sass/index"
1415
@import "../sass/heading"
1516
@import "../sass/list"
1617
@import "../sass/property"

‎index.html‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -32,30 +32,45 @@
3232
{% include favicons.html %}
3333
</head>
3434
<body>
35-
{% include menu.html %}
36-
<main class="main">
37-
<header class="header">
38-
<div class="header-container">
39-
<h1 class="header-figure">
40-
{{site.title}}
41-
</h1>
42-
<h2 class="header-title">
43-
A free visual guide to CSS
44-
</h2>
45-
<p class="header-subtitle">
46-
<strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
47-
</p>
35+
<header class="header">
36+
<div class="container">
37+
<h1 class="header-figure">
38+
{{site.title}}
39+
</h1>
40+
<div class="header-content">
41+
<div class="header-carbon">
42+
{% include carbon.html %}
43+
</div>
44+
<div class="header-text">
45+
<h2 class="header-title">
46+
{{site.subtitle}}
47+
</h2>
48+
<p class="header-subtitle">
49+
<strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular <strong>properties</strong>, and explains them with illustrated and animated <strong>examples</strong>.
50+
</p>
51+
<footer class="header-share">
52+
{% include social/button-twitter.html %}
53+
{% include social/button-facebook.html %}
54+
</footer>
55+
</div>
4856
</div>
49-
</header>
50-
<section class="list">
51-
<div class="menu-search">
52-
<input id="menu-search-input" type="search" autocomplete="off" placeholder="Search 129 CSS properties">
53-
<i class="icon is-search"></i>
57+
</div>
58+
</header>
59+
<main class="index">
60+
<nav class="index-collections">
61+
<strong>Collections:</strong>
62+
<a href="{{site.url}}/animations/">Animations</a>
63+
<a href="{{site.url}}/backgrounds/">Backgrounds</a>
64+
<a href="{{site.url}}/box-model/">Box model</a>
65+
<a href="{{site.url}}/flexbox/">Flexbox</a>
66+
<a href="{{site.url}}/positioning/">Positioning</a>
67+
<a href="{{site.url}}/transitions/">Transitions</a>
68+
<a href="{{site.url}}/typography/">Typography</a>
69+
</nav>
70+
<div class="container">
71+
<div class="index-left">
5472
</div>
55-
<div id="menu-list" class="list-list">
56-
{% include lists/main-list.html %}
57-
</div>
58-
</section>
73+
</div>
5974
</main>
6075
{% include modals/share.html %}
6176
{% include google-fonts.html %}

‎sass/base.sass‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,14 @@ html
5757
background: $primary
5858
color: $primary-invert
5959

60+
.container
61+
margin-left: auto
62+
margin-right: auto
63+
max-width: 700px
64+
6065
+desktop
6166
html
6267
font-size: 18px
6368
padding-left: $menu-width
69+
&.is-index
70+
padding-left: 0

0 commit comments

Comments
 (0)