Random styles
This commit is contained in:
parent
f42990ef96
commit
fe051080a6
|
@ -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);
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
transition: all 100ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dimmest-color);
|
||||
background-color: var(--bg-3);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">&</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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue