diff --git a/assets/css/main.css b/assets/css/main.css
index 609c4c5..b9e520c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -17,11 +17,21 @@
:root {
--bulma-panel-radius: 0px;
}
+
body {
font-family: "Kanit", sans-serif;
- font-weight: 400;
- font-style: normal;
- color: #eff8e2;
+}
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+ :root {
+ --bulma-scheme-main: #eff8e2;
+ --bulma-scheme-main-inverted: #23022e;
+ --bulma-scheme-secondary: #573280;
+ --bulma-scheme-secondary-inverted: #eff8e2;
+ --bulma-scheme-light: #cecfc7;
+ --bulma-scheme-light-inverted: #23022e;
+ }
}
.half-size {
@@ -41,13 +51,21 @@ body {
.hero.is-gnous {
background-color: #573280;
- color: #eff8e2;
}
.is-size-big {
font-size: 5rem;
}
+.hero.is-gnous.noise .content h1,
+.hero.is-gnous.noise .content h2,
+.media-content > .title,
+.panel-block {
+ color: #eff8e2;
+}
+.input {
+ --bulma-input-placeholder-color: #eff8e2;
+}
.navbar {
--bulma-navbar-burger-color: #eff8e2;
--bulma-navbar-background-color: #23022e;
@@ -205,7 +223,6 @@ body {
/* CARD */
.card {
- --bulma-card-radius: 10px;
--bulma-card-item-border: 0px solid black;
box-shadow: 10px 10px 0px -5px #cecfc7;
transition: 0.5s;
@@ -217,6 +234,14 @@ body {
.card:hover {
box-shadow: 13px 13px 0px -5px #eff8e2;
}
+@media (prefers-color-scheme: light) {
+ .card.is-gnous {
+ box-shadow: 10px 10px 0px -5px #573280;
+ }
+ .card.is-gnous:hover {
+ box-shadow: 13px 13px 0px -5px #573280;
+ }
+}
.card.is-gnous .card-footer {
border: 0px;
diff --git a/index.html b/index.html
index 8c4ca14..33b6c7c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GnousEU</title>
- <link rel="stylesheet" href="assets/bootstrap.min.css" />
+ <link
+ href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
+ rel="stylesheet"
+ />
+
<link rel="stylesheet" href="assets/css/main.css" />
<meta
@@ -43,13 +47,9 @@
type="image/x-icon"
/>
- <link
- href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
- rel="stylesheet"
- />
- <link href="assets/css/colors.css" rel="stylesheet" />
+
</head>
- <body class="">
+ <body>
<!-- Hero -->
<div class="hero is-halfheight is-gnous noise">
<div class="hero-head">