its been a while!
|
@ -0,0 +1 @@
|
|||
node_modules
|
|
@ -0,0 +1,172 @@
|
|||
<!--:O New! page-->
|
||||
<!-- layout diagram at https://cdn.discordapp.com/attachments/859867392544342026/896633035011809290/unknown.png -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>a</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body id="articlePage">
|
||||
<!-- :O where'd all That go and the page still looks fine without?
|
||||
switch to the new page https://i.imgur.com/0vJ2s4R.png
|
||||
oh! i see!
|
||||
-->
|
||||
<aside>
|
||||
<!-- sidebar -->
|
||||
<header>
|
||||
<a href="/">
|
||||
← Back <!-- larr = Left ARRow -->
|
||||
</a>
|
||||
</header>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="icon" src="https://picsum.photos/16" alt="fake icon" />
|
||||
<span class="name">option</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
<!--
|
||||
akira -- :O photos
|
||||
akira -- should i keep these at 16x16?
|
||||
eaic -- doesn't matter yet
|
||||
eaic -- it's css time!
|
||||
akira -- oh!!!!!!!!!!!! Wait brb
|
||||
-->
|
||||
<main>
|
||||
<p>
|
||||
Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here Article text goes here
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!-- layout diagram at https://cdn.discordapp.com/attachments/859867392544342026/896633035011809290/unknown.png -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>a</title>
|
||||
<meta charset="utf-8" />
|
||||
<!-- ^ that was to make unicode work -->
|
||||
<!-- oh, sorry! it's ok!-->
|
||||
<!-- this makes the site not be tiny on phones. it's here because of bad decisions apple made with the iphone -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!-- import the webpage's stylesheet -->
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<!-- import the webpage's javascript file -->
|
||||
<script src="/script.js" defer></script>
|
||||
</head>
|
||||
<body id="home">
|
||||
<!-- home page -->
|
||||
<header>
|
||||
<img src="https://picsum.photos/150" alt="fake logo" id="logo" />
|
||||
<h1>
|
||||
webpage title
|
||||
</h1>
|
||||
<!-- thanks! -->
|
||||
<!--
|
||||
akira -- hmm how do we make the title be to the side of the image?
|
||||
eaic -- CSS! but not yet, i'm just writing the structure first.
|
||||
akira -- ok!
|
||||
-->
|
||||
</header>
|
||||
<p id="intro">
|
||||
intro text goes here
|
||||
</p>
|
||||
<nav> <!-- nav -->
|
||||
<ul> <!-- nav ul -->
|
||||
<li> <!-- nav ul li -->
|
||||
<a href="/article.html">link</a>
|
||||
</li>
|
||||
<li><a href="/article.html">link</a></li>
|
||||
<li><a href="/article.html">link</a></li>
|
||||
<li><a href="/article.html">link</a></li>
|
||||
</ul>
|
||||
<!--
|
||||
akira -- i see! so, are these not specific to each instance of, e.g. a nav with an ul in it?
|
||||
eaic -- the selector nav ul li will match any <li> in any <ul> in any <nav>
|
||||
akira -- i see! thank you! i really hope i don't forget all this as soon as we're done, i tend to not absorb ifnormation too much
|
||||
eaic -- it's ok, these comments will still be here and i don't mind helping more later too
|
||||
akira -- thank you a lot!!!
|
||||
eaic -- no problem! -->
|
||||
</nav>
|
||||
<footer>© copyright stuff here</footer>
|
||||
</body>
|
||||
</html>
|
||||
<!--
|
||||
akira -- thank you so much! i'll brb now, also aren't these links supposed to be side by side
|
||||
eaic -- yep! but that's also stuff to do with CSS
|
||||
eaic -- that's all the HTML we need for the homepage, I'll be in style.css.
|
||||
-->
|
|
@ -0,0 +1,177 @@
|
|||
/* 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?
|
||||
*/
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
thank you eaic, for um
|
||||
...basically doing all the work, sorry!
|
||||
i'm sorry i never finished the graphic design part and all that
|
|
@ -0,0 +1,3 @@
|
|||
thank you eaic, for um
|
||||
...basically doing all the work, sorry!
|
||||
also, thanks a LOT for
|
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 148 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
15
git spells
|
@ -1,14 +1 @@
|
|||
git add -A .
|
||||
tells git about all the changes in the folder
|
||||
|
||||
git commit -m "my message"
|
||||
tells git to give these changes an actu al name
|
||||
|
||||
git push
|
||||
upload all named changes
|
||||
|
||||
git clone https://git.lavender.software/akira/made-in-akira.git
|
||||
does what it says (clones a repo to your puter)
|
||||
|
||||
|
||||
ssh-keygen -t ed25519 -C "akirapink@tutanota.com"
|
||||
git commit -m "added my css userstyles!, and maybe some graphic design stuff? i've forgorten"
|
||||
|
|
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 8.6 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 2.3 KiB |