schmoekerei/coverbuilder
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual improvements

Browse Source
This commit is contained in:
Marvin Scham
2021-05-02 02:40:41 +02:00
parent 50ccc0e3b1
commit a65bbeeae4
4 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
main.html
View File

@@ -23,6 +23,7 @@
</label>
</div>
<div class="block">
<h1>Cover</h1>
<div id="container">
<img src="placeholder.png" id="img" alt="Cover" />
<div id="reflection"></div>
@@ -35,7 +36,7 @@
</div>
</div>
<div id="footer">
<a href="https://marvinscham.com/">Marvin Scham</a> • 2021
<a href="https://marvinscham.com/" rel="noreferrer noopener">Marvin Scham</a> • 2021
</div>
<script src="color-thief.js"></script>
<script src="script.js"></script>

9
style.css
View File

@@ -23,18 +23,21 @@ body {
#content {
margin-top: 100px;
height: calc(100vh - 100px);
min-height: calc(100vh - 100px);
padding-top: 1rem;
}
#content div.block {
width: 800px;
max-width: calc(100vw - 8rem);
max-width: calc(100vw - 7rem);
background: white;
padding: 2rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content div.block:nth-of-type(n + 2) {
margin-top: 1rem;
}
@@ -69,7 +72,7 @@ body {
cursor: pointer;
}
#content .col:nth-child(n + 1) {
#content .col:nth-child(n + 2) {
margin-left: 4px;
}

2
style.css.map
View File

@@ -1,6 +1,6 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": [
"style.scss"
],

11
style.scss
View File

@@ -23,19 +23,22 @@ body {
#content {
margin-top: 100px;
height: calc(100vh - 100px);
min-height: calc(100vh - 100px);
padding-top: 1rem;
div.block {
width: 800px;
max-width: calc(100vw - 8rem);
max-width: calc(100vw - 7rem);
background: white;
padding: 2rem;
text-align: center;
margin: {
left: auto;
right: auto;
top: 1rem;
}
&:nth-of-type(n + 2) {
margin-top: 1rem;
}
}
@@ -68,7 +71,7 @@ body {
width: 70px;
cursor: pointer;
&:nth-child(n + 1) {
&:nth-child(n + 2) {
margin-left: 4px;
}
}