diff --git a/theme/static/css/main.css b/theme/static/css/main.css index 47c7b84e4db4430cdfabbad7b3ad813f2a1e211f..1114568ad820e14ef0f3133738a3780a17b49aab 100644 --- a/theme/static/css/main.css +++ b/theme/static/css/main.css @@ -1,8 +1,8 @@ :root { --main-width: 90ch; --header-height: 6rem; - --catcard-size: 20ch; - --catcard-row-num: 3; + --card-size: 20ch; + --card-row-num: 3; --nav-height: 3rem; --text-color: #333333; --bg-color: #FFFFFF; @@ -273,8 +273,8 @@ body > .nav-container { :root { --main-width: 70ch; --header-height: 3rem; - --catcard-size: 30ch; - --catcard-row-num: 2; + --card-size: 30ch; + --card-row-num: 2; --nav-height: 3rem; } body { @@ -291,8 +291,8 @@ body > .nav-container { :root { --main-width: 60ch; --header-height: 3rem; - --catcard-size: 30ch; - --catcard-row-num: 1; + --card-size: 30ch; + --card-row-num: 1; --nav-height: 3rem; } } @@ -301,8 +301,8 @@ body > .nav-container { :root { --main-width: 50ch; --header-height: 3rem; - --catcard-size: 30ch; - --catcard-row-num: 1; + --card-size: 30ch; + --card-row-num: 1; --nav-height: 3rem; } } @@ -311,8 +311,8 @@ body > .nav-container { :root { --main-width: 40ch; --header-height: 3rem; - --catcard-size: 35ch; - --catcard-row-num: 1; + --card-size: 35ch; + --card-row-num: 1; --nav-height: 3rem; } } @@ -341,36 +341,36 @@ main iframe { min-height: var(--main-width); } -.catcards { +.cards { display: grid; - grid-template-columns: repeat(var(--catcard-row-num), var(--catcard-size)); - /* grid-auto-rows: var(--catcard-size); */ - grid-auto-rows: var(--catcard-size); + grid-template-columns: repeat(var(--card-row-num), var(--card-size)); + /* grid-auto-rows: var(--card-size); */ + grid-auto-rows: var(--card-size); /*justify-content: space-between; */ column-gap: 0.2rem; row-gap: 0.2rem; } -.catcards li { +.cards li { display: inline-block; list-style-type: none; /* font-size: 125%; */ } -.catcards li a { +.cards li a { display: inline-block; width: calc(100% - 1.3rem ); height: calc(100% - 1.3rem ); padding: 0.5rem; transition: all 0.2s; /* padding: 1rem; */ - /*width: var(--catcard-size); - height: var(--catcard-size);*/ + /*width: var(--card-size); + height: var(--card-size);*/ color: var(--category-contrast-color); background-color: var(--category-color); /* text-align: center; */ border: 0.2rem solid var(--category-color); } -.catcards li a:hover { +.cards li a:hover { background-color: var(--category-contrast-color); color: var(--category-color); }