Ad5001/omegamma
Ad5001/omegamma
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Adding tertiary color and new button design.

Browse source
This commit is contained in:
Adsooi 2022-10-15 15:33:13 +02:00
parent 1f7bd1dfb4
commit 7634557b28
Signed by: Ad5001
GPG key ID: 7251B1AF90B960F9
6 changed files with 47 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/scss/common.scss
View file

@ -31,7 +31,11 @@ body {
margin: 0px;
--light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif;
--primary-color: #50DC71;
--primary-color-second: #8EF78C;
--secondary-color: #FAFAFA;
--secondary-color-second: #DFDFDF;
--tertiary-color: #1FA2FF;
--tertiary-color-second: #12D8FA;
--nav-background: var(--secondary-color);
--nav-background-dark: #282828;
--footer-background: #111111;
@ -52,16 +56,32 @@ hr {
opacity: 0.5;
}
.primary, .secondary, .tertiary {
background: var(--first-color)
}
.primary {
background-color: var(--primary-color);
--first-color: var(--primary-color);
--second-color: var(--primary-color-second);
--theme-color: var(--primary-color);
}
.secondary {
background-color: var(--secondary-color);
--first-color: var(--secondary-color);
--second-color: var(--secondary-color-second);
--theme-color: var(--secondary-color);
}
.tertiary {
--first-color: var(--tertiary-color);
--second-color: var(--tertiary-color-second);
--theme-color: var(--tertiary-color);
}
.primary:hover, .secondary:hover, .tertiary:hover {
background-position: right center;
}
/* format */
.fill-width {

6
assets/scss/components/blocks/badge.scss
View file

@ -17,13 +17,13 @@
*/
.badge {
width: Min(300px, calc(100% - 2em));
box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #888888;
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
border-radius: 0.5em;
filter: brightness(100%);
&:hover {
box-shadow: 0px 0px 8px 0px #000000;
filter: brightness(90%);
box-shadow: 0px 0px 6px 0px #888888;
filter: brightness(95%);
}
}

27
assets/scss/components/common/button.scss
View file

@ -25,7 +25,8 @@
height: -moz-fit-content;
width: fit-content;
height: fit-content;
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out, background-position 0.5s;
border-radius: 5px;
&.tag {
border: solid 1px #AEAEAE;
@ -52,31 +53,35 @@
}
}
&.primary:not(.tag), &.secondary:not(.tag) {
margin: 0.1em;
&.primary:not(.tag), &.secondary:not(.tag), &.tertiary:not(.tag) {
margin: 0.2em;
text-transform: uppercase;
font-size: larger;
box-shadow: 0px 0px 2px 0px #000000;
box-shadow: 0px 0px 2px 0px #888888;
filter: brightness(100%);
&:active {
box-shadow: 0px 0px 8px 0px #000000;
filter: brightness(80%);
background-image: linear-gradient(70deg, var(--first-color) 0%, var(--second-color) 51%, var(--first-color) 100%);
background-size: 200% auto;
&:active, &:hover {
box-shadow: 2px 2px 6px 0px #888888;
z-index: 2
}
&:active {
filter: brightness(80%);
}
&:hover {
box-shadow: 0px 0px 8px 0px #000000;
filter: brightness(98%);
z-index: 2
}
& a, &:not(div) {
text-decoration: none;
display: inline-block;
color: black;
padding: 0.5em;
background-color: var(--theme-color);
padding: 0.55em;
/*background-color: var(--theme-color);*/
}
}
}

2
layouts/partials/links.html
View file

@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
{{ range . }}
<div role="button" class="{{ if .Secondary }}secondary{{ else if .Tag }}tag{{ else }}primary{{ end }}">
<div role="button" class="{{ if .Tertiary }}tertiary{{ else if .Secondary }}secondary{{ else if .Tag }}tag{{ else }}primary{{ end }}">
<a href="{{ .URL | safeURL }}" role="button" title="{{ .Title }}" {{ if .NewTab }}target="_blank"{{ end }}>
{{ if .Icon }}<i class="icon-{{ lower .Icon }} icon-as-text" alt="{{ .Icon }}"></i>{{ end }}{{ if .Image }}<img class="icon-as-text" alt="{{ .Icon }}" src="{{ .Image }}" loading="lazy"></img>{{ end }}{{ .Title }}
</a>

2
layouts/shortcodes/card.html
View file

@ -28,7 +28,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
<br>
<div class="grid flex-center">&nbsp;
{{ if (.Get 5) }}
{{ partial "links.html" (slice (dict "Icon" (.Get 5) "Title" (.Get 6) "URL" (.Get 7) "Secondary" (.Get 8) "NewTab" (.Get 9) )) }}
{{ partial "links.html" (slice (dict "Icon" (.Get 5) "Title" (.Get 6) "URL" (.Get 7) "Secondary" (.Get 8) "Tertiary" (.Get 9) "NewTab" (.Get 10) )) }}
{{ end }}
</div>
</div>

8
static/css/badge.css
View file

@ -17,13 +17,13 @@
*/
.badge {
width: Min(300px, calc(100% - 2em));
box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #888888;
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
border-radius: 0.5em;
filter: brightness(100%);
}
.badge::hover {
box-shadow: 0px 0px 8px 0px #000000;
filter: brightness(90%);
.badge:hover {
box-shadow: 0px 0px 6px 0px #888888;
filter: brightness(95%);
}