michael/procons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adds some style updates.

Browse Source
This commit is contained in:
Michael Housh
2025-01-01 15:58:35 -05:00
parent f70142834d
commit 6b3f822c9f
2 changed files with 44 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
Public/styles/site.css
View File

@@ -11,40 +11,30 @@
body { body {
background-color: #1E1E2E; background-color: #1E1E2E;
color: white; color: white;
padding: 20px;
margin: 10px; margin: 10px;
} }
p { p {
font-family: verdana; font-family: verdana;
font-size: 20px; font-size: 2em;
} }
h1 { h1 {
color: violet; color: violet;
font-size: 4em;
} }
h2 { h2 {
color: violet; color: violet;
font-size: 3em;
} }
input[type=text] { input[type=text] {
border 2px solid red; border 2px solid grey;
border-radius 4px; border-radius 4px;
margin: 8px 0;
padding: 12px 20px; padding: 12px 20px;
width: 50%; width: 100%;
box-sizing: border-box; font-size: 1.25em;
}
select {
border 2px solid violet;
background-color: blue;
border-radius: 10px;
color: white;
margin: 10px;
padding: 10px 40px;
font-size: 20px;
} }
label { label {
@@ -53,7 +43,7 @@ label {
} }
li { li {
font-size: 20px; font-size: 1.5em;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
@@ -63,19 +53,24 @@ ul {
} }
footer { footer {
position: absolute; position: sticky;
width: 100%; width: 100%;
bottom: 0px; bottom: 0px;
font-size: 1em;
} }
form { form {
position: relative; width: 98%;
padding: 40px; /* background-color: lightgrey; */
/* border: 4px solid grey; */
/* border-radius: 10px; */
margin: 10px 10px;
padding-bottom: 20px;
} }
.form-control { .form-control {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: 24px; font-size: 2em;
font-weight: bold; font-weight: bold;
line-height: 1.1; line-height: 1.1;
display: inline-block; display: inline-block;
@@ -156,13 +151,16 @@ input[type="radio"]:focus {
.container { .container {
display: flex; display: flex;
flex-flow: row wrap;
padding: 20px 10px;
gap: 10px;
} }
.flex-cnt { .flex-cnt {
flex 1 300px; flex-grow 1;
width: 50%; width: 100%;
min-height: 200px; min-height: 200px;
padding: 5px; padding: 15px 5px;
} }
.counter-container { .counter-container {
@@ -201,8 +199,7 @@ input[type="radio"]:focus {
.centered { .centered {
display: block; display: block;
align-content: center; align-content: center;
margin: auto; margin: 0;
top: 50%;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@@ -219,7 +216,7 @@ input[type="radio"]:focus {
.btn-submit { .btn-submit {
height 100px; height 100px;
width: 50%; width: 100%;
padding: 10px; padding: 10px;
font-size: 16px; font-size: 1.25em;
} }

36
Resources/Views/loggedIn.leaf
View File

@@ -10,24 +10,26 @@
<small>You can add as many pros and cons as you would like.</small> <small>You can add as many pros and cons as you would like.</small>
</p> </p>
</div> </div>
<form id="proconForm" action="submitProOrCon"> <br>
<div class="spaced-cnt"> <br>
<label class="form-control light" for="pro">
<input type="radio" id="pro" name="type" value="pro">
Pro
</label>
<label class="form-control dark" for="con">
<input type="radio" id="con" name="type" value="con">
Con
</label>
</div>
<br>
<input type="text" id="description" name="description" placeholder="Description" required>
<br>
<br>
<input class="btn btn-submit dark bg-dark light-radius" type="submit" value="Submit">
</form>
</div> </div>
<form id="proconForm" action="submitProOrCon">
<div class="centered">
<label class="form-control light" for="pro">
<input type="radio" id="pro" name="type" value="pro" checked>
Pro
</label>
<label class="form-control dark" for="con">
<input type="radio" id="con" name="type" value="con">
Con
</label>
</div>
<br>
<input type="text" id="description" name="description" placeholder="Description" required>
<br>
<br>
<input class="btn btn-submit dark bg-dark light-radius" type="submit" value="Submit">
</form>
#if(count(pros) > 0 || count(cons) > 0): #if(count(pros) > 0 || count(cons) > 0):
<div class="container"> <div class="container">
<div class="flex-cnt"> <div class="flex-cnt">