zzp/MBTI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修复重定向页面错误，优化手机端样式

Browse Source
This commit is contained in:
xieyibo 2023-12-15 11:47:10 +08:00
parent e39187bef2
commit 973a584610
12 changed files with 289 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
MBTI.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A website for MBTI test">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="MBTI, mbti">
<title>测试中</title>
<link rel="shortcut icon" href="./static/img/favicon.ico">
@ -18,8 +18,12 @@
<script src="./static/js/MBTI.js"></script>
<script src="./static/js/printProjectInfo.js"></script>
<style>
body {
height: 100%;
overflow: hidden;
}
.questionbox {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
@ -28,7 +32,7 @@
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar navbar-default" style="margin-bottom: 10em;">
<div class="container">
<div class="navbar-header">
<a href="./index.html" class="navbar-brand">MBTI</a>

12
index.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A website for MBTI test">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="MBTI, mbti">
<title>首页</title>
<link rel="shortcut icon" href="./static/img/favicon.ico">
@ -20,6 +20,7 @@
</head>
<body>
<div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
@ -42,10 +43,11 @@
<div class="container">
<div class="page-header">
<div class="content">
<svg viewBox="0 0 1000 300">
<svg viewBox="0 0 1000 300" style="width: 100%;">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".2em">
<text text-anchor="middle" x="50%" y="60%" dy=".2em">
MBTI-TEST
</text>
</symbol>
@ -56,7 +58,7 @@
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<clippath id="cp-text">
<text text-anchor="middle" x="50%" y="50%" dy=".2em" class="text--line">
<text text-anchor="middle" x="50%" y="60%" dy=".2em" class="text--line">
MBTI-TEST
</text>
</clippath>
@ -73,6 +75,7 @@
<use xlink:href="#s-text" class="text--transparent"></use>
</svg>
</div>
</div>
<div class="bs-docs-section">
@ -91,6 +94,7 @@
</div>
</div>
</div>
<a href="./MBTI.html" class="a-btn">
<span></span>
<span>Start</span>

1
personalities.html
View File

@ -3,7 +3,6 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A website for MBTI test">
<meta name="viewport" content="width=device-width">

2
personalities/INTP.html
View File

@ -32,7 +32,7 @@
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href=".../personalities.html">十六种人格简介</a>
<a href="../personalities.html">十六种人格简介</a>
</li>
</ul>
</div>

2
personalities/ISFJ.html
View File

@ -32,7 +32,7 @@
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href=".../personalities.html">十六种人格简介</a>
<a href="../personalities.html">十六种人格简介</a>
</li>
</ul>
</div>

2
personalities/ISFP.html
View File

@ -32,7 +32,7 @@
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href=".../personalities.html">十六种人格简介</a>
<a href="../personalities.html">十六种人格简介</a>
</li>
</ul>
</div>

2
personalities/ISTJ.html
View File

@ -32,7 +32,7 @@
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href=".../personalities.html">十六种人格简介</a>
<a href="../personalities.html">十六种人格简介</a>
</li>
</ul>
</div>

2
personalities/ISTP.html
View File

@ -32,7 +32,7 @@
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href=".../personalities.html">十六种人格简介</a>
<a href="../personalities.html">十六种人格简介</a>
</li>
</ul>
</div>

2
static/css/app.css
View File

@ -4,9 +4,11 @@ body {
-moz-background-size: cover;
background-size: cover;
}
footer {
margin-top: 90px;
}
.flashes {
margin-top: 90px;
text-align: center;

16
static/css/article.css
View File

@ -1,7 +1,14 @@
html, body, .article, .header {
html,
body,
.article,
.header {
height: 100%;
}
p {
font-size: 14px
}
/* Header */
.header {
position: relative;
@ -221,7 +228,9 @@ button.trigger span::before {
/* Media Queries */
@media screen and (max-width: 47em) {
.title, .content {
.title,
.content {
font-size: 70%;
}
}
@ -231,7 +240,8 @@ button.trigger span::before {
padding: 0 2em 5em;
}
.title, .content {
.title,
.content {
font-size: 50%;
}

21
static/css/title.css
View File

@ -1,4 +1,15 @@
/* test style */
@media screen and (max-width: 27em) {
p {
font-size: 11px;
}
}
body {
height: 100%;
}
.text {
fill: none;
stroke-width: 6;
@ -111,13 +122,15 @@
div.content {
font: 800 10.5em/1 'Open Sans', Impact;
height: 240px;
font: 800 14em/1 'Open Sans', Impact;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 5%;
margin-bottom: 10%;
}
.page-header {
padding-top: 50px;
}
svg {

57
static/css/welcome.css
View File

@ -116,7 +116,6 @@ a{
.container {
hidden:100vh;
width: 100%;
position: relative;
}
@ -186,21 +185,53 @@ a{
/* Colors */
.ot-letter-left span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
.ot-letter-left span:after { color: #fff; }
.ot-letter-left:hover span:after { color: #e8e8e8; }
.ot-letter-left span {
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
}
.ot-letter-right span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
.ot-letter-right span:after { color: #fff; }
.ot-letter-right:hover span:after { color: #e8e8e8; }
.ot-letter-left span:after {
color: #fff;
}
.ot-letter-top span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
.ot-letter-top span:after { color: #fff; }
.ot-letter-top:hover span:after { color: #e8e8e8; }
.ot-letter-left:hover span:after {
color: #e8e8e8;
}
.ot-letter-bottom span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
.ot-letter-bottom span:after { color: #fff; }
.ot-letter-bottom:hover span:after { color: #e8e8e8; }
.ot-letter-right span {
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
}
.ot-letter-right span:after {
color: #fff;
}
.ot-letter-right:hover span:after {
color: #e8e8e8;
}
.ot-letter-top span {
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
}
.ot-letter-top span:after {
color: #fff;
}
.ot-letter-top:hover span:after {
color: #e8e8e8;
}
.ot-letter-bottom span {
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
}
.ot-letter-bottom span:after {
color: #fff;
}
.ot-letter-bottom:hover span:after {
color: #e8e8e8;
}
.ot-letter-left span:before,
.ot-letter-left span:after {