Home

1920px and beyond!

Diego Andriano

24-05-2023

1204w / 250wpm = 4.8m

Introduction

Hello! Today I'm gonna work in something that's been postponed for far too long: Getting my web to work on 1920px (and over). It's actually not quite challenging, but just plain work, which is reason enough to have been procrastinating so much on it. But that stops today! Or tomorrow, I don't know, I'm just writing this out...

I'm kidding, of course. I'm starting this off right now, on June 2022, and will finish it expeditiously. The writing will mostly consist of HTML and CSS, but I won't let the simplicity of it take the fun out of the task.

How we're going about it.

Okay, I work alongside a UI designer. It's not like I got to this beautiful web design on my own, so at least that part is taken care of. I just have to work out the implementation. Not the hardest job you've ever seen anyone do, right?

WELL NO, WRONG.

Nah, I'm joking. It really is quite straight forward. So, this is what appears right now if you have a 1920 or higher-width screen:

spotify image

Not a great look, right? Doesn't speak volumes about how I'm great at finishing what I start and better at handling commitment. Well as it happens, I'm about to rectify that, thankyouverymuch!

Tools

As always, the tools I'll use involve Tailwindcss, Laravel, Vue.js, and in the case of my web, also Blade.

  • Laravel
  • Blade
  • TailwindCSS
  • Vue.js
Laravel Laravel Logo Laravel Laravel Logo TailwindCSS TailwindCSS Logo VueJS VueJS Logo

Starting point and pre-steps

I'm gonna level with ya: I'm not gonna show any public github repo. To be honest, my web is the result of years of mixed ideas and attempts, and none of them had into account any kind of code quality. You won't hear from me that it's horrendous code, but maybe if we ask Lady Macbeth...

Oh my god my eeeyes! My eeeyes! You should be starting that from scratch.

Lady Macbeth

Well, no Macbeth. I'm not starting over, it's just too much work for far too little reward. You'll have to live with it.

This one being a programming blog, you could do well to assume we're going to be reviewing code. So let's dive right into it. So, what's changing?

Basically, for this iteration, the changes amount to just the SVGs. (If you're reading this on publication, there's a little design spoiler, just don't mind it for now).

Let's get right into it!

So, the following is the current amount of svgs

<‍div class="absolute right-0 md:right-[7px] lg:right-[25px] top-0"‍>
    <‍x-svg-home-phone><‍/x-svg-home-phone‍>
    <‍x-svg-home-tablet><‍/x-svg-home-tablet‍>
    <‍x-svg-home-desktop-small><‍/x-svg-home-desktop-small‍>
<‍/div>

I think that looks ok for now, let's add a new one to the nest. I'll create the file svg-home-desktop-large and add it to the nest like so:

<‍div class="absolute right-0 md:right-[7px] lg:right-[25px] top-0"‍>
    <‍x-svg-home-phone><‍/x-svg-home-phone‍>
    <‍x-svg-home-tablet><‍/x-svg-home-tablet‍>
    <‍x-svg-home-desktop-small><‍/x-svg-home-desktop-small‍>
    <‍x-svg-home-desktop-large><‍/x-svg-home-desktop-large>
<‍/div>

the "x-" is a Blade aggregate that you have to add in order to be able to place a component in that format. Inside the file there's just an svg, nothing out of the ordinary. Also, gotta take care of Tailwind:

# tailwind.config.js
theme: {
    screens: {
    'md': '768px',
    'lg': '1366px',
    'xl': '1920px',

    'md-only': {'min': '768px', 'max': '1365px'},
    'lg-only': {'min': '1366px', 'max': '1919px'},

    // adding this one
    'xl-only': {'min': '1920px', 'max': '2559px'},
},

To clarify, the black bar and the cubes are one svg, but each button of the aside navbar is an independent svg. This made it easier to write the text over them. But im forced to align them separately.

Now the navbar on the side: the margin is now different. It's absolutely positioned, so it's just a correction of a number and...

it broke everything. Why is it that everything seemingly easy turns to break everything on its way? Oh right, horrendous code. Broke everything so hard that even the 360px screen is broken. Neet

broken 360px

Okay, what the hell

This title would be a nice clickbait, right? But to be honest, I'm doing this while writing (top 5 techniques on blogging?), so the title is the actual feeling of the room.

Okay, after a little while of fiddling about, i got it. It was something completely unrelated that i never touched that suddenly decided to stop working the same way. That's life, right?

Remember to stay hydrated!

Back to normal. Or not, portfolio screen is also broken, the black bar is not there. Guys, i think i know what's happening. I started doing some changes a while ago and never finished. Why am i like this.

Okay, i'll be fixing this stuff up and be right back. As a note, and i probably shouldn't be writing this to preserve face, i literally had this randomly written on the class of the bar:

-translate-x-[459px]

Moving on...

Good news everyone! Back to working on every screen. Okay, now i'll proceed to create a new file just like the previous one, namely:

svg-portfolio-desktop-large

This one will go in the portfolio section. The magic of this SVGs, is that they're bigger than the size they're meant for. For example, the svg for the 1920px image, is thought for a 2560px screen, that way it will survive adapting the view with an inspector on any random size. Working with a designer who knows her stuff is cool.

It's quite the same thing for contact and articles section. In hindsight, going for the 1920px was more of a battle against myself rather than against responsivity in itself. There's no climax here, i think i'll cue in the last words.

Last words.

There are lots of tweaks to tweak to fully complete the responsiveness of the site. Such as text sizes, some widths and heights. But this is a good start for something that had been postponed for months.

This was my coming back article, taking care of my own site after a very prolonged time of being away from it. If you feel like you haven't learnt anything from this, or that you're coming out of this empty-handed, it's probably cause you are. This blog isn't made for *you* (yet?), it's kinda made for me. It's made as an experiment to combine two things i love: programming and writing.

I'm still finding myself in my writing. If i think about it though, this is not even my native language, so i guess maybe i'll rephrase it: i'm still finding myself in the language. What i'm trying to show in all this writing, is the struggles. Nothing is "a then b". There's a range of decimals in the letters (what?), and you gotta go through them. But creating stuff from scratch and then interacting with it, well, it's fucking awesome.

Feel free to @ me on twitter. Thanks for reading and i hope you enjoyed it,

Have a good day!