nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/style.css
View File

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

2
src/rawdata/scss/carousel.css
View File

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

8
src/rawdata/scss/content.css
View File

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

54
src/rawdata/scss/core.css
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 {
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 {
font-size: 0.65rem;
}
@ -755,7 +703,7 @@ lite variant instead.
align-items: center;
border-style: dashed;
border-width: 0 0 1px;
border-color: var(--dimmest-color);
border-color: var(--bg-3);
@media screen and (min-width: 35em) {
flex-direction: row;

2
src/rawdata/scss/education.css
View File

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

4
src/rawdata/scss/timeline.css
View File

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

10
src/rawdata/scss/vars.css
View File

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

13
src/templates/src/include/timeline_item.html
View File

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

14
src/templates/src/landing.html
View File

@ -87,31 +87,31 @@
<div class="w5 flex flex-column g2 flex-shrink-0">
{{ if .User }}
<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="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div>
<div class="sidebar-card-content">
<div class="ph2 flex flex-column g2">
<div class="ph3 flex flex-column g2">
{{ range .UserProjects }}
{{ template "list-project" . }}
{{ else }}
<div class="f7 pv3 tc c--dim">You have not created any projects.</div>
{{ end }}
</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 class="svgicon-lite flex items-center">{{ svg "add" }}</div>
</a>
</div>
</div>
<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="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div>
<div class="sidebar-card-content">
<div class="ph2 pb2 flex flex-column g2">
<div class="ph3 pb3 flex flex-column g2">
{{ range .Following }}
{{ template "list-follow" . }}
{{ else }}
@ -122,11 +122,11 @@
</div>
{{ else }}
<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="f6 post-content">Share your own Handmade projects with the community.</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 class="svgicon-lite flex items-center">{{ svg "chevron-right" }}</div>
</a>

24
src/templates/src/style_test.html
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">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>
<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>
<h1 class="mt3 mb2">Form styles</h1>

3
todo-styles.md
View File

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