Elias/Website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated colors with new var names, outsourced css

Browse Source
This commit is contained in:
Elias Fink
2025-06-26 18:56:46 +02:00
parent 65efc3a8df
commit e14d5db9da
2 changed files with 47 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
colors/colors.css Normal file
View File

@@ -0,0 +1,35 @@
* {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
#content {
top: 50%;
left: 50%;
width: 100%;
max-width: 500px;
position: absolute;
transform: translate(-50%, -50%);
}
.color-palette {
width: 100%;
max-width: 500px;
}
.single-color {
width: 20%;
float: left;
text-align: center;
display: inline-block;
}
.single-color div {
padding-top: 50%;
margin-top: 50px;
margin-bottom: 2px;
}

64
colors/index.php
View File

@@ -2,49 +2,9 @@
<link rel="stylesheet" href="https://static.eliasfink.de/fonts/montserrat/montserrat.css"> <link rel="stylesheet" href="https://static.eliasfink.de/fonts/montserrat/montserrat.css">
<style> <link rel="stylesheet" href="colors.css">
* {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
#content {
top: 50%;
left: 50%;
width: 100%;
max-width: 500px;
position: absolute;
transform: translate(-50%, -50%);
}
.color-palette {
width: 100%;
max-width: 500px;
}
.single-color {
width: 20%;
float: left;
text-align: center;
display: inline-block;
}
.single-color div {
padding-top: 50%;
margin-top: 50px;
margin-bottom: 2px;
}
</style> <title>Colors &ndash; Elias Fink</title>
<title>Colors &ndash; eliasfink.de</title>
</head> </head>
@@ -54,46 +14,46 @@
<div id="blue" class="color-palette"> <div id="blue" class="color-palette">
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--blue-1);"></div> <div style="background-color: var(--blue-darkest);"></div>
<span>#001A33</span> <span>#001A33</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--blue-2);"></div> <div style="background-color: var(--blue-darker);"></div>
<span>#004D99</span> <span>#004D99</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--blue-3);"></div> <div style="background-color: var(--blue-medium);"></div>
<span>#0080FF</span> <span>#0080FF</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--blue-4);"></div> <div style="background-color: var(--blue-lighter);"></div>
<span>#66B3FF</span> <span>#66B3FF</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--blue-5);"></div> <div style="background-color: var(--blue-lightest);"></div>
<span>#CCE6FF</span> <span>#CCE6FF</span>
</div> </div>
</div> </div>
<div id="grey" class="color-palette"> <div id="grey" class="color-palette">
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--grey-1);"></div> <div style="background-color: var(--grey-darkest);"></div>
<span>#161A1D</span> <span>#161A1D</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--grey-2);"></div> <div style="background-color: var(--grey-darker);"></div>
<span>#434D56</span> <span>#434D56</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--grey-3);"></div> <div style="background-color: var(--grey-medium);"></div>
<span>#708090</span> <span>#708090</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--grey-4);"></div> <div style="background-color: var(--grey-lighter);"></div>
<span>#A9B3BC</span> <span>#A9B3BC</span>
</div> </div>
<div class="single-color"> <div class="single-color">
<div style="background-color: var(--grey-5);"></div> <div style="background-color: var(--grey-lightest);"></div>
<span>#E2E6E9</span> <span>#E2E6E9</span>
</div> </div>
</div> </div>