From 68321bd51126f8030fa9ff7271da5e9d58dfb8af Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 20 Jun 2024 15:37:23 +0200
Subject: [PATCH] adjusted village buttons for smartphone use
---
static/style.css | 33 ++++++++++++++++++++++++++++-----
wiki/layout.html | 2 +-
2 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/static/style.css b/static/style.css
index f1686e38..c7e3f765 100644
--- a/static/style.css
+++ b/static/style.css
@@ -35,6 +35,9 @@ body {
html:focus-within {
scroll-behavior: smooth;
}
+.row{
+ max-width: 100%;
+}
.contrast-mode {
@@ -248,7 +251,7 @@ svg{
background:transparent
}
svg text{
- font-size: 4rem;
+ font-size: 7vw;
stroke-width:2px;
fill:var(--highlight);
stroke:var(--darkpurple);
@@ -399,10 +402,9 @@ a:hover { color: var(--highlight); text-decoration: underline; }
box-shadow: 5px 5px 15px gray;
border-radius: 2rem;
padding: 0 !important;
- max-width: 110px;
- max-height: 140px;
- margin-left: 10px;
- margin-right: 10px;
+ max-width: 12%;
+ aspect-ratio: 2 / 3;
+ margin-left: 1vw;
}
.village-style-button:hover{
box-shadow: 5px 5px 15px black;
@@ -508,6 +510,27 @@ a:hover { color: var(--highlight); text-decoration: underline; }
[class*="col-"] {
width: 100%;
}
+ svg text{
+ font-size: 9vw;
+ stroke-width:1px;
+ }
+ .village-style-button h3{
+ display: none !important;
+ }
+ .village-style-button{
+ box-shadow: 1px 1px 1px gray;
+ border-radius: 10px;
+ border-color: black;
+ }
+ .village-style-button:hover{
+ box-shadow: none;
+ }
+ .village-style-button img{
+ max-width: 90%;
+ max-height: 90%;
+ padding-top: 10px;
+ padding-bottom: 5px;
+ }
}
/*Bigger than smartphones*/
@media only screen and (min-width: 768px) {
diff --git a/wiki/layout.html b/wiki/layout.html
index eb20ab48..b6600efa 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -45,7 +45,7 @@
{% block header %}{% endblock %}
<!-- Page Content -->
<div class="container-fluid">
- <div class="row mt-5">
+ <div class="row ">
<div class="col-2 d-none d-lg-block">
<div class="sticky-top" style="top: 80px; overflow-wrap: break-word;">
--
GitLab