Skip to content

Commit c9fe7a4

Browse files
shravanngoswamiishravanngoswamii
committed
minor design tweaks and fixes for news and libraries page + overall improvements
1 parent fa94983 commit c9fe7a4

15 files changed

+267
-95
lines changed

‎library/index.qmd

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,6 @@
22
title: "Turing Libraries"
33
search: false
44
toc: false
5-
include-in-header:
6-
- text: |
7-
<style>
8-
/* links */
9-
a { text-decoration: none; }
10-
a:hover { text-decoration: underline; }
11-
</style>
12-
13-
<style>
14-
/* responsive wrapper */
15-
.table-responsive {
16-
overflow-x: auto;
17-
margin-bottom: 1rem;
18-
}
19-
20-
/* default (light-mode) table styling */
21-
.packages-table {
22-
width: 100%;
23-
border-collapse: collapse;
24-
background-color: #ffffff;
25-
color: #212529;
26-
}
27-
.packages-table th,
28-
.packages-table td {
29-
padding: 0.75rem 1rem;
30-
text-align: left;
31-
border-bottom: 1px solid #eee;
32-
}
33-
.packages-table thead {
34-
background-color: #f8f8f8;
35-
}
36-
.packages-table tbody tr:nth-child(odd) {
37-
background-color: #fafafa;
38-
}
39-
.packages-table tbody tr:hover {
40-
background-color: #eef9ff;
41-
}
42-
.packages-table th {
43-
font-weight: 600;
44-
}
45-
46-
/* deprecated badge */
47-
.badge.deprecated {
48-
display: inline-block;
49-
margin-left: 0.5em;
50-
padding: 0.2em 0.4em;
51-
font-size: 0.75em;
52-
font-weight: 600;
53-
color: #721c24;
54-
background-color: #f8d7da;
55-
border-radius: 0.2em;
56-
}
57-
</style>
585
listing:
596
- id: libraries-main
607
template: table.ejs

‎news/news.css

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,4 @@
88

99
.quarto-post {
1010
max-height:fit-content;
11-
}
12-
13-
.quarto-title-banner {
14-
background-color: #ffffff;
15-
}
16-
17-
/* @media (max-width: 768px) {
18-
.quarto-post {
19-
max-height: 200px;
20-
}
21-
}
22-
23-
@media (max-width: 566px) {
24-
.quarto-post {
25-
max-height: 240px;
26-
}
27-
}
28-
29-
@media (max-width: 512px) and (min-width: 310px) {
30-
.quarto-post {
31-
max-height: 260px;
32-
}
33-
}
34-
35-
@media (max-width: 310px) {
36-
.quarto-post {
37-
max-height: 300px;
38-
}
39-
} */
11+
}

‎team/team.ejs

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,8 @@
6464
<br>
6565
<% } %>
6666
<% if (member.gsoc_report) { %>
67-
<a class="external" href="<%- member.gsoc_report %>" target="_blank">Contributions & Report</a>
68-
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
69-
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
70-
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
71-
</svg> -->
72-
<br>
67+
<a class="gsoc-report" href="<%- member.gsoc_report %>" target="_blank">Contributions & Report <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5-.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a>
68+
<br>
7369
<% } %>
7470
```
7571

‎theming/rules/_forms.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.quarto-listing-sort, .quarto-listing-filter {
2+
.input-group-text {
3+
background-color: $background-body;
4+
border-color: $btn-border-color;
5+
color: $text-muted;
6+
}
7+
8+
.form-select, .form-control {
9+
background-color: $background-body;
10+
border-color: $btn-border-color;
11+
color: $text-color;
12+
13+
&:focus {
14+
border-color: $links;
15+
box-shadow: 0 0 0 0.25rem rgba($links, 0.25);
16+
background-color: $background-body;
17+
color: $text-color;
18+
}
19+
}
20+
21+
.form-select {
22+
background-image: $form-select-bg-image;
23+
}
24+
}

‎theming/rules/_hoverables-dark.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
border-color 0.3s ease;
99
box-shadow: 0 5px 20px darken($box-shadow-color, 30%);
1010
background-color: $panel-bg;
11-
border: 2px solid $btn-border-color;
11+
border: 1px solid $btn-border-color;
1212

1313
&:hover {
1414
transform: translateY(-5px);

‎theming/rules/_hoverables-light.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
border-color 0.3s ease;
99
box-shadow: 0 5px 20px darken($box-shadow-color, 30%);
1010
background-color: $panel-bg;
11-
border: 2px solid $btn-border-color;
11+
border: 1px solid $btn-border-color;
1212

1313
&:hover {
1414
transform: translateY(-5px);

‎theming/rules/_library.scss

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.packages-table {
2+
width: 100%;
3+
border-collapse: collapse;
4+
background-color: $panel-bg;
5+
color: $text-color;
6+
7+
th,
8+
td {
9+
padding: 0.75rem 1rem;
10+
text-align: left;
11+
border-bottom: 1px solid $btn-border-color;
12+
}
13+
14+
thead {
15+
background-color: $background-body;
16+
}
17+
18+
tbody tr:nth-child(odd) {
19+
background-color: lighten($background-body, 1%);
20+
}
21+
22+
@media (min-width: 769px) {
23+
tbody tr:hover {
24+
background-color: if(lightness($panel-bg) > 50, darken($panel-bg, 4%), lighten($panel-bg, 5%));
25+
}
26+
}
27+
28+
th {
29+
font-weight: 600;
30+
}
31+
32+
.badge.deprecated {
33+
display: inline-block;
34+
margin-left: 0.5em;
35+
padding: 0.2em 0.4em;
36+
font-size: 0.75em;
37+
font-weight: 600;
38+
border-radius: 0.2em;
39+
color: $deprecated-fg;
40+
background-color: $deprecated-bg;
41+
}
42+
}
43+
44+
@media (max-width: 768px) {
45+
.packages-table {
46+
background-color: transparent;
47+
border: none;
48+
box-shadow: none;
49+
50+
thead {
51+
display: none;
52+
}
53+
54+
tr:nth-child(odd) {
55+
background-color: lighten($background-body, 1%);
56+
}
57+
58+
tr {
59+
display: block;
60+
margin-bottom: 1rem;
61+
border: 2px solid $btn-border-color;
62+
border-radius: $border-radius-sm;
63+
padding: 0.5rem;
64+
background-color: $panel-bg;
65+
}
66+
67+
td {
68+
display: grid;
69+
grid-template-columns: 100px 1fr;
70+
gap: 1rem;
71+
align-items: center;
72+
text-align: left;
73+
border-bottom: 1px solid transparent;
74+
padding: 0.75rem 0.5rem;
75+
76+
&::before {
77+
content: attr(data-label);
78+
font-weight: 600;
79+
color: $text-muted;
80+
}
81+
}
82+
83+
tr td:last-child {
84+
padding-bottom: 0.75rem;
85+
}
86+
87+
tr td:not(:last-child) {
88+
border-bottom: 1px solid $btn-border-color;
89+
}
90+
}
91+
}

‎theming/rules/_news.scss

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,51 @@
1+
.quarto-post {
2+
padding: 1.25rem 0.5rem;
3+
border: none;
4+
border-bottom: 1px solid $btn-border-color;
5+
border-radius: 0;
6+
transition: none;
7+
8+
&:hover {
9+
.listing-title a {
10+
color: $links-hover;
11+
}
12+
}
13+
}
14+
15+
.listing-title a {
16+
text-decoration: none;
17+
color: $text-color;
18+
transition: color 0.2s ease;
19+
}
20+
21+
.listing-description p {
22+
color: $text-muted;
23+
}
24+
25+
.metadata a {
26+
text-decoration: none;
27+
color: inherit;
28+
}
29+
130
.listing-category {
2-
background-color: $btn-border-color !important;
3-
border-color: darken($btn-border-color, 5%) !important;
4-
color: $text-muted !important;
5-
margin-top: 0.25rem !important;
31+
background-color: $btn-border-color !important;
32+
color: $text-muted !important;
33+
margin-top: 0.25rem !important;
34+
border: none !important;
35+
transition: background-color 0.2s ease, color 0.2s ease;
36+
37+
&:hover {
38+
background-color: $links !important;
39+
color: $panel-bg !important;
40+
}
41+
}
42+
43+
.quarto-listing-category .category.active {
44+
font-weight: bold;
45+
color: $links;
46+
}
47+
48+
.quarto-listing-category .category:not(.active):hover {
49+
color: $links-hover;
50+
cursor: pointer;
651
}

‎theming/rules/_quarto-tweaks.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ h4,
55
h5,
66
h6 {
77
color: $text-color !important;
8+
border-bottom-color: $btn-border-color;
89
}
910

1011
p {
@@ -44,6 +45,10 @@ code {
4445
}
4546
}
4647

48+
.quarto-post {
49+
border-bottom: 1px solid $btn-border-color !important
50+
}
51+
4752
.quarto-title-banner {
4853
background-color: $navbar-bg !important;
4954
}

‎theming/rules/_search.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.aa-DetachedOverlay {
2+
background-color: rgba($background-body, 0.95);
3+
4+
.aa-Form {
5+
border: none;
6+
background-color: transparent;
7+
}
8+
9+
.aa-Input {
10+
color: $text-color;
11+
background-color: transparent;
12+
}
13+
14+
.aa-SubmitIcon, .aa-ClearIcon, .aa-LoadingIcon {
15+
color: $text-muted;
16+
}
17+
18+
.aa-DetachedCancelButton {
19+
color: $links;
20+
background-color: transparent;
21+
&:hover {
22+
color: $links-hover;
23+
}
24+
}
25+
26+
.aa-Panel {
27+
background-color: $background-body;
28+
}
29+
30+
.search-result-header {
31+
color: $text-color;
32+
font-weight: 600;
33+
}
34+
35+
.search-result-title {
36+
color: $text-color;
37+
}
38+
39+
.search-result-section {
40+
color: $links;
41+
}
42+
43+
.search-result-text {
44+
color: $text-muted;
45+
}
46+
47+
.search-match {
48+
color: $links-hover;
49+
background-color: transparent;
50+
font-weight: 600;
51+
}
52+
53+
.aa-Item[aria-selected="true"] {
54+
.search-item * {
55+
color: $white !important;
56+
}
57+
58+
.search-item {
59+
.search-result-section, .search-match {
60+
color: lighten($links, 30%) !important;
61+
}
62+
}
63+
}
64+
65+
.search-result-more {
66+
color: $links;
67+
font-weight: 500;
68+
}
69+
}

0 commit comments

Comments
 (0)