wiikifox
/
wiikifoxs-den
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: wiikifox:280d200ce49eba59b5114e8da25f333e4e890cac
Branches Tags
wiikifox:main
...
compare: wiikifox:0202bbee7447432a0802e15e0b2e6359935646e4
Branches Tags
wiikifox:main

3 Commits
280d200ce4 ... 0202bbee74

Author SHA1 Message Date
Marlow Alfonso 0202bbee74 feat: added more buttons 
Also removed the "made in vi" once because it was inaccurate
 2024-04-07 23:51:45 +00:00
Marlow Alfonso f17c6935aa fix: changed the button grid layout 
I like it more this way :3c
Also responsive, heck yeah!
 2024-04-07 23:08:23 +00:00
Marlow Alfonso f0257fb1c7 feat: added a mobile layout using @media blocks 2024-04-07 22:21:03 +00:00
7 changed files with 28 additions and 7 deletions
Show Stats Expand all files Collapse all files

BIN
assets/images/buttons/i-hate-mac.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
assets/images/buttons/i-hate-ms.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
assets/images/buttons/i-like-computer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 676 B

BIN
assets/images/buttons/learn-html.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/images/buttons/written_in_vi.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

9
index.html
View File

@ -63,11 +63,14 @@
<a href="http://geekring.net/">home</a>
</div>
</div>
<div class="card" id="buttons">
<img src="./assets/images/buttons/written_in_vi.gif" alt="written in vi">
<img src="./assets/images/buttons/best-viewed.gif" alt="Best viewed with: a computer and a monitor">
<div id="buttons">
<img src="./assets/images/buttons/i-like-computer.png" alt="I LIKE COMPUTER">
<img src="./assets/images/buttons/i-hate-mac.jpg" alt="I Hate Macintosh">
<img src="./assets/images/buttons/i-hate-ms.jpg" alt="I Hate MICROSOFT">
<img src="./assets/images/buttons/best-viewed.gif" alt="This page is best viewed with: a computer and a monitor">
<img src="./assets/images/buttons/anything-but-chrome.gif" alt="Anything but Chrome">
<img src="./assets/images/buttons/gnu-linux.gif" alt="Made on GNU/Linux">
<img src="./assets/images/buttons/learn-html.gif" alt="<HTML>: Learn it today!">
</div>
</div>

26
styles.css
View File

@ -25,6 +25,15 @@
url('assets/fonts/fira-sans.ttf') format('truetype');
}
body {
grid-template-columns: 70% 30%;
}
@media screen and (max-width: 900px) {
body {
grid-template-columns: 100%;
}
}
#title {
animation: title-anim 5s linear alternate infinite;
}
@ -40,10 +49,20 @@
float: right;
border-radius: 8px;
}
#buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
display: inline-grid;
justify-items: center;
gap: 4px;
}
@media screen and (max-width: 900px) {
#buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
justify-items: center;
}
}
#buttons > img {
filter: none;
}
.card {
@ -68,7 +87,6 @@ body {
padding-bottom: 2rem;
display: grid;
gap: 0.25rem;
grid-template-columns: 70% 30%;
}
a {