akira/made-in-akira
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

its been a while!

Browse source
This commit is contained in:
Akira Olivia Pink 2021-12-09 17:15:16 -03:00
parent a2b8301cc0
commit 184f7b928e
58 changed files with 414 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

0
Akira Webpage/pages/sample.html → .gitignore~
View file

172
Akira Webpage/pages/article.html Normal file
View file

@ -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="/">
&larr; 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>

57
Akira Webpage/pages/index.html Normal file
View file

@ -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>&copy; 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
Akira Webpage/pages/index.html~ Normal file
View file

177
Akira Webpage/pages/style.css Normal file
View file

@ -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
Akira Webpage/pages/style.css~ Normal file
View file

3
Akira Webpage/pages/thank_you_eaic Normal file
View file

@ -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

3
Akira Webpage/pages/thank_you_eaic~ Normal file
View file

@ -0,0 +1,3 @@
thank you eaic, for um
...basically doing all the work, sorry!
also, thanks a LOT for

0
drawings_new/akira in swopdoodle.xcf → drawings/akira in swopdoodle.xcf
View file

BIN
drawings/angry akira.xcf Normal file
View file

Binary file not shown.

BIN
drawings/apyr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
drawings/apyr2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

0
drawings_new/despair_unfinished.xcf → drawings/despair_unfinished.xcf
View file

0
drawings_new/glasses.png → drawings/glasses.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

0
drawings_new/glasses.xcf → drawings/glasses.xcf
View file

BIN
drawings/halloween.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
drawings/junk/car.xcf Normal file
View file

Binary file not shown.

BIN
drawings/junk/dehydrated_akira.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

0
drawings_new/note.md → drawings/note.md
View file

BIN
drawings/old/banger artwork.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
drawings/old/banger artwork2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
drawings/old/erins.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

0
drawings_new/perspective_test_bad.png → drawings/perspective_test_bad.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

15
git spells
View file

@ -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"

BIN
graphic_design/Celeste Mtn Drimk.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/baba_eats.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/charlotte crossing.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/michaels_choice_logo.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/old_data.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/pogway_logo.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/random stuff.xcf Normal file
View file

Binary file not shown.

0
graphic_design/scottice.xcf → graphic_design/scott_the_woz.xcf
View file

BIN
graphic_design/sticker sheet 2.xcf
View file

Binary file not shown.

BIN
graphic_design/stickers_render2.xcf Normal file
View file

Binary file not shown.

BIN
graphic_design/warning_akira.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/agatha_1.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/amelia_1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
minecraft/amelia_1.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/amelia_2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
minecraft/amelia_2.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/amelia_3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
minecraft/amelia_3.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/amelia_old.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
minecraft/charlotte.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
minecraft/charlotte.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/charlotte_2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
minecraft/jill_encapsulated.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
minecraft/jill_she.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
minecraft/jill_she.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/jill_slime.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
minecraft/jill_slime2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
minecraft/maia_1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
minecraft/maia_1.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/maia_2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
minecraft/maia_2.xcf Normal file
View file

Binary file not shown.

BIN
minecraft/maia_3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
minecraft/maia_3.xcf Normal file
View file

Binary file not shown.