aboutsummaryrefslogtreecommitdiff
path: root/public/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/main.css')
-rw-r--r--public/main.css46
1 files changed, 20 insertions, 26 deletions
diff --git a/public/main.css b/public/main.css
index 4b9a933..6f2c44e 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,16 +1,15 @@
/* Constants */
:root {
- --color-green: #22a200;
- --color-header: var(--color-green);
- --color-title: var(--color-green);
- --color-border: #bebebe;
--color-light-background: #eee;
+ --color-light-foreground: #282828;
--color-link: #0377bb;
+ --color-border: #dadada;
--font-size-cat: 0.75rem;
--font-size-dog: 1rem;
+ --font-size-bigdog: 1.125rem;
--font-size-lion: 1.25rem;
--font-size-bear: 1.5rem;
--font-size-cow: 1.75rem;
@@ -49,7 +48,7 @@
body {
margin: 0;
line-height: var(--font-size-bear);
- font-family: sans-serif;
+ font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: calc(800px - var(--spacing-dog));
margin: 0 auto;
}
@@ -58,22 +57,14 @@ body {
header {
display: flex;
- background-color: var(--color-header);
- color: white;
- margin-bottom: var(--spacing-horse);
+ font-weight: lighter;
+ text-align: center;
padding: var(--spacing-dog);
- font-size: var(--font-size-lion);
+ font-size: var(--font-size-dog);
display: flex;
justify-content: center;
}
-@media screen and (min-width: 800px) {
- header {
- border-bottom-left-radius: var(--border-radius-bee);
- border-bottom-right-radius: var(--border-radius-bee);
- }
-}
-
/* Main */
@media screen and (max-width: 799px) {
@@ -113,7 +104,7 @@ section {
img:not(.contact) {
border: solid 1px var(--color-border);
border-radius: var(--border-radius-mouse);
- margin-bottom: var(--spacing-dog);
+ margin-bottom: var(--spacing-mouse);
width: 100%;
max-width: 800px;
}
@@ -121,10 +112,10 @@ img:not(.contact) {
/* Title */
h1 {
- color: var(--color-title);
- font-size: var(--font-size-lion);
- font-weight: bold;
- border-bottom: 0.1rem solid var(--color-title);
+ font-size: var(--font-size-bigdog);
+ text-align: center;
+ padding-bottom: var(--spacing-cat);
+ border-bottom: 2px dashed var(--color-border);
margin: 0 0 var(--spacing-horse);
}
@@ -136,8 +127,8 @@ h2 {
display: inline-block;
font-size: var(--font-size-lion);
margin: 0;
- font-weight: bold;
- margin: 0 0 var(--spacing-dog);
+ font-weight: normal;
+ margin: 0 0 var(--spacing-cat);
}
.subtitle {
@@ -162,7 +153,7 @@ a {
}
a:hover {
- filter: brightness(150%);
+ filter: brightness(130%);
}
/* Lists */
@@ -207,9 +198,12 @@ ul.technos {
ul.technos > li {
background-color: var(--color-light-background);
border-radius: var(--border-radius-bee);
- padding: 0 var(--spacing-cat);
- font-size: var(--font-size-cat);
+ padding: 0 var(--spacing-mouse);
+ font-size: 0.6rem;
line-height: var(--font-size-lion);
+ border: 1px solid var(--color-border);
+ text-transform: lowercase;
+ color: var(--color-light-foreground);
}
/* Project footer */