Skip to content

5 info page Pull Request #5

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 26 commits into
base: main
Choose a base branch
from
Open

5 info page Pull Request #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
4fdd892
Added info.html file (from the trello)
Aug 14, 2021
1007ca3
Added proper nav bar and footer script, and also removed broken cards
Aug 14, 2021
e23a7b1
I added flipping cards, and css for flipping cards
Aug 14, 2021
0d3054e
Properly put cards in a row
Aug 14, 2021
6808f6e
Changed some CSS (dealing with the cards color)
Aug 14, 2021
e022348
Added "Ip Address Section" With static cards, and also CSS for the cards
Aug 15, 2021
733ff3f
Added a Javascript script that shows how many people are online in ea…
Aug 15, 2021
cf588dc
Changed "IP" to "server"
Aug 15, 2021
be4d13e
Populated the cards with information
Aug 15, 2021
5024258
Created a text copy, javascript file
Aug 15, 2021
8b9d8a1
Added copy button, and ip address for our main server
Aug 15, 2021
8561961
added CSS for the button to look better
Aug 16, 2021
230405a
Added a card footer and css for a card footer
Aug 16, 2021
47d2b71
Changed image for creative server card
Aug 16, 2021
6c7bf09
Polished the static cards showing server ips
Aug 17, 2021
ce14ac8
Sorry laguna, idk what I did here just random html and css fuckery ♥
Aug 17, 2021
74515cf
Added more CSS for flip cards,
Aug 19, 2021
00e446b
Finished "Core Plugins" Section of the info page
Aug 19, 2021
42930fc
Added a table and section for tweaks
Aug 20, 2021
347ca96
Added more to the tweaks table
Aug 21, 2021
5259cde
Finished "In game Tweaks" table
Aug 21, 2021
e03b9ef
removed "px" from "border-top-right-radius" and "border-top-left-radius"
Aug 24, 2021
0563180
Fixed buttons, and ip addresses
Aug 27, 2021
cc511cb
Formatting cleanup before Code Review
LagunaElectric Aug 27, 2021
577f09a
More formatting cleanup and some css cleanup. Rearrange JS
LagunaElectric Aug 27, 2021
88cdf30
Removed the server cards, and the big image ☺
Aug 27, 2021
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
190 changes: 190 additions & 0 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3278,4 +3278,194 @@ body.is-touch #banner {
margin: 0;
padding: 0;
}
}

/* style for flipping card starts here */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where did you find this CSS?

.flipping-cards {
margin-top: -3rem;
padding: 2rem 0;
background-image: linear-gradient(to left bottom, #e44c65, #d6a334);
font-family: 'Rubik', sans-serif;
}

.flipping-card-wrapper {
padding: 2rem;
margin: 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}

.flipping-card-item-wrapper {
perspective: 150rem;
position: relative;
width: 340px;
height: 400px;
margin: 1rem;
}

.flipping-card-item-side {
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin: 1.5rem;
width: 100%;
height: 100%;
background-position: center;
color: #ffffff;
background-color: #121218cc;
box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.18);
transition: all 1s;
}

.flipping-card-item-side-back {
color: rgb(255, 255, 255);
transform: rotateY(180deg);
}

.flipping-card-item-wrapper:hover .flipping-card-item-side-front {
transform: rotateY(-180deg);
}

.flipping-card-item-wrapper:hover .flipping-card-item-side-front {
transform: rotateY(-180deg);
}

.flipping-card-item-wrapper:hover .flipping-card-item-side-back {
transform: rotateY(0);
}

.flipping-card-item-img {
width: 100%;
height: 100%;
background-size: cover;
background-blend-mode: color;
}

.flipping-card-back-wrapper {
font-weight: 200;
position: relative;
top: 25%;
left: 0;
margin: 2rem;
text-align: center;
}

.flipping-card-back-wrapper__btn {
margin-top: 2rem;
padding: .7rem;
text-align: center;
color: #ffffff;
border: 0;
background-image: linear-gradient(to right bottom, #e44c65, #e92949);
transition: all .5s;
}

.flipping-card-back-wrapper__btn:hover {
background-image: none;
color: #ffa41b;
border: 1px solid #ffa41b;
}

.flip-card-text-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}

.flip-card-text-paragraph2 {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}

.flip-card-text-paragraph {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}

.copyright {
font-size: 11px;
color: #ffffff;
text-align: center;
}

/* This is for normal cards that don't flip*/
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-footer {
padding: .75rem 1.25rem;
padding-top: 0.75rem;
padding-right: 1.25rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
background-color: rgba(0, 0, 0, .3);
border-top: 1px solid rgba(0, 0, 0, .125);
border-top-color: rgba(0, 0, 0, 0.125);
border-top-style: solid;
border-top-width: 1px;
}

.card-footer:last-child {
border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: calc(-1px + 0.25rem);
border-bottom-left-radius: calc(-1px + 0.25rem);
}

/* Add some padding inside the card container */
.cardcontainer {
padding: 2px 16px;
}

.btn {
display: inline-block;
font-weight: 400;
color: #ebebeb;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.cardfooter {
padding: .75rem 1.25rem;
background-color: rgba(0, 0, 0, .03);
border-top: 1px solid rgba(0, 0, 0, .125);
}

/* CSS for putting text on an image*/

/* Centered text */
.centered {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of your files should end in a new line.

8 changes: 8 additions & 0 deletions assets/js/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -578,4 +578,12 @@

function toggleSidePanel() {
$('body').toggleClass('navPanel-show');
}

function copyToClipboard(element) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where did you get this function?

var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of your files should end in a new line.

3 changes: 1 addition & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ <h2>Hermitcraft-like Shopping District</h2>
<div class="container">
<header class="major">
<h2>ComparatorCraftSMP features</h2>

</header>
<div class="box alt">
<div class="row gtr-uniform">
Expand All @@ -126,7 +125,7 @@ <h3>Dynmap</h3>
<p>
We have dynmap which is a google maps style website which shows a map of the server, and
you can see peoples builds.
<a href="https://map.comparatorcraftsmp.net/"> Check it out here</a>
<a href="https://map.comparatorcraftsmp.net/">Check it out here</a>
</p>
</section>
<section class="col-4 col-6-medium col-12-xsmall">
Expand Down
Loading