This commit is contained in:
@@ -1,17 +1,13 @@
|
||||
// Shared TUI transition mixin
|
||||
@mixin tui-transition($steps: 2) {
|
||||
transition: all 0.1s steps($steps, end);
|
||||
}
|
||||
/* Global rules shared across pages/components (imported once via nuxt.config css). */
|
||||
|
||||
// Box-drawing content string for borders (top/bottom frame lines)
|
||||
$box-line-top: "═══════════════════";
|
||||
|
||||
/* Global rules - no-sprite pages hide the undertable sprite area */
|
||||
.no-sprite .undertable-wrapper {
|
||||
/* Pages that opt out of the header sprite hide the TableHeader undertable area.
|
||||
Selector is prefixed with the element type so it always outranks TableHeader's
|
||||
scoped `.undertable-wrapper { display: flex }` regardless of stylesheet order. */
|
||||
div.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Dropdown transition keyframes (used by LanguageSelector and ThemeSelector)
|
||||
/* Dropdown transition (used by LanguageSelector and ThemeSelector). */
|
||||
.dropdown-enter-active, .dropdown-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
@@ -19,14 +15,3 @@ $box-line-top: "═══════════════════";
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
// Dropdown button shared styles
|
||||
.tui-dropdown-button {
|
||||
background: var(--color-background-fore);
|
||||
color: var(--color-text);
|
||||
font-size: 1em;
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 8px 12px;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -79,14 +79,6 @@ border: 1px solid var(--color-border-color);
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
}
|
||||
/* Dropdown transitions */
|
||||
.dropdown-enter-active, .dropdown-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.dropdown-enter-from, .dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
z-index: 10;
|
||||
|
||||
@@ -157,15 +157,6 @@ border: 1px solid var(--color-border-color);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* Dropdown transitions */
|
||||
.dropdown-enter-active, .dropdown-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.dropdown-enter-from, .dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.dropdown {
|
||||
z-index: 10;
|
||||
@@ -234,16 +225,6 @@ border: 1px solid var(--color-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.two-columns {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.section {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.stacked {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -187,9 +187,3 @@ const onSubmit = async () => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -87,8 +87,4 @@ useSeo({
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -265,9 +265,3 @@ const displayedArt = computed(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -91,8 +91,4 @@ useSeo({
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -193,9 +193,3 @@ const displayedPosts = computed(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -73,9 +73,3 @@ h1 {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -320,10 +320,6 @@ const sectionTargets = {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tui-frame:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
margin-top: 290px;
|
||||
}
|
||||
@@ -440,18 +436,6 @@ const sectionTargets = {
|
||||
}
|
||||
}
|
||||
|
||||
.project-card-corner {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-color: #cfcfcf;
|
||||
|
||||
&.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
|
||||
&.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
|
||||
&.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
|
||||
&.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: inherit;
|
||||
@@ -501,137 +485,6 @@ const sectionTargets = {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
position: relative;
|
||||
background: var(--color-background-fore);
|
||||
border: 2px solid var(--color-border-color);
|
||||
box-shadow:
|
||||
inset 1px -1px 0px 0px rgba(0,0,0,0.3),
|
||||
4px -4px 0px 0px var(--color-container-shadow);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.1s steps(2, end);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-link);
|
||||
box-shadow:
|
||||
inset 1px -1px 0px 0px rgba(0,0,0,0.3),
|
||||
4px -4px 0px 0px var(--color-link);
|
||||
}
|
||||
|
||||
.stat-card-corner {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-color: #cfcfcf;
|
||||
|
||||
&.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
|
||||
&.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
|
||||
&.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
|
||||
&.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card-frame-top {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
height: 0;
|
||||
color: var(--color-border-color);
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: "═════";
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card-frame-bottom {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
height: 0;
|
||||
color: var(--color-border-color);
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: "═════";
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card-header {
|
||||
background-color: var(--color-link);
|
||||
color: var(--color-background-fore);
|
||||
padding: 3px 12px;
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: inset 0 -2px 0px 0px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.stat-card-content {
|
||||
padding: 16px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stat-pixel-art {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-bottom: 2px;
|
||||
fill: var(--color-link);
|
||||
filter: drop-shadow(0 0 4px var(--color-link));
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1.6rem;
|
||||
color: var(--color-link);
|
||||
text-shadow: 0 0 8px var(--color-link), 0 0 4px var(--color-link);
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-text);
|
||||
font-size: 0.65rem;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tui-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -765,16 +618,7 @@ const sectionTargets = {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, minmax(200px, 1fr));
|
||||
}
|
||||
@@ -811,33 +655,6 @@ const sectionTargets = {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-card-header {
|
||||
padding: 2px 8px;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-card-content {
|
||||
padding: 12px 6px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.stat-pixel-art {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 16px 0;
|
||||
@@ -849,10 +666,6 @@ const sectionTargets = {
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
padding-left: 0;
|
||||
|
||||
@@ -581,9 +581,3 @@ const onSubmit = async () => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -113,9 +113,3 @@ const localePath = useLocalePath();
|
||||
filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -267,9 +267,3 @@ function navigateToProject(project) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.no-sprite .undertable-wrapper {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user