a very simple theme

with-css
Antonio De Lucreziis 2 years ago
parent 6e98443bb9
commit ede84bec24

@ -3,6 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GDG Talk Counter</title> <title>GDG Talk Counter</title>
<link rel="stylesheet" href="/src/style.css">
</head> </head>
<body> <body>
<h1>GDG Counter Website</h1> <h1>GDG Counter Website</h1>

@ -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%);
}
Loading…
Cancel
Save