[content/*,layouts/*,themes/*] Improve theme and prose links

This commit is contained in:
Lorenzo Cogotti 2022-03-24 18:35:27 +01:00
parent 960a4093d4
commit e661d7311b
5 changed files with 58 additions and 38 deletions

View File

@ -32,17 +32,17 @@ We believe in the synergy between conscious business, research and coding.
{{% div title="Get our help" %}}
{{% div style="text-align:left" %}}
- See how [digital tools](portfolio/) can help you.
- Get [advice](contacts/) on your digitalization.
- Create your new software [with us](team/).
- See how <a class="prose-link" href="portfolio/">digital tools</a> can help you.
- Get <a class="prose-link" href="contacts/">advice</a> on your digitalization.
- Create your new software <a class="prose-link" href="team/">with us</a>.
{{% /div %}}
{{% /div %}}
{{% div title="Join us" %}}
{{% div style="text-align:left" %}}
- [Official blog](blog/) to share our thoughts.
- [Git repository](https://git.doublefourteen.io/explore/repos) to share our code.
- IRC on `#doublefourteen`@[Libera.Chat](https://liberachat.net).
- <a class="prose-link" href="blog/">Official blog</a> to share our thoughts.
- <a class="external-prose-link" href="https://git.doublefourteen.io/explore/repos">Git repository</a> to share our code.
- IRC on `#doublefourteen`@<a class="external-prose-link" href="https://libera.chat">Libera.Chat</a>.
{{% /div %}}
{{% /div %}}

View File

@ -17,10 +17,10 @@ projects and ideas!
The DoubleFourteen Code Forge is a community effort to promote digitalization.
- Join `#doublefourteen` on IRC at [Libera.Chat](https://libera.chat).
- Check Code Forge's updates, news, and memes on Twitter [@1414codeforge](https://twitter.com/1414codeforge).
- Discuss our code on the official [Git Repository](https://git.doublefourteen.io/explore/repos).
- Fork us on [GitHub](https://github.com/doublefourteen).
- Join `#doublefourteen` on IRC at <a class="external-prose-link" href="https://libera.chat">Libera.Chat</a>.
- Check Code Forge's updates, news, and memes on Twitter <a class="external-prose-link" href="https://twitter.com/1414codeforge">@1414codeforge</a>.
- Discuss our code on the official <a class="external-prose-link" href="https://git.doublefourteen.io/explore/repos">Git Repository</a>.
- Fork us on <a class="external-prose-link" href="https://github.com/doublefourteen">GitHub</a>.
-----

View File

@ -1,3 +1 @@
<a href="mailto:{{ default "The DoubleFourteen Staff<info@doublefourteen.io>" ( .Get "address") }}">
{{ .Inner }} 📧
</a>
<span><a class="prose-link" href="mailto:{{ default "The DoubleFourteen Staff<info@doublefourteen.io>" ( .Get "address") }}"> {{ .Inner }}</a> 📧</span>

View File

@ -75,6 +75,22 @@ a
a:not(:hover)
text-decoration: none
.prose-link
color: var(--prose-link-color)
opacity: 0.8
text-decoration: none
font-weight: bold
transition: opacity 0.25s ease-in, color 0.25s ease-in, text-shadow 0.15s ease-in
&:hover, &:focus
opacity: 1.0
color: var(--prose-link-hover-color)
text-shadow: -0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px -0.5px 0 var(--prose-link-shadow-color), -0.5px -0.5px 0 var(--prose-link-shadow-color)
&:focus
outline: 1px dotted
.container
margin: 0 auto
position: relative
@ -156,29 +172,29 @@ thead th
size: 400px 386px
.get-in-touch
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: right
gap: $large-spacer
margin: $large-spacer $huge-spacer $large-spacer auto
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: right
gap: $large-spacer
margin: $large-spacer $huge-spacer $large-spacer auto
.button, .button:hover
background-color: transparent
border: 2px solid #ced4da
color: #333
border: 2px solid $gray-400
color: var(--heading-color)
padding: 7px 12px
display: block
margin: 10px 0
font-size: $body-font-size
font-weight: 700
text-decoration: none !important
.button a
display: inline
text-decoration: none !important
color: #333
.button:hover
background-color: #fefefe
a
display: inline
text-decoration: none !important
color: var(--heading-color)
&:hover
background-color: var(--highlight-color)
.twitter-button, .email-button
padding 0px
@ -203,14 +219,9 @@ thead th
.header-image
background-image: url(/doublefourteen-logo-light.svg)
// FIXME
.button, .button:hover
color: inherit
.button a
color: #ccc
.button:hover
background-color: #383838
.external-prose-link
@extend .external-link
@extend .prose-link
@media only screen and (max-width:800px)
.work-in-progress-content

View File

@ -67,11 +67,11 @@ $yellow-100: #fff3bf
// Color Theme
$background-color: #efefef
$background-color-dark: #292929
$background-color-dark: #151515
$alt-background-color: #dfdfdf
$alt-background-color-dark: #0a1922
$alt-background-color-dark: #111
$foreground-color: $gray-700
$foreground-color-dark: $gray-300
$foreground-color-dark: $gray-500
$surface-color: $cyan
$surface-color-dark: $cyan
$accent-color: $cyan
@ -95,6 +95,11 @@ $title-text-color-dark: #ddd
--link-color: #{$blue}
--link-hover-color: #1c7ed6
--prose-link-color: #{$gray-800}
--prose-link-hover-color: #{$gray-500}
--prose-link-shadow-color: #{$gray-000}
--highlight-color: #fff
--heading-color: #{$gray-900}
--border-color: #{$gray-300}
@ -110,6 +115,12 @@ $title-text-color-dark: #ddd
--text-color: #{$text-color-dark}
--title-text-color: #{$title-text-color-dark}
--prose-link-color: #fff
--prose-link-hover-color: #{$gray-200}
--prose-link-shadow-color: #{$gray-500}
--highlight-color: #{$gray-800}
--heading-color: #fff
--link-color: #{$blue-300}