Web Dev - Tumblr Posts
i made a links page! it's pretty snazzy~
all of the animations on the site, including the opening animation above and the icon animations below, are made entirely with css – no javascript here! the icon animations for the social media icons are particularly fun, you should go see them for yourself 👀
the only javascript on the page powers some keyboard shortcuts, like skipping the animation with esc / tab, or switching between ☀️light and 🌙dark theme with L
i made the site with extensibility in mind, so i can easily add more links later. colors automatically cycle between blue, purple, and pink, and the icons automatically swap to the left or right; all i have to do is add text and an icon, and the css does the rest of the heavy lifting.
i can even add custom color palettes with minimal effort! it's as easy as plugging a few colors and then typing, for example, "green link" (insert zelda joke here)
besides just web dev, some graphic design went into the site as well – namely these two icons for my journal (left) and portfolio (right). i'm particularly proud of the journal icon, it's easily one of my best yet!
speaking of my portfolio, you may notice it says Coming Soon, i.e. it's not done. in truth, it's been coming "soon" for about five years now, waiting for inspiration to strike... and it finally did 👀 i'm hoping to make that my next web dev project~
anyway i have a few more ideas for what to do with this links page in the future, but hey, not half bad for a 1.0 release, right? ✨
check it out and let me know what you think! https://skyso.me/tric
still working on extra bits for that links page. here's a tumblr one where the tumblr logo turns into a reblog.
could i do this with a gif? yeah, sure. did i do this with pure css? you bet i did.
New look, same old blog!
welcome to a wholly improved skysometric.co! after years of dreams, sketches, redesigns, code, and slamming my head against the wall, i've finally fulfilled my dream of having a blog that matches my design language. i'm so excited to put it to good use as the front page for my creativity and journaling 💖
the blog's still based on tumblr, using a new custom theme. in truth, it's just a heavy edit of the default theme... and quite a mess of one, at that! but hey, it looks and works great, and isn't that all that counts in the end?
(speaking of which, are you reading this on the tumblr app? come check out the new site!)
About the redesign
on the left menu are links to my main sites, and core tumblr links like the askbox and archive. there's also a theme toggle for light and dark mode – i'm especially proud of how the dark theme turned out! the light theme needs a little work, but i think it's a good start to improve on in the future. oh and btw, these animations for the menus opening and closing? they're pure css, even on mobile~
the right menu has featured tags to browse stuff i've made and written, as well as a search box for anything not featured. tags are a core part of the updated site, serving as collections of art and writing – so they have extra prominence both in the menu and at the bottom of each post. all my most important tags have icons that are loaded dynamically based on their name! and any tags that don't have an icon use the default hashtag. i'm really proud of all the design work that went into it, and i'll show off the icons on their own pretty soon ✨
posts themselves can be blue, purple, or pink, matching my main color palette. the color is based on the post id! so each post's color is always the same, whether you're viewing it on the front page, tag pages, or the post itself.
Design history
this updated blog has been four years in the making, surviving both my name change and multiple iterations of my design language – yet somehow, it still looks just like my years old sketches. i'm impressed at how much i was able to rework and carry forward with me, especially with how many of these ideas felt like dead ends at the time!
that early screenshot at the top is from waayyy back when i was considering moving away from tumblr. it was very tempting to self-host and "own my data" as they say... but i would miss out on all the social features like reblogs. plus, on tumblr people can follow me and see all my posts in the app, as well as on my site – what's not to love? so even though the site's time may be past, i'm sticking with tumblr until they literally nuke it out of orbit~
Cleaning up, carrying forward
i've had this blog for nearly ten years now, and the way i've used it has changed tremendously over that time. what started as my first foray into social media turned into a space for sharing things i found that made me happy, sharing my philosophies and outlook on life, sharing my struggles through college and burnout, and now sharing my journey discovering my voice as a person and a creator. so now that i'm a new person with a new voice, i should probably clear out all those crusty old cobwebs and start fresh, right?
not a chance!
if anything, i went back and made sure my old posts look just as good as my new ones, cleaning up tags and backporting my new code to work with old tumblr post layouts. i want to carry my history forward with me! for all these years this blog has been my journal, and even though my journaling changed with time, that core purpose hasn't. honestly, after all the cleaning, i'm inspired to return to those old methods of journaling – share more of myself, share more of what makes me happy, be more free and open and wild ✨
(that said, some of those early posts were especially raw! those have been archived for now. maybe i'll remake the sentiment behind them someday...)
My promise to myself
in the wake of college i realized i was posting less here on the blog; this redesign was an attempt to give it more importance, so that i would use it more. but what i didn't realize was that i was posting less due to burnout... and i stalled out on the redesign, also due to burnout. a double whammy! so i used my blog less than ever, and it languished for years.
on top of that, giving my blog more importance made it more of a Serious Website™ in my head, a place where i had to put my best foot forward at all times. that made me want to post here even less, only when i finished some big or important project! but my blog was never intended for this – i've been posting random nonsense since the beginning.
so what started as a promise that i would use my blog more, became a promise that i would make my blog A Big Deal. and that's not healthy for me! so i stepped back and re-evaluated. first, i started consciously calling this place my journal, to make it a sketchy and rough place with intent. second, i ultimately decided to redesign it anyway, with a new promise: to make it somewhere i'm proud of posting more often, no matter what those posts look like.
and with that promise fulfilled, i'm ready to get back to journaling 💙
with twitter's potential demise on the horizon, i've returned to working on my links page so that all my socials are in one place. today i added collapsible categories for quicker browsing! check it out here:
A bunch of smaller updates to the blog...
the work never stops when you launch a website! ever since the re-launch of skysometric.co, i've found all sorts of edge cases and missing pieces to add to the site's styling. most of them are minor updates and polish, but here's a few pieces of design language that i'm especially proud of...
"Follow This Blog On Tumblr," Front And Center
it's not obvious enough at a glance that this site is entirely built on and powered by Tumblr, so i've added a big "follow this blog on Tumblr" button to the front page that makes it as clear as possible. plus it pulls double duty as self promotion~
on the right is what it looks like when it's highlighted. it uses the same basic styling as the post tags, but with an outline on hover.
Usernames
it turns out that tumblr applies a special css class when you @ someone in a post, so i've hooked into that to make them look fancier than just regular links! this way it's easier to find and follow my friends 💖
In This House We Love And Appreciate Our Friends
Light Theme Improvements
both of the screenshots above use the light theme, which has been punched up pretty significantly since launch – i might actually like it more than the dark theme now...???
you can switch themes with the toggle on the left menu. eventually i'd like to make it automatically choose the theme based on your system preference, like the links page currently is...
Asks
a lot of the styling on my site is simply built on top of the default Tumblr blog theme styling, which it uses as a fallback for anything that i haven't added my own touches to. this was the case with asks, which i only did a minimal amount of work at launch to make sure they followed the right color scheme – otherwise, they looked exactly like asks do on the default Tumblr theme.
now that i'm actually getting asks, though, i decided to punch them up and make them look more like something that fits my page!
i still can't believe the CSS standard lets you control the radius on each individual corner of a box, but doesn't let you add an outline to text. what even are their priorities over there?
i still have some more work to do – like making sure this supports asks with media – but it's a good start! and i'm especially proud of some of the technical work that went into this behind the scenes, especially with making reblogs of asks look nice...
Polls & Source Links
one of the best looking features i added in the 1.0 version of the site was making the "Read More" a large banner link at the bottom of each post. when it came time to add support for polls, the same styling was a natural fit!
in both of these dark theme examples, the banner link is highlighted. when not highlighted, it blends into the border along the sides of each post.
but there's one other, less obvious place that it's useful for: Tumblr's "content source" link, which allows you to cite a source for your post. these content sources are automatically applied to audio posts linked from other sites... like the old music posts i used to link from soundcloud! this was also a natural fit for the "read more" styling, and a great way to support my very oldest posts and keep them looking fresh ✨
funny how i was promoting my partner's work, YEARS before we were even partners. some things never change!
Updated Icons
the custom icon system is one of my favorite features of the site, especially because of how easy it's been to add and update icons over time. one day i'll go over these icons in greater detail – i actually have a whole post series about my the making of my graphic design style in the pipeline, but like most things, it's only halfway done...
for now, though, i've added new icons for some of my favorite game series, like a triforce for zelda! and i've updated some icons that were incomplete or placeholders, like this "favorites" ribbon. the old icon is okay... but the new sparkling heart is much more representative of me!
the old one has been relegated to "achievements," which is a tag i don't use nearly often enough.
i've also got a new "videos" icon, instead of the placeholder YouTube logo – and the new icon might be one of my best icons yet??
there's even a second version of the icon for gaming-related videos, like stream archives.
Tags And Styling
over the years my tagging system has changed quite substantially, in accordance with the changing algorithms of Tumblr itself. and over the years, the actual posts themselves have changed formats... sometimes breaking the formatting on my old posts!!
so i went back through my archives and manually verified EVERY SINGLE POST to make sure it had relevant tags and correct styling. that's 10 years of archives! and memories! and dinosaurs. oh LORD some of those old posts are dinosaurs.
on a quick tangent, i'm approaching 700 posts rather rapidly! and i'm approaching a MUCH more important milestone very soon...
More To Come
those username links look so nice that i'd love to extend them to other places on the site, like asks and reblogs! some of my oldest posts still don't look great and i'd like to add more features to them! some visually similar elements like tags and username links don't actually function the same under the hood! there's still a LOT more work to do, and tumblr's feature-set hasn't gotten any smaller.
but there's two specific features on my list that i haven't gotten to, from way back during the concept phase: dynamic search, and related posts.
Dynamic Search
for the dynamic search, i'd like to make it so that typing in the search box (see the right menu) would update the list of tags in the menu to match what you've typed! that way you can search for more specific posts and tags than is currently possible. maybe the default tag list could even show random tags to encourage more discovery...
unfortunately that kind of searching requires me to use a little more javascript than i'd like, but i'm determined to make it work somehow! it's not hard to pull the list of tags from the API, i just need some free time and energy to hook that into the actual tag list. hopefully one day!
Related Posts
the default Tumblr theme has a section under each post that shows related posts with similar tags. by default it loads The Whole Post for each of the 10 related posts it pulls up, and the end result... doesn't look great, tbh!
on the Tumblr app, the related posts section shows little snippets of each post in a grid. this has a much better look and feel, and it's something i'd like to make work on my blog theme.
this shows up to 9 posts, depending on which posts match the tags of the main post.
the obvious idea is, of course, to make these look like hexagons. but that makes the content of the snippets way too small! i'll have to experiment with a few different methods and see how it looks in practice.
this is a lot more concept and styling work than the dynamic search, but i'd say they're about equal overall in terms of total effort. both of these would be major additions to the site! hopefully this all provides a little peek into where i'm going with all this ✨
The Site Redesign Is Working
my ultimate goal when i redesigned the site was very simple: i wanted to make a blog that i would make me want to post more than i had in the few years before it launched. and so far, that's actually working – i've posted more this year than i have in any of the other 10 years i've had this blog!
at present, a lot of those posts are stream archives... but the needle is slowly shifting, with a lot of written content and series in the pipeline. knowing they'll look all pretty on the site is a big part of what powers me to write them 💖
that means that all of this work has been worth it. the four years i spent trying to get this site redesign off the ground paid off against all odds; the extra work i put in to polish the little things make me want to use those extra little features; and the motivation it gives me makes me want to finally write and set myself free of the creative slump i was in for several years.
so thank you all for sticking around... cause i've barely gotten started~
in light of the bluesky rebrand, i have updated my links page with a fancy new animation for it
ironically, without gif support, bluesky is the one place i can't post this gif to...
okay, so, tumblr may-or-may-not be on the down and out. except, tumblr is my Main Site, my oldest social media at over 10 years old, the place where my main domain is docked, the place where all my posts go, all dressed up with my own custom html/css theme. suffice to say, tumblr is my home page.
when twitter went down, all my friends turned into digital nomads, wandering the net for a new home. we found several, but could not agree on any of them. some of us stubbornly stay in one place; others of us copy all our posts, even to sites we don't like. we all keep up somehow, but it sucks.
every site will die. this is the reality. whether they get bought, eclipsed, abandoned – no empire lives forever. even protocols like activitypub or atproto become deprecated, replaced, reimagined.
the history lost in its wake is priceless and irreplaceable; my memory is not what it used to be.
and self-hosting? that costs time and money. the whole appeal of social media is that it doesn't. self-hosting also costs discoverability and connectivity; the whole appeal of social media is that it has this in spades. you can't just abandon social media without becoming a digital hermit.
you might feel differently about these things – but these are my hangups, my struggles with the social media landscape as it exists.
long story short: i don't know what to do with my tumblr right now, but i've got some wild ideas for what to do with skysometric.co. we'll see what i can cook up.
been kinda busy with school but i'm still squeezing in the time to write here and there. the important thing is that i'm going to school for web development! i created my own website (yes, it's out there somewhere) and decided to put my writing on there! plus, the entire site is outer wilds themed, which is always a bonus
i figured it out ☺️
web development is trying to figure out why a background image is changing size from one page to the next when both pages use the same stylesheet and format they are LITERALLY identical except for the background image changing size WHY IS THIS HAPPENING TO ME
here's a website i made for school that i made outer wilds themed because i'm deranged! it was really fun and honestly i'm just. looking for more excuses to make more websites
edit to clarify: it's actually a webPAGE, not a website. none of these links go anywhere 😔
i love using scss for my code but oh my god. oh my god. oh my god.
THERE'S SO FUCKING MANY OF THEM
more website :)
been kinda busy with school but i'm still squeezing in the time to write here and there. the important thing is that i'm going to school for web development! i created my own website (yes, it's out there somewhere) and decided to put my writing on there! plus, the entire site is outer wilds themed, which is always a bonus