improve style and base layout
This commit is contained in:
parent
94950041f6
commit
4acfe1d027
28
assets/sass/_colors.sass
Normal file
28
assets/sass/_colors.sass
Normal file
@ -0,0 +1,28 @@
|
||||
//
|
||||
// _colors.sass
|
||||
// Attractive dark mode color scheme for fmtools
|
||||
//
|
||||
|
||||
// Primary palette
|
||||
$primary: #3380ff
|
||||
$primary-dark: #1a3e70
|
||||
$primary-light: #8fc6ff
|
||||
|
||||
// Accent colors
|
||||
$accent: #1de9b6
|
||||
$accent-dark: #00897b
|
||||
$accent-light: #6fffd2
|
||||
|
||||
|
||||
// Success, warning, error
|
||||
$success: #00e676
|
||||
$warning: #ffd600
|
||||
$error: #ff1744
|
||||
|
||||
// Neutral palette (dark mode)
|
||||
$darkest: #0a0c11
|
||||
$background: #10131a
|
||||
$surface: #1a1e29
|
||||
$border: #3a4054
|
||||
$text: #ffffff
|
||||
$text-subtle: #bfc9e6
|
||||
117
assets/sass/_layout.sass
Normal file
117
assets/sass/_layout.sass
Normal file
@ -0,0 +1,117 @@
|
||||
/* _layout.sass */
|
||||
|
||||
/* Variables */
|
||||
$spacing-unit: 1.5rem
|
||||
$section-spacing: 2rem
|
||||
$border-radius: 8px
|
||||
|
||||
html
|
||||
background: darken($background, 3%)
|
||||
|
||||
/* Base Layout */
|
||||
body
|
||||
background: $background
|
||||
color: $text
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
|
||||
width: 100%
|
||||
height: 100%
|
||||
max-width: 1024px
|
||||
margin: $spacing-unit auto
|
||||
padding: $spacing-unit
|
||||
box-sizing: border-box
|
||||
border-radius: $border-radius
|
||||
|
||||
header
|
||||
background: $surface
|
||||
margin: $spacing-unit
|
||||
padding: $spacing-unit
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
border-radius: $border-radius
|
||||
margin: 0 auto
|
||||
|
||||
header h1, header h1 a
|
||||
margin: 0
|
||||
font-size: 1.6rem
|
||||
font-weight: 600
|
||||
color: $text
|
||||
text-decoration: none
|
||||
padding: 0
|
||||
transition: color 0.4s
|
||||
&:hover, &:focus
|
||||
color: $accent-light
|
||||
|
||||
nav
|
||||
display: flex
|
||||
gap: $spacing-unit
|
||||
align-items: center
|
||||
|
||||
nav ul
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: flex
|
||||
gap: 0.5rem
|
||||
flex-wrap: wrap
|
||||
|
||||
nav ul li
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
nav ul li a
|
||||
padding: 0.4rem 0.6rem
|
||||
border-radius: $border-radius
|
||||
background: $primary-dark
|
||||
color: $text
|
||||
text-decoration: none
|
||||
font-weight: 500
|
||||
transition: background 0.4s
|
||||
&:hover, &:focus
|
||||
background: $accent-dark
|
||||
|
||||
@media (max-width: 600px)
|
||||
header
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
gap: $spacing-unit
|
||||
|
||||
nav
|
||||
width: 100%
|
||||
justify-content: flex-start
|
||||
margin-top: $spacing-unit
|
||||
|
||||
main
|
||||
margin: $spacing-unit 0
|
||||
padding: $spacing-unit
|
||||
|
||||
footer
|
||||
background: $surface
|
||||
margin: $spacing-unit
|
||||
padding: $spacing-unit
|
||||
border-radius: $border-radius
|
||||
margin: 0 auto
|
||||
text-align: center
|
||||
|
||||
footer p
|
||||
margin: 0
|
||||
font-size: 0.9rem
|
||||
color: $text-subtle
|
||||
text-align: center
|
||||
|
||||
section
|
||||
border-bottom: 3px solid $surface
|
||||
margin: $section-spacing 0
|
||||
padding-bottom: $section-spacing
|
||||
|
||||
#page-header
|
||||
border-bottom: 3px solid $surface
|
||||
margin: $section-spacing 0
|
||||
padding-bottom: $section-spacing
|
||||
text-align: center
|
||||
h1
|
||||
margin: 0
|
||||
.time
|
||||
font-size: 0.8rem
|
||||
color: $text-subtle
|
||||
36
assets/sass/_links.sass
Normal file
36
assets/sass/_links.sass
Normal file
@ -0,0 +1,36 @@
|
||||
/* _text.sass */
|
||||
|
||||
#quick-links
|
||||
text-align: left
|
||||
|
||||
#link-list
|
||||
display: flex
|
||||
gap: $spacing-unit
|
||||
align-items: left
|
||||
margin: $spacing-unit 0
|
||||
|
||||
#link-list h2
|
||||
flex: none
|
||||
|
||||
#link-list ul
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: flex
|
||||
gap: 1rem
|
||||
flex-wrap: wrap
|
||||
|
||||
#link-list ul li
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
#link-list ul li a
|
||||
padding: 0.3rem 0.6rem
|
||||
border-radius: $border-radius
|
||||
background: $primary-light
|
||||
color: $darkest
|
||||
text-decoration: none
|
||||
font-weight: 500
|
||||
transition: background 0.4s
|
||||
&:hover, &:focus
|
||||
background: $accent-light
|
||||
79
assets/sass/_taxonomy.sass
Normal file
79
assets/sass/_taxonomy.sass
Normal file
@ -0,0 +1,79 @@
|
||||
|
||||
table#taxonomy-table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
// border: 3px solid $darkest
|
||||
box-sizing: border-box
|
||||
background: $surface
|
||||
text-align: left
|
||||
|
||||
tr:nth-child(even)
|
||||
background: darken($surface, 2%)
|
||||
transition: background 0.4s
|
||||
tr:nth-child(odd)
|
||||
background: lighten($surface, 3%)
|
||||
transition: background 0.4s
|
||||
tr:hover, tr:focus
|
||||
background: $border
|
||||
|
||||
#taxonomy-table thead
|
||||
text-align: left
|
||||
border: none
|
||||
background: $darkest
|
||||
border-radius: $border-radius $border-radius 0 0
|
||||
|
||||
#taxonomy-table th
|
||||
color: $text
|
||||
padding: 0.6rem 0.6rem
|
||||
text-align: left
|
||||
font-weight: 600
|
||||
border: none
|
||||
|
||||
#taxonomy-table td
|
||||
padding: 0.3rem 0.6rem
|
||||
text-align: left
|
||||
font-weight: 600
|
||||
border: none
|
||||
|
||||
#taxonomy-table tr
|
||||
border-bottom: 3px solid $background
|
||||
&:hover, &:focus
|
||||
background: $primary-light
|
||||
|
||||
#taxonomy-table a.term-link
|
||||
padding: 0.2rem 0.6rem
|
||||
margin: 0.2rem
|
||||
display: inline-block
|
||||
border-radius: $border-radius
|
||||
text-decoration: none
|
||||
font-weight: 500
|
||||
color: $text
|
||||
transition: color 0.4s
|
||||
&:hover, &:focus
|
||||
color: $darkest
|
||||
|
||||
#taxonomy-table a.taxonomy-name
|
||||
padding: 0
|
||||
margin: 0.2rem
|
||||
display: inline-block
|
||||
border-radius: $border-radius
|
||||
text-decoration: none
|
||||
font-weight: 500
|
||||
color: $text
|
||||
transition: color 0.4s
|
||||
&:hover, &:focus
|
||||
color: $accent-light
|
||||
|
||||
#taxonomy-page a.term-link
|
||||
padding: 0.3rem 1.2rem
|
||||
margin: 0.2rem
|
||||
display: inline-block
|
||||
border-radius: $border-radius
|
||||
text-decoration: none
|
||||
font-weight: 500
|
||||
color: $text
|
||||
transition: color 0.4s
|
||||
font-size: 1.2rem
|
||||
&:hover, &:focus
|
||||
color: $darkest
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "fonts"
|
||||
*
|
||||
color: white
|
||||
background: black
|
||||
@import "colors"
|
||||
@import "layout"
|
||||
@import "taxonomy"
|
||||
@import "links"
|
||||
@ -7,6 +7,7 @@
|
||||
{{ $b := printf "0x%s" (substr $hash 4 2) | int }}
|
||||
{{ $rgba := printf "rgba(%d,%d,%d,0.2)" $r $g $b }}
|
||||
<a
|
||||
class="term-link"
|
||||
id="{{ $taxonomy | urlize }}_{{ $name | urlize }}"
|
||||
style="background:rgba({{ $r }},{{ $g }},{{ $b }},0.4)"
|
||||
href="{{ "/" | relLangURL}}{{ $taxonomy | urlize }}{{ "/" | relLangURL}}{{ $name | urlize }}">
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ range site.RegularPages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ .Summary }}
|
||||
{{ $pages := shuffle (where site.RegularPages "Section" "tools") | first 20 }}
|
||||
<section>
|
||||
<h2>Featured Tools</h2>
|
||||
{{ range $pages }}
|
||||
<article>
|
||||
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p>{{ .Content | truncate 100 }}</p>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<section>
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ .Summary }}
|
||||
<article>
|
||||
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||
<p>{{ .Content | truncate 100 }}</p>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
37
layouts/taxonomies.html
Normal file
37
layouts/taxonomies.html
Normal file
@ -0,0 +1,37 @@
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
|
||||
<section>
|
||||
<table id="taxonomy-table">
|
||||
<!-- <thead>
|
||||
<tr>
|
||||
<th>Taxonomy</th>
|
||||
<th>Terms</th>
|
||||
</tr>
|
||||
</thead> -->
|
||||
<tbody>
|
||||
{{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
|
||||
{{ with $taxonomy }}
|
||||
<tr>
|
||||
<td>
|
||||
<a
|
||||
class="taxonomy-name"
|
||||
href="{{ "/" | relLangURL }}{{ $taxonomyname }}">
|
||||
{{ $taxonomyname | strings.FirstUpper }}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{ range $key, $value := $taxonomy }}
|
||||
{{ partial "term-link.html" (dict "name" $key "taxonomy" $taxonomyname) }}
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
|
||||
{{ end }}
|
||||
@ -1,7 +1,11 @@
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
<h1>All {{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<section id="taxonomy-page">
|
||||
{{ $taxonomy := .Title | urlize }}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
<!-- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2> -->
|
||||
{{ partial "term-link.html" (dict "name" .LinkTitle "taxonomy" $taxonomy ) }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,47 +1,41 @@
|
||||
{{ define "main" }}
|
||||
|
||||
<div id="page-header">
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
|
||||
{{ $dateHuman := .Date | time.Format ":date_long" }}
|
||||
Updated <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
|
||||
<span class="time">Updated <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
|
||||
|
||||
</div>
|
||||
|
||||
{{ with .Params.links }}
|
||||
<section>
|
||||
<h2>Links</h2>
|
||||
<section id="quick-links">
|
||||
<h2>Quick Links</h2>
|
||||
<div id="link-list">
|
||||
<ul>
|
||||
{{ range . }}
|
||||
<li><a href="{{ .url }}" target="_blank" rel="noopener">{{ .title }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.website }}
|
||||
<p>
|
||||
Website: <a href="{{ . }}" target="_blank" rel="noopener">{{ . }}</a>
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.github }}
|
||||
<p>
|
||||
<a href="{{ . }}" target="_blank" rel="noopener">View on GitHub</a>
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
<section>
|
||||
<section id="taxonomies">
|
||||
<h2>At a Glance</h2>
|
||||
<table id="taxonomies">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Taxonomy</th>
|
||||
<th>Terms</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table id="taxonomy-table">
|
||||
<tbody>
|
||||
{{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
|
||||
{{ with $taxonomy }}
|
||||
<tr>
|
||||
<th>{{ $taxonomyname | strings.FirstUpper }}</th>
|
||||
<td>
|
||||
<a
|
||||
class="taxonomy-name"
|
||||
href="{{ "/" | relLangURL }}{{ $taxonomyname }}">
|
||||
{{ $taxonomyname | strings.FirstUpper }}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{ range $key, $value := $taxonomy }}
|
||||
{{ partial "term-link.html" (dict "name" $key "taxonomy" $taxonomyname) }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user