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",
"@solidjs/meta": "^0.29.1",
"@solidjs/router": "^0.8.3",
"sass": "^1.69.5",
"solid-js": "^1.8.5",
"solid-start": "^0.3.9"
},

30
pnpm-lock.yaml generated
View file

@ -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==}

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 "~/styles/devices.scss";
function KSS22() {
const navigate = useNavigate();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title>
<Link rel="stylesheet" href="/styles/devices.css" />
<div id="sidenavbar">
<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 { 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 (
<Body classList={{ "light-mode": lightMode() }}>
<Title>Einführung</Title>
<Link rel="stylesheet" href="/styles/start.css" />
<div class="container">
<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 Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss";
function Manufacturers() {
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>Hersteller</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar />
<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 R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss";
function overview() {
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>Einführung EUCs</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar />
<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 "~/styles/devices.scss";
function KSS22() {
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title>
<Link rel="stylesheet" href="/styles/devices.css" />
{/* <Navbar /> */}
<div class="row">

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

@ -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 (
<Body classList={{ "light-mode": lightMode() }}>
<Title>Introduction</Title>
<Link rel="stylesheet" href="/styles/start.css" />
<div class="container">
<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 Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function Manufacturers() {
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>Manufacturers</Title>
<Link rel="stylesheet" href="/styles/overview.css" /> <Navbar />
<Navbar />
<article>
{/*
<!--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 R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function Overview() {
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>Introduction EUCs</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar />
<header>
<img src="/images/cover.jpg" />
</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 "~/styles/overview.scss";
function soon() {
const navigate = useNavigate();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Title>soon</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<Navbar />
<p style={{ "text-align": "center" }}>This side is not available yet.</p>
<button onClick={() => navigate(-1)}>Back</button>

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

@ -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 {

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

@ -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%;
}
}
}

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

@ -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 {