move styles
Diff
README.md | 19 ++++++++++++++++++-
_layouts/default.html | 163 +++++++-------------------------------------------------------------------------
_layouts/page.html | 11 +++++++++++
assets/style.css | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 185 insertions(+), 158 deletions(-)
@@ -1,7 +1,24 @@
---
layout: page
title: About
permalink: /about/
---
TODO: This is both the readme and the /about/ page.
General Elections are soon coming up. Bangalore’s Migrant population is
[dramatically under-represented][missing-voters]
in the voting demographic. This website is an attempt to fix this.
#### Credits
- The BBMP constituency map used comes from the [OpenCity project](https://data.opencity.in/dataset/bbmp-wards-delimitation-2023).
- The design uses [PaperCSS](https://www.getpapercss.com/) under the ISC License.
- The code was hurriedly written using help from ChatGPT.
- The website is hosted on Netlify, and built using Jekyll.
- The list of wards was directly scraped from the ECI Website using their API.
#### Contribute
- Share the site with your friends and family.
- Contributions are welcome [on GitHub](https://github.com/blrvote/blr.vote)
[missing-voters]: https://www.thehindu.com/data/data-30-crore-missing-voters-in-india-mostly-young-urban-or-migrants/article66485421.ece
@@ -1,170 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BLR Vote</title>
<link rel="stylesheet" href="https://unpkg.com/papercss/dist/paper.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<link rel="stylesheet" href="https://unpkg.com/papercss/dist/paper.min.css">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@500;700&display=swap" rel="stylesheet">
<style type="text/css">
.container {
max-width: 400px; /* Width of the mobile-like layout */
margin: 0 auto; /* Center the container */
background-color: #fff; /* Background color for the container */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow for better focus */
}
.section {
display: none;
}
.section.active {
display: block;
}
.margin-top-bottom {
margin-top: 1rem;
margin-bottom: 1rem;
}
.margin-top-2 {
margin-top: 2rem;
}
/* Branding CSS for blr.vote */
/* Color Palette */
:root {
--democracy-blue: #1947D1;
--voter-white: #FFFFFF;
--indian-saffron: #FF9933;
--regal-purple: #512DA8;
--slate-gray: #607D8B;
}
/* Branding CSS for blr.vote */
/* Color Palette */
:root {
--ashoka-blue: #1947D1; /* Blue of the Ashoka Chakra */
--voter-white: #FFFFFF;
--neutral-gray: #607D8B;
}
body {
font-family: 'Libre Franklin', sans-serif;
font-size: 18px; /* Example font size */
line-height: 1.5; /* This is 1.5 times the font size */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Libre Franklin', sans-serif;
}
a, button, html, input, li, option, p, select, table, tbody, td, textarea, th, thead, tr {
font-family: 'Libre Franklin', sans-serif;
line-height: 1.5; /* This is 1.5 times the font size */
}
/* Navbar Styles */
.navbar {
background-color: var(--ashoka-blue);
color: var(--voter-white);
}
.navbar button {
background-color: var(--voter-white);
color: var(--ashoka-blue);
}
button, .prev-button {
background-color: var(--neutral-gray);
}
.navbar button:hover {
background-color: var(--neutral-gray);
color: var(--voter-white);
}
/* Button Styles */
button, .btn, .btn-primary {
background-color: var(--ashoka-blue);
color: var(--voter-white);
}
.card-margin {
margin: 1rem;
}
button:hover, .btn:hover, .btn-primary:hover {
background-color: var(--neutral-gray);
color: var(--voter-white);
}
/* Footer Styles */
footer {
text-align: center;
padding: 20px;
background-color: #f2f2f2;
color: #000;
font-size: 16px;
}
/* Custom Styles */
.heart {
color: red;
}
.flag {
font-size: 20px;
}
/* We don't like the paper shadow effect, since it creates jitter */
.card {
width: 90%;
margin: 1rem;
box-shadow: none !important;
}
.card:hover {
transform: none ! important;
box-shadow: none !important;
}
input:invalid {
background-color: ivory;
border: none;
outline: 2px solid red;
border-radius: 5px;
}
#map {
height: 400px;
width: 100%;
}
#addressInput {
width: 100%;
margin-bottom: 10px;
}
.custom-control {
background: #fff;
border: 1px solid #ccc;
padding: 8px;
cursor: pointer;
}
.custom-control img {
width: 20px;
height: 20px;
}
.card .card-body .card-link+.card-link, .card .card-body a+a {
margin-left: 0;
}
</style>
<script defer data-domain="blr.vote" src="https://plausible.io/js/script.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<script defer data-domain="blr.vote" src="https://plausible.io/js/script.js"></script>
</head>
<body>
<div class="container">
@@ -173,7 +21,7 @@
<div class="navbar-container">
<nav class="border split-nav">
<div class="nav-brand">
<h3><a href="/">🇮🇳 BLR Vote</a></h3>
<h3><a href="/" style="text-decoration: none;border-bottom:none;padding-bottom:0px">🇮🇳 BLR Vote</a></h3>
</div>
</nav>
</div>
@@ -184,6 +32,7 @@
<footer class='margin-top-2'>
<p>Made with <span class="heart">❤️</span> for <span class="flag">🇮🇳</span> by <a href="https://tatooine.club/@nemo" target="_blank">Nemo</a> and <a href="https://twitter.com/shreyas_satish">Shreyas</a></p>
<p><a href="/about/">About</a> | <a href="/about/#credits">Credits</a> | <a href="/faq/">FAQ</a></p>
</footer>
</div>
@@ -1,0 +1,11 @@
---
layout: default
---
<div class="card">
<div class="card-body">
<h4 class="card-title">{{page.title}}</h4>
<div class="card-text">
{{content}}
</p>
</div>
</div>
@@ -1,0 +1,150 @@
.container {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.section {
display: none;
}
.section.active {
display: block;
}
.margin-top-bottom {
margin-top: 1rem;
margin-bottom: 1rem;
}
.margin-top-2 {
margin-top: 2rem;
}
:root {
--democracy-blue: #1947D1;
--voter-white: #FFFFFF;
--indian-saffron: #FF9933;
--regal-purple: #512DA8;
--slate-gray: #607D8B;
}
:root {
--ashoka-blue: #1947D1;
--voter-white: #FFFFFF;
--neutral-gray: #607D8B;
}
body {
font-family: 'Libre Franklin', sans-serif;
font-size: 18px;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Libre Franklin', sans-serif;
}
a, button, html, input, li, option, p, select, table, tbody, td, textarea, th, thead, tr {
font-family: 'Libre Franklin', sans-serif;
line-height: 1.5;
}
.navbar {
background-color: var(--ashoka-blue);
color: var(--voter-white);
}
.navbar button {
background-color: var(--voter-white);
color: var(--ashoka-blue);
}
button, .prev-button {
background-color: var(--neutral-gray);
}
.navbar button:hover {
background-color: var(--neutral-gray);
color: var(--voter-white);
}
button, .btn, .btn-primary {
background-color: var(--ashoka-blue);
color: var(--voter-white);
}
.card-margin {
margin: 1rem;
}
button:hover, .btn:hover, .btn-primary:hover {
background-color: var(--neutral-gray);
color: var(--voter-white);
}
footer {
text-align: center;
padding: 20px;
background-color: #f2f2f2;
color: #000;
font-size: 16px;
}
.heart {
color: red;
}
.flag {
font-size: 20px;
}
.card {
width: 90%;
margin: 1rem;
box-shadow: none !important;
}
.card:hover {
transform: none ! important;
box-shadow: none !important;
}
input:invalid {
background-color: ivory;
border: none;
outline: 2px solid red;
border-radius: 5px;
}
#map {
height: 400px;
width: 100%;
}
#addressInput {
width: 100%;
margin-bottom: 10px;
}
.custom-control {
background: #fff;
border: 1px solid #ccc;
padding: 8px;
cursor: pointer;
}
.custom-control img {
width: 20px;
height: 20px;
}
.card .card-body .card-link+.card-link, .card .card-body a+a {
margin-left: 0;
}