Tweak css and add switch for dark and light mode

1 files changed, 150 insertions, 0 deletions

diff --git a/static/css/general_style.css b/static/css/general_style.css
new file mode 100644
index 0000000..e49edb7
--- /dev/null
+++ b/static/css/general_style.css
@@ -0,0 +1,150 @@
+:root {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: larger;
+}
+
+body {
+  max-width: 50em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.5em;
+  text-align: center;
+}
+
+a{
+  text-decoration: none;
+}
+
+/* switch */
+/* slider container */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 2rem;
+  height: 1rem;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* slider dimentions */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position:absolute;
+  content: "";
+  height: 0.8em;
+  width: 0.8em;
+  left: 0.1em;
+  bottom: 0.1em;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+/* slider movement on click */
+.switch input:checked + .slider:before {
+  -webkit-transform: translateX(0.9em);
+  -ms-transform: translateX(0.9em);
+  transform: translateX(0.9em);
+}
+
+/* slider container */
+.slider.round {
+  border-radius: 1em;
+}
+
+/* slider */
+.slider.round:before {
+  border-radius: 1em;
+}
+
+/* menu bar (header) */
+header {
+  margin-top: 1em;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.menubar {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+.menubar li {
+  display: block;
+  float: left;
+  min-width: 2em;
+  max-width: 10em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+}
+
+.menubar ul {
+  visibility: hidden;
+  position: absolute;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  margin-left: -2.6em;
+  min-width: 2em;
+  max-width: 10em;
+}
+
+.menubar li:hover ul {
+  visibility: visible;
+}
+
+/* keep subitmes as list */
+.menubar li ul li{
+  float: none;
+  margin-top: 0.4em;
+}
+
+/* separation from icon */
+.menubar span {
+  padding-left: 0.4em;
+}
+
+/* footer */
+footer {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+/* image gallery (not really being used rn) */
+div.gallery {
+  margin: 5px;
+  border: 1px solid;
+  float: left;
+  width: 180px;
+}
+
+div.gallery img {
+  width: 100%;
+  height: auto;
+}
+
+div.desc {
+  padding: 15px;
+  text-align: center;
+}