Timeline.css
The best way to create your own Timeline, with just CSS!
Preview
License
MIT licensed
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
li.year changes the position of the :nth-of-type for the event.li's
The event li's alternate between the left and right side nicely until I place a new li.year in the chain.
If the last li.event is on the right side before a li.year, the next li.event afterwards appears again on the right side, and would like to have it continue on the left side. Is there a way of changing the order?
ul.timeline li.year li.event(appears on right) li.event(appears on left) li.event(appears on right) li.year li.event(appears on right) > change to left li.event(appears on left) > change to right li.event(appears on right) > change to left
The order of events is wrong, when a list and years are used.
When using a list (
ol
orul
, doesn't madder) to display the chain of events, it works fine until you add ali.year
. After adding a year, the order in which the events are added to the timeline is wrong.Wrong meaning, that an earlier item in the list is not displayed as an earlier entry in the Timeline. You can observe that in your own example, given here:
Here, you would expect the "Something amazing"-event to be earlier than the "Timeline.css"-one. Well, look for yourself.
I did some research and found, that the problem is caused by the
nth-child()
-selector. It works a little different than you seem to think:It will find the nth-children in the list, whom's type is
li
and then check if it has the correct class. See this StackOverflow answer.That means, that it will find the even/odd
li
, then check the type and if the type is notevent
, will not match anything (which is not what you want). What you want is to get the even/oddli
in a "sub-list", that only includesli
s with the classevent
.My workaround is to use
dt
for the years anddd
for the events (in adl
, of course). This way, the css selector will match nthdd
(dt
s are not ever matched) and the order is correct. But this seems pretty hacky to me.Again, this problem does only occur when
year
-elements are put in the list.License issue
Hi @christian-fei, I saw that the readme said this project is under MIT license(https://github.com/christian-fei/Timeline.css#mit-licensed), but in the commit to add package.json(https://github.com/christian-fei/Timeline.css/commit/ec62643ee809f6b7a750d6dc277564ddacc1ed02#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R14), it's ISC
So is this project under multiple licenses or this is a mistake? Thanks!
Fix broken headings in Markdown files
GitHub changed the way Markdown headings are parsed, so this change fixes it.
See bryant1410/readmesfix for more information.
Tackles bryant1410/readmesfix#1
q: Visualizing timespans?
Hi, I've been trying to figure out a way to layout my resume like this and I think your project's really cool! Just wondering, is there a built-in functionality to show timespans?
For example, a section of the timeline could be 2013, but I may want to highlight an event at the end of the year, and another around the June/August.
Hope that made sense...
Thanks!
Make all CSS-rules apply only to elements within the timeline
There are multiple selectors in the Timeline.css file, which match against "global" objects, like the
time
or*, *:after, *:before
.I'd suggest to change them to only apply to elements in the timeline (e.g.
.timeline [selector]
). That way, you could use the CSS-file as a drop-in, without it messing with your sites "global" layout/CSS.