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

Update to a grid + box style

Browse Source
This commit is contained in:
ami_sc 2024-08-04 17:45:51 -04:00
parent b31c7f16f2
commit d5415a2019
2 changed files with 205 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
assets/css/styles.css
View File

@ -12,162 +12,108 @@
/*** Page Contents ***/
/* Background Container */
/* Default Container */
html {
display: flex;
height: 100%;
align-items: center;
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 {
/* Main Grid */
body {
margin: 5rem 10rem 5rem 10rem;
display: grid;
/* We want a 4x2 grid. */
grid-template-columns: repeat(4, [col-start] 1fr);
grid-template-rows: repeat(2, [row-start] 1fr);
grid-template-rows: 0.2fr 1fr 1fr;
gap: 2rem;
}
/* Main Heading */
h1 {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.25rem;
/* Page Header */
header {
display: flex;
align-items: center;
justify-content: center;
grid-column: span 4;
padding: 1.2rem;
background-image: linear-gradient(145deg, #3494E6, #EC6EAD);
border-radius: 0.4rem;
}
header h1 {
font-family: "Fira Code Bold";
color: #FFFFFF;
font-family: "Fira Code Regular";
margin: 0;
}
/* Link Box */
.link_box > h2 {
font-family: "Fira Code Bold";
font-size: 1rem;
color: #FFFFFF;
margin: 0 0 0.5rem 0;
.link_box {
display: grid;
grid-template-columns: repeat(2, [col-start] 1fr);
grid-template-rows: 0.5fr 1fr 1fr;
gap: 1rem;
max-height: fit-content;
}
.link_box a {
.link_box h2 {
display: flex;
margin: 0;
padding: 1rem;
background-color: #313131;
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;
} */
grid-column: span 2;
/* body {
background-color: rgb(29, 31, 33, 1.0);
border-radius: 4px;
box-shadow: 10px 10px;
color: #000000;
font-family: "Fira Code Bold";
font-size: 1.25rem;
color: #FFFFFF;
border-radius: 0.4rem;
border-color: #FFFFFF;
border-style: solid;
border-width: 2px;
}
/* Link */
a {
display: flex;
flex-direction: column;
min-height: 20ch;
min-width: 50vw;
padding: 2em;
} */
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
background-color: #313131;
border-radius: 0.4rem;
border-color: #313131;
border: 2px solid transparent;
box-shadow: 0.25rem 0.25rem #000000;
/* a {
color: inherit;
text-decoration: none;
color: #ffffff;
font-family: "Fira Code Regular";
color: #FFFFFF;
text-align: center;
}
a:focus, a:hover {
font: 22px/1 "firacode_bold";
a:hover {
font-family: "Fira Code Bold";
background:
linear-gradient(#505050 0 0) padding-box,
linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;
border: 2px solid transparent;
}
li:first-child {
font: 22px/1 "firacode_bold";
a:active {
font-family: "Fira Code Bold";
background:
linear-gradient(#777777 0 0) padding-box,
linear-gradient(to right, #12c2e9, #c471ed,#f64f59) border-box;
border: 2px solid transparent;
}
li:last-child {
margin: 0 0 1em;
a img {
width: 2.5rem;
height: 2.5rem;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul:nth-child(5n + 1) li:first-child {
background: -webkit-linear-gradient(right, #cb2d3e, #ef473a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
ul:nth-child(5n + 2) li:first-child {
background: -webkit-linear-gradient(right, #f12711, #f5af19);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
ul:nth-child(5n + 3) li:first-child {
background: -webkit-linear-gradient(right, #1d976c, #93f9b9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
ul:nth-child(5n + 4) li:first-child {
background: -webkit-linear-gradient(right, #9cecfb, #65c7f7, #0052d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
ul:nth-child(5n + 5) li:first-child {
background: -webkit-linear-gradient(right, #12c2e9, #c471ed, #f64f59);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
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 {
column-gap: 2em;
display: grid;
grid-template-columns: auto auto auto auto;
padding: 1em 0;
} */

202
index.html
View File

@ -4,114 +4,154 @@
<head>
<meta charset="utf-8"/>
<title>Ami :: Startpage</title>
<title>Ami :: Start</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>
<header>
<h1>[ami@Internet] Home</h1>
<h1>Ami :: Start</h1>
</header>
<nav>
<div class="link_box">
<h2>Personal</h2>
<a href="https://proton.me/">
<img src="personal_icons/proton.svg"/>
<a href="https://account.proton.me/login">
<img src="assets/img/proton.svg">
Proton
</a>
<a href="https://simplelogin.io/">
<img src="personal_icons/simplelogin.svg"/>
<a href="https://app.simplelogin.io/auth/login">
<img src="assets/img/simplelogin.svg">
SimpleLogin
</a>
<a href="https://bankofamerica.com/">
<img src="personal_icons/bankofamerica.png"/>
BofA
</a>
<a href="https://americanexpress.com/">
<img src="personal_icons/americanexpress.jpg"/>
AMEX
</a>
<a href="https://discover.com/"><img src="personal_icons/discover.png"/>
Discover
<a href="https://cloud.ami.sc/">
<img src="assets/img/polyhedra.png">
Polyhedra
</a>
</div>
<div class="link_box">
<h2>School</h2>
<a href="https://my.astate.edu/">
<img src="university_icons/myastate.png"/>
MyAstate
<h2>Home</h2>
<a href="https://linkpm.residentportal.com/">
<img src="assets/img/libary_park.png">
Libary Park
</a>
<a href="https://arkansasstateuniversity.instructure.com">
<img src="university_icons/canvas.png"/>
Canvas
<a href="https://nepoh.utilityhawk.us/">
<img src="assets/img/utility_hawk.png">
UtilityHawk
</a>
<a href="https://ssb.astate.edu/">
<img src="university_icons/banner.png"/>
Banner
<a href="https://ipn.paymentus.com/cp/nep">
<img src="assets/img/nep.png">
NEP
</a>
<a href="https://att.com/acctmgmt/signin">
<img src="assets/img/att.svg">
myAT&T
</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>
<div class="link_box">
<h2>Work</h2>
<a href="https://nationwidechildrens.sharepoint.com/sites/A10001">
<img src="assets/img/anchor.png">
ANCHOR
</a>
<a href="https://nationwidechildrens.readysetsecure.com/">
<img src="assets/img/readyset.png">
ReadySet
</a>
</div>
<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>
<div class="link_box">
<h2>Finance</h2>
<a href="https://bankofamerica.com/">
<img src="assets/img/bofa.svg">
BofA
</a>
<a href="https://americanexpress.com/en-us/account/login">
<img src="assets/img/amex.svg">
AMEX
</a>
<a href="https://discover.com/">
<img src="assets/img/discover.svg">
Discover
</a>
<a href="https://lemonade.com/login">
<img src="assets/img/lemonade.png">
Lemonade
</a>
</div>
<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>
<div class="link_box">
<h2>Management</h2>
<a href="https://accounts.hetzner.com/login/">
<img src="assets/img/hetzner.png">
Hetzner
</a>
<a href="https://dash.cloudflare.com/login/">
<img src="assets/img/cloudflare.svg">
Cloudflare
</a>
<a href="https://dynadot.com/account/sign-in">
<img src="assets/img/dynadot.jpg">
DynaDot
</a>
<a href="https://auth.ami.sc/admin/alcyone/console/">
<img src="assets/img/alcyone.png">
Alcyone
</a>
</div>
<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>
<div class="link_box">
<h2>Productivity</h2>
<a href="https://git.ami.sc/">
<img src="assets/img/arsenic.png">
Arsenic
</a>
<a href="https://wiki.ami.sc/">
<img src="assets/img/outline.svg">
Outline
</a>
<a href="https://sheets.ami.sc/">
<img src="assets/img/grist.png">
Grist
</a>
<a href="https://proj.ami.sc/">
<img src="assets/img/planka.png">
Planka
</a>
</div>
<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>
<div class="link_box">
<h2>Entertainment</h2>
<a href="https://media.ami.sc/">
<img src="assets/img/pegasus.svg">
Pegasus
</a>
<a href="https://youtube.com/">
<img src="assets/img/youtube.svg">
YouTube
</a>
<a href="https://disneyplus.com/login/">
<img src="assets/img/disney+.png">
Disney+
</a>
<a href="https://lichess.org/">
<img src="assets/img/lichess.svg">
lichess
</a>
</div>
<div class="link_box">
<h2>Shopping</h2>
<a href="https://amazon.com/">
<img src="assets/img/amazon.svg">
Amazon
</a>
<a href="https://adagio.com/">
<img src="assets/img/adagio.png">
Adagio Teas
</a>
</div>
</body>
</html>