forked from NoLog.cz/public-web
Style buttons
This commit is contained in:
parent
f6fd4a0e64
commit
607f556215
6 changed files with 44 additions and 17 deletions
|
|
@ -128,3 +128,14 @@ code {
|
|||
.clip-wedge {
|
||||
clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
|
||||
}
|
||||
|
||||
/* Components */
|
||||
|
||||
.button {
|
||||
padding: 0.5em;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: theme("colors.gray.200");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -672,14 +672,14 @@ video {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -732,6 +732,10 @@ video {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
|
|
@ -875,6 +879,17 @@ code {
|
|||
clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
|
||||
}
|
||||
|
||||
/* Components */
|
||||
|
||||
.button {
|
||||
padding: 0.5em;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:mr-auto {
|
||||
margin-right: auto;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
x-bind:class="`color-scheme--${colorScheme}`"
|
||||
>
|
||||
<header class="pt-4 pb-6">
|
||||
<div class="container mx-auto px-6 flex items-center mb-4 gap-6">
|
||||
<div class="container mx-auto px-6 flex items-center mb-4 gap-2">
|
||||
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="md:mr-auto">
|
||||
<img src="{{ "/images/logo.png" | relURL }}" width="60" alt="{{ site.Title }}" />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<h2 class="sr-only">{{ i18n "lang_select_title" }}</h2>
|
||||
<nav class="flex items-center gap-2">
|
||||
<nav class="flex items-center gap-2 button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
|
||||
<g fill="currentColor">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
{{ if .IsTranslated -}}
|
||||
{{ range .Translations }}
|
||||
<li>
|
||||
<a class="text-sm" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Language.Params.LanguageCode | default .Lang }}" lang="{{ .Language.Params.LanguageCode | default .Lang }}">{{ .Language.LanguageName }}</a>
|
||||
<a class="text-sm font-semibold" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Language.Params.LanguageCode | default .Lang }}" lang="{{ .Language.Params.LanguageCode | default .Lang }}">{{ .Language.LanguageName }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
{{ else -}}
|
||||
{{ range site.Languages -}}
|
||||
{{ if ne site.Language.Lang .Lang }}
|
||||
<li>
|
||||
<a class="text-sm" rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Params.LanguageCode | default .Lang }}" lang="{{ .Params.LanguageCode | default .Lang }}">{{ .LanguageName }}</a>
|
||||
<a class="text-sm font-semibold" rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Params.LanguageCode | default .Lang }}" lang="{{ .Params.LanguageCode | default .Lang }}">{{ .LanguageName }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<h2 class="sr-only">{{ i18n "theme_select_title" }}</h2>
|
||||
<button x-on:click="toggleColorScheme">
|
||||
<button x-on:click="toggleColorScheme" class="button">
|
||||
<svg class="color-scheme--icon color-scheme--light-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="color-scheme--icon color-scheme--dark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ module.exports = {
|
|||
},
|
||||
fontWeight: {
|
||||
bold: 700,
|
||||
semibold: 500,
|
||||
},
|
||||
extend: {
|
||||
//
|
||||
|
|
|
|||
Reference in a new issue