From d5415a2019a9f74cd5739df753bdb5abdd232e29 Mon Sep 17 00:00:00 2001 From: ami_sc Date: Sun, 4 Aug 2024 17:45:51 -0400 Subject: [PATCH] Update to a grid + box style --- assets/css/styles.css | 196 +++++++++++++----------------------- index.html | 228 +++++++++++++++++++++++++----------------- 2 files changed, 205 insertions(+), 219 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index dfa3931..0cf77b5 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -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; -} */ diff --git a/index.html b/index.html index b77af12..5a1cc4d 100644 --- a/index.html +++ b/index.html @@ -4,114 +4,154 @@ - Ami :: Startpage + Ami :: Start
-

[ami@Internet] Home

+

Ami :: Start

- - - +
+

Entertainment

+ + + Pegasus + + + + YouTube + + + + Disney+ + + + + lichess + +
+
+

Shopping

+ + + Amazon + + + + Adagio Teas + +