summaryrefslogtreecommitdiff
path: root/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css')
-rw-r--r--static/css/style.css41
-rw-r--r--static/css/theme.css22
2 files changed, 52 insertions, 11 deletions
diff --git a/static/css/style.css b/static/css/style.css
index 915a1f2..5a18881 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -52,6 +52,12 @@ a{
text-decoration: none;
}
+mark,
+mark * {
+ background: none;
+ animation: mark-rainbow 2s linear infinite;
+}
+
body > header,
body > footer,
main {
@@ -75,15 +81,10 @@ main.art p {
/* article/art elements */
div.article-info,
div.art-info {
- line-height: 0.3;
+ line-height: 0.5;
font-size: smaller;
}
-div.article-info > div.article-tags,
-div.art-info > div.art-tags {
- font-size: larger;
-}
-
/* nav bar / header */
body > header {
@@ -253,11 +254,6 @@ img.wrap-left {
float: left;
}
-img.qr {
- max-width: 200px;
- padding: 1em;
-}
-
/* img grid */
div.img-grid,
div.img-grid > p {
@@ -274,6 +270,26 @@ div.img-grid img {
overflow: hidden;
}
+/* crypto grid */
+div.crypto-grid {
+ display: grid;
+ gap: 1em;
+ /* the 200px corresponds tothe img qr size */
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+div.crypto-grid figure {
+ margin: 0;
+}
+
+div.crypto-grid a {
+ display: contents;
+}
+
+div.crypto-grid img.qr {
+ max-width: 140px;
+}
+
/* art grid / art gallery */
div.art-grid {
display: grid;
@@ -296,8 +312,11 @@ div.art-grid a {
div.art-grid img {
object-fit: cover;
+ width: 100%;
+ height: 100%;
}
+/* not sure if these two are needed as the one above works fine */
div.art-grid a.wide img {
width: 100%;
}
diff --git a/static/css/theme.css b/static/css/theme.css
index b3bbb18..c9b85c6 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -86,6 +86,28 @@
--pagenav-link-hl: var(--color6);
}
+/* animations */
+@keyframes mark-rainbow {
+ 0%{
+ color: var(--color11);
+ }
+ 20%{
+ color: var(--color12);
+ }
+ 40%{
+ color: var(--color13);
+ }
+ 60%{
+ color: var(--color14);
+ }
+ 80%{
+ color: var(--color15);
+ }
+ 100%{
+ color: var(--color11);
+ }
+}
+
/* general */
a {
color: var(--link);