177 lines
5.4 KiB
CSS
177 lines
5.4 KiB
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?
|
|
*/
|
|
|