made-in-akira/Akira Webpage/pages/style.css

/* chat
eaic  -- flexbox lets you make layouts without things being awful
akira -- ok barging in for a moment sorry about the link list can't we make several links in a row in html instead of the vertical link thing? just like inside a paragraph
eaic  -- yes, but having a <ul> is better for accessibility and it can be made to be in a row with css
akira -- oh, i see! thank you!
eaic  -- no problem
eaic  -- in general you want html to be structure and content
eaic  -- and not be structured based on how it should look
akira -- i hope my bad wifi doesn't fuck with this too badly?
eaic  -- should be ok
eaic  -- do you have questions about what we've done so far?
akira -- hmmm,, nope! i think i understand everything so far
eaic  -- next i will make the links be in a row
akira -- ok!
eaic  --
*/

* {
  box-sizing: border-box; /* this makes width and height work sanely with margins and stuff */
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0; /* no extra scrollbars*/
  padding: 0;
  font-family: system-ui, sans-serif; /* goodbye, times new roman */
}

#home {
  display: flex; /* flexbox time! */
  flex-direction: column; /* make things not be squished into a row */
  align-items: center; /* center things */
  text-align: center; /* center more things */
}

#home header {
  display: flex; /* flexbox time! */
  flex-direction: row; /* make things be in a row */
  align-items: center; /* center things */
  text-align: center; /* center more things */
}

#home #logo {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem; /* space between logo and text */
}

#home nav ul {
  display: flex;
  gap: 0.5rem; /* s p a c e */
  margin: 0;
  padding: 0;
}

#home nav ul li {
  display: inline;
}
/*
akira -- :O what in god's name since when is This a class?? how do you even define those
eaic  -- wdym
akira -- what does nav ul and nav ul li mean. how did they get here? from html? if so how do we get 
eaic  -- yep! they are tag names
akira -- well. well how do you get those names? are they specific to singular instances of the things?
eaic  -- go to index.html
eaic  -- alright i added a gap so the links aren't so close together
eaic  -- that's basically what the layout you made looked like
eaic  -- oh wait
eaic  -- things are misaligned because <ul>s come with margins :(
akira -- uh oh!!
eaic  -- there!
eaic  -- usually it's a good idea to share CSS between pages of a site
akira -- yeaaah?
eaic  -- but rn the styling for the homepage would mess some things up
eaic  -- so i'm adding an ID to the body tag of the homepage so we can target elements only on the homepage
akira -- ok!!
eaic  -- alright done
akira -- :O
eaic  -- sorry, had to talk to 1 of my moms
akira -- i see, alright!
eaic  -- ok now i'm going to make a new page
*/

#home footer {
  display: flex; /* flexbox time! */
  flex-direction: column; /* make things not be squished into a row */
  align-items: center; /* center things */
  text-align: center; /* center more things */
  flex-grow: 1;
  justify-content: end;
  width: 100%;
  padding: 0.5rem; /* space between stuff and the edge of the window */
}
/*akira -- hmm, i think i will make an account on glitch. would this mess anything up for you? like, interrupt you doing stuff here?
  eaic -- i don't think so*/
/*akira -- what are these Strange Tools , such as width: 100% and min-height 100% for. i thought these were just default stuff?
  eaic -- CSS has terrible defaults and the browsers can't change themm because sites rely on them
  eaic -- so we have lots of unnecessary things to write
  akira -- oh, i see!*/

#articlePage {
  display: flex;
}

#articlePage aside {
  border-right: 1px solid black;
  width: 10rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* stay the right size */
}

#articlePage aside header {
  display: flex;
  border-bottom: 1px solid black;
  height: 2rem;
  align-items: center;
  padding: 0 0.5rem;
  flex-shrink: 0; /* stay the right size */
}

#articlePage aside ul {
  overflow-y: auto; /* show scrollbar if needed */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
  padding: 0;
}

#articlePage aside ul li {
  display: flex;
  margin: 0;
  padding: 0;
}

#articlePage aside ul li a {
  display: flex;
  border-bottom: 1px solid black;
  /*oh, i know this property!*/
  height: 2rem;
  width: 100%;
  align-items: center;
  text-decoration: none;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

#articlePage aside ul li a img {
  border-radius: 50%; /* make pictures round */
  width: 1.5rem;
  height: 1.5rem;
}

#articlePage main {
  padding: 1rem;
  overflow-y: scroll; /* make main have its own scrollbar for vertical scrolling */
  flex-grow: 1; /* fill all the space left */
}

/*
  akira -- oH MY GOD WHAT HOW ARE YOU DOING THIS
  akira -- Oh
  akira -- oh ok!
  akira -- hmm how'd you get the #articlePage selector? and what's aside?
  eaic  -- selectors that start with # are ID selectors. Since the body tag in article.html has id="articlePage" the selector is #articlePage
  akira -- ohhh! i see! thank you! by the way, if you'd like to use the easrng alias, go ahead! whatever's best (sorry for taking a while i had disconnected)
  eaic  -- selectors that are just a word with no # or . or anything are tag selectors. aside is the tag we used for the sidebar
  akira -- i see!
  eaic  -- i put a bunch of text so we can see how scrolling works.
  eaic  -- we want <main> to have its own scrollbars
  eaic  -- this name's fine, i use them interchangeably
  eaic  -- questions?
*/