mirror of
https://github.com/multipleof4/.gitea.git
synced 2026-10-08 22:05:21 +00:00
Redesign home page as holo sticker comic strip
Replace the minimal hero with a comic-strip layout: holographic logo sticker, diagonal-line paper background, comic panels linking to explore pages, and a self-hosted Bangers font. Also swap the nonexistent "explore" locale key for "explore_title". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
Binary file not shown.
+372
-52
@@ -1,80 +1,400 @@
|
||||
{{template "base/head" .}}
|
||||
<div class="page-content home">
|
||||
<div class="ui container">
|
||||
<div class="renox-hero">
|
||||
<div class="renox-art">
|
||||
<img src="{{AssetUrlPrefix}}/img/logo.svg?v=2" width="200" height="200" alt="Renox Logo">
|
||||
</div>
|
||||
<h1 class="renox-title">Planet Renox</h1>
|
||||
<p class="renox-subtitle">Source Code</p>
|
||||
<div class="renox-actions">
|
||||
{{if .IsSigned}}
|
||||
<a class="ui primary button" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
|
||||
{{else}}
|
||||
<a class="ui primary button" href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "sign_in"}}</a>
|
||||
<a class="ui button" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
|
||||
{{end}}
|
||||
</div>
|
||||
<div role="main" aria-label="{{ctx.Locale.Tr "home_title"}}" class="page-content home prs">
|
||||
<div class="prs-wrap">
|
||||
<div class="prs-strip">
|
||||
<section class="prs-panel prs-scene">
|
||||
<span class="prs-caption">Meanwhile, on Planet Renox…</span>
|
||||
<div class="prs-sticker">
|
||||
<div class="prs-die"><img src="{{AssetUrlPrefix}}/img/logo.svg?v=3" width="260" height="260" alt="{{ctx.Locale.Tr "logo"}}"></div>
|
||||
</div>
|
||||
<span class="prs-burst" aria-hidden="true"><b>PUSH!</b></span>
|
||||
</section>
|
||||
<section class="prs-panel prs-cover">
|
||||
<h1 class="prs-title"><span class="prs-holo">Planet Renox</span> <span class="prs-tag">Source</span></h1>
|
||||
<p class="prs-bubble">Welcome aboard! Every project on the planet lives right here.<svg class="prs-tail" viewBox="0 0 32 26" aria-hidden="true"><path d="M32 3 1 22l31-5"/></svg></p>
|
||||
<div class="prs-actions">
|
||||
<a class="prs-btn prs-go" href="{{AppSubUrl}}/explore/repos">{{svg "octicon-telescope" 18}}{{ctx.Locale.Tr "explore_title"}}</a>
|
||||
{{if .IsSigned}}
|
||||
<a class="prs-btn" href="{{AppSubUrl}}/">{{svg "octicon-home" 18}}{{ctx.Locale.Tr "dashboard"}}</a>
|
||||
{{else}}
|
||||
<a class="prs-btn" href="{{AppSubUrl}}/user/login">{{svg "octicon-sign-in" 18}}{{ctx.Locale.Tr "sign_in"}}</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<nav class="prs-strip prs-row">
|
||||
<a class="prs-panel prs-mini" href="{{AppSubUrl}}/explore/repos"><i>{{svg "octicon-repo" 26}}</i><b>{{ctx.Locale.Tr "explore.repos"}}</b><small>Panel 2 →</small></a>
|
||||
<a class="prs-panel prs-mini" href="{{AppSubUrl}}/explore/organizations"><i>{{svg "octicon-organization" 26}}</i><b>{{ctx.Locale.Tr "explore.organizations"}}</b><small>Panel 3 →</small></a>
|
||||
<a class="prs-panel prs-mini" href="{{AppSubUrl}}/explore/users"><i>{{svg "octicon-people" 26}}</i><b>{{ctx.Locale.Tr "explore.users"}}</b><small>Panel 4 →</small></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.renox-hero {
|
||||
@font-face {
|
||||
font-family: "Bangers";
|
||||
src: url("{{AssetUrlPrefix}}/fonts/bangers.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.prs {
|
||||
--ink: #0b2231;
|
||||
--navy: #194756;
|
||||
--teal: #489489;
|
||||
--mint: #74d7c2;
|
||||
--paper: #fbf8ef;
|
||||
--pop: #ffe27a;
|
||||
--holo: linear-gradient(115deg, #ff9ad5, #ffe98a 20%, #9dfcd8 40%, #8ecbff 60%, #c7a2ff 80%, #ff9ad5);
|
||||
--comic: "Bangers", Impact, "Arial Black", sans-serif;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
padding: 40px 16px 80px !important;
|
||||
color: var(--ink);
|
||||
background:
|
||||
repeating-linear-gradient(-45deg, rgb(11 34 49 / .06) 0 2px, transparent 2px 16px),
|
||||
linear-gradient(160deg, #f6f1e4, #e9f5f0 55%, #f3ecf8);
|
||||
}
|
||||
|
||||
/* holo foil band slashing across the page */
|
||||
.prs::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: -20%;
|
||||
right: -20%;
|
||||
top: 38%;
|
||||
height: 240px;
|
||||
transform: rotate(-12deg);
|
||||
background: repeating-linear-gradient(45deg, rgb(255 255 255 / .5) 0 3px, transparent 3px 12px), var(--holo);
|
||||
background-size: auto, 200% 100%;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
/* ben-day dots fading in from the corners */
|
||||
.prs::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle, rgb(72 148 137 / .35) 1.6px, transparent 1.8px) 0 0 / 13px 13px;
|
||||
mask-image: radial-gradient(circle at 0 0, #000, transparent 38%), radial-gradient(circle at 100% 100%, #000, transparent 42%);
|
||||
}
|
||||
|
||||
.full.height:has(.prs) { display: flex; flex-direction: column; padding-bottom: 0; }
|
||||
.prs { flex: 1; }
|
||||
.prs a, .prs a:hover { color: inherit; text-decoration: none; }
|
||||
|
||||
.prs-wrap {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.prs-strip {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.25fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.prs-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--paper);
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 8px 8px 0 var(--ink);
|
||||
}
|
||||
|
||||
/* panel A: the scene */
|
||||
.prs-scene {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 440px;
|
||||
transform: rotate(-1deg);
|
||||
background:
|
||||
radial-gradient(circle at 50% 54%, transparent 0 25%, var(--paper) 72%),
|
||||
repeating-conic-gradient(from 0deg at 50% 54%, rgb(116 215 194 / .55) 0 5deg, transparent 5deg 13deg),
|
||||
var(--paper);
|
||||
}
|
||||
|
||||
.prs-caption {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
z-index: 2;
|
||||
padding: 6px 12px;
|
||||
background: var(--pop);
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
font: 800 .8rem/1.2 system-ui, sans-serif;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.prs-sticker {
|
||||
position: relative;
|
||||
width: min(300px, 64vw);
|
||||
aspect-ratio: 1;
|
||||
padding: 13px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--ink);
|
||||
background: var(--holo);
|
||||
background-size: 200% 200%;
|
||||
box-shadow: 10px 12px 0 rgb(11 34 49 / .9);
|
||||
transform: rotate(-7deg);
|
||||
transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
|
||||
}
|
||||
|
||||
.prs-sticker:hover { transform: rotate(3deg) scale(1.04); }
|
||||
|
||||
.prs-die {
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--ink);
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prs-die img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
/* foil sheen sweeping across the sticker */
|
||||
.prs-sticker::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .85) 47%, transparent 56%),
|
||||
repeating-linear-gradient(135deg, rgb(255 255 255 / .18) 0 2px, transparent 2px 7px),
|
||||
var(--holo);
|
||||
background-size: 300% 100%, auto, 200% 200%;
|
||||
background-position: 120% 0, 0 0, 0 0;
|
||||
mix-blend-mode: soft-light;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
.prs-burst {
|
||||
position: absolute;
|
||||
right: 6%;
|
||||
bottom: 7%;
|
||||
width: 132px;
|
||||
aspect-ratio: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--ink);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.prs-burst, .prs-burst::before {
|
||||
clip-path: polygon(50% 0, 60% 20%, 82% 7%, 79% 31%, 100% 36%, 83% 52%, 97% 72%, 74% 73%, 72% 97%, 55% 81%, 38% 100%, 33% 78%, 10% 88%, 16% 64%, 0 52%, 17% 39%, 5% 17%, 28% 21%, 33% 0);
|
||||
}
|
||||
|
||||
.prs-burst::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 7px;
|
||||
background: var(--pop);
|
||||
}
|
||||
|
||||
.prs-burst b {
|
||||
position: relative;
|
||||
font: 400 1.9rem/1 var(--comic);
|
||||
letter-spacing: .04em;
|
||||
color: #ff4fa3;
|
||||
-webkit-text-stroke: 1.5px var(--ink);
|
||||
filter: drop-shadow(2px 2px 0 var(--ink));
|
||||
}
|
||||
|
||||
/* panel B: the cover */
|
||||
.prs-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
gap: 22px;
|
||||
padding: 48px 44px;
|
||||
transform: rotate(.6deg);
|
||||
background:
|
||||
linear-gradient(to bottom right, transparent 70%, rgb(116 215 194 / .22)),
|
||||
repeating-linear-gradient(135deg, rgb(25 71 86 / .05) 0 1px, transparent 1px 9px),
|
||||
var(--paper);
|
||||
}
|
||||
|
||||
.renox-art {
|
||||
margin-bottom: 2rem;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
/* holo foil corner */
|
||||
.prs-cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
||||
background: repeating-linear-gradient(45deg, rgb(255 255 255 / .45) 0 2px, transparent 2px 8px), var(--holo);
|
||||
background-size: auto, 200% 200%;
|
||||
border-left: 3px solid var(--ink);
|
||||
}
|
||||
|
||||
.renox-title {
|
||||
font-size: 3.5rem !important;
|
||||
font-weight: 300 !important;
|
||||
color: #1b1c1d;
|
||||
margin-bottom: 0.5rem !important;
|
||||
letter-spacing: -1px;
|
||||
.prs-title.prs-title {
|
||||
margin: 0;
|
||||
font: 400 clamp(3.2rem, 8.5vw, 6.4rem)/.9 var(--comic);
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
.renox-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: #6a737d;
|
||||
margin-bottom: 2.5rem;
|
||||
font-weight: 300;
|
||||
.prs-holo {
|
||||
display: block;
|
||||
color: transparent;
|
||||
background: var(--holo);
|
||||
background-size: 250% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-stroke: 2.5px var(--ink);
|
||||
filter: drop-shadow(5px 5px 0 var(--ink));
|
||||
}
|
||||
|
||||
.renox-actions .ui.button {
|
||||
padding: 12px 30px;
|
||||
font-weight: 400;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
.prs-tag {
|
||||
display: inline-block;
|
||||
margin-top: 14px;
|
||||
padding: 4px 22px 2px;
|
||||
font-size: .52em;
|
||||
letter-spacing: .14em;
|
||||
color: var(--ink);
|
||||
background: repeating-linear-gradient(45deg, rgb(255 255 255 / .55) 0 3px, transparent 3px 9px), var(--holo);
|
||||
background-size: auto, 200% 100%;
|
||||
border: 3px solid var(--ink);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--ink), 6px 7px 0 8px var(--ink);
|
||||
transform: rotate(-4deg) translateX(10px);
|
||||
}
|
||||
|
||||
.renox-actions .ui.primary.button {
|
||||
background-color: #45b135 !important;
|
||||
.prs-bubble {
|
||||
position: relative;
|
||||
max-width: 26rem;
|
||||
margin: 6px 0 0;
|
||||
padding: 14px 20px;
|
||||
font: 700 1.05rem/1.35 system-ui, sans-serif;
|
||||
background: #fff;
|
||||
border: 3px solid var(--ink);
|
||||
border-radius: 28px;
|
||||
box-shadow: 4px 4px 0 var(--ink);
|
||||
}
|
||||
|
||||
.renox-actions .ui.primary.button:hover {
|
||||
background-color: #3d9e2f !important;
|
||||
transform: translateY(-1px);
|
||||
.prs-tail {
|
||||
position: absolute;
|
||||
left: -29px;
|
||||
top: calc(50% - 13px);
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
fill: #fff;
|
||||
stroke: var(--ink);
|
||||
stroke-width: 3;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-15px); }
|
||||
100% { transform: translateY(0px); }
|
||||
.prs-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* Force light mode background for this section if Gitea is in dark mode */
|
||||
body:not(.theme-arc-green) .renox-hero {
|
||||
background-color: #ffffff;
|
||||
.prs-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 22px 9px;
|
||||
font: 400 1.35rem/1 var(--comic);
|
||||
letter-spacing: .07em;
|
||||
background: #fff;
|
||||
border: 3px solid var(--ink);
|
||||
border-radius: 12px;
|
||||
box-shadow: 5px 5px 0 var(--ink);
|
||||
transition: transform .12s, box-shadow .12s;
|
||||
}
|
||||
|
||||
.prs-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
|
||||
.prs-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
|
||||
|
||||
.prs-go {
|
||||
background: repeating-linear-gradient(-45deg, rgb(255 255 255 / .25) 0 3px, transparent 3px 10px), var(--mint);
|
||||
}
|
||||
|
||||
/* bottom row of mini panels */
|
||||
.prs-row { grid-template-columns: repeat(3, 1fr); }
|
||||
|
||||
.prs-mini {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
column-gap: 16px;
|
||||
padding: 20px 22px;
|
||||
transition: transform .2s, box-shadow .2s;
|
||||
}
|
||||
|
||||
.prs-mini:nth-child(1) { transform: rotate(-.8deg); }
|
||||
.prs-mini:nth-child(2) { transform: rotate(.5deg); }
|
||||
.prs-mini:nth-child(3) { transform: rotate(-.4deg); }
|
||||
|
||||
.prs-mini:hover {
|
||||
transform: translate(-3px, -3px) rotate(0);
|
||||
box-shadow: 11px 11px 0 var(--ink);
|
||||
background: repeating-linear-gradient(45deg, rgb(255 255 255 / .5) 0 3px, transparent 3px 10px), var(--holo);
|
||||
background-size: auto, 200% 100%;
|
||||
}
|
||||
|
||||
.prs-mini::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: radial-gradient(circle, rgb(72 148 137 / .3) 1.5px, transparent 1.7px) 0 0 / 9px 9px;
|
||||
mask-image: linear-gradient(105deg, transparent 55%, #000);
|
||||
}
|
||||
|
||||
.prs-mini i {
|
||||
grid-row: span 2;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 3px solid var(--ink);
|
||||
border-radius: 50%;
|
||||
background: var(--mint);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
.prs-mini b { font: 400 1.6rem/1 var(--comic); letter-spacing: .05em; }
|
||||
|
||||
.prs-mini small {
|
||||
font: 800 .72rem/1 system-ui, sans-serif;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.prs-holo, .prs-tag, .prs-mini:hover { animation: prs-shift 5s ease-in-out infinite alternate; }
|
||||
.prs-sticker { animation: prs-shift 7s ease-in-out infinite alternate; }
|
||||
.prs-sticker::after { animation: prs-sheen 4.5s ease-in-out infinite; }
|
||||
.prs-burst { animation: prs-pop 2.4s ease-in-out infinite; }
|
||||
}
|
||||
|
||||
@keyframes prs-shift { to { background-position: 100% 100%; } }
|
||||
@keyframes prs-sheen { 0%, 20% { background-position: 120% 0, 0 0, 0 0; } 70%, 100% { background-position: -20% 0, 0 0, 100% 100%; } }
|
||||
@keyframes prs-pop { 50% { transform: rotate(4deg) scale(1.08); } }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.prs { padding-top: 24px !important; }
|
||||
.prs-strip, .prs-row { grid-template-columns: 1fr; }
|
||||
.prs-scene { min-height: 380px; }
|
||||
.prs-cover { padding: 40px 24px 32px; }
|
||||
.prs-burst { width: 104px; }
|
||||
.prs-burst b { font-size: 1.5rem; }
|
||||
.prs-tail { top: -26px; left: 40px; transform: rotate(90deg); }
|
||||
}
|
||||
</style>
|
||||
{{template "base/footer" .}}
|
||||
|
||||
Reference in New Issue
Block a user