Update to a grid + box style
This commit is contained in:
ami_sc
parent
b31c7f16f2
commit
d5415a2019
@ -12,162 +12,108 @@
|
|||||||
|
|
||||||
/*** Page Contents ***/
|
/*** Page Contents ***/
|
||||||
|
|
||||||
/* Background Container */
|
/* Default Container */
|
||||||
html {
|
html {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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;
|
background-color: #1B1B1B;
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 10px 10px;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Link Grid */
|
/* Main Grid */
|
||||||
nav {
|
body {
|
||||||
|
margin: 5rem 10rem 5rem 10rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
/* We want a 4x2 grid. */
|
|
||||||
grid-template-columns: repeat(4, [col-start] 1fr);
|
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;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main Heading */
|
/* Page Header */
|
||||||
h1 {
|
header {
|
||||||
margin-top: 1rem;
|
display: flex;
|
||||||
margin-bottom: 1rem;
|
align-items: center;
|
||||||
font-size: 1.25rem;
|
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;
|
color: #FFFFFF;
|
||||||
font-family: "Fira Code Regular";
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Link Box */
|
/* Link Box */
|
||||||
.link_box > h2 {
|
.link_box {
|
||||||
font-family: "Fira Code Bold";
|
display: grid;
|
||||||
font-size: 1rem;
|
grid-template-columns: repeat(2, [col-start] 1fr);
|
||||||
color: #FFFFFF;
|
grid-template-rows: 0.5fr 1fr 1fr;
|
||||||
margin: 0 0 0.5rem 0;
|
gap: 1rem;
|
||||||
|
max-height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link_box a {
|
.link_box h2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: #313131;
|
||||||
align-items: center;
|
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;
|
justify-content: center;
|
||||||
} */
|
grid-column: span 2;
|
||||||
|
|
||||||
/* body {
|
font-family: "Fira Code Bold";
|
||||||
background-color: rgb(29, 31, 33, 1.0);
|
font-size: 1.25rem;
|
||||||
border-radius: 4px;
|
color: #FFFFFF;
|
||||||
box-shadow: 10px 10px;
|
|
||||||
color: #000000;
|
border-radius: 0.4rem;
|
||||||
|
border-color: #FFFFFF;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Link */
|
||||||
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 20ch;
|
align-items: center;
|
||||||
min-width: 50vw;
|
justify-content: center;
|
||||||
padding: 2em;
|
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;
|
text-decoration: none;
|
||||||
color: #ffffff;
|
font-family: "Fira Code Regular";
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus, a:hover {
|
a:hover {
|
||||||
font: 22px/1 "firacode_bold";
|
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 {
|
a:active {
|
||||||
font: 22px/1 "firacode_bold";
|
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 {
|
a img {
|
||||||
margin: 0 0 1em;
|
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;
|
|
||||||
} */
|
|
||||||
|
|||||||
228
index.html
228
index.html
@ -4,114 +4,154 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<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="icon" type="image/svg+xml" href="assets/img/favicon.png"/>
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
|
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>[ami@Internet] Home</h1>
|
<h1>Ami :: Start</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav>
|
<div class="link_box">
|
||||||
<div class="link_box">
|
<h2>Personal</h2>
|
||||||
<h2>Personal</h2>
|
<a href="https://account.proton.me/login">
|
||||||
|
<img src="assets/img/proton.svg">
|
||||||
|
Proton
|
||||||
|
</a>
|
||||||
|
<a href="https://app.simplelogin.io/auth/login">
|
||||||
|
<img src="assets/img/simplelogin.svg">
|
||||||
|
SimpleLogin
|
||||||
|
</a>
|
||||||
|
<a href="https://cloud.ami.sc/">
|
||||||
|
<img src="assets/img/polyhedra.png">
|
||||||
|
Polyhedra
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="https://proton.me/">
|
<div class="link_box">
|
||||||
<img src="personal_icons/proton.svg"/>
|
<h2>Home</h2>
|
||||||
Proton
|
<a href="https://linkpm.residentportal.com/">
|
||||||
</a>
|
<img src="assets/img/libary_park.png">
|
||||||
|
Libary Park
|
||||||
|
</a>
|
||||||
|
<a href="https://nepoh.utilityhawk.us/">
|
||||||
|
<img src="assets/img/utility_hawk.png">
|
||||||
|
UtilityHawk
|
||||||
|
</a>
|
||||||
|
<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>
|
||||||
|
|
||||||
<a href="https://simplelogin.io/">
|
<div class="link_box">
|
||||||
<img src="personal_icons/simplelogin.svg"/>
|
<h2>Work</h2>
|
||||||
SimpleLogin
|
<a href="https://nationwidechildrens.sharepoint.com/sites/A10001">
|
||||||
</a>
|
<img src="assets/img/anchor.png">
|
||||||
|
ANCHOR
|
||||||
|
</a>
|
||||||
|
<a href="https://nationwidechildrens.readysetsecure.com/">
|
||||||
|
<img src="assets/img/readyset.png">
|
||||||
|
ReadySet
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="https://bankofamerica.com/">
|
<div class="link_box">
|
||||||
<img src="personal_icons/bankofamerica.png"/>
|
<h2>Finance</h2>
|
||||||
BofA
|
<a href="https://bankofamerica.com/">
|
||||||
</a>
|
<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>
|
||||||
|
|
||||||
<a href="https://americanexpress.com/">
|
<div class="link_box">
|
||||||
<img src="personal_icons/americanexpress.jpg"/>
|
<h2>Management</h2>
|
||||||
AMEX
|
<a href="https://accounts.hetzner.com/login/">
|
||||||
</a>
|
<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>
|
||||||
|
|
||||||
<a href="https://discover.com/"><img src="personal_icons/discover.png"/>
|
<div class="link_box">
|
||||||
Discover
|
<h2>Productivity</h2>
|
||||||
</a>
|
<a href="https://git.ami.sc/">
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
<div class="link_box">
|
<div class="link_box">
|
||||||
<h2>School</h2>
|
<h2>Entertainment</h2>
|
||||||
|
<a href="https://media.ami.sc/">
|
||||||
<a href="https://my.astate.edu/">
|
<img src="assets/img/pegasus.svg">
|
||||||
<img src="university_icons/myastate.png"/>
|
Pegasus
|
||||||
MyAstate
|
</a>
|
||||||
</a>
|
<a href="https://youtube.com/">
|
||||||
|
<img src="assets/img/youtube.svg">
|
||||||
<a href="https://arkansasstateuniversity.instructure.com">
|
YouTube
|
||||||
<img src="university_icons/canvas.png"/>
|
</a>
|
||||||
Canvas
|
<a href="https://disneyplus.com/login/">
|
||||||
</a>
|
<img src="assets/img/disney+.png">
|
||||||
|
Disney+
|
||||||
<a href="https://ssb.astate.edu/">
|
</a>
|
||||||
<img src="university_icons/banner.png"/>
|
<a href="https://lichess.org/">
|
||||||
Banner
|
<img src="assets/img/lichess.svg">
|
||||||
</a>
|
lichess
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user