feat(frontend): load icons from svg files
This commit is contained in:
parent
ad71e165c6
commit
22781e1565
@ -9,6 +9,8 @@
|
||||
|
||||
@use "~@fortawesome/fontawesome-pro/scss/solid"
|
||||
|
||||
@use "icons.sass"
|
||||
|
||||
@font-face
|
||||
font-family: "FRADrive Sans"
|
||||
src: url('./../../static/wp-5.73/FRADriveSans-Regular.woff2') format('woff2'), url('./../../static/wp-5.73/FRADriveSans-Regular.woff') format('woff')
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// SPDX-FileCopyrightText: 2022-2023 Sarah Vaupel <sarah.vaupel@uniworx.de>, Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
|
||||
// SPDX-FileCopyrightText: 2022-2024 Sarah Vaupel <sarah.vaupel@uniworx.de>, Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
|
||||
@ -27,9 +27,9 @@
|
||||
--color-fontsec: #5b5861
|
||||
|
||||
// FONTS
|
||||
--font-base: 'Arial', 'FRADrive Sans', sans-serif
|
||||
--font-base: 'FRADrive Sans', 'Arial', sans-serif
|
||||
--font-logo: var(--font-base)
|
||||
--font-monospace: 'Arial Mono', 'FRADrive Mono', monospace
|
||||
--font-monospace: 'FRADrive Mono', 'Arial Mono', monospace
|
||||
|
||||
// DIMENSIONS
|
||||
--header-height: 100px
|
||||
|
||||
31
frontend/src/icons.sass
Normal file
31
frontend/src/icons.sass
Normal file
@ -0,0 +1,31 @@
|
||||
// SPDX-FileCopyrightText: 2024 David Mosbach <david.mosbach@uniworx.de>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
|
||||
|
||||
@function icon-file($name)
|
||||
@return url('../../assets/icons/fradrive/' + $name + '.svg')
|
||||
|
||||
@mixin base-icon($name)
|
||||
background-image: icon-file($name)
|
||||
background-size: contain
|
||||
background-repeat: no-repeat
|
||||
background-position: center
|
||||
height: 50px
|
||||
width: 50px
|
||||
aspect-ratio: 1/1
|
||||
filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%)
|
||||
|
||||
.inline-icon
|
||||
display: inline-block
|
||||
font-size: 2em
|
||||
width: 2em
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
.ico-check
|
||||
@include base-icon(check)
|
||||
|
||||
.ico-close
|
||||
@include base-icon(close)
|
||||
@ -29,6 +29,7 @@ const packageVersion = require('./package.json').version;
|
||||
|
||||
async function webpackConfig() {
|
||||
const faviconNixDirectory = path.resolve(__dirname, '.nix-well-known');
|
||||
const assetsDirectory = path.resolve(__dirname, 'assets');
|
||||
let faviconApiVersion = undefined;
|
||||
|
||||
if (!fs.existsSync(faviconNixDirectory)) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user