Luis/nextjs-python-web-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

coporate color system: init

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-10-03 14:58:31 +02:00
parent 1c0c11a954
commit e9f3be0056
21 changed files with 1787 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

962
pkgs/theme/index.html Normal file
View File

@@ -0,0 +1,962 @@
<!doctype html>
<html lang="en">
<meta charset="UTF-8" />
<title>Page Title</title>
<style></style>
<body>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral0
</div>
<div
style="
background-color: #1f1926;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral10
</div>
<div
style="
background-color: #342e3c;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral20
</div>
<div
style="
background-color: #4b4453;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral30
</div>
<div
style="
background-color: #635b6b;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral40
</div>
<div
style="
background-color: #7d7485;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral50
</div>
<div
style="
background-color: #807788;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral51
</div>
<div
style="
background-color: #978d9f;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral60
</div>
<div
style="
background-color: #b2a7ba;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral70
</div>
<div
style="
background-color: #cec2d5;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral80
</div>
<div
style="
background-color: #eadef2;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral90
</div>
<div
style="
background-color: #fff7ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red0
</div>
<div
style="
background-color: #410006;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red10
</div>
<div
style="
background-color: #680010;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red20
</div>
<div
style="
background-color: #93001a;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red30
</div>
<div
style="
background-color: #bf0026;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red40
</div>
<div
style="
background-color: #e82439;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red50
</div>
<div
style="
background-color: #ff5358;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red60
</div>
<div
style="
background-color: #ff8986;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red70
</div>
<div
style="
background-color: #ffb3b0;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red80
</div>
<div
style="
background-color: #ffdad8;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red90
</div>
<div
style="
background-color: #ffedeb;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red95
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green0
</div>
<div
style="
background-color: #0f2000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green10
</div>
<div
style="
background-color: #1d3700;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green20
</div>
<div
style="
background-color: #2d5000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green30
</div>
<div
style="
background-color: #3d6a00;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green40
</div>
<div
style="
background-color: #4e8500;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green50
</div>
<div
style="
background-color: #60a100;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green60
</div>
<div
style="
background-color: #74be11;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green70
</div>
<div
style="
background-color: #7ac51b;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green72
</div>
<div
style="
background-color: #8edb34;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green80
</div>
<div
style="
background-color: #a9f850;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green90
</div>
<div
style="
background-color: #efffd8;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow0
</div>
<div
style="
background-color: #1d1d00;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow10
</div>
<div
style="
background-color: #323200;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow20
</div>
<div
style="
background-color: #494900;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow30
</div>
<div
style="
background-color: #626200;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow40
</div>
<div
style="
background-color: #7b7b00;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow50
</div>
<div
style="
background-color: #969600;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow60
</div>
<div
style="
background-color: #b1b100;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow70
</div>
<div
style="
background-color: #cdcd00;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow80
</div>
<div
style="
background-color: #e0e01f;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow87
</div>
<div
style="
background-color: #eaea2c;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow90
</div>
<div
style="
background-color: #fffeac;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple0
</div>
<div
style="
background-color: #270057;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple10
</div>
<div
style="
background-color: #42008a;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple20
</div>
<div
style="
background-color: #5e07bd;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple30
</div>
<div
style="
background-color: #661bc5;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple33
</div>
<div
style="
background-color: #7734d6;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple40
</div>
<div
style="
background-color: #9152f1;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple50
</div>
<div
style="
background-color: #a974ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple60
</div>
<div
style="
background-color: #bf98ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple70
</div>
<div
style="
background-color: #d5baff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple80
</div>
<div
style="
background-color: #ecdcff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple90
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue0
</div>
<div
style="
background-color: #001d36;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue10
</div>
<div
style="
background-color: #003258;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue20
</div>
<div
style="
background-color: #00497c;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue30
</div>
<div
style="
background-color: #0061a3;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue40
</div>
<div
style="
background-color: #1b7ac5;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue50
</div>
<div
style="
background-color: #4395e2;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue60
</div>
<div
style="
background-color: #62b0fe;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue70
</div>
<div
style="
background-color: #9ecaff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue80
</div>
<div
style="
background-color: #d1e4ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue90
</div>
<div
style="
background-color: #e9f1ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue95
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue100
</div>
</div>
</body>
</html>