DEV Community

Medea
Medea

Posted on

Myfe - 24/03/22

CSS

So I decided to add CSS to my game to make it look a bit better.
Problem is, I'm not that great at CSS, so I tried as much as I could.
First I created a file called style.css in the folder static and then gave it a url in app.py:

@app.route("/style.css")
def stylecss():
  return send_file("static/style.css")
Enter fullscreen mode Exit fullscreen mode

After that I linked the css file to every HTML page, by doing the code below:

<link href="/style.css" rel="stylesheet" type="text/css" />
Enter fullscreen mode Exit fullscreen mode

Then I added some simple dark mode code in the CSS file:

body {
  background-color: #121212;
  color: white;
  font-family: 'Source Code Pro', monospace;
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

which gave the background a dark grey colour, made the text colour white, gave the text have the Source Code Pro font, add gave the page a smooth scroll-behavior, just incase I needed it for the later.

The output looked like this:

css output 1

So I decided to work on the links and added the following code:

a {
  text-decoration: none;
  color: rgb(206, 203, 203)
}

a:hover {
  color: rgb(136, 133, 133)
}
Enter fullscreen mode Exit fullscreen mode

and that gave the output of:

css output 2
with the Profile link being hovered.

The navbar didn't look that good, so I added the following code to make it look better:

.navbar {
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid #2b2a2a;
  background-color: #121212;
  position: sticky;
  top: 0;
}

.nav-link {
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(204, 206, 209);
  padding: 20px 0px;
  margin: 0px 20px;
  display: inline-block;
  position: relative;
  opacity: 0.75;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link::before {
  transition: 300ms;
  height: 5px;
  content: "";
  position: absolute;
  background-color: rgb(204, 206, 209);
}

.nav-link-ltr::before {
  width: 0%;
  bottom: 10px;
}

.nav-link-ltr:hover::before {
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

That gave me the output of:

css output 3

with the Profile link being hovered on.

That looked much better!

And for the finishing touches I changed the text-align of the header to the center:

.header {
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Now it looks like:

css output 4

Yay! Next time I'll be working on the Python part and MongoDB.
Thanks for reading and if you liked it make sure to follow me!

Top comments (2)

Collapse
 
dillonb07 profile image
Dillon Barnes

I get that you aren't great at CSS, because I'm not either, but maybe some variety would be nice? Pretty much all of your websites use the same CSS and it would be really cool to do something different.

Looking good though.

Collapse
 
vulcanwm profile image
Medea

yea maybe after I've done the actual coding, I might have another go at the CSS