Random styles

This commit is contained in:
Ben Visness 2024-06-24 12:24:30 -05:00
parent f42990ef96
commit fe051080a6
11 changed files with 59 additions and 137 deletions

View File

@ -7159,9 +7159,6 @@ code {
--color: black; --color: black;
--link-color: #d12991; --link-color: #d12991;
--red: #c61d24; --red: #c61d24;
--dim-color: #333;
--dimmer-color: #999;
--dimmest-color: #bbb;
--theme-color: #b1b1b1; --theme-color: #b1b1b1;
--theme-color-dim: #c0c0c0; --theme-color-dim: #c0c0c0;
--theme-color-dimmer: #dddddd; --theme-color-dimmer: #dddddd;
@ -7173,6 +7170,7 @@ code {
--card-background: #ebebeb; --card-background: #ebebeb;
--card-background-hover: #f1f1f1; --card-background-hover: #f1f1f1;
--card-background-transparent: #ebebeb00; --card-background-transparent: #ebebeb00;
--timeline-media-background: #b4b4b466;
--bg-1: #f8f8f8; --bg-1: #f8f8f8;
--bg-2: #e8e8e8; --bg-2: #e8e8e8;
--bg-3: #d8d8d8; --bg-3: #d8d8d8;
@ -7200,9 +7198,6 @@ code {
--color: #eee; --color: #eee;
--link-color: #ff5dc2; --link-color: #ff5dc2;
--color-error: #ff6666; --color-error: #ff6666;
--dim-color: #bbb;
--dimmer-color: #999;
--dimmest-color: #777;
--theme-color: #666; --theme-color: #666;
--theme-color-dim: #444; --theme-color-dim: #444;
--theme-color-dimmer: #383838; --theme-color-dimmer: #383838;
@ -7324,27 +7319,6 @@ pre,
flex-shrink: 1; flex-shrink: 1;
} }
} }
.b--dim {
border-color: var(--dim-color);
}
.b--dimmer {
border-color: var(--dimmer-color);
}
.b--dimmest {
border-color: var(--dimmest-color);
}
.b--theme {
border-color: var(--theme-color);
}
.b--theme-dim {
border-color: var(--theme-color-dim);
}
.b--theme-dimmer {
border-color: var(--theme-color-dimmer);
}
.b--theme-dimmest {
border-color: var(--theme-color-dimmest);
}
.b--theme-dark { .b--theme-dark {
border-color: var(--theme-color-dark); border-color: var(--theme-color-dark);
} }
@ -7394,24 +7368,6 @@ pre,
.c--inherit:active { .c--inherit:active {
color: inherit; color: inherit;
} }
.c--dim {
color: var(--dim-color);
}
.c--theme-dim {
color: var(--theme-color-dim);
}
.c--dimmer {
color: var(--dimmer-color);
}
.c--theme-dimmer {
color: var(--theme-color-dimmer);
}
.c--dimmest {
color: var(--dimmest-color);
}
.c--theme-dimmest {
color: var(--theme-color-dimmest);
}
.f8 { .f8 {
font-size: 0.65rem; font-size: 0.65rem;
} }
@ -7810,7 +7766,7 @@ pre,
align-items: center; align-items: center;
border-style: dashed; border-style: dashed;
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: var(--dimmest-color); border-color: var(--bg-3);
} }
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
.optionbar { .optionbar {
@ -7886,7 +7842,7 @@ pre,
transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
} }
.carousel-container .carousel-button:hover { .carousel-container .carousel-button:hover {
background-color: var(--dimmest-color); background-color: var(--bg-3);
} }
.carousel-container .carousel-button.active { .carousel-container .carousel-button.active {
border-color: var(--theme-color); border-color: var(--theme-color);
@ -7968,10 +7924,10 @@ pre,
.post-content th, .post-content th,
.post-content td { .post-content td {
padding: var(--spacing-extra-small) var(--spacing-small); padding: var(--spacing-extra-small) var(--spacing-small);
border: 1px solid var(--dimmest-color); border: 1px solid var(--border-color);
} }
.post-content code { .post-content code {
background-color: var(--dim-background); background-color: var(--bg-3);
padding: .2em 0; padding: .2em 0;
white-space: nowrap; white-space: nowrap;
} }
@ -7983,12 +7939,12 @@ pre,
} }
.post-content pre > code, .post-content pre > code,
.post-content pre.hmn-code { .post-content pre.hmn-code {
background-color: var(--dim-background); background-color: var(--bg-3);
padding: 0.7em; padding: 0.7em;
overflow-x: auto; overflow-x: auto;
} }
.post-content blockquote { .post-content blockquote {
border-color: var(--dimmest-color); border-color: var(--bg-3);
margin-left: var(--spacing-small); margin-left: var(--spacing-small);
padding-left: var(--spacing-small); padding-left: var(--spacing-small);
margin-right: 0; margin-right: 0;
@ -8131,7 +8087,7 @@ pre,
height: var(--height); height: var(--height);
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
border-style: solid; border-style: solid;
border-color: var(--dimmest-color); border-color: var(--bg-3);
left: -1.5rem; left: -1.5rem;
top: calc(1rem - var(--height)); top: calc(1rem - var(--height));
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
@ -8892,7 +8848,7 @@ code .ss,
.avatar { .avatar {
object-fit: cover; object-fit: cover;
overflow: hidden; overflow: hidden;
background-color: var(--dimmest-color); background-color: var(--bg-3);
flex-shrink: 0; flex-shrink: 0;
border: none; border: none;
width: var(--avatar-size-normal); width: var(--avatar-size-normal);

View File

@ -20,7 +20,7 @@
transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
&:hover { &:hover {
background-color: var(--dimmest-color); background-color: var(--bg-3);
} }
&.active { &.active {

View File

@ -87,11 +87,11 @@
th, th,
td { td {
padding: var(--spacing-extra-small) var(--spacing-small); padding: var(--spacing-extra-small) var(--spacing-small);
border: 1px solid var(--dimmest-color); border: 1px solid var(--border-color);
} }
code { code {
background-color: var(--dim-background); background-color: var(--bg-3);
padding: .2em 0; padding: .2em 0;
white-space: nowrap; white-space: nowrap;
@ -106,14 +106,14 @@
pre>code, pre>code,
pre.hmn-code { pre.hmn-code {
background-color: var(--dim-background); background-color: var(--bg-3);
padding: 0.7em; padding: 0.7em;
overflow-x: auto; overflow-x: auto;
} }
blockquote { blockquote {
border-color: var(--dimmest-color); border-color: var(--bg-3);
margin-left: var(--spacing-small); margin-left: var(--spacing-small);
padding-left: var(--spacing-small); padding-left: var(--spacing-small);
margin-right: 0; margin-right: 0;

View File

@ -108,34 +108,6 @@ pre,
} }
} }
.b--dim {
border-color: var(--dim-color);
}
.b--dimmer {
border-color: var(--dimmer-color);
}
.b--dimmest {
border-color: var(--dimmest-color);
}
.b--theme {
border-color: var(--theme-color);
}
.b--theme-dim {
border-color: var(--theme-color-dim);
}
.b--theme-dimmer {
border-color: var(--theme-color-dimmer);
}
.b--theme-dimmest {
border-color: var(--theme-color-dimmest);
}
.b--theme-dark { .b--theme-dark {
border-color: var(--theme-color-dark); border-color: var(--theme-color-dark);
} }
@ -201,30 +173,6 @@ pre,
} }
} }
.c--dim {
color: var(--dim-color);
}
.c--theme-dim {
color: var(--theme-color-dim);
}
.c--dimmer {
color: var(--dimmer-color);
}
.c--theme-dimmer {
color: var(--theme-color-dimmer);
}
.c--dimmest {
color: var(--dimmest-color);
}
.c--theme-dimmest {
color: var(--theme-color-dimmest);
}
.f8 { .f8 {
font-size: 0.65rem; font-size: 0.65rem;
} }
@ -755,7 +703,7 @@ lite variant instead.
align-items: center; align-items: center;
border-style: dashed; border-style: dashed;
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: var(--dimmest-color); border-color: var(--bg-3);
@media screen and (min-width: 35em) { @media screen and (min-width: 35em) {
flex-direction: row; flex-direction: row;

View File

@ -18,7 +18,7 @@
height: var(--height); height: var(--height);
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
border-style: solid; border-style: solid;
border-color: var(--dimmest-color); border-color: var(--bg-3);
left: -1.5rem; left: -1.5rem;
top: calc(1rem - var(--height)); top: calc(1rem - var(--height));
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;

View File

@ -1,7 +1,7 @@
.avatar { .avatar {
object-fit: cover; object-fit: cover;
overflow: hidden; overflow: hidden;
background-color: var(--dimmest-color); background-color: var(--bg-3);
flex-shrink: 0; flex-shrink: 0;
border: none; border: none;
@ -33,7 +33,7 @@
position: relative; position: relative;
padding-bottom: 56.25%; padding-bottom: 56.25%;
> iframe { >iframe {
/* aspect-ratio--object */ /* aspect-ratio--object */
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -14,10 +14,6 @@ $breakpoint-large: screen and (min-width: 60em)
--link-color: #d12991; --link-color: #d12991;
--red: #c61d24; --red: #c61d24;
--dim-color: #333;
--dimmer-color: #999;
--dimmest-color: #bbb;
/* Default theme colors in case the project.css is busted */ /* Default theme colors in case the project.css is busted */
--theme-color: #b1b1b1; --theme-color: #b1b1b1;
--theme-color-dim: #c0c0c0; --theme-color-dim: #c0c0c0;
@ -34,6 +30,8 @@ $breakpoint-large: screen and (min-width: 60em)
--card-background-hover: #f1f1f1; --card-background-hover: #f1f1f1;
--card-background-transparent: #ebebeb00; --card-background-transparent: #ebebeb00;
--timeline-media-background: #b4b4b466;
--bg-1: #f8f8f8; --bg-1: #f8f8f8;
--bg-2: #e8e8e8; --bg-2: #e8e8e8;
--bg-3: #d8d8d8; --bg-3: #d8d8d8;
@ -71,10 +69,6 @@ $breakpoint-large: screen and (min-width: 60em)
--link-color: #ff5dc2; --link-color: #ff5dc2;
--color-error: #ff6666; --color-error: #ff6666;
--dim-color: #bbb;
--dimmer-color: #999;
--dimmest-color: #777;
--theme-color: #666; --theme-color: #666;
--theme-color-dim: #444; --theme-color-dim: #444;
--theme-color-dimmer: #383838; --theme-color-dimmer: #383838;

View File

@ -39,17 +39,16 @@
<a class="user b" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a> <a class="user b" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
<a class="f6" href="{{ .Url }}">{{ timehtml (absoluteshortdate .Date) .Date }}</a> <a class="f6" href="{{ .Url }}">{{ timehtml (absoluteshortdate .Date) .Date }}</a>
</div> </div>
{{ if len .Projects }} {{ if eq (len .Projects) 1 }}
{{ $p := index .Projects 0 }} {{ $p := index .Projects 0 }}
<div class="overflow-hidden flex flex-column g1 justify-center link--normal tr"> <div class="overflow-hidden flex flex-column g1 justify-center link--normal tr">
<a class="user b" href="{{ $p.Url }}">{{ $p.Name }}</a> <a class="user b" href="{{ $p.Url }}">{{ $p.Name }}</a>
{{ if gt (len .Projects) 1 }}
<div class="f6">+{{ sub (len .Projects) 1 }} more</div>
{{ end }}
</div> </div>
{{ if $p.Logo }} {{ end }}
<a class="flex flex-shrink-0" href="{{ $p.Url }}"> {{ range .Projects }}
<img class="avatar ml2" src="{{ $p.Logo }}" /> {{ if .Logo }}
<a class="flex flex-shrink-0" href="{{ .Url }}">
<img class="avatar ml2" src="{{ .Logo }}">
</a> </a>
{{ end }} {{ end }}
{{ end }} {{ end }}

View File

@ -87,31 +87,31 @@
<div class="w5 flex flex-column g2 flex-shrink-0"> <div class="w5 flex flex-column g2 flex-shrink-0">
{{ if .User }} {{ if .User }}
<div class="sidebar-card bg--card link--normal"> <div class="sidebar-card bg--card link--normal">
<div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer"> <div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
<span class="f7">Your projects</span> <span class="f7">Your projects</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span> <span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div> </div>
<div class="sidebar-card-content"> <div class="sidebar-card-content">
<div class="ph2 flex flex-column g2"> <div class="ph3 flex flex-column g2">
{{ range .UserProjects }} {{ range .UserProjects }}
{{ template "list-project" . }} {{ template "list-project" . }}
{{ else }} {{ else }}
<div class="f7 pv3 tc c--dim">You have not created any projects.</div> <div class="f7 pv3 tc c--dim">You have not created any projects.</div>
{{ end }} {{ end }}
</div> </div>
<a class="bt mt2 pa2 flex justify-between" href="{{ .NewProjectUrl }}"> <a class="bt mt3 pa3 flex justify-between" href="{{ .NewProjectUrl }}">
<div>Create new project</div> <div>Create new project</div>
<div class="svgicon-lite flex items-center">{{ svg "add" }}</div> <div class="svgicon-lite flex items-center">{{ svg "add" }}</div>
</a> </a>
</div> </div>
</div> </div>
<div class="sidebar-card bg--card link--normal"> <div class="sidebar-card bg--card link--normal">
<div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer"> <div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
<span class="f7">Following</span> <span class="f7">Following</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span> <span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div> </div>
<div class="sidebar-card-content"> <div class="sidebar-card-content">
<div class="ph2 pb2 flex flex-column g2"> <div class="ph3 pb3 flex flex-column g2">
{{ range .Following }} {{ range .Following }}
{{ template "list-follow" . }} {{ template "list-follow" . }}
{{ else }} {{ else }}
@ -122,11 +122,11 @@
</div> </div>
{{ else }} {{ else }}
<div class="bg--card link--normal"> <div class="bg--card link--normal">
<div class="pa2 flex flex-column g2"> <div class="pa3 flex flex-column g2">
<div class="b">Join the Handmade Network</div> <div class="b">Join the Handmade Network</div>
<div class="f6 post-content">Share your own Handmade projects with the community.</div> <div class="f6 post-content">Share your own Handmade projects with the community.</div>
</div> </div>
<a class="bt pa2 flex justify-between" href="{{ .LoginPageUrl }}"> <a class="bt pa3 flex justify-between" href="{{ .LoginPageUrl }}">
<div>Log in</div> <div>Log in</div>
<div class="svgicon-lite flex items-center">{{ svg "chevron-right" }}</div> <div class="svgicon-lite flex items-center">{{ svg "chevron-right" }}</div>
</a> </a>

View File

@ -109,6 +109,30 @@ int main() {
<span class="n">GetWindowRect</span><span class="p">(</span> <span class="n">big_window</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">window_rect</span> <span class="p">);</span> <span class="n">GetWindowRect</span><span class="p">(</span> <span class="n">big_window</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">window_rect</span> <span class="p">);</span>
<span class="n">window_rect</span><span class="p">.</span><span class="n">top</span> <span class="o">+=</span> <span class="mi">30</span><span class="p">;</span> <span class="n">window_rect</span><span class="p">.</span><span class="n">top</span> <span class="o">+=</span> <span class="mi">30</span><span class="p">;</span>
</pre> </pre>
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th>Stationery</th>
<td>18,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Totals</th>
<td>21,000</td>
</tr>
</tfoot>
</table>
</div> </div>
<h1 class="mt3 mb2">Form styles</h1> <h1 class="mt3 mb2">Form styles</h1>

View File

@ -14,6 +14,7 @@
- [x] column - [x] column
- [ ] content - [ ] content
- [ ] description - [ ] description
- [ ] c--dim and friends
- [ ] Re-evaluate form styles - [ ] Re-evaluate form styles
- [ ] theme-color-light is used only for buttons - [ ] theme-color-light is used only for buttons
- [x] center-layout vs. margin-center - [x] center-layout vs. margin-center
@ -55,4 +56,4 @@
- TikTok? - TikTok?
- Trello? - Trello?
- [ ] Handle empty avatar URLs correctly in various places (render as theme-dependent default) - [ ] Handle empty avatar URLs correctly in various places (render as theme-dependent default)
- [ ] Resolve TODO(redesign) comments - [ ] Resolve TODO(redesign) comments