loredarchives/LoredMarkdown
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

fix(front): 🐛 aligning items better

Browse Source
This commit is contained in:
sxpphickat
2023-12-06 09:35:07 -03:00
parent edd8c7edd1
commit 9d17f06732
2 changed files with 94 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
index.html
View File

@@ -15,73 +15,70 @@
<div class="banner">
</div>
<div class="options">
<h1>Lored's Markdown</h1>
<form class="options-grid-container">
<input class="txt-input" type="text" id="title" name="banner-title" placeholder="Title">
<input class="txt-input" type="text" id="subtitle" name="banner-subtitle" placeholder="Subtitle">
<input class="txt-input" type="url" id="bg-img-link" name="bg-img-link" placeholder="Background Image link">
<input class="txt-input" type="url" id="icon" name="icon" placeholder="Icon name or link">
<div class="style-layout">
<label for="layout">Layout</label>
<select class="txt-input" name="layout" id="layout">
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
</div>
<div class="style-layout">
<label for="bg-color">Background</label>
<input type="color" id="bg-color" name="bg-color">
</div>
<div class="center-txt-vertically span-2" >
<input type="checkbox" id="rtl" name="rtl">
<label for="rtl">Right-to-left</label>
</div>
<input class="txt-input span-2" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
<div class="list-of-items">
<label for="show-info">Show info:</label>
<div class="center-txt-vertically">
<input type="checkbox" id="issues" value="issues" name="show-info">
<label for="issues">Issues</label><br>
<div class="centralize-verticaly">
<div class="options">
<h1>Lored's Markdown</h1>
<form class="options-grid-container">
<input class="txt-input" type="text" id="title" name="banner-title" placeholder="Title">
<input class="txt-input" type="text" id="subtitle" name="banner-subtitle" placeholder="Subtitle">
<input class="txt-input" type="url" id="icon" name="icon" placeholder="Icon name or link">
<input class="txt-input" type="url" id="bg-img-link" name="bg-img-link" placeholder="Background Image link">
<div class="style-layout">
<label for="layout">Layout</label>
<select class="txt-input" name="layout" id="layout">
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
<div class="center-txt-vertically">
<input type="checkbox" id="rtl" name="rtl">
<label for="rtl">Right-to-left</label>
</div>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="prs" value="prs" name="show-info">
<label for="prs">Pull requests</label><br>
<div class="style-layout">
<label for="bg-color">Background</label>
<input type="color" id="bg-color" name="bg-color">
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="contributors" value="contributors" name="show-info">
<label for="contributors">Contributors</label><br>
<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
<div class="list-of-items">
<label for="show-info">Show info:</label>
<div class="center-txt-vertically">
<input type="checkbox" id="issues" value="issues" name="show-info">
<label for="issues">Issues</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="prs" value="prs" name="show-info">
<label for="prs">Pull requests</label><br>
</div>
<div class="center-txt-vertically">
<input type="checkbox" id="contributors" value="contributors" name="show-info">
<label for="contributors">Contributors</label><br>
</div>
<br>
</div>
<br>
</div>
<div class="list-of-items">
<label for="deco">Event decoration:</label>
<div class="center-txt-vertically">
<input type="radio" id="halloween" value="halloween" name="deco">
<label for="halloween">Halloween</label><br>
<div class="list-of-items">
<label for="deco">Event decoration:</label>
<div class="center-txt-vertically">
<input type="radio" id="halloween" value="halloween" name="deco">
<label for="halloween">Halloween</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="christmas" value="christmas" name="deco">
<label for="christmas">Christmas</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="easter" value="easter" name="deco">
<label for="easter">Easter</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="pride" value="pride" name="deco">
<label for="pride">Pride month</label><br>
</div>
</div>
<div class="center-txt-vertically">
<input type="radio" id="christmas" value="christmas" name="deco">
<label for="christmas">Christmas</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="easter" value="easter" name="deco">
<label for="easter">Easter</label><br>
</div>
<div class="center-txt-vertically">
<input type="radio" id="pride" value="pride" name="deco">
<label for="pride">Pride month</label><br>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>

71
src/css/style.css
View File

@@ -4,6 +4,9 @@
--banner-color: #b1b1b1;
--banner-bgc: #000;
--options-bgc: #0a0a0a;
--border-color: #404040;
--dark-txt-color: #404040;
--light-txt-color: #ffffff;
}
html, body {
@@ -38,20 +41,19 @@ body {
}
.options {
background-color: var(--options-bgc);
/* background-color: var(--options-bgc); */
color: white;
padding: 70px;
overflow: auto;
}
/* overflow: auto;
*/}
input::placeholder {
color:#404040;
color: var(--dark-txt-color);
text-shadow: none;
}
label {
color: #3c3c3c;
color: var(--dark-txt-color);
font-size: 1.5rem;
}
@@ -63,23 +65,23 @@ h1, input {
text-shadow: 0 0 5px #fff;
}
.txt-input, select {
background: #0a0a0a;
border: solid 1px #404040;
.txt-input, select, .style-layout > input[type="color"] {
background: var(--options-bgc);
border: solid 1px var(--border-color);
height: 3rem;
color: black;
border-radius: 6px;
width: 18rem;
width: 20rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.5rem;
color: #fff;
color: var(--light-txt-color);
font-weight: 400;
transition: all .2s ease-in-out;
box-sizing: border-box;
}
input:focus, select:focus {
input:focus, select:focus, .style-layout > input[type="color"]:focus {
outline: none !important;
border: solid 1px #a3a3a3 ;
box-shadow: 0px 0px 0px 4px #3f3f46;
@@ -88,13 +90,12 @@ input:focus, select:focus {
.options-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
align-items: center;
align-items: start;
row-gap: 30px;
}
#layout {
color: #404040;
width: calc(20rem + 2px);
color: var(--dark-txt-color);
}
@@ -115,6 +116,8 @@ input[type="radio"], input[type="checkbox"] {
}
/*checkbox*/
input[type="radio"]:focus, input[type="checkbox"]:focus {
border-style: none;
box-shadow: none;
@@ -148,35 +151,21 @@ label {
gap: 10px;
}
.span-2 {
.span-all {
grid-column: 1 / -1;
}
#bg-img-link {
align-self: center;
}
.style-layout {
display: grid;
gap: 15px;
}
.style-layout > input[type="color"] {
margin: 0;
background: none;
justify-self: start;
height: 3rem;
width: calc(20rem + 2px);
border-radius: 6px;
border: solid 1px #404040;
}
.style-layout > input[type="color"]:focus {
outline: none !important;
border: solid 1px #a3a3a3 ;
box-shadow: 0px 0px 0px 4px #3f3f46;
}
.container > div {
row-gap: 100 px;
.style-layout > input[type="color"] {
padding: 0;
}
@media only screen and (max-width: 800px) {
@@ -192,3 +181,11 @@ label {
overflow-x: hidden;
}
}
.centralize-verticaly {
display: grid;
align-content: center;
background-color: var(--options-bgc);
overflow: auto;
overflow-x: hidden;
}