~eanyanwu/toph

70052804a291948744606d831eac2c5da587dd3d — Eze 2 months ago 17abc26
Rely on CSS classes for layout components

Custom element tags seem to have lower CSS specificity
than regular tags which causes problems
M src/css/center.css => src/css/center.css +1 -1
@@ 1,4 1,4 @@
t-center {
.t-center {
  display: flex;
  flex-direction: column;
  align-items: center;

M src/css/cluster.css => src/css/cluster.css +1 -1
@@ 1,4 1,4 @@
t-cluster {
.t-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-cluster-gap);

M src/css/cover.css => src/css/cover.css +4 -4
@@ 1,18 1,18 @@
t-cover {
.t-cover {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  min-block-size: var(--t-cover-percent);
}

t-cover>.t-cover-main {
.t-cover>.t-cover-main {
  margin-block: auto;
}

t-cover>.t-cover-header {
.t-cover>.t-cover-header {
  margin-block-end: 1rem;
}

t-cover>.t-cover-footer {
.t-cover>.t-cover-footer {
  margin-block-start: 1rem;
}

M src/css/fluid-grid.css => src/css/fluid-grid.css +1 -1
@@ 1,4 1,4 @@
t-fluid-grid {
.t-fluid-grid {
  display: grid;
  grid-gap: var(--t-fluid-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--t-fluid-grid-min-width), 100%), 1fr));

M src/css/frame.css => src/css/frame.css +3 -3
@@ 1,4 1,4 @@
t-frame {
.t-frame {
  aspect-ratio: var(--t-frame-ratio);

  /*


@@ 13,8 13,8 @@ t-frame {
}


t-frame>img,
t-frame>video {
.t-frame>img,
.t-frame>video {
  object-fit: cover;
  inline-size: 100%;
  block-size: 100%;

M src/css/padded.css => src/css/padded.css +1 -1
@@ 1,4 1,4 @@
t-padded {
.t-padded {
  display: block;
  padding: var(--t-padded-padding);
}

M src/css/stack.css => src/css/stack.css +5 -5
@@ 1,21 1,21 @@
t-stack {
.t-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

t-stack>* {
.t-stack>* {
  margin-block: 0;
}

t-stack>*+* {
.t-stack>*+* {
  margin-block-start: var(--t-stack-space);
}

t-stack:only-child {
.t-stack:only-child {
  block-size: 100%;
}

t-stack> :nth-child(3) {
.t-stack> :nth-child(3) {
  margin-block-end: auto;
}

M src/css/switcher.css => src/css/switcher.css +2 -2
@@ 1,10 1,10 @@
t-switcher {
.t-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-switcher-gap);
}

t-switcher > * {
.t-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--t-switcher-threshold) - 100%) * 999);
}