aronmal/jg-eucs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adding sass

Browse source
This commit is contained in:
aronmal 2023-11-10 08:36:42 +01:00
parent a988a673b2
commit 05a69bf274
Signed by: aronmal
GPG key ID: 816B7707426FC612
14 changed files with 195 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -28,6 +28,7 @@
"@fortawesome/pro-regular-svg-icons": "^6.4.2", "@fortawesome/pro-regular-svg-icons": "^6.4.2",
"@solidjs/meta": "^0.29.1", "@solidjs/meta": "^0.29.1",
"@solidjs/router": "^0.8.3", "@solidjs/router": "^0.8.3",
"sass": "^1.69.5",
"solid-js": "^1.8.5", "solid-js": "^1.8.5",
"solid-start": "^0.3.9" "solid-start": "^0.3.9"
}, },

30
pnpm-lock.yaml generated
View file

@ -20,6 +20,9 @@ dependencies:
'@solidjs/router': '@solidjs/router':
specifier: ^0.8.3 specifier: ^0.8.3
version: 0.8.3(solid-js@1.8.5) version: 0.8.3(solid-js@1.8.5)
sass:
specifier: ^1.69.5
version: 1.69.5
solid-js: solid-js:
specifier: ^1.8.5 specifier: ^1.8.5
version: 1.8.5 version: 1.8.5
@ -63,7 +66,7 @@ devDependencies:
version: 5.2.2 version: 5.2.2
vite: vite:
specifier: ^4.5.0 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: packages:
@ -3215,6 +3218,9 @@ packages:
engines: {node: '>= 4'} engines: {node: '>= 4'}
dev: true dev: true
/immutable@4.3.4:
resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
/import-fresh@3.3.0: /import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'} engines: {node: '>=6'}
@ -4011,6 +4017,15 @@ packages:
is-regex: 1.1.4 is-regex: 1.1.4
dev: true 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: /semver@6.3.1:
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
hasBin: true hasBin: true
@ -4114,7 +4129,7 @@ packages:
sirv: 2.0.3 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) 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 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: transitivePeerDependencies:
- supports-color - supports-color
@ -4186,7 +4201,7 @@ packages:
solid-start-node: 0.3.9(solid-start@0.3.9)(vite@4.5.0) solid-start-node: 0.3.9(solid-start@0.3.9)(vite@4.5.0)
terser: 5.24.0 terser: 5.24.0
undici: 5.27.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-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) vite-plugin-solid: 2.7.2(solid-js@1.8.5)(vite@4.5.0)
wait-on: 6.0.1(debug@4.3.4) wait-on: 6.0.1(debug@4.3.4)
@ -4491,7 +4506,7 @@ packages:
open: 9.1.0 open: 9.1.0
picocolors: 1.0.0 picocolors: 1.0.0
sirv: 2.0.3 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: transitivePeerDependencies:
- rollup - rollup
- supports-color - supports-color
@ -4509,12 +4524,12 @@ packages:
merge-anything: 5.1.7 merge-anything: 5.1.7
solid-js: 1.8.5 solid-js: 1.8.5
solid-refresh: 0.5.3(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) vitefu: 0.2.5(vite@4.5.0)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - 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==} resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true hasBin: true
@ -4546,6 +4561,7 @@ packages:
esbuild: 0.18.20 esbuild: 0.18.20
postcss: 8.4.31 postcss: 8.4.31
rollup: 3.29.4 rollup: 3.29.4
sass: 1.69.5
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
@ -4557,7 +4573,7 @@ packages:
vite: vite:
optional: true optional: true
dependencies: 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): /wait-on@6.0.1(debug@4.3.4):
resolution: {integrity: sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==} resolution: {integrity: sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==}

4
src/routes/de/KSS22.tsx
View file

@ -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 { lightMode } from "~/components/en/Navbar";
import "~/styles/devices.scss";
function KSS22() { function KSS22() {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title> <Title>KS S22</Title>
<Link rel="stylesheet" href="/styles/devices.css" />
<div id="sidenavbar"> <div id="sidenavbar">
<button onClick={() => navigate(-1)}>Zurück</button> <button onClick={() => navigate(-1)}>Zurück</button>

4
src/routes/de/index.tsx
View file

@ -1,14 +1,14 @@
import { faYoutube } from "@fortawesome/free-brands-svg-icons"; import { faYoutube } from "@fortawesome/free-brands-svg-icons";
import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-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 { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import { lightMode } from "~/components/de/Navbar"; import { lightMode } from "~/components/de/Navbar";
import "~/styles/start.scss";
function Introduction() { function Introduction() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>Einführung</Title> <Title>Einführung</Title>
<Link rel="stylesheet" href="/styles/start.css" />
<div class="container"> <div class="container">
<img id="cover" src="/images/Gear3.webp" /> <img id="cover" src="/images/Gear3.webp" />

4
src/routes/de/manufacturers.tsx
View file

@ -1,12 +1,12 @@
import { Body, Link, Title } from "solid-start"; import { Body, Title } from "solid-start";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar"; import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss";
function Manufacturers() { function Manufacturers() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>Hersteller</Title> <Title>Hersteller</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar /> <Navbar />
<article> <article>
{/* {/*

4
src/routes/de/overview.tsx
View file

@ -1,13 +1,13 @@
import { Body, Link, Title } from "solid-start"; import { Body, Title } from "solid-start";
import DeviceTile from "~/components/DeviceTile"; import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar"; import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss";
function overview() { function overview() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>Einführung EUCs</Title> <Title>Einführung EUCs</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar /> <Navbar />
<header> <header>

4
src/routes/en/KSS22.tsx
View file

@ -1,11 +1,11 @@
import { Body, Link, Title } from "solid-start"; import { Body, Title } from "solid-start";
import { lightMode } from "~/components/en/Navbar"; import { lightMode } from "~/components/en/Navbar";
import "~/styles/devices.scss";
function KSS22() { function KSS22() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title> <Title>KS S22</Title>
<Link rel="stylesheet" href="/styles/devices.css" />
{/* <Navbar /> */} {/* <Navbar /> */}
<div class="row"> <div class="row">

4
src/routes/en/index.tsx
View file

@ -1,14 +1,14 @@
import { faYoutube } from "@fortawesome/free-brands-svg-icons"; import { faYoutube } from "@fortawesome/free-brands-svg-icons";
import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-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 { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import { lightMode } from "~/components/en/Navbar"; import { lightMode } from "~/components/en/Navbar";
import "~/styles/start.scss";
function Introduction() { function Introduction() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>Introduction</Title> <Title>Introduction</Title>
<Link rel="stylesheet" href="/styles/start.css" />
<div class="container"> <div class="container">
<img id="cover" src="/images/Gear3.webp" /> <img id="cover" src="/images/Gear3.webp" />

6
src/routes/en/manufacturers.tsx
View file

@ -1,12 +1,14 @@
import { Body, Link, Title } from "solid-start"; import { Body, Title } from "solid-start";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar"; import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function Manufacturers() { function Manufacturers() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>Manufacturers</Title> <Title>Manufacturers</Title>
<Link rel="stylesheet" href="/styles/overview.css" /> <Navbar /> <Navbar />
<article> <article>
{/* {/*
<!--hersteller--> <!--hersteller-->

5
src/routes/en/overview.tsx
View file

@ -1,14 +1,15 @@
import { Body, Link, Title } from "solid-start"; import { Body, Title } from "solid-start";
import DeviceTile from "~/components/DeviceTile"; import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar"; import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function Overview() { function Overview() {
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>Introduction EUCs</Title> <Title>Introduction EUCs</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar /> <Navbar />
<header> <header>
<img src="/images/cover.jpg" /> <img src="/images/cover.jpg" />
</header> </header>

4
src/routes/soon.tsx
View file

@ -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 Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function soon() { function soon() {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body classList={{ "light-mode": lightMode() }}>
<Title>soon</Title> <Title>soon</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar /> <Navbar />
<p style={{ "text-align": "center" }}>This side is not available yet.</p> <p style={{ "text-align": "center" }}>This side is not available yet.</p>
<button onClick={() => navigate(-1)}>Back</button> <button onClick={() => navigate(-1)}>Back</button>

30
public/styles/devices.css → src/styles/devices.scss
View file

@ -32,23 +32,23 @@
text-align: left; text-align: left;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
#sidenavbar button { button {
all: unset; all: unset;
margin: 5px auto; margin: 5px auto;
color: #eff0f3; color: #eff0f3;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
text-decoration: none; text-decoration: none;
font-size: 1.4em; font-size: 1.4em;
border: none; border: none;
}
#sidenavbar button:hover { &:hover {
background: #eff0f3; background: #eff0f3;
color: #2a2a2a; color: #2a2a2a;
cursor: pointer; cursor: pointer;
}
}
} }
.main { .main {

240
public/styles/overview.css → src/styles/overview.scss
View file

@ -37,30 +37,31 @@
top: 0; top: 0;
height: 100%; height: 100%;
margin-left: -8px; margin-left: -8px;
}
#navbar button { button {
border-radius: 16px; border-radius: 16px;
scale: 0.9; scale: 0.9;
}
#navbar button:hover {
scale: 1.06;
}
#navbar a { &:hover {
float: none; scale: 1.06;
display: block; }
color: #eff0f3; }
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
}
#navbar a:hover { a {
background: #eff0f3; float: none;
color: #121629; display: block;
cursor: pointer; color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
&:hover {
background: #eff0f3;
color: #121629;
cursor: pointer;
}
}
} }
#sidenavbar { #sidenavbar {
@ -75,23 +76,23 @@
text-align: left; text-align: left;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
#sidenavbar button { button {
all: unset; all: unset;
margin: 5px auto; margin: 5px auto;
color: #eff0f3; color: #eff0f3;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
text-decoration: none; text-decoration: none;
font-size: 1.4em; font-size: 1.4em;
border: none; border: none;
}
#sidenavbar button:hover { &:hover {
background: #eff0f3; background: #eff0f3;
color: #2a2a2a; color: #2a2a2a;
cursor: pointer; cursor: pointer;
}
}
} }
.main { .main {
@ -155,9 +156,10 @@ p a {
text-decoration: none; text-decoration: none;
color: #91c4ff; color: #91c4ff;
border-bottom: 1px solid navy; border-bottom: 1px solid navy;
}
p a:hover { &:hover {
border-bottom: 1px solid #91c4ff; border-bottom: 1px solid #91c4ff;
}
} }
.svg-inline--fa, .svg-inline--fa,
b { b {
@ -172,9 +174,10 @@ b {
float: right; float: right;
transition: width 1.5s; transition: width 1.5s;
clear: both; clear: both;
}
.righties:hover { &:hover {
width: 50%; width: 50%;
}
} }
.lefties { .lefties {
@ -184,9 +187,10 @@ b {
float: left; float: left;
transition: width 1.5s; transition: width 1.5s;
display: none; display: none;
}
.lefties:hover { &:hover {
width: 50%; width: 50%;
}
} }
#vcutout { #vcutout {
@ -214,60 +218,76 @@ b {
.light-mode { .light-mode {
background-color: #eff0f3; background-color: #eff0f3;
color: #2a2a2a; 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*/ article p a {
.light-mode .raster { text-align: justify;
background-color: #eff0f3; text-decoration: underline;
} color: #2a2a2a;
.light-mode a { }
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 { a {
display: inline; display: inline;
color: rgb(225, 223, 210); color: rgb(225, 223, 210);
}
a svg.left { svg.left {
margin-right: 2px; margin-right: 2px;
} }
a svg.right { svg.right {
margin-left: 6px; 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 { .raster {
width: 300px; width: 300px;
@ -281,23 +301,14 @@ a svg.right {
border-radius: 10%; border-radius: 10%;
scale: 0.9; scale: 0.9;
font-size: 0.9em; font-size: 0.9em;
}
a div img, &:hover {
a div video { scale: 1.06;
border-radius: 10%;
max-width: 260px; a div img {
max-height: 290px; width: 110%;
padding-top: 8px; }
bottom: 0; }
}
a div h3 {
margin: 0.5%;
}
.raster:hover {
scale: 1.06;
}
.raster:hover a div img {
width: 110%;
} }
.logos { .logos {
@ -365,9 +376,10 @@ a div h3 {
/*.raster {width: calc(100%/2);}*/ /*.raster {width: calc(100%/2);}*/
.righties { .righties {
width: 100%; width: 100%;
}
.righties:hover { &:hover {
width: 100%; width: 100%;
}
} }
} }

16
public/styles/start.css → src/styles/start.scss
View file

@ -77,13 +77,15 @@ p {
} }
a { a {
text-decoration: none; text-decoration: none;
}
a div p { &:hover {
text-align: center; scale: 1.06;
padding: 20px; }
}
a :hover { div p {
scale: 1.06; text-align: center;
padding: 20px;
}
} }
.righties { .righties {