Skip to content

Commit 8c164ac

Browse files
gilmoreorlessgilmoreorless
committed
Extra intro links
1 parent bc7ff06 commit 8c164ac

File tree

3 files changed

+15
-24
lines changed

3 files changed

+15
-24
lines changed

‎gilhub/lib/home.css‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,6 @@ header,
6666
}
6767
.project-item {
6868
box-sizing: border-box;
69-
display: -webkit-flex;
70-
display: -ms-flexbox;
71-
display: flex;
7269
-webkit-flex: 1 1 15rem;
7370
-ms-flex: 1 1 15rem;
7471
flex: 1 1 15rem;
@@ -80,7 +77,6 @@ header,
8077
}
8178
.project-details {
8279
padding: 0 1rem;
83-
width: 100%;
8480
}
8581
.project-item.has-preview {
8682
-webkit-flex-basis: 20rem;
@@ -264,14 +260,15 @@ header,
264260
opacity: 0.7;
265261
position: relative;
266262
}
267-
.category-theme-forest .project-preview::after {
263+
.category-theme-forest .project-details::after {
264+
background-image: linear-gradient(to bottom, /* transparent */ rgba(85, 183, 45, 0), #55B72D 90%);
268265
content: '';
269266
display: block;
270-
width: 100%;
271-
height: 3rem;
272-
background-image: linear-gradient(to bottom, /* transparent */ rgba(85, 183, 45, 0), #55B72D 90%);
267+
height: 1.5rem;
268+
left: calc(50% - 5rem);
273269
position: absolute;
274-
bottom: 0;
270+
top: 7.5rem;
271+
width: 10rem;
275272
}
276273
.category-theme-forest .project-title,
277274
.category-theme-forest .project-description {
@@ -289,8 +286,7 @@ header,
289286
padding: 0.5rem;
290287
}
291288
.category-theme-forest .project-preview {
292-
left: 50%;
293-
margin-left: -5rem;
289+
left: calc(50% - 5rem);
294290
position: absolute;
295291
top: 1rem;
296292
}

‎gilhub/src/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
<body>
1212
<header>
1313
<h1>gilmoreorless</h1>
14-
<p>A collection of my open source <a href="https://github.com/gilmoreorless">projects on GitHub</a>.</p>
15-
<p>This page is also an experiment in how much styling can be done with just CSS gradients.</p>
14+
<p>A collection of my open source <a href="https://github.com/gilmoreorless">projects on GitHub</a>.
15+
I also write things in blog form at <a href="https://shoehornwithteeth.com/">shoehornwithteeth.com</a>
16+
and tweet stuff at <a href="https://twitter.com/iamnotyourbroom">@iamnotyourbroom</a>.</p>
17+
<p>This page doubles as an experiment in how much styling can be done with just CSS gradients.</p>
1618
</header>
1719
{{#categories}}
1820
<div class="category category-theme-{{theme}}">

‎index.html‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,72 +11,65 @@
1111
<body>
1212
<header>
1313
<h1>gilmoreorless</h1>
14-
<p>A collection of my open source <a href="https://github.com/gilmoreorless">projects on GitHub</a>.</p>
15-
<p>This page is also an experiment in how much styling can be done with just CSS gradients.</p>
14+
<p>A collection of my open source <a href="https://github.com/gilmoreorless">projects on GitHub</a>.
15+
I also write things in blog form at <a href="https://shoehornwithteeth.com/">shoehornwithteeth.com</a>
16+
and tweet stuff at <a href="https://twitter.com/iamnotyourbroom">@iamnotyourbroom</a>.</p>
17+
<p>This page doubles as an experiment in how much styling can be done with just CSS gradients.</p>
1618
</header>
1719
<div class="category category-theme-space">
1820
<div class="category-content">
1921
<h2>Libraries</h2>
2022
<ul class="project-list">
2123
<li class="project-item">
2224
<div class="project-details project-tag-npm">
23-
2425
<h3 class="project-title"><a href="https://github.com/gilmoreorless/css-animated-properties">css-animated-properties</a></h3>
2526
<p class="project-description">A simple list of which CSS properties can be animated and how. Available on npm. Some extra words to pad out the description a bit.</p>
2627
</div>
2728
</li>
2829
<li class="project-item">
2930
<div class="project-details project-tag-npm">
30-
3131
<h3 class="project-title"><a href="https://github.com/gilmoreorless/css-background-parser">css-background-parser</a></h3>
3232
<p class="project-description">Parse an element’s CSS background properties to get a list of individual backgrounds.</p>
3333
</div>
3434
</li>
3535
<li class="project-item">
3636
<div class="project-details project-tag-npm">
37-
3837
<h3 class="project-title"><a href="https://github.com/gilmoreorless/css-shorthand-properties">css-shorthand-properties</a></h3>
3938
<p class="project-description">A simple list of CSS shorthand properties and which longhand properties they expand to.</p>
4039
</div>
4140
</li>
4241
<li class="project-item">
4342
<div class="project-details project-tag-npm">
44-
4543
<h3 class="project-title"><a href="https://github.com/gilmoreorless/drone-ver">drone-ver</a></h3>
4644
<p class="project-description">Drone Versioning made easy, but not more sane.</p>
4745
</div>
4846
</li>
4947
<li class="project-item">
5048
<div class="project-details">
51-
5249
<h3 class="project-title"><a href="https://github.com/gilmoreorless/chuckles">Chuckles</a></h3>
5350
<p class="project-description">A library for creating ventriloquist dummy effects in canvas — because that’s what everyone needs, right?</p>
5451
</div>
5552
</li>
5653
<li class="project-item">
5754
<div class="project-details project-tag-sublime">
58-
5955
<h3 class="project-title"><a href="https://github.com/gilmoreorless/sublime-zoneinfo">Sublime zoneinfo</a></h3>
6056
<p class="project-description">A Sublime Text package that adds syntax highlighting for IANA time zone database files (a.k.a. zoneinfo files).</p>
6157
</div>
6258
</li>
6359
<li class="project-item">
6460
<div class="project-details project-tag-jquery project-tag-npm">
65-
6661
<h3 class="project-title"><a href="https://gilmoreorless.github.io/jquery-nearest">jQuery nearest element</a></h3>
6762
<p class="project-description">jQuery plugin to find the elements in a page that are closest to (or furthest away from) a particular point or element, based on pixel dimensions.</p>
6863
</div>
6964
</li>
7065
<li class="project-item">
7166
<div class="project-details project-tag-jquery">
72-
7367
<h3 class="project-title"><a href="https://github.com/gilmoreorless/jquery-contentsize">jQuery content size</a></h3>
7468
<p class="project-description">jQuery plugin to get the real dimensions of an element’s children, which don’t always match the parent’s width and height.</p>
7569
</div>
7670
</li>
7771
<li class="project-item">
7872
<div class="project-details project-tag-jquery">
79-
8073
<h3 class="project-title"><a href="https://github.com/gilmoreorless/jquery-easing-repeater">jQuery easing repeater</a></h3>
8174
<p class="project-description">A simple way to speed up and repeat an easing function multiple times over the course of a single animation call.</p>
8275
</div>

0 commit comments

Comments
 (0)