style of si23 website

main
Michelw 5 months ago
parent 15afd4d033
commit 8e46b0831b

@ -0,0 +1,166 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: 'Routed Gothic';
src: local('Routed Gothic'), url('fonts/routed-gothic.ttf') format('truetype');
}
body,
html {
height: 100%;
font-family: Routed Gothic;
}
#resizer {
border-style: dashed;
/* 设置边框样式为虚线 */
border-width: 1px;
/* 设置边框宽度 */
cursor: ew-resize;
/* 设置光标样式为水平调整 */
}
/* .resizer {
width: 5px;
background-color: #888;
cursor: ew-resize;
} */
.container {
display: flex;
height: 100%;
}
.sidebar {
background-color: white;
color: black;
width: 25%;
overflow-y: auto;
}
.projects-submenu .subtab {
padding-left: 50px;
}
.tab,
.subtab {
padding: 15px;
cursor: pointer;
}
.tab:hover,
.subtab:hover {
background-color: #F3F3F3;
}
.projects-submenu {
display: none;
background-color: white;
}
.tab.active+.projects-submenu {
display: block;
}
.content {
flex-grow: 1;
background-color: #f0f0f0;
padding: 20px;
overflow-y: auto;
}
#matter-canvas {
width: 100%;
height: 100%;
}
.content-tab {
display: none;
}
/* 默认样式适用于大屏幕 */
.content-tab {
max-width: 800px;
/* 限制内容宽度,使其不至于过宽 */
margin: 0 auto;
/* 居中内容 */
padding: 20px;
}
/* 在小屏幕上应用不同的样式 */
@media (max-width: 768px) {
.content-tab {
padding: 10px;
}
.content-tab h1 {
font-size: 24px;
/* 标题字体大小适应小屏幕 */
}
.content-tab p {
font-size: 16px;
/* 段落字体大小适应小屏幕 */
}
}
.content-tab h1 {
font-size: 36px;
line-height: 1.2;
padding-bottom: 1em;
}
.content-tab p {
font-size: 18px;
line-height: 1.5;
padding-bottom: 1em;
}
.content-tab img {
max-width: 100%;
/* 图片宽度最大不超过父元素 */
height: auto;
/* 高度自动调整 */
}
.content-tab.active {
display: block;
}
.button {
display: inline-block;
padding: 0.5rem 2rem;
/* 上下留0.5rem左右留2rem */
background: #FFFFFF;
color: #333;
text-decoration: none;
/* 取消默认的下划线 */
border: none;
border-radius: 20px;
box-shadow: inset 4px 4px 10px rgba(96, 96, 96, 0.25);
cursor: pointer;
font-size: 16px;
line-height: 1;
/* 让文字垂直居中 */
transition: box-shadow 0.3s ease;
margin-bottom: 2rem;
}
.button:hover {
box-shadow: 4px 4px 10px rgba(96, 96, 96, 0.25);
}
Loading…
Cancel
Save