yueranli

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>yueranli</title>
	<link>https://yueranli.cargo.site</link>
	<description>yueranli</description>
	<pubDate>Mon, 21 Mar 2022 15:21:35 +0000</pubDate>
	<generator>https://yueranli.cargo.site</generator>
	<language>en</language>
	
		
	<item>
		<title>Home</title>
				
		<link>https://yueranli.cargo.site/Home</link>

		<pubDate>Mon, 21 Mar 2022 15:21:35 +0000</pubDate>

		<dc:creator>yueranli</dc:creator>

		<guid isPermaLink="true">https://yueranli.cargo.site/Home</guid>

		<description>
    
    
        李悦然 Yueran Li, a 
        
            
        and a 
        
            
        from 
        
            
        . 
        She is currently based in 
        
            
        .
    
    
Work
    
    
.center {
    margin: auto;
    padding-top: 12%;
    width: 90%;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.headline {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 2.2;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    white-space: normal;
    word-wrap: break-word;
}

/* 包裹层：宽度由JS动态设置 */
.blank-wrapper {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
    position: relative;
    height: 1.5em;
}

/* 横线 - 默认显示 */
.blank-wrapper::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* 鼠标悬停时隐藏横线 */
.blank-wrapper:hover::before {
    opacity: 0;
}

/* 填空题文本 - 默认透明 */
.blank-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    cursor: pointer;
    white-space: nowrap;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

/* 鼠标悬停时显示文字 */
.blank-wrapper:hover .blank-fill {
    color: #000;
}

.work-link {
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 10px 20px;
}

.work-link:hover {
    color: #000;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 1.25rem;
    margin-top: 3rem;
}

.grid-item {
    width: 100%;
    height: 20px;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .center {
        padding-top: 20%;
        width: 95%;
    }
    
    .headline {
        font-size: 1.3rem;
        line-height: 2.2;
    }
}


(function() {
    // 填空题的答案 - 全部小写
    const answers = {
        creative: 'creative',
        graphicdesigner: 'graphic designer',
        china: 'China',
        london: 'China'
    };
    
    function initBlanks() {
        // 获取当前字体大小
        const headline = document.querySelector('.headline');
        const fontSize = window.getComputedStyle(headline).fontSize;
        const fontFamily = window.getComputedStyle(headline).fontFamily;
        
        // 计算每个单词需要的宽度
        for (let [id, answer] of Object.entries(answers)) {
            const element = document.getElementById(id);
            if (element) {
                const wrapper = element.closest('.blank-wrapper');
                if (wrapper) {
                    // 存储答案并设置文本内容
                    element.setAttribute('data-answer', answer);
                    element.textContent = answer;
                    
                    // 创建临时span来测量文字宽度
                    const tempSpan = document.createElement('span');
                    tempSpan.style.visibility = 'hidden';
                    tempSpan.style.position = 'absolute';
                    tempSpan.style.whiteSpace = 'nowrap';
                    tempSpan.style.fontSize = fontSize;
                    tempSpan.style.fontFamily = fontFamily;
                    tempSpan.style.fontWeight = '400';
                    tempSpan.textContent = answer;
                    document.body.appendChild(tempSpan);
                    
                    // 获取文字宽度，并增加一些padding
                    const answerWidth = tempSpan.offsetWidth;
                    document.body.removeChild(tempSpan);
                    
                    // 设置包裹层宽度 = 文字宽度 + 20px留白
                    const wrapperWidth = Math.max(answerWidth + 20, 60);
                    wrapper.style.width = wrapperWidth + 'px';
                    
                    // 阻止点击
                    element.addEventListener('click', function(e) {
                        e.preventDefault();
                    });
                }
            }
        }
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initBlanks);
    } else {
        initBlanks();
    }
    
    // 窗口大小变化时重新计算
    let resizeTimer;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            initBlanks();
        }, 250);
    });
    
    // Work链接处理
    const workLink = document.querySelector('.work-link');
    if (workLink) {
        workLink.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href &#38;&#38; href.startsWith('#')) {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            }
        });
    }
})();
</description>
		
	</item>
		
	</channel>
</rss>