Skip to content

Commit 75e2e5c

Browse files
silverwindsilverwind
authored
Migrate font-size helpers to tailwind (#30029)
Migrate `gt-font-*` to `tw-text-*` All tailwind-original class names are also available and render like they would with 16px root font size. We currently have root font size at 14px, but I would like to eventually migrate us to 16px so that the tailwind docs apply to us unchangend and because 16px is the recommended root font size for web pages in general. Also the number 16 is much better dividable than 14 so will result in more integers.
1 parent 0bef9a2 commit 75e2e5c

File tree

8 files changed

+26
-16
lines changed

8 files changed

+26
-16
lines changed

‎tailwind.config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,5 +73,23 @@ export default {
7373
semibold: 'var(--font-weight-semibold)',
7474
bold: 'var(--font-weight-bold)',
7575
},
76+
fontSize: { // not using `rem` units because our root is currently 14px
77+
'xs': '12px',
78+
'sm': '14px',
79+
'base': '16px',
80+
'lg': '18px',
81+
'xl': '20px',
82+
'2xl': '24px',
83+
'3xl': '30px',
84+
'4xl': '36px',
85+
'5xl': '48px',
86+
'6xl': '60px',
87+
'7xl': '72px',
88+
'8xl': '96px',
89+
'9xl': '128px',
90+
...Object.fromEntries(Array.from({length: 100}, (_, i) => {
91+
return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
92+
})),
93+
},
7694
},
7795
};

‎templates/org/header.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
88
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
99
</span>
10-
<span class="tw-flex tw-items-center gt-gap-2 tw-ml-auto gt-font-16 tw-whitespace-nowrap">
10+
<span class="tw-flex tw-items-center gt-gap-2 tw-ml-auto tw-text-16 tw-whitespace-nowrap">
1111
{{if .EnableFeed}}
1212
<a class="ui basic label button gt-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
1313
{{svg "octicon-rss" 24}}

‎templates/repo/header.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{template "repo/icon" .}}
88
</div>
99
<div class="flex-item-main">
10-
<div class="flex-item-title gt-font-18">
10+
<div class="flex-item-title tw-text-18">
1111
<a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
1212
</div>
1313
</div>

‎templates/repo/home.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{template "repo/code/recently_pushed_new_branches" .}}
77
{{if and (not .HideRepoInfo) (not .IsBlame)}}
88
<div class="ui repo-description gt-word-break">
9-
<div id="repo-desc" class="gt-font-16">
9+
<div id="repo-desc" class="tw-text-16">
1010
{{$description := .Repository.DescriptionHTML $.Context}}
1111
{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
1212
<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
@@ -29,7 +29,7 @@
2929
</div>
3030
<div class="tw-flex tw-items-center tw-flex-wrap gt-gap-2" id="repo-topics">
3131
{{range .Topics}}<a class="ui repo-topic large label topic gt-m-0" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
32-
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg gt-font-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
32+
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
3333
</div>
3434
{{end}}
3535
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

‎templates/user/dashboard/feeds.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | RenderEmoji $.Context | RenderCodeBlock}}</a>
108108
{{$comment := index .GetIssueInfos 1}}
109109
{{if $comment}}
110-
<div class="markup gt-font-14">{{RenderMarkdownToHtml ctx $comment}}</div>
110+
<div class="markup tw-text-14">{{RenderMarkdownToHtml ctx $comment}}</div>
111111
{{end}}
112112
{{else if .GetOpType.InActions "merge_pull_request"}}
113113
<div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div>

‎templates/user/notification/notification_div.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@
4444
{{end}}
4545
</div>
4646
<a class="notifications-link tw-flex tw-flex-1 tw-flex-col silenced" href="{{.Link ctx}}">
47-
<div class="notifications-top-row gt-font-13">
47+
<div class="notifications-top-row tw-text-13">
4848
{{.Repository.FullName}} {{if .Issue}}<span class="text light-3">#{{.Issue.Index}}</span>{{end}}
4949
{{if eq .Status 3}}
5050
{{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}}
5151
{{end}}
5252
</div>
53-
<div class="notifications-bottom-row gt-font-16 gt-py-1">
53+
<div class="notifications-bottom-row tw-text-16 gt-py-1">
5454
<span class="issue-title">
5555
{{if .Issue}}
5656
{{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}}

‎web_src/css/helpers.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -163,14 +163,6 @@ Gitea's private styles use `g-` prefix.
163163
.gt-gap-y-4 { row-gap: 1rem !important; }
164164
.gt-gap-y-5 { row-gap: 2rem !important; }
165165

166-
.gt-font-12 { font-size: 12px !important }
167-
.gt-font-13 { font-size: 13px !important }
168-
.gt-font-14 { font-size: 14px !important }
169-
.gt-font-15 { font-size: 15px !important }
170-
.gt-font-16 { font-size: 16px !important }
171-
.gt-font-17 { font-size: 17px !important }
172-
.gt-font-18 { font-size: 18px !important }
173-
174166
/*
175167
gt-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
176168
do not use:

‎web_src/js/components/RepoContributors.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@ export default {
384384
<h4 v-else class="contributor-name">
385385
{{ contributor.name }}
386386
</h4>
387-
<p class="gt-font-12 tw-flex gt-gap-2">
387+
<p class="tw-text-12 tw-flex gt-gap-2">
388388
<strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong>
389389
<strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
390390
<strong v-if="contributor.total_deletions" class="text red">

0 commit comments

Comments
 (0)