A LITTLE CSS, AS A TREAT
Lots of design changes were made in the last 24 hours.
ā£ Jump to code
I didn't plan to go all in on my site design immediately after I was freed from German classes. But here we are!
It began last night when I thought it'd be cute to add my latest note to my home page. I've been wanting to do this since my blog's humble beginnings, but months ago I was a mere tadpole when it came to CSS/HTML, so I did not dare attempt it!
I'm now a tadpole with legs and decided to use my usual homework time (lol, as if I were so studious over the past weeks), to attempt this grand feat!
It was originally a simple design that mimicked the look of the post-it notes on my NOTES page (which has since changedāmore on that later). I should have taken screenshots of the process, but well, when you're all-in, one forgets about these things.
So just imagine: A yellow sticky note the size of a small, rectangular strip of paper* with the date stamped in red, and the text scrawled out in cursive.
*I was going for index tabs.
Satisfied, I went to bed... Only to hop back onto to Bear Blog and code from my phone! It just wasn't cute enough. This blog started out with a generic, office vibe to itāyour basic yellow post-its and default red ink pads.
Nothing wrong with that, of course, but I've gotten quite acquainted with my virtual desktop now, so it's time to push aside the generic office supplies and bring in the CUTE THINGSā¢.
Index tab sticky notes
I have no idea why the content isn't showing up here. But it works on the homepage!
I was inspired by the shape of some index tabs I have at home. That meant looking up how to round specific corners. I quickly found a solution in a Stack Overflow forum:
border-radius: 0 50px 50px 0;
That's it!
The rest was CSS that Vince sent to me by way of Carlos, which I then adapted. The code was originally used to create my NOTES. I'm only gonna cover the key points, so if you have any questions about specifics, contact me!
But there IS something I want to rant write about, and that's truncating text!!!
Truncating text with ellipsis
This was a piece of work! The general code was:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
That should be it, but that DID NOT work! If you do a search on this topic, you will see that many people have struggled with this too. After nearly an hour of searching, I found the culprit: Targeting the paragraph class.
Now I'm gonna jump straight into the code. Make sure you're targeting p and not li!
.scribble ul.embedded.blog-posts p {
text-align: left;
font-family: var(--font-secondary);
color: #333;
font-size: 16pt;
letter-spacing: -1px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 250px;
}
I ended up naming the div class .scribble because that's what it felt like.
The full code in CSS
/* Mini note */
.scribble ul.embedded.blog-posts {
display: flex;
flex-flow: row wrap;
position: relative;
max-width: 400px;
height: 80px;
box-shadow: 5px 0px 5px #d6b29c;
border-radius: 0 50px 50px 0;
background-color: #fcd9c5;
margin-top: 10px;
margin-bottom: 40px;
align-items: center;
}
/* Text styling */
.scribble ul.embedded.blog-posts p {
text-align: left;
font-family: var(--font-secondary);
color: #333;
font-size: 16pt;
letter-spacing: -1px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 250px;
}
/* Remove extra space above content */
.scribble ul.embedded.blog-posts > li div p:first-child {
margin: 0;
}
/* Hide title, but not link */
.scribble ul.embedded.blog-posts > li > a {
visibility: hidden;
font-size: 0px;
text-decoration: none;
}
/* Date styling of mini note */
.scribble ul.embedded.blog-posts li time {
position: relative; /* position relative to the <li> */
left: 1.5em;
margin-bottom: 0;
text-decoration: none;
text-transform: uppercase;
font-weight: none;
font-style: normal;
color: brown;
font-family: var(--font-main);
font-size: 12pt;
letter-spacing: 0px;
padding-right: 2em;
white-space: nowrap; /* prevent wrapping */
}
/* Hide image */
.scribble ul.embedded.blog-posts img {
display: none;
}
And this is the HTML I added to my homepage:
<div class="scribble">
{{ posts|tag:notes|limit:1|content:True }}
</div>
The power of the <div class>! I love it. I've also started updating my COLOPHON with coding resources as well as design inspiration. Next, I'll write about how I styled my NOTES page.