yc4646/code.academic_webpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Change px to em

Browse Source
This commit is contained in:
Chen Yang
2025-06-21 12:55:03 +08:00
parent 296daa9683
commit 0481bafc39
1 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
style.css
View File

@@ -109,7 +109,7 @@ hr {
.notATable>li>* { .notATable>li>* {
display: table-cell; display: table-cell;
padding: 2px; padding: 0.125em;
} }
@@ -123,7 +123,7 @@ hr {
} }
#shadowbox { #shadowbox {
border: 0px solid; border: 0em solid;
border-radius: 1em; border-radius: 1em;
padding: 0.6em; padding: 0.6em;
box-shadow: 0.3em 0.3em 1em #999999; box-shadow: 0.3em 0.3em 1em #999999;
@@ -131,7 +131,7 @@ hr {
hr.style-one { hr.style-one {
border: 0; border: 0;
height: 1px; height: 0.1em;
background: #333; background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
@@ -141,7 +141,7 @@ hr.style-one {
hr.style-zero { hr.style-zero {
border: 0; border: 0;
height: 0px; height: 0em;
background: #333; background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
@@ -151,7 +151,7 @@ hr.style-zero {
hr.curve { hr.curve {
border: 0; border: 0;
height: 15px; height: 1em;
background-image: url(curve.png); background-image: url(curve.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -159,9 +159,9 @@ hr.curve {
.box { .box {
width: 100%; width: 100%;
height: 280px; height: 18em;
background: rgb(220, 220, 220); background: rgb(220, 220, 220);
margin: 40px auto; margin: 2.5em auto;
} }
.effect2 { .effect2 {
@@ -173,15 +173,15 @@ hr.curve {
z-index: -1; z-index: -1;
position: absolute; position: absolute;
content: ""; content: "";
bottom: 15px; bottom: 1em;
left: 10px; left: 0.5em;
width: 50%; width: 50%;
top: 80%; top: 80%;
max-width: 300px; max-width: 18empx;
background: #777; background: #777;
-webkit-box-shadow: 0 15px 10px #777; -webkit-box-shadow: 0 1em 0.5em #777;
-moz-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 1em 0.5em #777;
box-shadow: 0 15px 10px #777; box-shadow: 0 1em 0.5em #777;
-webkit-transform: rotate(-3deg); -webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg); -moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg); -o-transform: rotate(-3deg);
@@ -195,14 +195,14 @@ hr.curve {
-o-transform: rotate(3deg); -o-transform: rotate(3deg);
-ms-transform: rotate(3deg); -ms-transform: rotate(3deg);
transform: rotate(3deg); transform: rotate(3deg);
right: 10px; right: 0.5em;
left: auto; left: auto;
} }
.container { .container {
width: 200px; width: 12.5em;
height: 200px; height: 12.5em;
padding-top: 0px; padding-top: 0em;
margin: 0 auto; margin: 0 auto;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg);
@@ -220,10 +220,10 @@ hr.curve {
} }
.ball { .ball {
width: 10px; width: 0.5em;
height: 10px; height: 0.5em;
margin: 10px auto; margin: 0.5em auto;
border-radius: 50px; border-radius: 3em;
} }
.ball:nth-child(1) { .ball:nth-child(1) {
@@ -277,84 +277,84 @@ hr.curve {
@-webkit-keyframes right { @-webkit-keyframes right {
0% { 0% {
-webkit-transform: translate(-15px); -webkit-transform: translate(-1em);
} }
50% { 50% {
-webkit-transform: translate(15px); -webkit-transform: translate(1em);
} }
100% { 100% {
-webkit-transform: translate(-15px); -webkit-transform: translate(-1em);
} }
} }
@-webkit-keyframes left { @-webkit-keyframes left {
0% { 0% {
-webkit-transform: translate(15px); -webkit-transform: translate(1em);
} }
50% { 50% {
-webkit-transform: translate(-15px); -webkit-transform: translate(-1em);
} }
100% { 100% {
-webkit-transform: translate(15px); -webkit-transform: translate(1em);
} }
} }
@-moz-keyframes right { @-moz-keyframes right {
0% { 0% {
-moz-transform: translate(-15px); -moz-transform: translate(-1em);
} }
50% { 50% {
-moz-transform: translate(15px); -moz-transform: translate(1em);
} }
100% { 100% {
-moz-transform: translate(-15px); -moz-transform: translate(-1em);
} }
} }
@-moz-keyframes left { @-moz-keyframes left {
0% { 0% {
-moz-transform: translate(15px); -moz-transform: translate(1em);
} }
50% { 50% {
-moz-transform: translate(-15px); -moz-transform: translate(-1em);
} }
100% { 100% {
-moz-transform: translate(15px); -moz-transform: translate(1em);
} }
} }
@keyframes right { @keyframes right {
0% { 0% {
transform: translate(-15px); transform: translate(-1em);
} }
50% { 50% {
transform: translate(15px); transform: translate(1em);
} }
100% { 100% {
transform: translate(-15px); transform: translate(-1em);
} }
} }
@keyframes left { @keyframes left {
0% { 0% {
transform: translate(15px); transform: translate(1em);
} }
50% { 50% {
transform: translate(-15px); transform: translate(-1em);
} }
100% { 100% {
transform: translate(15px); transform: translate(1em);
} }
} }