diff --git a/package.json b/package.json index 43458be..4283dcc 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@fortawesome/pro-regular-svg-icons": "^6.4.2", "@solidjs/meta": "^0.29.1", "@solidjs/router": "^0.8.3", + "sass": "^1.69.5", "solid-js": "^1.8.5", "solid-start": "^0.3.9" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e5b29b3..3ee9803 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: '@solidjs/router': specifier: ^0.8.3 version: 0.8.3(solid-js@1.8.5) + sass: + specifier: ^1.69.5 + version: 1.69.5 solid-js: specifier: ^1.8.5 version: 1.8.5 @@ -63,7 +66,7 @@ devDependencies: version: 5.2.2 vite: specifier: ^4.5.0 - version: 4.5.0(@types/node@20.8.10) + version: 4.5.0(@types/node@20.8.10)(sass@1.69.5) packages: @@ -3215,6 +3218,9 @@ packages: engines: {node: '>= 4'} dev: true + /immutable@4.3.4: + resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} + /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -4011,6 +4017,15 @@ packages: is-regex: 1.1.4 dev: true + /sass@1.69.5: + resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.4 + source-map-js: 1.0.2 + /semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true @@ -4114,7 +4129,7 @@ packages: sirv: 2.0.3 solid-start: 0.3.9(@solidjs/meta@0.29.1)(@solidjs/router@0.8.3)(solid-js@1.8.5)(solid-start-node@0.3.9)(vite@4.5.0) terser: 5.24.0 - vite: 4.5.0(@types/node@20.8.10) + vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5) transitivePeerDependencies: - supports-color @@ -4186,7 +4201,7 @@ packages: solid-start-node: 0.3.9(solid-start@0.3.9)(vite@4.5.0) terser: 5.24.0 undici: 5.27.0 - vite: 4.5.0(@types/node@20.8.10) + vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5) vite-plugin-inspect: 0.7.41(rollup@3.29.4)(vite@4.5.0) vite-plugin-solid: 2.7.2(solid-js@1.8.5)(vite@4.5.0) wait-on: 6.0.1(debug@4.3.4) @@ -4491,7 +4506,7 @@ packages: open: 9.1.0 picocolors: 1.0.0 sirv: 2.0.3 - vite: 4.5.0(@types/node@20.8.10) + vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5) transitivePeerDependencies: - rollup - supports-color @@ -4509,12 +4524,12 @@ packages: merge-anything: 5.1.7 solid-js: 1.8.5 solid-refresh: 0.5.3(solid-js@1.8.5) - vite: 4.5.0(@types/node@20.8.10) + vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5) vitefu: 0.2.5(vite@4.5.0) transitivePeerDependencies: - supports-color - /vite@4.5.0(@types/node@20.8.10): + /vite@4.5.0(@types/node@20.8.10)(sass@1.69.5): resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -4546,6 +4561,7 @@ packages: esbuild: 0.18.20 postcss: 8.4.31 rollup: 3.29.4 + sass: 1.69.5 optionalDependencies: fsevents: 2.3.3 @@ -4557,7 +4573,7 @@ packages: vite: optional: true dependencies: - vite: 4.5.0(@types/node@20.8.10) + vite: 4.5.0(@types/node@20.8.10)(sass@1.69.5) /wait-on@6.0.1(debug@4.3.4): resolution: {integrity: sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==} diff --git a/src/routes/de/KSS22.tsx b/src/routes/de/KSS22.tsx index 97cb7ea..f427510 100644 --- a/src/routes/de/KSS22.tsx +++ b/src/routes/de/KSS22.tsx @@ -1,12 +1,12 @@ -import { Body, Link, Title, useNavigate } from "solid-start"; +import { Body, Title, useNavigate } from "solid-start"; import { lightMode } from "~/components/en/Navbar"; +import "~/styles/devices.scss"; function KSS22() { const navigate = useNavigate(); return ( KS S22 -
diff --git a/src/routes/de/index.tsx b/src/routes/de/index.tsx index e578075..e0c774c 100644 --- a/src/routes/de/index.tsx +++ b/src/routes/de/index.tsx @@ -1,14 +1,14 @@ import { faYoutube } from "@fortawesome/free-brands-svg-icons"; import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons"; -import { A, Body, Link, Title } from "solid-start"; +import { A, Body, Title } from "solid-start"; import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"; import { lightMode } from "~/components/de/Navbar"; +import "~/styles/start.scss"; function Introduction() { return ( Einführung -
diff --git a/src/routes/de/manufacturers.tsx b/src/routes/de/manufacturers.tsx index 31309e8..2c216d1 100644 --- a/src/routes/de/manufacturers.tsx +++ b/src/routes/de/manufacturers.tsx @@ -1,12 +1,12 @@ -import { Body, Link, Title } from "solid-start"; +import { Body, Title } from "solid-start"; import R from "~/components/Reference"; import Navbar, { lightMode } from "~/components/de/Navbar"; +import "~/styles/overview.scss"; function Manufacturers() { return ( Hersteller -
{/* diff --git a/src/routes/de/overview.tsx b/src/routes/de/overview.tsx index d4a1c9d..761412c 100644 --- a/src/routes/de/overview.tsx +++ b/src/routes/de/overview.tsx @@ -1,13 +1,13 @@ -import { Body, Link, Title } from "solid-start"; +import { Body, Title } from "solid-start"; import DeviceTile from "~/components/DeviceTile"; import R from "~/components/Reference"; import Navbar, { lightMode } from "~/components/de/Navbar"; +import "~/styles/overview.scss"; function overview() { return ( Einführung EUCs -
diff --git a/src/routes/en/KSS22.tsx b/src/routes/en/KSS22.tsx index 96130ee..2369527 100644 --- a/src/routes/en/KSS22.tsx +++ b/src/routes/en/KSS22.tsx @@ -1,11 +1,11 @@ -import { Body, Link, Title } from "solid-start"; +import { Body, Title } from "solid-start"; import { lightMode } from "~/components/en/Navbar"; +import "~/styles/devices.scss"; function KSS22() { return ( KS S22 - {/* */}
diff --git a/src/routes/en/index.tsx b/src/routes/en/index.tsx index c7eafe4..362a060 100644 --- a/src/routes/en/index.tsx +++ b/src/routes/en/index.tsx @@ -1,14 +1,14 @@ import { faYoutube } from "@fortawesome/free-brands-svg-icons"; import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons"; -import { A, Body, Link, Title } from "solid-start"; +import { A, Body, Title } from "solid-start"; import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"; import { lightMode } from "~/components/en/Navbar"; +import "~/styles/start.scss"; function Introduction() { return ( Introduction -
diff --git a/src/routes/en/manufacturers.tsx b/src/routes/en/manufacturers.tsx index 8f667fc..5fe4dad 100644 --- a/src/routes/en/manufacturers.tsx +++ b/src/routes/en/manufacturers.tsx @@ -1,12 +1,14 @@ -import { Body, Link, Title } from "solid-start"; +import { Body, Title } from "solid-start"; import R from "~/components/Reference"; import Navbar, { lightMode } from "~/components/en/Navbar"; +import "~/styles/overview.scss"; function Manufacturers() { return ( Manufacturers - + +
{/* diff --git a/src/routes/en/overview.tsx b/src/routes/en/overview.tsx index 227066f..95a8e4e 100644 --- a/src/routes/en/overview.tsx +++ b/src/routes/en/overview.tsx @@ -1,14 +1,15 @@ -import { Body, Link, Title } from "solid-start"; +import { Body, Title } from "solid-start"; import DeviceTile from "~/components/DeviceTile"; import R from "~/components/Reference"; import Navbar, { lightMode } from "~/components/en/Navbar"; +import "~/styles/overview.scss"; function Overview() { return ( Introduction EUCs - +
diff --git a/src/routes/soon.tsx b/src/routes/soon.tsx index 19c0988..12bee1b 100644 --- a/src/routes/soon.tsx +++ b/src/routes/soon.tsx @@ -1,12 +1,12 @@ -import { Body, Link, Title, useNavigate } from "solid-start"; +import { Body, Title, useNavigate } from "solid-start"; import Navbar, { lightMode } from "~/components/en/Navbar"; +import "~/styles/overview.scss"; function soon() { const navigate = useNavigate(); return ( soon -

This side is not available yet.

diff --git a/public/styles/devices.css b/src/styles/devices.scss similarity index 83% rename from public/styles/devices.css rename to src/styles/devices.scss index 6a78910..976d115 100644 --- a/public/styles/devices.css +++ b/src/styles/devices.scss @@ -32,23 +32,23 @@ text-align: left; display: flex; justify-content: space-between; -} -#sidenavbar button { - all: unset; - margin: 5px auto; - color: #eff0f3; - padding-left: 10px; - padding-right: 10px; - text-decoration: none; - font-size: 1.4em; - border: none; -} + button { + all: unset; + margin: 5px auto; + color: #eff0f3; + padding-left: 10px; + padding-right: 10px; + text-decoration: none; + font-size: 1.4em; + border: none; -#sidenavbar button:hover { - background: #eff0f3; - color: #2a2a2a; - cursor: pointer; + &:hover { + background: #eff0f3; + color: #2a2a2a; + cursor: pointer; + } + } } .main { diff --git a/public/styles/overview.css b/src/styles/overview.scss similarity index 70% rename from public/styles/overview.css rename to src/styles/overview.scss index bb4f695..03064a4 100644 --- a/public/styles/overview.css +++ b/src/styles/overview.scss @@ -37,30 +37,31 @@ top: 0; height: 100%; margin-left: -8px; -} -#navbar button { - border-radius: 16px; - scale: 0.9; -} -#navbar button:hover { - scale: 1.06; -} + button { + border-radius: 16px; + scale: 0.9; -#navbar a { - float: none; - display: block; - color: #eff0f3; - text-align: left; - padding: 8px 8px; - text-decoration: none; - font-size: 0.9em; -} + &:hover { + scale: 1.06; + } + } -#navbar a:hover { - background: #eff0f3; - color: #121629; - cursor: pointer; + a { + float: none; + display: block; + color: #eff0f3; + text-align: left; + padding: 8px 8px; + text-decoration: none; + font-size: 0.9em; + + &:hover { + background: #eff0f3; + color: #121629; + cursor: pointer; + } + } } #sidenavbar { @@ -75,23 +76,23 @@ text-align: left; display: flex; justify-content: space-between; -} -#sidenavbar button { - all: unset; - margin: 5px auto; - color: #eff0f3; - padding-left: 10px; - padding-right: 10px; - text-decoration: none; - font-size: 1.4em; - border: none; -} + button { + all: unset; + margin: 5px auto; + color: #eff0f3; + padding-left: 10px; + padding-right: 10px; + text-decoration: none; + font-size: 1.4em; + border: none; -#sidenavbar button:hover { - background: #eff0f3; - color: #2a2a2a; - cursor: pointer; + &:hover { + background: #eff0f3; + color: #2a2a2a; + cursor: pointer; + } + } } .main { @@ -155,9 +156,10 @@ p a { text-decoration: none; color: #91c4ff; border-bottom: 1px solid navy; -} -p a:hover { - border-bottom: 1px solid #91c4ff; + + &:hover { + border-bottom: 1px solid #91c4ff; + } } .svg-inline--fa, b { @@ -172,9 +174,10 @@ b { float: right; transition: width 1.5s; clear: both; -} -.righties:hover { - width: 50%; + + &:hover { + width: 50%; + } } .lefties { @@ -184,9 +187,10 @@ b { float: left; transition: width 1.5s; display: none; -} -.lefties:hover { - width: 50%; + + &:hover { + width: 50%; + } } #vcutout { @@ -214,60 +218,76 @@ b { .light-mode { background-color: #eff0f3; color: #2a2a2a; -} -.light-mode article p a { - text-align: justify; - text-decoration: underline; - color: #2a2a2a; -} -.light-mode b { - color: #2a2a2a; -} -.light-mode b a { - color: #2a2a2a; -} -.light-mode h3 { - color: #2a2a2a; -} -.light-mode h1 { - color: #2a2a2a; -} -.light-mode h2 { - color: #2a2a2a; -} -.light-mode #navbar { - background-color: #b8c1ec; -} -.light-mode #sidenavbar { - background-color: #b8c1ec; -} -.light-mode #navbar a { - color: black; -} -.light-mode #sidenavbar a { - color: black; -} -.light-mode button { - background-color: #b8c1ec; - color: black; -} -/*Raster Einstellungen*/ -.light-mode .raster { - background-color: #eff0f3; -} -.light-mode a { - color: #2a2a2a; + article p a { + text-align: justify; + text-decoration: underline; + color: #2a2a2a; + } + b { + color: #2a2a2a; + + a { + color: #2a2a2a; + } + } + h3 { + color: #2a2a2a; + } + h1 { + color: #2a2a2a; + } + h2 { + color: #2a2a2a; + } + #navbar { + background-color: #b8c1ec; + + a { + color: black; + } + } + #sidenavbar { + background-color: #b8c1ec; + + a { + color: black; + } + } + button { + background-color: #b8c1ec; + color: black; + } + + /*Raster Einstellungen*/ + .raster { + background-color: #eff0f3; + } + a { + color: #2a2a2a; + } } a { display: inline; color: rgb(225, 223, 210); -} -a svg.left { - margin-right: 2px; -} -a svg.right { - margin-left: 6px; + + svg.left { + margin-right: 2px; + } + svg.right { + margin-left: 6px; + } + div img, + div video { + border-radius: 10%; + max-width: 260px; + max-height: 290px; + padding-top: 8px; + bottom: 0; + } + div h3 { + margin: 0.5%; + } } .raster { width: 300px; @@ -281,23 +301,14 @@ a svg.right { border-radius: 10%; scale: 0.9; font-size: 0.9em; -} -a div img, -a div video { - border-radius: 10%; - max-width: 260px; - max-height: 290px; - padding-top: 8px; - bottom: 0; -} -a div h3 { - margin: 0.5%; -} -.raster:hover { - scale: 1.06; -} -.raster:hover a div img { - width: 110%; + + &:hover { + scale: 1.06; + + a div img { + width: 110%; + } + } } .logos { @@ -365,9 +376,10 @@ a div h3 { /*.raster {width: calc(100%/2);}*/ .righties { width: 100%; - } - .righties:hover { - width: 100%; + + &:hover { + width: 100%; + } } } diff --git a/public/styles/start.css b/src/styles/start.scss similarity index 93% rename from public/styles/start.css rename to src/styles/start.scss index b0a639d..20af10a 100644 --- a/public/styles/start.css +++ b/src/styles/start.scss @@ -77,13 +77,15 @@ p { } a { text-decoration: none; -} -a div p { - text-align: center; - padding: 20px; -} -a :hover { - scale: 1.06; + + &:hover { + scale: 1.06; + } + + div p { + text-align: center; + padding: 20px; + } } .righties {