Skip to content

feat: add color for pagination and difficulty tag #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+239 −219
Open

feat: add color for pagination and difficulty tag #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Binary file not shown.
Binary file added build/.DS_Store
View file
Binary file not shown.
222 changes: 121 additions & 101 deletions build/static/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,189 +1,204 @@
@charset 'utf-8';

body {
width: 900px;
margin: 0 auto;
padding: 20px;
font-size: 14px;
color: #303133;
box-sizing: border-box;
width: 900px;
margin: 0 auto;
padding: 20px;
font-size: 14px;
color: #303133;
box-sizing: border-box;
}

body, pre {
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
"微软雅黑", Arial, sans-serif;
body,
pre {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.clearfix:after {
display: table;
content: '';
clear: both;
display: table;
content: "";
clear: both;
}

header.list-header {
margin: 30px 0;
margin: 30px 0;
}

header .row {
display: flex;
margin-bottom: 20px;
display: flex;
margin-bottom: 20px;
}

header .value {
flex: 1 1 0;
flex: 1 1 0;
}

header h1 {
margin-bottom: 30px;
margin-bottom: 30px;
}

.paging ul,
header ul {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}

header li,
main .tag,
header .tag {
display: inline-block;
margin-left: 10px;
margin-bottom: 10px;
padding: 0 5px;
line-height: 18px;
border-radius: 9px;
border: 1px solid #ddd;
display: inline-block;
margin-left: 10px;
margin-bottom: 10px;
padding: 0 8px;
line-height: 18px;
border-radius: 100px;
border: 1px solid #ddd;
transition: 0.3s;
}

header li.selected,
header li:hover,
header .tag:hover {
background-color: #409eff;
color: #fff;
header .tag:hover, .tag.selected {
background-color: #409eff;
color: #fff;
border: 1px solid transparent;
}

header li {
float: left;
float: left;
}

.paging li a,
header a {
text-decoration: none;
color: inherit;
text-decoration: none;
color: inherit;
}

main {
min-height: calc(100vh - 400px);
min-height: calc(100vh - 400px);
}

.list-container {
-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.18);
-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.18);
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.18);
}

main table {
width: 100%;
text-align: left;
line-height: 30px;
border-collapse: collapse;
width: 100%;
text-align: left;
line-height: 30px;
border-collapse: collapse;
}

main table th,
main table td {
padding: 0 0 0 5px;
border-bottom: 1px solid #eee;
padding: 0 0 0 5px;
border-bottom: 1px solid #eee;
}

main tbody tr:hover {
background-color: #ecf0f1;
background-color: #ecf0f1;
}

main tbody tr:last-child td {
border: 0;
border: 0;
}

main table a {
text-decoration: none;
color: #08c;
text-decoration: none;
color: #08c;
}

main table .other {
width: 100px;
width: 100px;
}

main table .tag.easy,
main table .tag.medium,
main table .tag.hard {
color: #fff;
border: 0;
color: #fff;
border: 0;
}

main table .tag.easy {
background-color: #5cb85c;
main table .tag.easy,
header .tag.easy.selected,
header .tag.easy:hover {
background-color: #5cb85c;
}

main table .tag.medium {
background-color: #f0ad4e;
main table .tag.medium,
header .tag.medium.selected,
header .tag.medium:hover {
background-color: #f0ad4e;
}

main table .tag.hard {
background-color: #d9534f;
main table .tag.hard,
header .tag.hard.selected,
header .tag.hard:hover {
background-color: #d9534f;
}

.paging {
margin-top: 20px;
text-align: center;
margin-top: 20px;
text-align: center;
}

.paging ul {
display: inline-block;
display: inline-block;
}

.paging li {
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
line-height: 30px;
border-radius: 15px;
background-color: #eee;
text-align: center;
cursor: pointer;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
line-height: 30px;
border-radius: 15px;
background-color: #eee;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}

.paging li.selected,
.paging li:hover {
background-color: #bfbfbf;
color: #fff;
background-color: #333;
color: #fff;
}

.paging li:last-child {
margin-right: 0;
margin-right: 0;
}

.paging li.selected {
cursor: default;
cursor: default;
}

.paging li.disabled {
cursor: not-allowed;
color: inherit;
background-color: #eee;
cursor: not-allowed;
color: inherit;
background-color: #eee;
}

.paging li a {
display: inline-block;
width: 100%;
cursor: inherit;
cursor: inherit;
}

footer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
}

footer img {
width: 20px;
height: 20px;
width: 20px;
height: 20px;
}

/**
@@ -203,10 +218,10 @@ footer img {
}

@media screen and (max-width: 650px) {
body {
width: 95%;
padding: 10px;
}
body {
width: 95%;
padding: 10px;
}
}

/**
@@ -216,15 +231,17 @@ footer img {

@font-face {
font-family: octicons-link;
src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==)
format("woff");
}

.markdown-body {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
@@ -539,14 +556,16 @@ footer img {
}

.markdown-body code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
font-size: 12px;
}

.markdown-body pre {
margin-top: 0;
margin-bottom: 0;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
font-size: 12px;
}

@@ -593,11 +612,11 @@ footer img {
content: "";
}

.markdown-body>*:first-child {
.markdown-body > *:first-child {
margin-top: 0 !important;
}

.markdown-body>*:last-child {
.markdown-body > *:last-child {
margin-bottom: 0 !important;
}

@@ -642,11 +661,11 @@ footer img {
border-left: 0.25em solid #dfe2e5;
}

.markdown-body blockquote>:first-child {
.markdown-body blockquote > :first-child {
margin-top: 0;
}

.markdown-body blockquote>:last-child {
.markdown-body blockquote > :last-child {
margin-bottom: 0;
}

@@ -751,11 +770,11 @@ footer img {
word-wrap: break-all;
}

.markdown-body li>p {
.markdown-body li > p {
margin-top: 16px;
}

.markdown-body li+li {
.markdown-body li + li {
margin-top: 0.25em;
}

@@ -807,27 +826,27 @@ footer img {
background-color: #fff;
}

.markdown-body img[align=right] {
.markdown-body img[align="right"] {
padding-left: 20px;
}

.markdown-body img[align=left] {
.markdown-body img[align="left"] {
padding-right: 20px;
}

.markdown-body code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(27,31,35,0.05);
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
}

.markdown-body pre {
word-wrap: normal;
}

.markdown-body pre>code {
.markdown-body pre > code {
padding: 0;
margin: 0;
font-size: 100%;
@@ -876,7 +895,8 @@ footer img {
.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
line-height: 10px;
color: #444d56;
vertical-align: middle;
@@ -887,7 +907,7 @@ footer img {
box-shadow: inset 0 -1px 0 #c6cbd1;
}

.markdown-body :checked+.radio-label {
.markdown-body :checked + .radio-label {
position: relative;
z-index: 1;
border-color: #0366d6;
@@ -897,7 +917,7 @@ footer img {
list-style-type: none;
}

.markdown-body .task-list-item+.task-list-item {
.markdown-body .task-list-item + .task-list-item {
margin-top: 3px;
}

4 changes: 2 additions & 2 deletions build/template/list.jsx
View file
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@
<div className="value">
<ul className="clearfix">
{difficultyList.map((item, index) => (
<li key={index} className={item.slug === meta.difficulty.slug ? 'selected' : ''}>
<li key={index} className={item.slug === meta.difficulty.slug ? `tag ${item.slug} selected` : `tag ${item.slug}`}>
<a href={item.slug === meta.difficulty.slug ? url.home : url.difficulty(item.slug)}>{item.name}</a>
</li>
))}
@@ -34,7 +34,7 @@
</div>
</div>
</header>
<main>
<main className="list-container">
<table>
<thead>
<tr>
2 changes: 1 addition & 1 deletion build/template/problem.jsx
View file
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
<div className="row">
<div className="name">Difficulty:</div>
<div className="value">
<a href={url.difficulty(difficulty.slug)} className="tag">{difficulty.name}</a>
<a href={url.difficulty(difficulty.slug)} className={`tag ${difficulty.slug} selected`}>{difficulty.name}</a>
</div>
</div>
<div className="row">
230 changes: 115 additions & 115 deletions package-lock.json
View file

Large diffs are not rendered by default.