diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..9783c1d --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,141 @@ +:root { + --highlight-text-color: #ff7a5c; + --title-text-color: #ffffff; + --link-text-color: #1F365C; + --link-bg-color: rgba(255, 255, 255, 0.85); + --max-content-width: 680px; + --link-border-radius: 14px; + --link-padding: 12px; + --link-min-height: 72px; + --transition: 0.28s cubic-bezier(.15,.85,.3,1.2); +} + + +body, html { + margin: 0; + padding: 0; + background: url("../images/bg-mobile.jpg") no-repeat center/cover; + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + color: white; + overflow-x: hidden; +} + + +#background_div { + max-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 0; +} + + +.page-full-wrap { + width: var(--max-content-width); + padding-bottom: 120px; + position: relative; + text-align: center; +} + + +.page-title { + font-size: 4rem; + font-weight: 700; + color: var(--title-text-color); + margin: 0; + letter-spacing: 1px; + text-shadow: 0 4px 16px rgba(255,255,255,0.15); +} + +.highlight { + color: var(--highlight-text-color); +} + + + +.page-item-wrap { + position: relative; + margin: 18px 0; + border-radius: var(--link-border-radius); + background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(240,240,255,0.82)); + backdrop-filter: blur(12px); + padding: 4px; + box-shadow: + 0 10px 25px rgba(0,0,0,0.25), + inset 0 0 8px rgba(255,255,255,0.3); + transition: var(--transition); +} + + +.page-item-wrap:hover { + transform: scale(1.035); + box-shadow: + 0 14px 32px rgba(0,0,0,0.28), + 0 0 18px rgba(255,122,92,0.25); +} + + +.page-item-each { + display: flex; + align-items: center; + justify-content: flex-start; + padding: var(--link-padding); + min-height: var(--link-min-height); + color: var(--link-text-color); + text-decoration: none; + font-size: 17px; + font-weight: 600; + position: relative; + width: 100%; +} + + +.link-each-image { + width: 50px; + height: 50px; + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); +} + + +.item-text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-left: 70px; +} + + +.item-title { + font-size: 18px; + font-weight: 700; + letter-spacing: 0.5px; + margin: 0 0 3px 0; + color: var(--link-text-color); +} + + +.item-subtitle { + font-size: 14px; + opacity: 0.65; + color: var(--link-text-color); + margin: 0; + text-align: start; +} + + +@media (max-width: 768px) { + .page-full-wrap { + width: 88%; + } +} + +@media (max-width: 480px) { + .page-title { + font-size: 3rem; + } +} diff --git a/assets/images/gitea.png b/assets/images/gitea.png new file mode 100644 index 0000000..bd1be5d Binary files /dev/null and b/assets/images/gitea.png differ diff --git a/assets/images/github.png b/assets/images/github.png new file mode 100644 index 0000000..3fd1ec8 Binary files /dev/null and b/assets/images/github.png differ diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100644 index 0000000..d565465 --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,27 @@ + + + + + + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + + + +