zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

Initial stab at making plan charts look okay at small screen sizes

Browse source
This commit is contained in:
Victoria Wang 2014-10-17 15:57:07 -07:00
parent e917023fe9
commit 2a73fac5d3
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
sass/_project-sass/_project-Main.scss
View file

@ -842,9 +842,15 @@ a.tag:hover {
}
}
.section.features h2, .section.features h3, .section.features p {
.section.features h2, .section.features h3, .section.features p, .section.features a {
color: #fff;
}
.section.features a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.section.features .fa {
margin-right: 10px;
}
@ -906,6 +912,7 @@ a.tag:hover {
}
.section.plans {
background: #fff;
width: 100%;
}
.section.plans h2 {
color:#4F7E89;
@ -997,6 +1004,14 @@ a.tag:hover {
margin: 2em 0 4em 0;
width: 100%;
}
.plan-overview, .plan-chart {
@media(max-width:800px) {
font-size: 90%;
}
@media(max-device-width:480px), screen and (max-width:550px) {
font-size: 80%;
}
}
.plan-chart th {
background: #D6D6D6;
padding: 15px 0;
@ -1027,6 +1042,10 @@ a.tag:hover {
border-bottom: 1px dotted #bbb;
cursor: help;
}
@media(max-device-width:480px), screen and (max-width:800px) {
width: 26%;
}
}
.plan-chart td:nth-child(even) {
background: #F8F8F8;
@ -1034,6 +1053,11 @@ a.tag:hover {
.plan-chart .fa-check {
color: #6CCC24;
}
.plan-overview .btn-Action, .plan-chart .btn-Action {
@media(max-device-width:480px), screen and (max-width:900px) {
padding: 7px 10px;
}
}
.selected {
font-weight: bold;
}

4
views/plan/_pricing.erb
View file

@ -104,12 +104,12 @@
<a href="/" class="btn-Action">Choose</a>
</th>
<th class="professional">
<h3>Cat Bus</h3>
<h3>Cat&nbsp;Bus</h3>
<p>$20/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>
<th class="professional">
<h3>Fat Cat</h3>
<h3>Fat&nbsp;Cat</h3>
<p>$50/mo</p>
<a href="/" class="btn-Action">Choose</a>
</th>