From 4d34f83931aef8acd433dd331fb985809ab00e9d Mon Sep 17 00:00:00 2001 From: Aria Date: Thu, 18 Jun 2026 17:09:59 +0100 Subject: [PATCH] gic: 1.4.0, with tables and navbars --- web/gic.aria.rip/site/css/gic.css | 142 +++++++++++++++++++++++- web/gic.aria.rip/site/index.html | 2 +- web/gic.aria.rip/site/kitchen-sink.html | 91 +++++++++++++++ 3 files changed, 229 insertions(+), 6 deletions(-) diff --git a/web/gic.aria.rip/site/css/gic.css b/web/gic.aria.rip/site/css/gic.css index f940b18..b04e4ea 100644 --- a/web/gic.aria.rip/site/css/gic.css +++ b/web/gic.aria.rip/site/css/gic.css @@ -1,4 +1,4 @@ -/* GIC.css Version 1.3.0 +/* GIC.css Version 1.4.0 * (c) Copyright Ariadne (me@aria.rip) 2026. * Made available under the MIT license */ :root { @@ -78,6 +78,7 @@ --white: #ffffff; --colour-brand: var(--blue); + --colour-brand-text: var(--white); --colour-text: var(--black); --colour-body-background: var(--white); @@ -268,6 +269,7 @@ --colour-surface-text: #fff; --colour-surface-board: var(--blue-tint-50); --colour-button-text: var(--black); + --colour-brand-text: var(--black); } @@ -633,20 +635,105 @@ header.masthead { line-height: 1; border-bottom: 1px solid transparent; - color: var(--colour-surface-text); + color: var(--colour-brand-text); background: var(--colour-brand); - padding: 16px; + &:has(> a) { padding: 16px; } - a { + > a { display: inline; margin-right: var(--spacing-2); - font-size: 30px; + font-size: var(--font-size-27); + line-height: var(--line-height-27); text-decoration: none; color: inherit; &:visited { color: inherit; } } + + nav { + display: flex; + flex-direction: row; + align-items: center; + + &:has(input:checked) { + padding-top: var(--spacing-3); + flex-direction: column; + } + + ul { + list-style-type: none; + align-items: center; + margin: 0; padding: 0; + height: 100%; + + /* On mobile layouts, hide items by default (except for the first one, which is a checkbox in disguise). + When checkbox is checked, flex in a column */ + display: flex; + flex-grow: 1; + flex-direction: row; + justify-content: flex-end; + li:not(:first-child) { display: none; } + &:has(input:checked){ + width: 100%; + display: flex; + flex-direction: column; + margin-top: var(--spacing-3); + li { + display: block; + width: 100%; + text-align: center; + border-top: 1px solid var(--colour-text); + } + } + + /* On tablet and above, show in a row */ + @media screen and (min-width: 641px) { /* tablet */ + li:has(input) { display: none !important; } + li { display: block !important; } + flex-direction: row; + justify-content: flex-start; + } + + li { + margin: 0; + box-sizing: border-box; + + /* Checkbox used for show/hide on mobile */ + input { + appearance: none; + display: block; width: 100%; height: 100%; + outline: none; + border: none; + margin: 0 auto; + &::before { + font-size: var(--font-size-16); + display: block; + width: 100%; + text-align: center; + content: "Open Navbar"; + font-weight: var(--font-weight-bold); + } + &:checked::before { content: "Close navbar"; } + } + + a,input { + padding: var(--spacing-4); + display: block; + box-sizing: border-box; + width: 100%; height: 100%; + + color: var(--colour-brand-text) !important; + text-decoration: none; + + &:hover, &:focus { + background: var(--colour-hover); + color: var(--colour-text) !important; + } + } + } + } + } } footer { @@ -660,6 +747,51 @@ footer { background: var(--colour-surface-background); } +/* ______ ___ ____ __ ____ __ */ +/* | || | // \\ || )) || || (( \ */ +/* || ||=|| ||=) || ||== \\ */ +/* || || || ||_)) ||__| ||___ \_)) */ +/* */ +table { + font-size: var(--font-size-19); + line-height: var(--line-height-19); + + margin-bottom: var(--spacing-6); + + width: 100%; + display: block; + overflow: auto; + + border-spacing: 0; + border-collapse: collapse; + + thead { font-weight: var(--font-weight-bold); } + + td,th { + padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0; + border-bottom: 1px solid var(--colour-border); + text-align: left; + vertical-align: top; + + &.numeric { text-align: right; } + &:last-child { padding-right: 0; } + } + + + caption { + display: table-caption; + font-weight: var(--font-weight-bold); + text-align: left; + + + &.xl, &.l, &.m { margin-bottom: var(--spacing-3); } + + &.xl { font-size: var(--font-size-48); line-height: var(--line-height-48); } + &.l { font-size: var(--font-size-36); line-height: var(--line-height-36); } + &.m { font-size: var(--font-size-24); line-height: var(--line-height-24); } + } +} + /* ____ ____ ____ _ _ ____ */ /* |___ | | |__/ |\/| [__ */ /* | |__| | \ | | ___] */ diff --git a/web/gic.aria.rip/site/index.html b/web/gic.aria.rip/site/index.html index f4fef06..4874551 100644 --- a/web/gic.aria.rip/site/index.html +++ b/web/gic.aria.rip/site/index.html @@ -21,7 +21,7 @@

-

Download Version 1.3.0

+

Download Version 1.4.0

Kitchen Sink

diff --git a/web/gic.aria.rip/site/kitchen-sink.html b/web/gic.aria.rip/site/kitchen-sink.html index dd7d20d..b39890d 100644 --- a/web/gic.aria.rip/site/kitchen-sink.html +++ b/web/gic.aria.rip/site/kitchen-sink.html @@ -52,6 +52,83 @@
+ +
+

Tables

+ + + + + + + + + + + + + + + + + +
A test table
OneTwoThree
ABC
+ + + + + + + + + + + + + + + + + +
XL caption
OneTwoThree
ABC
+ + + + + + + + + + + + + + + + + +
L caption
OneTwoThree
A£0.33C
+ + + + + + + + + + + + + + + + + +
M caption
OneTwoThree
ABC
+
+

Forms

@@ -122,6 +199,20 @@
masthead
+
+ +
+ +
+ +