ami/start
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Final fix before refactor

Browse Source
This commit is contained in:
ami_sc 2024-08-03 19:21:11 -04:00
parent f2863b7ace
commit 06d90d844f
5 changed files with 190 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
styles.css → assets/css/styles.css
View File

@ -1,25 +1,99 @@
/*** Fonts ***/
@font-face {
font-family: firacode;
src: url(firacode.ttf);
font-family: "Fira Code Regular";
src: url(../fonts/FiraCode.ttf);
}
@font-face {
font-family: firacode_bold;
src: url(firacode_bold.ttf);
font-family: "Fira Code Bold";
src: url(../fonts/FiraCode-Bold.ttf);
}
/*** Page Contents ***/
/* Background Container */
html {
display: flex;
height: 100%;
align-items: center;
/*background: linear-gradient(315deg,#021B79,#0575E6);*/
justify-content: center;
background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
}
/* Main Container */
body {
background-color: #1B1B1B;
border-radius: 10px;
box-shadow: 10px 10px;
padding: 2rem;
}
/* Link Grid */
nav {
display: grid;
/* We want a 4x2 grid. */
grid-template-columns: repeat(4, [col-start] 1fr);
grid-template-rows: repeat(2, [row-start] 1fr);
gap: 2rem;
}
/* Main Heading */
h1 {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.25rem;
color: #FFFFFF;
font-family: "Fira Code Regular";
}
/* Link Box */
.link_box > h2 {
font-family: "Fira Code Bold";
font-size: 1rem;
color: #FFFFFF;
margin: 0 0 0.5rem 0;
}
.link_box a {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: "Fira Code Regular";
color: #FFFFFF;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
text-decoration: none;
}
/* Link (Hover) */
.link_box a:hover {
font-family: "Fira Code Bold";
}
/* Link Icon */
.link_box a > img {
width: 1.25rem;
height: 1.25rem;
}
/* html {
align-items: center;
background: linear-gradient(315deg,#021B79,#0575E6);
background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
display: flex;
font: 22px/1 "firacode";
height: 100%;
justify-content: center;
}
} */
body {
/* body {
background-color: rgb(29, 31, 33, 1.0);
border-radius: 4px;
box-shadow: 10px 10px;
@ -29,18 +103,9 @@ body {
min-height: 20ch;
min-width: 50vw;
padding: 2em;
}
} */
main_title {
margin: 0;
color: #ffffff;
}
main_title span {
color: #0fb1f1;
}
a {
/* a {
color: inherit;
text-decoration: none;
color: #ffffff;
@ -98,11 +163,11 @@ ul:nth-child(5n + 6) li:first-child {
background: -webkit-linear-gradient(right, #dce35b, #45b649);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
} */
nav {
/* nav {
column-gap: 2em;
display: grid;
grid-template-columns: auto auto auto auto;
padding: 1em 0;
}
} */

0
firacode_bold.ttf → assets/fonts/FiraCode-Bold.ttf
View File

0
firacode.ttf → assets/fonts/FiraCode.ttf
View File

0
favicon.png → assets/img/favicon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

156
index.html
View File

@ -1,65 +1,117 @@
<!DOCTYPE html>
<html>
<html lang="eng-US">
<head>
<title>Ami :: Startpage</title>
<link rel="icon" type="image/svg+xml" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<head>
<meta charset="utf-8"/>
<title>Ami :: Startpage</title>
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.png"/>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<main_title><span>[ami@Internet] &gt; </span>Home</main_title>
<body>
<header>
<h1>[ami@Internet] Home</h1>
</header>
<nav>
<ul>
<li>Personal</li>
<li><a href="https://proton.me/"><img src="personal_icons/proton.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Proton</a></li>
<li><a href="https://simplelogin.io/"><img src="personal_icons/simplelogin.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> SimpleLogin</a></li>
<li><a href="https://bankofamerica.com/"><img src="personal_icons/bankofamerica.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> BofA</a></li>
<li><a href="https://americanexpress.com/"><img src="personal_icons/americanexpress.jpg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> AMEX</a></li>
<li><a href="https://discover.com/"><img src="personal_icons/discover.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Discover</a></li>
</ul>
<nav>
<div class="link_box">
<h2>Personal</h2>
<ul>
<li>University</li>
<li><a href="https://my.astate.edu/"><img src="university_icons/myastate.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> MyAstate</a></li>
<li><a href="https://arkansasstateuniversity.instructure.com"><img src="university_icons/canvas.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Canvas</a></li>
<li><a href="https://ssb.astate.edu/"><img src="university_icons/banner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Banner</a></li>
</ul>
<a href="https://proton.me/">
<img src="personal_icons/proton.svg"/>
Proton
</a>
<ul>
<li>Self-Hosted</li>
<li><a href="https://cloud.ami.sc/"><img src="self_hosted_icons/polyhedra.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Polyhedra</a></li>
<li><a href="https://git.ami.sc/"><img src="self_hosted_icons/arsenic.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Arsenic</a></li>
<li><a href="https://wiki.ami.sc/"><img src="self_hosted_icons/serapeum.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Serapeum</a></li>
<li><a href="https://media.ami.sc/"><img src="self_hosted_icons/andromalius.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Pegasus</a></li>
</ul>
<a href="https://simplelogin.io/">
<img src="personal_icons/simplelogin.svg"/>
SimpleLogin
</a>
<ul>
<li>Management</li>
<li><a href="https://accounts.hetzner.com/login/"><img src="management_icons/hetzner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Hetzner</a></li>
<li><a href="https://dash.cloudflare.com/login/"><img src="management_icons/cloudflare.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Cloudflare</a></li>
<li><a href="https://dynadot.com/"><img src="management_icons/dynadot.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> DynaDot</a></li>
</ul>
<a href="https://bankofamerica.com/">
<img src="personal_icons/bankofamerica.png"/>
BofA
</a>
<ul>
<li>Entertainment</li>
<li><a href="https://netflix.com/login/"><img src="entertainment_icons/netflix.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Netflix</a></li>
<li><a href="https://disneyplus.com/login/"><img src="entertainment_icons/disney.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Disney+</a></li>
<li><a href="https://youtube.com/"><img src="entertainment_icons/youtube.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> YouTube</a></li>
<li><a href="https://lichess.org/"><img src="entertainment_icons/lichess.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> lichess</a></li>
</ul>
<a href="https://americanexpress.com/">
<img src="personal_icons/americanexpress.jpg"/>
AMEX
</a>
<ul>
<li>Shopping</li>
<li><a href="https://amazon.com/"><img src="shopping_icons/amazon.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Amazon</a></li>
<li><a href="https://adagio.com/"><img src="shopping_icons/adagio.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Adagio Teas</a></li>
<li><a href="https://baileyhats.com/"><img src="shopping_icons/baileyhats.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Bailey Hats</a></li>
</ul>
</nav>
<a href="https://discover.com/"><img src="personal_icons/discover.png"/>
Discover
</a>
</div>
<main_title><span>[ami@Internet] &gt; </span>[...]</main_title>
<div class="link_box">
<h2>School</h2>
</body>
<a href="https://my.astate.edu/">
<img src="university_icons/myastate.png"/>
MyAstate
</a>
<a href="https://arkansasstateuniversity.instructure.com">
<img src="university_icons/canvas.png"/>
Canvas
</a>
<a href="https://ssb.astate.edu/">
<img src="university_icons/banner.png"/>
Banner
</a>
</div>
<!-- <ul>
<li>Personal</li>
<li><a href="https://proton.me/"><img src="personal_icons/proton.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Proton</a></li>
<li><a href="https://simplelogin.io/"><img src="personal_icons/simplelogin.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> SimpleLogin</a></li>
<li><a href="https://bankofamerica.com/"><img src="personal_icons/bankofamerica.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> BofA</a></li>
<li><a href="https://americanexpress.com/"><img src="personal_icons/americanexpress.jpg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> AMEX</a></li>
<li><a href="https://discover.com/"><img src="personal_icons/discover.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Discover</a></li>
</ul>
<ul>
<li>University</li>
<li><a href="https://my.astate.edu/"><img src="university_icons/myastate.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> MyAstate</a></li>
<li><a href="https://arkansasstateuniversity.instructure.com"><img src="university_icons/canvas.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Canvas</a></li>
<li><a href="https://ssb.astate.edu/"><img src="university_icons/banner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Banner</a></li>
</ul>
<ul>
<li>Self-Hosted</li>
<li><a href="https://cloud.ami.sc/"><img src="self_hosted_icons/polyhedra.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Polyhedra</a></li>
<li><a href="https://git.ami.sc/"><img src="self_hosted_icons/arsenic.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Arsenic</a></li>
<li><a href="https://wiki.ami.sc/"><img src="self_hosted_icons/serapeum.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Serapeum</a></li>
<li><a href="https://media.ami.sc/"><img src="self_hosted_icons/andromalius.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Pegasus</a></li>
</ul>
<ul>
<li>Management</li>
<li><a href="https://accounts.hetzner.com/login/"><img src="management_icons/hetzner.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Hetzner</a></li>
<li><a href="https://dash.cloudflare.com/login/"><img src="management_icons/cloudflare.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Cloudflare</a></li>
<li><a href="https://dynadot.com/"><img src="management_icons/dynadot.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> DynaDot</a></li>
</ul>
<ul>
<li>Entertainment</li>
<li><a href="https://netflix.com/login/"><img src="entertainment_icons/netflix.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Netflix</a></li>
<li><a href="https://disneyplus.com/login/"><img src="entertainment_icons/disney.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Disney+</a></li>
<li><a href="https://youtube.com/"><img src="entertainment_icons/youtube.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> YouTube</a></li>
<li><a href="https://lichess.org/"><img src="entertainment_icons/lichess.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> lichess</a></li>
</ul>
<ul>
<li>Shopping</li>
<li><a href="https://amazon.com/"><img src="shopping_icons/amazon.svg" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Amazon</a></li>
<li><a href="https://adagio.com/"><img src="shopping_icons/adagio.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Adagio Teas</a></li>
<li><a href="https://baileyhats.com/"><img src="shopping_icons/baileyhats.png" width="25" height="25" style="vertical-align:middle;margin:5px 0px"/> Bailey Hats</a></li>
</ul> -->
</nav>
<footer>
<h1>[ami@Internet]</h1>
</footer>
</body>
</html>