Skip to content

Commit

Permalink
Restructure into src + build folders
Browse files Browse the repository at this point in the history
  • Loading branch information
@greystate
greystate committed Jun 10, 2017
1 parent a0701df commit 8e49ed9
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 2 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
This is a CSS experiment incorporating **CSS Grid** and **CSS Variables**,
This is a CSS experiment with **CSS Grid** and **CSS Variables**,
spawned by [a screenshot tweeted](https://twitter.com/mattbrailsford/status/867378544770502661)
by [Matt Brailsford](https://twitter.com/mattbrailsford/).

Expand All @@ -8,4 +8,4 @@ give it a try, 'coz it won't let me forget about it :-) Finally had some time on
I'm of course curious to see how Matt did it - I know the markup is "just" an unordered list, but I was instantly intrigued by the
possible hazzles of getting the URL bit in there, not to mention getting the connecting lines in as well.

*This is a work in progress - need to add the **Home** node and the connections between the 1st level items.*
*This is still a work in progress, e.g. I need to add the **Home** node and the connections between the 1st level items.*
11 changes: 11 additions & 0 deletions build/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
This is a CSS experiment with **CSS Grid** and **CSS Variables**,
spawned by [a screenshot tweeted](https://twitter.com/mattbrailsford/status/867378544770502661)
by [Matt Brailsford](https://twitter.com/mattbrailsford/).

When I see something like that, my mind goes into *"Oh, I wonder how I'd do that..."* mode, and I might as well
give it a try, 'coz it won't let me forget about it :-) Finally had some time on my hands to do it.

I'm of course curious to see how Matt did it - I know the markup is "just" an unordered list, but I was instantly intrigued by the
possible hazzles of getting the URL bit in there, not to mention getting the connecting lines in as well.

*This is a work in progress - need to add the **Home** node and the connections between the 1st level items.*
79 changes: 79 additions & 0 deletions build/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sitemap Test</title>
<link rel="stylesheet" href="sitemap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>


<aside id="info">
<a class="help" href="#info">What&#8217;s this?</a>
<a class="close" href="#">&#215;</a>

<div>
<p>This is a CSS experiment with <strong>CSS Grid</strong> and <strong>CSS Variables</strong>,
spawned by <a href="https://twitter.com/mattbrailsford/status/867378544770502661">a screenshot tweeted</a>
by <a href="https://twitter.com/mattbrailsford/">Matt Brailsford</a>.</p>

<p>When I see something like that, my mind goes into <em>&#8220;Oh, I wonder how I&#8217;d do that&#8230;&#8221;</em> mode, and I might as well
give it a try, &#8216;coz it won&#8217;t let me forget about it :-) Finally had some time on my hands to do it.</p>

<p>I&#8217;m of course curious to see how Matt did it - I know the markup is &#8220;just&#8221; an unordered list, but I was instantly intrigued by the
possible hazzles of getting the URL bit in there, not to mention getting the connecting lines in as well.</p>

<p><em>This is still a work in progress, e.g. I need to add the <strong>Home</strong> node and the connections between the 1st level items.</em></p>
</div>
</aside>


<nav aria-label="Sitemap" class="sitenav">
<ul>
<li>
<a href="/search/">Search</a>
<ul>
<li><a href="/search/supplier/">Supplier</a></li>
</ul>
</li>
<li>
<a href="/services/">Services</a>
<ul>
<li><a href="/services/design/">Graphic Design</a></li>
<li><a href="/services/development/">Web Development</a></li>
<li>
<a href="/services/marketing/">Internet Marketing</a>
<ul>
<li>
<a href="/services/marketing/social/">Social Media</a>
<ul>
<li><a href="/services/marketing/social/twitter/">Twitter</a></li>
<li><a href="/services/marketing/social/facebook/">Facebook</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="/projects/">Projects</a>
<ul>
<li><a href="/projects/">Finance</a></li>
<li><a href="/projects/">Medical</a></li>
<li><a href="/projects/">Education</a></li>
<li><a href="/projects/">Professional</a></li>
</ul>
</li>
<li>
<a href="/blog/">Blog</a>
<ul>
<li><a href="/blog/article/">Article</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

</body>
</html>
0 sitemap.css → build/sitemap.css
View file
File renamed without changes.
0 index.html → src/index.kit
View file
File renamed without changes.
152 changes: 152 additions & 0 deletions src/sitemap.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/**
* Sitemap Styling (inspired by screenshot from @mattbrailsford)
* Trying to see if it's doable with CSSGrid and/or Flexbox
*/

body {
background: #f9fafc;
font-family: Helvetica, Arial, sans-serif;
}

@supports (display: grid) and (--css: variables) {
.sitenav {
/* Define colors */
--link-color: #35331d;
--line-color: #dcdddf;
--card-color: #4494ce;

/* Distance between the cards */
--gutter-size: 24;

/* Calculate other distances needed */
--gutter: calc(var(--gutter-size) * 1px);
--doubleGut: calc(var(--gutter-size) * 2px);
--halfGut: calc(var(--gutter-size) * 0.5px);
--negativeGut: calc(var(--gutter-size) * -1px);

/* Initial offset */
--offset: 1;
}

.sitenav ul { list-style: none; padding: 0; margin: 0; }
.sitenav > ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: var(--gutter);
}
}

.sitenav ul li {
position: relative;
z-index: 2;
}

.sitenav ul ul li:before {
content: "";
display: block;
width: var(--gutter);
height: 148%;
position: absolute;
transform: translate(calc(var(--gutter) * var(--offset) - var(--halfGut)), -25%);
border: solid var(--line-color);
border-width: 0 0 0 1px;
background: linear-gradient(90deg, var(--line-color) 0, var(--line-color) 100%) left 60% no-repeat;
background-size: 100% 1px;
z-index: 0;
}

.sitenav ul ul li:last-child::before {
height: var(--doubleGut);
transform: translate(calc(var(--gutter) * var(--offset) - var(--halfGut)), var(--negativeGut));
border-radius: 0.1em;
border-width: 0 0 1px 1px;
background: none;
}

.sitenav ul ul li + li {
margin-top: var(--gutter);
}

.sitenav li a {
display: block;
border-top: 0.3em solid #d9524b;
border-color: var(--card-color);
background: #fff;
padding: 30px 15px 15px;
border-radius: 0.3em;
text-decoration: none;
color: var(--link-color);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
position: relative;
font-weight: bold;
}

.sitenav li a::before {
content: attr(href);
position: absolute;
transform: translateY(-2em);
display: block;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: 60%;
color: var(--card-color);
font-weight: normal;
}

.sitenav li ul { padding-top: var(--gutter); }

.sitenav ul ul li a { margin-left: calc(var(--gutter) * var(--offset));}

.sitenav ul ul ul li { --offset: 2; }
.sitenav ul ul ul ul li { --offset: 3; }
.sitenav ul ul ul ul ul li { --offset: 4; }
.sitenav ul ul ul ul ul ul li { --offset: 5; }

.sitenav li li a { --card-color: #44c473; }
.sitenav li li li a { --card-color: #d7823c; }
.sitenav li li li li a { --card-color: #9461b0; }

/* For debugging */
.debug * { outline: 1px dashed var(--card-color, #0f0); }

/* Info styles */

.help {
color: inherit;
text-decoration: none;
font-weight: bold;
}

.close {
color: inherit;
text-decoration: none;
float: right;
font-size: 1.2em;
}

.help:hover { text-decoration: underline; }

/* Description initially hidden */
.help ~ div, .close { display: none; }

/* Show if requested */
#info:target .help ~ div { display: block; }
#info:target .close { display: inline; }

#info {
background: #fff;
color: #444;
border-radius: 0.2em;
margin: 2em 1em 2em auto;
padding: 1em;
border: 1px solid;
font-size: 0.8em;
max-width: 10em;
}

#info:target {
max-width: 40em;
}

0 comments on commit 8e49ed9

Please sign in to comment.