Random styles

public/style.css

@@ -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);

src/rawdata/scss/carousel.css

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

src/rawdata/scss/content.css

@@ -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;

src/rawdata/scss/core.css

@@ -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;

src/rawdata/scss/education.css

@@ -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;

src/rawdata/scss/timeline.css

@@ -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;

src/rawdata/scss/vars.css

@@ -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;

src/templates/src/include/timeline_item.html

@@ -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 }}
+			{{ 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>
 				{{ end }}
 			{{ end }}

src/templates/src/landing.html

@@ -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>

src/templates/src/style_test.html

@@ -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>

todo-styles.md

@@ -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