Added darkmode styles and optimized class structure
Introduced dark mode styling across sections and improved CSS for better readability and maintainability. Replaced generic class names with more descriptive ones and reorganized structure for consistency. Adjusted responsive design to ensure better display on various screen sizes.
This commit is contained in:
Peter
parent
42dd1a184c
commit
44a7a2140e
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
</app-header>
|
||||
<main>
|
||||
<section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
|
||||
<section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0;">
|
||||
<!-- TODO load player count from old api or backend?-->
|
||||
<h2 style="color: white;"><span class="player-count">Loading...</span></h2>
|
||||
<h2 style="color: white;">Server IP: play.alttd.com</h2>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
-->
|
||||
<section class="darkmodeSection">
|
||||
<div class="container">
|
||||
<iframe id="discordwidget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
|
||||
<iframe id="discord-widget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
|
||||
<div class="paragraph" id="discordp">
|
||||
<h2>Meet the Community</h2>
|
||||
<p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude
|
||||
|
|
@ -68,13 +68,13 @@
|
|||
</div>
|
||||
</section>
|
||||
<section id="section2">
|
||||
<div class="customcontainer">
|
||||
<div class="customContainer">
|
||||
<h2 style="color: white; padding-bottom: 35px; font-size:2.8em">Survival Shaped by You</h2>
|
||||
<p style="color: white; padding-bottom: 35px; margin: auto; font-size: 1.1em;">Altitude is built by the
|
||||
community, for the community. We've added features requested by our members and several custom plugins to
|
||||
create our "perfect" survival experience.</p>
|
||||
<div id="customcontainer2">
|
||||
<div class="customcontainer3">
|
||||
<div class="survivalShapedContainerPlugins">
|
||||
<div class="pluginColumn">
|
||||
<h2>McMMO & MyPet</h2>
|
||||
<p>Two of the most requested plugins on Altitude, level up yourself and your pet with these MMO-based
|
||||
plugins!</p>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="customcontainer3">
|
||||
<div class="pluginColumn">
|
||||
<h2>Dynamic map</h2>
|
||||
<p>See the world and the players around it in real-time! The map shows the entire survival world with claims
|
||||
and warps.</p>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="customcontainer3">
|
||||
<div class="pluginColumn">
|
||||
<h2>Player Shops</h2>
|
||||
<p>Our economy is built on player shops, encouraging player interaction and putting the control in your
|
||||
hands.</p>
|
||||
|
|
@ -108,13 +108,15 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="removemobile darkmodeSection">
|
||||
<div class="customcontainer">
|
||||
<div id="slider-wrapper">
|
||||
<div class="slider-content">
|
||||
<div class="indexslider">
|
||||
<div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
|
||||
<div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show next image -->
|
||||
<span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
|
||||
<div class="customContainer">
|
||||
<div class="sliderWrapper">
|
||||
<div class="sliderContent">
|
||||
<div class="indexSlider">
|
||||
<div id="go-left" onclick="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
|
||||
<div id="go-right" onclick="nextSlide()" class="circleBehind goRight"></div><!-- show next image -->
|
||||
<div class="display">
|
||||
<span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- dots/indicators controls here from js-->
|
||||
</div>
|
||||
|
|
@ -122,7 +124,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section style="background: #202020;">
|
||||
<div class="customcontainer">
|
||||
<div class="customContainer">
|
||||
<h2 id="quote" style="color: white; font-family: 'minecraft-text',sans-serif; line-height: 1.3em;">"Great
|
||||
community, great people, great server all round . . . If it can bring back my love for minecraft, it could
|
||||
work wonders for you."</h2>
|
||||
|
|
@ -130,7 +132,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="darkmodeSection">
|
||||
<div class="customcontainer">
|
||||
<div class="customContainer">
|
||||
<img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
|
||||
width="120">
|
||||
<h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,30 @@
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
main .container {
|
||||
padding: 80px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.customContainer {
|
||||
width: 80%;
|
||||
max-width: 1020px;
|
||||
margin: auto;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Discord Widget
|
||||
#discord-widget {
|
||||
margin: 0 auto;
|
||||
width: 40%;
|
||||
max-width: 380px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
//Scroll button/anchorpoint
|
||||
#scroll-button {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
|
|
@ -118,3 +141,215 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Survival Shaped by You section
|
||||
.survivalShapedContainerPlugins {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pluginColumn {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.pluginColumn div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pluginColumn h2 {
|
||||
color: var(--white);
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pluginColumn p {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
// Community builds section, removed if on mobile
|
||||
.sliderWrapper, .sliderContent {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sliderContent {
|
||||
position: relative;
|
||||
box-shadow: 8px 8px 25px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.indexSlider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.goLeft, .goRight {
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.goRight:hover, .goLeft:hover {
|
||||
background: rgba(155, 155, 155, 0.3);
|
||||
box-shadow: -2px 0 15px rgba(200, 200, 200, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.goLeft {
|
||||
height: 100%;
|
||||
color: white;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.goRight {
|
||||
height: 100%;
|
||||
color: white;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.slide {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.display > span {
|
||||
animation: fadein 1.5s;
|
||||
}
|
||||
|
||||
.display > span {
|
||||
width: 700px;
|
||||
height: 400px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.dots {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
opacity: 0.5;
|
||||
margin: 0 5px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
box-shadow: -2px 0 10px 5px rgba(200, 200, 200, 0.3);
|
||||
background-color: rgba(200, 200, 200, 0.8);
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
// Different resolution changes
|
||||
@media (max-width: 1150px) {
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.title h2 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#homeh2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: calc(100% - 150px);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.container, .customContainer {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#header-img {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.removemobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 690px) {
|
||||
#discordwidget {
|
||||
margin: 0 auto;
|
||||
width: 60%;
|
||||
max-width: 380px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#discordp {
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.title h2 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#homeh2 {
|
||||
font-size: 1.4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#header-img {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: calc(100% - 110px);
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.columnContainer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main .container {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
width: 80%;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
|
||||
.survivalShapedContainerPlugins {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pluginColumn {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
#quote {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -299,6 +299,12 @@ tr {
|
|||
background: #8b8a8f;
|
||||
}
|
||||
|
||||
// Everything for darkmode
|
||||
|
||||
.darkmodeSection {
|
||||
background-color: var(--color-secondary);
|
||||
transition: 0.5s background ease;
|
||||
}
|
||||
|
||||
@media (max-width: 1150px) {
|
||||
.container {
|
||||
|
|
@ -315,5 +321,3 @@ tr {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
/* main css end */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user