Skip to content

Commit

Permalink
fix smaller things
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonas Duri committed Dec 7, 2023
1 parent a6444e7 commit 4d16082
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 91 deletions.
80 changes: 63 additions & 17 deletions lib/terminal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,6 @@ ul,
h1,
.logo {
position: relative;
display: inline-block;
display: table-cell;
padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
margin: 0;
overflow: hidden;
Expand Down Expand Up @@ -142,7 +140,6 @@ h6 {
blockquote {
position: relative;
padding-left: calc(var(--global-space) * 2);
padding-left: 2ch;
overflow: hidden;
}

Expand Down Expand Up @@ -499,8 +496,10 @@ table th {
font-size: 1em;
}

table thead th {
table thead tr th {
font-size: 1em;
vertical-align: middle;
font-weight: 700;
}

table tfoot tr th {
Expand All @@ -512,11 +511,6 @@ table caption {
margin: 0 0 1em;
}

table tbody td:first-child {
font-weight: 700;
color: var(--secondary-color);
}

.form {
width: 100%;
}
Expand All @@ -535,12 +529,20 @@ input[type="email"],
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"] {
input[type="search"],
input[type="date"],
input[type="time"] {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: 0.7em 0.5em;
font-size: 1em;
font-family: var(--font-stack);

/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */

appearance: none;
border-radius: 0;
}
Expand All @@ -550,12 +552,22 @@ input[type="text"]:active,
input[type="number"]:active,
input[type="password"]:active,
input[type="search"]:active,
input[type="date"]:active,
input[type="time"]:active,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
outline: none;

/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */

appearance: none;
border: 1px solid var(--font-color);
}
Expand All @@ -564,7 +576,9 @@ input[type="text"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid,
input[type="password"]:not(:placeholder-shown):invalid,
input[type="search"]:not(:placeholder-shown):invalid,
input[type="number"]:not(:placeholder-shown):invalid {
input[type="number"]:not(:placeholder-shown):invalid,
input[type="date"]:not(:placeholder-shown):invalid,
input[type="time"]:not(:placeholder-shown):invalid {
border-color: var(--error-color);
}

Expand Down Expand Up @@ -594,6 +608,12 @@ textarea {

textarea:focus {
outline: none;

/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */

appearance: none;
border: 1px solid var(--font-color);
}
Expand All @@ -602,6 +622,26 @@ textarea:not(:placeholder-shown):invalid {
border-color: var(--error-color);
}

select {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: .7em .5em;
font-size: 1em;
font-family: var(--font-stack);
color: var(--font-color);
border-radius: 0;

/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */

background-color: var(--background-color);
background-image: url("data:image/svg+xml;utf8,<svg fill='currentColor' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: right .5em bottom .5em;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
Expand Down Expand Up @@ -813,7 +853,10 @@ select:-webkit-autofill:focus {
border-color: var(--primary-color);
}

@media screen and (width <= 960px) {
/* stylelint-disable */
@media screen and (min-width: 960px) {
/* stylelint-enable */

label {
display: block;
width: 100%;
Expand All @@ -824,13 +867,17 @@ select:-webkit-autofill:focus {
}
}

@media screen and (width <= 480px) {
/* stylelint-disable */
@media screen and (min-width: 480px) {
/* stylelint-enable */
form {
width: 100%;
}
}

@media only screen and (width >= 30em) {
/* stylelint-disable */
@media screen and (min-width: 30rem) {
/* stylelint-enable */
.terminal-nav {
flex-direction: row;
align-items: center;
Expand All @@ -844,8 +891,7 @@ select:-webkit-autofill:focus {
}

.terminal-menu li {
margin: 0;
margin-right: 2em;
margin: 0 2em 0 0;
}

.terminal-menu li:last-child {
Expand Down
12 changes: 10 additions & 2 deletions templates/partials/forms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,16 @@
</select>
</div>
<div class="form-group">
<label for="tarea">Textarea:</label>
<textarea id="tarea" cols="30" rows="5" name=="tarea">Textarea text</textarea>
<label for="event-date">Event date:</label>
<input type="date" id="event-date" name="event-date">
</div>
<div class="form-group">
<label for="event-time">Event time:</label>
<input type="time" id="event-time" name="event-time">
</div>
<div class="form-group">
<label for="textarea">Textarea:</label>
<textarea id="textarea" cols="30" rows="5" name=="textarea">Textarea text</textarea>
</div>
<div class="form-group">
<label for="submit">Input Button:</label>
Expand Down
124 changes: 52 additions & 72 deletions templates/partials/tables.html
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,54 @@
<section>
<header>
<h2 id="Tables">Tables</h2>
</header>
<table>
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">torrentfreak.com</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,250,000</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
</tr>
</tbody>
</table>
<header>
<h2 id="Tables">Tables</h2>
</header>
<table>
<caption>
Traditional colors of Japan
</caption>
<tfoot>
<tr>
<th colspan="5"><a href="https://en.wikipedia.org/wiki/Traditional_colors_of_Japan" target="_blank">Source: Wikipedia</a></th>
</tr>
</tfoot>
<tbody>
<thead>
<tr>
<th>Japanese name</th>
<th>Romanized</th>
<th>English translation</th>
<th>RGB</th>
<th>Hex triplet</th>
</tr>
</thead>
<tr>
<td>一斤染</td>
<td>Ikkonzome</td>
<td>One kin (0.6&nbsp;kg (1.3&nbsp;lb)) dye</td>
<td>240,143,144</td>
<td>#F08F90</td>
</tr>
<tr>
<td>紅梅色</td>
<td>Kōbai-iro</td>
<td>Red plum colored</td>
<td>219,90,107</td>
<td>#DB5A6B</td>
</tr>
<tr>
<td>桜色</td>
<td>Sakura-iro</td>
<td>Cherry blossom color</td>
<td>252,201,185</td>
<td>#FCC9B9</td>
</tr>
<tr>
<td>薄紅</td>
<td>Usubeni</td>
<td>Pale crimson (dye)</td>
<td>242,102,108</td>
<td>#F2666C</td>
</tr>
</tbody>
</table>
</section>

0 comments on commit 4d16082

Please sign in to comment.