From 82e73bdbab1b34dea10809fa47bd913c61e2fcb7 Mon Sep 17 00:00:00 2001
From: xzeldon <contact@zeldon.ru>
Date: Fri, 8 Mar 2024 13:34:24 +0300
Subject: [PATCH] fix styles

---
 public/assets/css/theme-bthree-dark.css | 323 ++++++++++++++++++------
 templates/components/card_repos.tmpl    |   6 +-
 2 files changed, 254 insertions(+), 75 deletions(-)

diff --git a/public/assets/css/theme-bthree-dark.css b/public/assets/css/theme-bthree-dark.css
index 73a2755..6f270f9 100644
--- a/public/assets/css/theme-bthree-dark.css
+++ b/public/assets/css/theme-bthree-dark.css
@@ -339,12 +339,31 @@
 }
 
 .ui.cards-column {
-  margin: -0.875em -0.5em;
+  /* margin: -0.875em -0.5em;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: center; */
+
+  display: grid;
+  justify-content: stretch;
+  row-gap: 0.5em;
+}
+
+.ui.cards > .card,
+.ui.card {
+  background: var(--color-card);
+  border: 1px solid var(--color-secondary);
+  box-shadow: none;
+  word-wrap: break-word;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  width: 100% !important;
+  margin: 0 !important;
 }
 
 /* Users/Organizations list. */
@@ -579,300 +598,460 @@
 
 .chroma .bp {
   color: var(--color-syntax-NameBuiltinPseudo);
-} /* NameBuiltinPseudo */
+}
+
+/* NameBuiltinPseudo */
 .chroma .c {
   color: var(--color-syntax-Comment);
-} /* Comment */
+}
+
+/* Comment */
 .chroma .c1 {
   color: var(--color-syntax-CommentSingle);
-} /* CommentSingle */
+}
+
+/* CommentSingle */
 .chroma .ch {
   color: var(--color-syntax-CommentHashbang);
-} /* CommentHashbang */
+}
+
+/* CommentHashbang */
 .chroma .cm {
   color: var(--color-syntax-CommentMultiline);
-} /* CommentMultiline */
+}
+
+/* CommentMultiline */
 .chroma .cp {
   color: var(--color-syntax-CommentPreproc);
-} /* CommentPreproc */
+}
+
+/* CommentPreproc */
 .chroma .cpf {
   color: var(--color-syntax-CommentPreprocFile);
-} /* CommentPreprocFile */
+}
+
+/* CommentPreprocFile */
 .chroma .cs {
   color: var(--color-syntax-CommentSpecial);
-} /* CommentSpecial */
+}
+
+/* CommentSpecial */
 .chroma .dl {
   color: var(--color-syntax-LiteralStringDelimiter);
-} /* LiteralStringDelimiter */
+}
+
+/* LiteralStringDelimiter */
 .chroma .gd {
   color: var(--color-syntax-GenericDeleted-text);
   background-color: var(--color-syntax-GenericDeleted-bg);
-} /* GenericDeleted */
+}
+
+/* GenericDeleted */
 .chroma .ge {
   color: var(--color-syntax-GenericEmph);
-} /* GenericEmph */
+}
+
+/* GenericEmph */
 .chroma .gh {
   color: var(--color-syntax-GenericHeading);
-} /* GenericHeading */
+}
+
+/* GenericHeading */
 .chroma .gi {
   color: var(--color-syntax-GenericInserted-text);
   background-color: var(--color-syntax-GenericInserted-bg);
-} /* GenericInserted */
+}
+
+/* GenericInserted */
 .chroma .go {
   color: var(--color-syntax-GenericOutput);
-} /* GenericOutput */
+}
+
+/* GenericOutput */
 .chroma .gp {
   color: var(--color-syntax-GenericPrompt);
-} /* GenericPrompt */
+}
+
+/* GenericPrompt */
 .chroma .gr {
   color: var(--color-syntax-GenericError);
-} /* GenericError */
+}
+
+/* GenericError */
 .chroma .gs {
   color: var(--color-syntax-GenericStrong);
-} /* GenericStrong */
+}
+
+/* GenericStrong */
 .chroma .gt {
   color: var(--color-syntax-GenericTraceback);
-} /* GenericTraceback */
+}
+
+/* GenericTraceback */
 .chroma .gu {
   color: var(--color-syntax-GenericSubheading);
-} /* GenericSubheading */
+}
+
+/* GenericSubheading */
 .chroma .hl {
   background-color: var(--color-syntax-LineHighlight);
-} /* LineHighlight */
+}
+
+/* LineHighlight */
 .chroma .il {
   color: var(--color-syntax-LiteralNumberIntegerLong);
-} /* LiteralNumberIntegerLong */
+}
+
+/* LiteralNumberIntegerLong */
 .chroma .k {
   color: var(--color-syntax-Keyword);
-} /* Keyword */
+}
+
+/* Keyword */
 .chroma .kc {
   color: var(--color-syntax-KeywordConstant);
-} /* KeywordConstant */
+}
+
+/* KeywordConstant */
 .chroma .kd {
   color: var(--color-syntax-KeywordDeclaration);
-} /* KeywordDeclaration */
+}
+
+/* KeywordDeclaration */
 .chroma .kn {
   color: var(--color-syntax-KeywordNamespace);
-} /* KeywordNamespace */
+}
+
+/* KeywordNamespace */
 .chroma .kp {
   color: var(--color-syntax-KeywordPseudo);
-} /* KeywordPseudo */
+}
+
+/* KeywordPseudo */
 .chroma .kr {
   color: var(--color-syntax-KeywordReserved);
-} /* KeywordReserved */
+}
+
+/* KeywordReserved */
 .chroma .kt {
   color: var(--color-syntax-KeywordType);
-} /* KeywordType */
+}
+
+/* KeywordType */
 .chroma .ln {
   color: var(--color-syntax-LineNumbers);
-} /* LineNumbers */
+}
+
+/* LineNumbers */
 .chroma .lnt {
   color: var(--color-syntax-LineNumbersTable);
-} /* LineNumbersTable */
+}
+
+/* LineNumbersTable */
 .chroma .m {
   color: var(--color-syntax-LiteralNumber);
-} /* LiteralNumber */
+}
+
+/* LiteralNumber */
 .chroma .mb {
   color: var(--color-syntax-LiteralNumberBin);
-} /* LiteralNumberBin */
+}
+
+/* LiteralNumberBin */
 .chroma .mf {
   color: var(--color-syntax-LiteralNumberFloat);
-} /* LiteralNumberFloat */
+}
+
+/* LiteralNumberFloat */
 .chroma .mh {
   color: var(--color-syntax-LiteralNumberHex);
-} /* LiteralNumberHex */
+}
+
+/* LiteralNumberHex */
 .chroma .mi {
   color: var(--color-syntax-LiteralNumberInteger);
-} /* LiteralNumberInteger */
+}
+
+/* LiteralNumberInteger */
 .chroma .mo {
   color: var(--color-syntax-LiteralNumberOct);
-} /* LiteralNumberOct */
+}
+
+/* LiteralNumberOct */
 .chroma .n {
   color: var(--color-syntax-Name);
-} /* Name */
+}
+
+/* Name */
 .chroma .na {
   color: var(--color-syntax-NameAttribute);
-} /* NameAttribute */
+}
+
+/* NameAttribute */
 .chroma .nb {
   color: var(--color-syntax-NameBuiltin);
-} /* NameBuiltin */
+}
+
+/* NameBuiltin */
 .chroma .nc {
   color: var(--color-syntax-NameClass);
-} /* NameClass */
+}
+
+/* NameClass */
 .chroma .nd {
   color: var(--color-syntax-NameDecorator);
-} /* NameDecorator */
+}
+
+/* NameDecorator */
 .chroma .ne {
   color: var(--color-syntax-NameException);
-} /* NameException */
+}
+
+/* NameException */
 .chroma .nf {
   color: var(--color-syntax-NameFunction);
-} /* NameFunction */
+}
+
+/* NameFunction */
 .chroma .ni {
   color: var(--color-syntax-NameEntity);
-} /* NameEntity */
+}
+
+/* NameEntity */
 .chroma .nl {
   color: var(--color-syntax-NameLabel);
-} /* NameLabel */
+}
+
+/* NameLabel */
 .chroma .nn {
   color: var(--color-syntax-NameNamespace);
-} /* NameNamespace */
+}
+
+/* NameNamespace */
 .chroma .no {
   color: var(--color-syntax-NameConstant);
-} /* NameConstant */
+}
+
+/* NameConstant */
 .chroma .nt {
   color: var(--color-syntax-NameTag);
-} /* NameTag */
+}
+
+/* NameTag */
 .chroma .nv {
   color: var(--color-syntax-NameVariable);
-} /* NameVariable */
+}
+
+/* NameVariable */
 .chroma .nx {
   color: var(--color-syntax-NameOther);
-} /* NameOther */
+}
+
+/* NameOther */
 .chroma .o {
   color: var(--color-syntax-Operator);
-} /* Operator */
+}
+
+/* Operator */
 .chroma .ow {
   color: var(--color-syntax-OperatorWord);
-} /* OperatorWord */
+}
+
+/* OperatorWord */
 .chroma .p {
   color: var(--color-syntax-Punctuation);
-} /* Punctuation */
+}
+
+/* Punctuation */
 .chroma .s {
   color: var(--color-syntax-LiteralString);
-} /* LiteralString */
+}
+
+/* LiteralString */
 .chroma .s1 {
   color: var(--color-syntax-LiteralStringSingle);
-} /* LiteralStringSingle */
+}
+
+/* LiteralStringSingle */
 .chroma .s2 {
   color: var(--color-syntax-LiteralStringDouble);
-} /* LiteralStringDouble */
+}
+
+/* LiteralStringDouble */
 .chroma .sa {
   color: var(--color-syntax-LiteralStringAffix);
-} /* LiteralStringAffix */
+}
+
+/* LiteralStringAffix */
 .chroma .sb {
   color: var(--color-syntax-LiteralStringBacktick);
-} /* LiteralStringBacktick */
+}
+
+/* LiteralStringBacktick */
 .chroma .sc {
   color: var(--color-syntax-LiteralStringChar);
-} /* LiteralStringChar */
+}
+
+/* LiteralStringChar */
 .chroma .sd {
   color: var(--color-syntax-LiteralStringDoc);
-} /* LiteralStringDoc */
+}
+
+/* LiteralStringDoc */
 .chroma .se {
   color: var(--color-syntax-LiteralStringEscape);
-} /* LiteralStringEscape */
+}
+
+/* LiteralStringEscape */
 .chroma .sh {
   color: var(--color-syntax-LiteralStringHeredoc);
-} /* LiteralStringHeredoc */
+}
+
+/* LiteralStringHeredoc */
 .chroma .si {
   color: var(--color-syntax-LiteralStringInterpol);
-} /* LiteralStringInterpol */
+}
+
+/* LiteralStringInterpol */
 .chroma .sr {
   color: var(--color-syntax-LiteralStringRegex);
-} /* LiteralStringRegex */
+}
+
+/* LiteralStringRegex */
 .chroma .ss {
   color: var(--color-syntax-LiteralStringSymbol);
-} /* LiteralStringSymbol */
+}
+
+/* LiteralStringSymbol */
 .chroma .sx {
   color: var(--color-syntax-LiteralStringOther);
-} /* LiteralStringOther */
+}
+
+/* LiteralStringOther */
 .chroma .vc {
   color: var(--color-syntax-NameVariableClass);
-} /* NameVariableClass */
+}
+
+/* NameVariableClass */
 .chroma .vg {
   color: var(--color-syntax-NameVariableGlobal);
-} /* NameVariableGlobal */
+}
+
+/* NameVariableGlobal */
 .chroma .vi {
   color: var(--color-syntax-NameVariableInstance);
-} /* NameVariableInstance */
+}
+
+/* NameVariableInstance */
 .chroma .w {
   color: var(--color-syntax-TextWhitespace);
-} /* TextWhitespace */
+}
+
+/* TextWhitespace */
 
 /* From web_src/less/codemirror/dark.less */
 .CodeMirror.cm-s-default .cm-property,
 .CodeMirror.cm-s-paper .cm-property {
   color: #a0cc75;
 }
+
 .CodeMirror.cm-s-default .cm-header,
 .CodeMirror.cm-s-paper .cm-header {
   color: #9daccc;
 }
+
 .CodeMirror.cm-s-default .cm-quote,
 .CodeMirror.cm-s-paper .cm-quote {
   color: #009900;
 }
+
 .CodeMirror.cm-s-default .cm-keyword,
 .CodeMirror.cm-s-paper .cm-keyword {
   color: #cc8a61;
 }
+
 .CodeMirror.cm-s-default .cm-atom,
 .CodeMirror.cm-s-paper .cm-atom {
   color: #ef5e77;
 }
+
 .CodeMirror.cm-s-default .cm-number,
 .CodeMirror.cm-s-paper .cm-number {
   color: #ff5656;
 }
+
 .CodeMirror.cm-s-default .cm-def,
 .CodeMirror.cm-s-paper .cm-def {
   color: #e4e4e4;
 }
+
 .CodeMirror.cm-s-default .cm-variable-2,
 .CodeMirror.cm-s-paper .cm-variable-2 {
   color: #00bdbf;
 }
+
 .CodeMirror.cm-s-default .cm-variable-3,
 .CodeMirror.cm-s-paper .cm-variable-3 {
   color: #008855;
 }
+
 .CodeMirror.cm-s-default .cm-comment,
 .CodeMirror.cm-s-paper .cm-comment {
   color: #8e9ab3;
 }
+
 .CodeMirror.cm-s-default .cm-string,
 .CodeMirror.cm-s-paper .cm-string {
   color: #a77272;
 }
+
 .CodeMirror.cm-s-default .cm-string-2,
 .CodeMirror.cm-s-paper .cm-string-2 {
   color: #ff5500;
 }
+
 .CodeMirror.cm-s-default .cm-meta,
 .CodeMirror.cm-s-default .cm-qualifier,
 .CodeMirror.cm-s-paper .cm-meta,
 .CodeMirror.cm-s-paper .cm-qualifier {
   color: #ffb176;
 }
+
 .CodeMirror.cm-s-default .cm-builtin,
 .CodeMirror.cm-s-paper .cm-builtin {
   color: #b7c951;
 }
+
 .CodeMirror.cm-s-default .cm-bracket,
 .CodeMirror.cm-s-paper .cm-bracket {
   color: #999977;
 }
+
 .CodeMirror.cm-s-default .cm-tag,
 .CodeMirror.cm-s-paper .cm-tag {
   color: #f1d273;
 }
+
 .CodeMirror.cm-s-default .cm-attribute,
 .CodeMirror.cm-s-paper .cm-attribute {
   color: #bfcc70;
 }
+
 .CodeMirror.cm-s-default .cm-hr,
 .CodeMirror.cm-s-paper .cm-hr {
   color: #999999;
 }
+
 .CodeMirror.cm-s-default .cm-url,
 .CodeMirror.cm-s-paper .cm-url {
   color: #c5cfd0;
 }
+
 .CodeMirror.cm-s-default .cm-link,
 .CodeMirror.cm-s-paper .cm-link {
   color: #d8c792;
 }
+
 .CodeMirror.cm-s-default .cm-error,
 .CodeMirror.cm-s-paper .cm-error {
   color: #dbdbeb;
diff --git a/templates/components/card_repos.tmpl b/templates/components/card_repos.tmpl
index aa78a45..0f4b1e0 100644
--- a/templates/components/card_repos.tmpl
+++ b/templates/components/card_repos.tmpl
@@ -1,5 +1,5 @@
 <div class="ui cards-column stackable">
-  <div class="ui card" style="width: 100%; margin: 0.5rem;">
+  <div class="ui card">
     <div class="content">
       <a href="{{AppSubUrl}}/zeldon/mineping">
         <h3>Mineping</h3>
@@ -10,7 +10,7 @@
     </div>
   </div>
 
-  <div class="ui card" style="width: 100%; margin: 0.5rem;">
+  <div class="ui card">
     <div class="content">
       <a href="{{AppSubUrl}}/zeldon/zeldon-site">
         <h3>Website</h3>
@@ -21,7 +21,7 @@
     </div>
   </div>
 
-  <div class="ui card" style="width: 100%; margin: 0.5rem;">
+  <div class="ui card">
     <div class="content">
       <a href="{{AppSubUrl}}/zeldon/http-proxy-server">
         <h3>http-proxy-server</h3>