Final fix before refactor
This commit is contained in:
ami_sc
parent
f2863b7ace
commit
06d90d844f
@ -1,25 +1,99 @@
|
|||||||
|
/*** Fonts ***/
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: firacode;
|
font-family: "Fira Code Regular";
|
||||||
src: url(firacode.ttf);
|
src: url(../fonts/FiraCode.ttf);
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: firacode_bold;
|
font-family: "Fira Code Bold";
|
||||||
src: url(firacode_bold.ttf);
|
src: url(../fonts/FiraCode-Bold.ttf);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*** Page Contents ***/
|
||||||
|
|
||||||
|
/* Background Container */
|
||||||
html {
|
html {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
align-items: center;
|
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: 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;
|
background-blend-mode: screen, color-dodge, overlay, difference, normal;
|
||||||
display: flex;
|
display: flex;
|
||||||
font: 22px/1 "firacode";
|
font: 22px/1 "firacode";
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
} */
|
||||||
|
|
||||||
body {
|
/* body {
|
||||||
background-color: rgb(29, 31, 33, 1.0);
|
background-color: rgb(29, 31, 33, 1.0);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 10px 10px;
|
box-shadow: 10px 10px;
|
||||||
@ -29,18 +103,9 @@ body {
|
|||||||
min-height: 20ch;
|
min-height: 20ch;
|
||||||
min-width: 50vw;
|
min-width: 50vw;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
}
|
} */
|
||||||
|
|
||||||
main_title {
|
/* a {
|
||||||
margin: 0;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
main_title span {
|
|
||||||
color: #0fb1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -98,11 +163,11 @@ ul:nth-child(5n + 6) li:first-child {
|
|||||||
background: -webkit-linear-gradient(right, #dce35b, #45b649);
|
background: -webkit-linear-gradient(right, #dce35b, #45b649);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
} */
|
||||||
|
|
||||||
nav {
|
/* nav {
|
||||||
column-gap: 2em;
|
column-gap: 2em;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto auto auto;
|
grid-template-columns: auto auto auto auto;
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
}
|
} */
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
156
index.html
156
index.html
@ -1,65 +1,117 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html lang="eng-US">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Ami :: Startpage</title>
|
<meta charset="utf-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="favicon.png"/>
|
<title>Ami :: Startpage</title>
|
||||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.png"/>
|
||||||
</head>
|
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main_title><span>[ami@Internet] > </span>Home</main_title>
|
<header>
|
||||||
|
<h1>[ami@Internet] Home</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<div class="link_box">
|
||||||
<li>Personal</li>
|
<h2>Personal</h2>
|
||||||
<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>
|
<a href="https://proton.me/">
|
||||||
<li>University</li>
|
<img src="personal_icons/proton.svg"/>
|
||||||
<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>
|
Proton
|
||||||
<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>
|
</a>
|
||||||
<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>
|
<a href="https://simplelogin.io/">
|
||||||
<li>Self-Hosted</li>
|
<img src="personal_icons/simplelogin.svg"/>
|
||||||
<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>
|
SimpleLogin
|
||||||
<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>
|
</a>
|
||||||
<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>
|
<a href="https://bankofamerica.com/">
|
||||||
<li>Management</li>
|
<img src="personal_icons/bankofamerica.png"/>
|
||||||
<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>
|
BofA
|
||||||
<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>
|
</a>
|
||||||
<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>
|
<a href="https://americanexpress.com/">
|
||||||
<li>Entertainment</li>
|
<img src="personal_icons/americanexpress.jpg"/>
|
||||||
<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>
|
AMEX
|
||||||
<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>
|
</a>
|
||||||
<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>
|
<a href="https://discover.com/"><img src="personal_icons/discover.png"/>
|
||||||
<li>Shopping</li>
|
Discover
|
||||||
<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>
|
</a>
|
||||||
<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>
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<main_title><span>[ami@Internet] > </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>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user