echostyle documentation

echostyle is a CSS theme for small portfolios that people decide to build

</> · view the source code!
NEW: it supports dark mode too now!!

"desk" class

when you first import the CSS, you'll notice that there's nothing visible other than a white page. to fix that, you'll need to add the following attribute to the <body> tag:

class="desk" style="background-image: url('https://link.to.background.image');"

this class basically defines the background of the entire thing. you can modify the background image by either adding a "style" attribute, or by tweaking the CSS file also, a background image is kind of necessary if you don't want the background to purely be white...

"window" class

the window class is used when making the main <div> containing the actual content of the portfolio. it can be set by adding the following attribute:

class="window"

for sanity, it's recommended to spawn only ONE window, it's going to be hell dealing with multiple if working with mobile as well.

buttons

buttons work both when defined as a button using the <button> tag AND <a class="btn (or button)">. although, if i were you, i'd use the a tag with the button class.


deprecated
this is so swag (<a class="button">) tag
recommended

code

you spawn a normal one-line code block by using <code> text </code>
deprecated
for code blocks, you spawn a div with the class "codeblock"

recommended

notices

echostyle now has notices. You can use those to display warnings, and important notes. To use, add the following attribute to <div>:
class="notice"

how 2 add??!

to add the CSS theme to your website, you'll need to include:

  • the CSS itself
  • the "Fragment Mono" font
  • the easiest way to do this is by adding the following to <head>:

    <link rel="stylesheet" href="https://kevadesu.github.io/echostyle/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&display=swap" rel="stylesheet">

    Made by kevadesu, 2024. The Z6XdL license applies.