candifloss/Gitea-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

begin header

Browse Source
This commit is contained in:
Candifloss 2024-11-08 16:51:42 +05:30
parent 456a3ad2aa
commit 5aaf9d5198
10 changed files with 196 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -21,3 +21,4 @@
# Go workspace file
go.work
test/scripts/csswatch.sh

70
test/css/repo-home.css Normal file
View File

@ -0,0 +1,70 @@
* {
all: unset;
}
title {
display: none;
}
header {
background-color: #1a1a1a;
padding: 0.3em 1em;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #444;
}
.header-left,
.header-right {
display: flex;
align-items: center;
gap: 1em;
}
.logo {
display: flex;
align-items: center;
margin-right: 1em;
}
.logo img {
height: 32px;
width: auto;
}
.header-left a {
color: #f0f0f0;
text-decoration: none;
font-weight: bold;
font-size: 0.95rem;
}
.header-left a:hover {
color: #bfbfbf;
}
.header-right a {
color: #f0f0f0;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 50%;
padding: 0.5em;
}
.header-right a img {
width: 30px;
height: 30px;
}
.header-right a:hover {
background-color: #333;
}
.profile-icon {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
}
body {
background-color: #232323;
}

36
test/html/repo-home.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repository Home</title>
<link rel="stylesheet" href="../css/repo-home.css">
</head>
<body>
<header>
<div class="header-left">
<a href="/" class="logo">
<img src="../images/icon1.png" alt="Gitea Logo" />
</a>
<a href="/issues">Issues</a>
<a href="/pulls">Pull Requests</a>
<a href="/milestones">Milestones</a>
<a href="/explore">Explore</a>
</div>
<div class="header-right">
<a href="/notifications">
<img src="../images/notif.jpg" alt="Notifications" />
</a>
<a href="/new-repo">
<img src="../images/create.png" alt="Create Repo" />
</a>
<a href="/profile" class="profile-icon">
<img src="../images/icon2.png" alt="Profile" />
</a>
</div>
</header>
</body>
</html>

BIN
test/images/create.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
test/images/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
test/images/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
test/images/notif.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

7
test/scss/_common.scss Normal file
View File

@ -0,0 +1,7 @@
* {
all: unset;
}
title {
display: none;
}

7
test/scss/repo-home.scss Normal file
View File

@ -0,0 +1,7 @@
@use "common";
@use "repo-home/header";
body {
background-color: #232323;
}

75
test/scss/repo-home/_header.scss Normal file
View File

@ -0,0 +1,75 @@
// Color Variables
$repo-home-header-bg-color: #1a1a1a;
$repo-home-header-nav-text-color: #f0f0f0;
$repo-home-header-nav-hover-text-color: #bfbfbf;
$repo-home-header-nav-right-text-color: #f0f0f0;
$repo-home-header-nav-right-hover-bg-color: #333;
$repo-home-header-border-color: #444;
// Header Styles
header {
background-color: $repo-home-header-bg-color;
padding: 0.3em 1em;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $repo-home-header-border-color;
}
.header-left,
.header-right {
display: flex;
align-items: center;
gap: 1em;
}
// Logo
.logo {
display: flex;
align-items: center;
margin-right: 1em;
img {
height: 32px;
width: auto;
}
}
// Left Navbar Links
.header-left a {
color: $repo-home-header-nav-text-color;
text-decoration: none;
font-weight: bold;
font-size: 0.95rem;
&:hover {
color: $repo-home-header-nav-hover-text-color;
}
}
// Right Navbar Icons
.header-right a {
color: $repo-home-header-nav-right-text-color;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 50%;
padding: 0.5em;
img {
width: 30px;
height: 30px;
}
&:hover {
background-color: $repo-home-header-nav-right-hover-bg-color;
}
}
// Profile Icon
.profile-icon {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
}