From ede84bec249c7f24c3b56a9e522b3ff36ebb3815 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Thu, 2 Mar 2023 13:25:42 +0100 Subject: [PATCH] a very simple theme --- index.html | 1 + src/style.css | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 src/style.css diff --git a/index.html b/index.html index 16aabe8..ddd8a56 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ GDG Talk Counter +

GDG Counter Website

diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..ff254fb --- /dev/null +++ b/src/style.css @@ -0,0 +1,72 @@ +*, +*::before, +*::after { + font-family: inherit; + box-sizing: border-box; +} + +body { + margin: 0; + font-family: 'Open Sans', sans-serif; + + display: flex; + flex-direction: column; + + align-items: center; +} + +h1 { + text-align: center; + font-weight: 700; +} + +.app { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; +} + +#counter-value { + grid-column: span 2; + + place-self: center; + + font-weight: 200; + font-size: 32px; + + padding: 1rem 0; +} + +button { + /* box-shadow: 0 0 4px 0 #00000018, 0 0 32px 0 #00000010; */ + + border: 1px solid #d4d4d4; + background: linear-gradient(to bottom, #f8f8f8 0%, #f0f0f0 50%, #d8d8d8 100%); + + color: #333; + + font-size: 15px; + font-weight: 400; + + border-radius: 0.5rem; + height: 2rem; + padding: 0 1rem; + + cursor: pointer; + + transition: all 250ms ease-in-out; +} + +button:hover { + /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */ + + border: 1px solid #d0d0d0; + background: linear-gradient(to bottom, #fdfdfd 0%, #ededed 40%, #ededed 60%, #d0d0d0 100%); +} + +button:active { + /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */ + + border: 1px solid #c8c8c8; + background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 50%, #c8c8c8 100%); +}