h1 My Internet Periodic Table
h5 How I waste my time on the Internet
div.periodic-table
.empty-spacer-1
.empty-spacer-2
.periodic-element.social-media(data-description="I'm only on here to reject invitations 😂")
.periodic-element-inner
.title Li
.description LinkedIn
.periodic-element.social-media(data-description="Only so I don't miss out on my friends' milestones 🤷")
.periodic-element-inner
.title Fb
.description Facebook
.periodic-element.just-trying(data-description="Looking at amazing Dribbble 🏀 shots and internally die from the amount of talent/skill out there")
.periodic-element-inner
.title Db
.description Dribbble
.periodic-element.intense-work(data-description="Coming up with sassy commit messages 🔥")
.periodic-element-inner
.title Ct
.description Commits
.periodic-element.intense-work(data-description="Making custom emojis for Slack 💪🏻")
.periodic-element-inner
.title Sl
.description Slack
.periodic-element.fun-stuff(data-description="'Wikipedia Wormhole' is a thing. And it is dangerous 🐛")
.periodic-element-inner
.title Wk
.description Wikipedia
.periodic-element.fun-stuff(data-description="Choosing the right playlist. (If my Spotify is working... it's always not working)")
.periodic-element-inner
.title Sp
.description Spotify
a.periodic-element.social-media(data-description="If you say something witty, it's going on my Twitter 🐦" href="https://twitter.com/meowlivia_" target="_blank")
.periodic-element-inner
.title Tw
.description Twitter
.periodic-element.social-media(data-description="Professional Dota 2 Watcher right here ✌️")
.periodic-element-inner
.title Tc
.description Twitch
.periodic-element.intense-work(data-description="Creating GitHub issues, a.k.a. tossing problems which I can solve to the frontend team")
.periodic-element-inner
.title Gt
.description GitHub
.periodic-element.intense-work(data-description="Trying to get yarn working after an update. The main reason I toss issues to the frontend team.")
.periodic-element-inner
.title Yn
.description Yarn
.periodic-element.just-trying(data-description="A skill I'm trying to learn 🎨... and failing to learn 😛")
.periodic-element-inner
.title Il
.description Illustration
a.periodic-element.just-trying(data-description="Resident Designer. Keeping the diminishing flame of web design in me alive 🕯️" href="https://tellystats.com" target="_blank")
.periodic-element-inner
.title Te
.description TellyStats
.periodic-element.just-trying(data-description="I just need to stop adding items and actually start doing things. Am I the only one who is still using Wunderlist? 😂")
.periodic-element-inner
.title Wu
.description Wunderlist
.periodic-element.fun-stuff(data-description="I have zero cooking skills, so I watch cooking videos and never try cooking for real 🍳")
.periodic-element-inner
.title Cv
.description Cooking
.periodic-element.fun-stuff(data-description="Or any animal gifs, basically. 🐈🐕🦊🦔🦉🐍🐬🦄")
.periodic-element-inner
.title Dg
.description Dog Gifs
a.periodic-element.fun-stuff(data-description="Getting distracted by Toggl comics 🙃" href="https://blog.toggl.com" target="_blank")
.periodic-element-inner
.title Tg
.description Toggl Blog
.periodic-element.just-trying(data-description="I google every damn thing. Including movie spoilers. While watching the movie. Yes.")
.periodic-element-inner
.title Gg
.description Google
a.periodic-element.just-trying(data-description="I like spreadsheets so I create them for the smallest reasons 🧐" href="https://docs.google.com/spreadsheets/d/1Dim2nKRjgpkjA4miqTzcLPT68L0B5LU2aWZWF5hHYAc/edit#gid=0" target="_blank")
.periodic-element-inner
.title Ex
.description Excel
.periodic-element.intense-work(data-description="I still StackOverflow the simplest shit 'just to be sure'. Where will we be without it ❤️")
.periodic-element-inner
.title So
.description StackOv.
.periodic-element.intense-work(data-description="It's very much not my job, but sometimes I stick my hand into the Coding Projects jar 🍪 anyway")
.periodic-element-inner
.title Cd
.description Coding
.periodic-element.just-trying(data-description="I spend so much time on Codepen, I decided to go Pro because I felt bad 💸")
.periodic-element-inner
.title Cp
.description Codepen
.periodic-element.just-trying(data-description="We all have that one thing that keeps us alive 🛫🗺️")
.periodic-element-inner
.title Tr
.description Travel
a.periodic-element.social-media(data-description="Fuck this app. It's a terrible love-hate relationship." href="https://www.instagram.com/meowliviaaa/" target="_blank")
.periodic-element-inner
.title In
.description Instagram
a.periodic-element.fun-stuff(data-description="Obsessing over musicals and stalking broadway stars is 👏🏻 not 👏🏻 a 👏🏻 crime!" href="https://codepen.io/collection/XPWkdW/" target="_blank")
.periodic-element-inner
.title Mu
.description Musicals
.periodic-element.fun-stuff(data-description="I learn memes, I make memes, I breathe memes.")
.periodic-element-inner
.title Me
.description Memes
.periodic-element.intense-work(data-description="Battling double columns in Notion")
.periodic-element-inner
.title No
.description Notion
.periodic-element.social-media(data-description="Oh my god. Someone please save me from this Reddit hell hole 😭")
.periodic-element-inner
.title Re
.description Reddit
.periodic-element.intense-work(data-description="Research & Documentation nobody asks for 🤓📝")
.periodic-element-inner
.title Rd
.description Research
.periodic-element.intense-work(data-description="Stats. Data. Stats. Data. 📊 Just lots of reporting.")
.periodic-element-inner
.title St
.description Stats
.periodic-element.intense-work(data-description="Ads. Ads. Ads. If you've seen a Toggl ad, it was me. (Sorry)")
.periodic-element-inner
.title Ad
.description Ads
.legend-table
.legend-table__wrapper
span.legend-table__marker.social-media
span.legend-table__text Social Media
span.legend-table__marker.intense-work
span.legend-table__text Serious Work
span.legend-table__marker.just-trying
span.legend-table__text Personal Development
span.legend-table__marker.fun-stuff
span.legend-table__text Fun Stuff
br
div.legend-table__direction
span →   Across the table: Importance
div.legend-table__direction
span ↓   Down the table: Time Spent
aside.context
.explanation
| I try to be productive a lot, and I fail a lot :)
br
| Part of the
a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
| .
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.iconsbody {
background: #202e38;
font-family: "Poppins", sans-serif;
}
h1 {
margin: 2em auto 0;
font: 700 3em "Poppins", sans-serif;
color: #f1f5f6;
text-align: center;
}
h5 {
margin: 0 auto 2em;
font: 400 1.3em "Poppins", sans-serif;
color: #f1f5f6;
text-align: center;
}
a {
text-decoration: none;
}
aside.context {
text-align: center;
color: #fff;
line-height: 1.7;
a {
text-decoration: none;
color: #fff;
padding: 3px 0;
border-bottom: 1px dashed;
}
.explanation {
max-width: 700px;
margin: 4em auto 0;
}
}
footer {
text-align: center;
margin: 2em auto;
width: 100%;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #fff;
color: #fff;
margin: 5px;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
.icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
}
}
}
@mixin background-gradient($color1, $color2) {
background: linear-gradient(to bottom right, $color1 0%, $color2 100%);
}
@mixin text-gradient($color1, $color2) {
background: -webkit-linear-gradient($color1, $color2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.periodic-table {
display: grid;
grid-template-columns: repeat(9, 100px);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;
margin: auto;
max-width: 1200px;
justify-content: center;
}
.periodic-element {
padding: 4px;
position: relative;
z-index: 1;
cursor: default;
transition: all 0.3s ease;
.periodic-element-inner {
background: #202e38;
padding: 10px 15px;
width: calc(100% - 30px);
height: calc(100% - 20px);
transition: inherit;
}
.title {
font: 700 34px/1.3 "Poppins", sans-serif;
margin: 0.3em 0 0;
transition: 0.8s ease 600ms;
}
.description {
font: 500 12px "Poppins", sans-serif;
margin-top: -0.2em;
}
&:after {
z-index: 10;
content: attr(data-description);
background: #f9f8f7;
color: #333;
width: 180px;
position: absolute;
top: 80%;
opacity: 0;
transition: opacity 0.3s ease 0.3s,
top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
height: auto;
font-size: 12px;
line-height: 1.4;
padding: 10px;
margin: 0 0 0 -50px;
border-radius: 6px;
text-align: center;
}
&:hover {
transform: scale(1.12);
z-index: 10;
.periodic-element-inner {
background: transparent;
}
.title,
.description {
-webkit-text-fill-color: #222;
}
&:after {
top: 105%;
opacity: 1;
}
}
}
a.periodic-element {
cursor: pointer;
}
.social-media {
@include background-gradient(#f3f9a6,#cbc634);
.title,
.description {
@include text-gradient(#f3f9a6,#cbc634);
}
}
.fun-stuff {
@include background-gradient(#ff616d,#ffc171);
.title,
.description {
@include text-gradient(#ff616d,#ffc171);
}
}
.just-trying {
@include background-gradient(#37cfdc,#5a88e5);
.title,
.description {
@include text-gradient(#37cfdc,#5a88e5);
}
}
.intense-work {
@include background-gradient(#58ac30,#a7df62);
.title,
.description {
@include text-gradient(#58ac30,#a7df62);
}
}
.legend-table {
padding: 15px;
text-align: center;
font-size: 15px;
margin: 2em auto 0;
&__marker {
width: 25px;
height: 25px;
margin: 5px 5px 10px;
display: inline-block;
vertical-align: middle;
box-shadow: 0.5px 1px rgba(0, 0, 0, 0.15);
}
&__text {
display: inline-block;
vertical-align: middle;
margin: 0 25px 5px 5px;
@include text-gradient(#ccc,#eee);
}
&__direction {
display: inline-block;
margin: 10px 15px 10px 10px;
@include text-gradient(#ccc,#eee);
}
}
.empty-spacer {
&-1 {
grid-column: 3 / span 4;
grid-row: 1;
}
&-2 {
grid-column: 1;
grid-row: 4;
}
}
//not responsive because how do you make a responsive periodic table 😳
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.