Skip to content

M
Moecube Store
Commit e72184a4 authored by hjistc's avatar hjistc
Browse files
Options

Adjust UI

parent bf5c1d17
Show whitespace changes
Inline Side-by-side
Showing with 155 additions and 99 deletions
app/store.component.css
View file @ e72184a4
#pic { .navbar-brand {
width: 70%; height: 50px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
font-size: 1.5rem;
} }
#signups { .navbar {
color: #00a4d9; border-bottom: 1px solid #dddddd;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
font-size: 1.25rem;
}
#pic {
width: 100%;
} }
#online { #online {
...@@ -18,14 +28,20 @@ ...@@ -18,14 +28,20 @@
padding-top: .5rem; padding-top: .5rem;
} }
#title {
padding-top: 4rem;
padding-left: 4rem;
}
.col-md-6 { .col-md-6 {
box-shadow: 0 0 30px rgba(0,0,0,.1); box-shadow: 0 0 30px rgba(0, 0, 0, .1);
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 10px; border-radius: 10px;
margin: 0.5%; margin: 0.5%;
padding-top: 1rem; padding-top: 1rem;
flex: 0 0 48%; flex: 0 0 48%;
} }
h2 { h2 {
/*background: linear-gradient( to bottom, #f7f7f7, #eee );*/ /*background: linear-gradient( to bottom, #f7f7f7, #eee );*/
padding: .5rem; padding: .5rem;
...@@ -48,12 +64,6 @@ sup { ...@@ -48,12 +64,6 @@ sup {
color: #00a4d9; color: #00a4d9;
} }
#requirements-wrapper {
background-color: #eceeef;
margin-top: 2rem;
padding: 2rem 0;
}
#signups-wrapper { #signups-wrapper {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -61,21 +71,63 @@ sup { ...@@ -61,21 +71,63 @@ sup {
#requirements { #requirements {
font-size: 14px; font-size: 14px;
} }
#setup { #setup {
font-size: 1.5rem; font-size: 1.5rem;
} }
/*#main > div:nth-child(1) {*/
/*border-left: 4px solid #aae5ff;*/
/*}*/
/*#main > div:nth-child(2) {*/ #main-wrapper {
/*border-left: 4px solid #a8ffab;*/ z-index: 1;
/*}*/ position: relative;
padding-top: 2rem;
padding-bottom: 2rem;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
background: linear-gradient( to bottom, #f7f7f7, #eee );
}
/*#main > div:nth-child(3) {*/ #requirements-wrapper {
/*border-left: 4px solid #ffaabe;*/ z-index: 2;
/*}*/ position: relative;
background: linear-gradient( to bottom, #f7f7f7, #eee );
padding: 4rem 0;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
#main > div:nth-child(1) {
border-top: 4px solid #9acfe6;
background-color: rgba(255, 255, 255, 0.5);
}
#main > div:nth-child(2) {
border-top: 4px solid #9ACFE6;
background-color: rgba(255, 255, 255, 0.5);
}
#main > div:nth-child(3) {
border-top: 4px solid #9ACFE6;
background-color: rgba(255, 255, 255, 0.5);
}
/*#main > div:nth-child(4) {*/ #main > div:nth-child(4) {
/*border-left: 4px solid #fffc9e;*/ border-top: 4px solid #9ACFE6;
/*}*/ background-color: rgba(255, 255, 255, 0.5);
}
#footer-wrapper {
z-index: 3;
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, .1);
padding-top: 1rem;
padding-bottom: 1rem;
background: linear-gradient( to bottom, #f7f7f7, #eee );
}
#footer {
text-align: right;
border: 1px solid #eeeeee;
border-radius: 10px;
padding-top: 1rem;
padding-left: 2rem;
padding-right: 2rem;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
}
app/store.component.html
View file @ e72184a4
<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container"> <div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="https://mycard.moe/logo_60.png" width="30" height="30" class="d-inline-block align-top" alt=""> MyCard <img src="https://mycard.moe/logo_60.png" width="40" height="40" class="d-inline-block align-center" alt=""> MyCard
</a> </a>
<!--<a class="navbar-brand" href="#"></a>--> <!--<a class="navbar-brand" href="#"></a>-->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="jumbotron"> <div class="jumbotron">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col-md-5" id="title">
<h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1> <h1 class="display-3">萌卡<sup class="titileBeta">BETA</sup></h1>
<p>MyCard 同人游戏平台</p> <p>MyCard 同人游戏平台</p>
<p> <p>
...@@ -35,14 +35,14 @@ ...@@ -35,14 +35,14 @@
萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与 萌卡平台支持 <a href="https://wudizhanche.mycard.moe/download?platform=win32">Windows</a> 与
<a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p> <a href="https://wudizhanche.mycard.moe/download?platform=darwin">Mac</a> 操作系统。</p>
</div> </div>
<div class="col" id="pic"> <div class="col">
<img src="images/MyCardProduct.png"> <img id="pic" src="images/MyCardProduct.png">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="main-wrapper">
<div class="container"> <div class="container">
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row" id="main"> <div class="row" id="main">
...@@ -109,6 +109,7 @@ ...@@ -109,6 +109,7 @@
<p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p> <p><a class="btn btn-secondary" href="#" role="button">其他功能目标 &raquo;</a></p>
</div> </div>
</div> </div>
</div>
</div> </div>
<div id="requirements-wrapper"> <div id="requirements-wrapper">
<div class="container"> <div class="container">
...@@ -129,10 +130,13 @@ ...@@ -129,10 +130,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div id="footer-wrapper">
<hr> <div class="container">
<footer> <footer>
<p>&copy; MyCard 2017</p> <div id="footer">
<p>&copy; MyCard 2017 all right reserved.</p>
</div>
</footer> </footer>
</div>
</div> </div>
styles.css
View file @ e72184a4
/* Move down content because we have a fixed navbar that is 50px tall */ /* Move down content because we have a fixed navbar that is 50px tall */
body { body {
font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif; font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
padding-top: 2rem;
font-size: 15px; font-size: 15px;
} }
...@@ -10,6 +9,7 @@ body { ...@@ -10,6 +9,7 @@ body {
} }
.jumbotron { .jumbotron {
/*background: linear-gradient( to bottom, #f7f7f7, #eee );*/ background: linear-gradient( to bottom, #f7f7f7, #eee );
background: linear-gradient( 150deg, #f0c3c2, #e0efd1, #9ae2d3 ); border-radius:unset;
margin-bottom:unset;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment