InitialCommit
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
/*so you can see the structure of the page when body has the tag .debug*/
|
||||
.debug{
|
||||
*{
|
||||
outline: 1px black solid;
|
||||
}
|
||||
}
|
||||
/*removing default styling for body and buttons*/
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:none;
|
||||
background-color: transparent;
|
||||
}
|
||||
body{
|
||||
max-width: 100vw;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
/* child elements inside a flexbox with this class will be centered*/
|
||||
.Center{
|
||||
justify-content: center;
|
||||
}
|
||||
/* child elements inside a flexbox with this class will be separated as far apart as they can be*/
|
||||
.SpaceBetween{
|
||||
justify-content: space-between !important; /*Important overrides any other styles that set justify content*/
|
||||
}
|
||||
.VFlexBox{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.CartContainer{
|
||||
width: 100vw;
|
||||
min-height: 50vh;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
.ExampleText{
|
||||
font-size: 4vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
.ExampleText2{
|
||||
font-size: 4vh;
|
||||
font-family: "Monotype",serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.ExampleButton:hover{
|
||||
color:white;
|
||||
background-color: black;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.ExampleButton{
|
||||
color:black;
|
||||
background-color: white;
|
||||
transition: 0.25s;
|
||||
cursor: pointer;
|
||||
width: 10vw;
|
||||
height: 5vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.Title{
|
||||
font-size: 5vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
}
|
||||
/* these allow elements to set their own alignment even within a flex box*/
|
||||
.AlignLeft{
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.AlignRight{
|
||||
justify-self: flex-end;
|
||||
}
|
||||
/*sets the position of the navigation bar to the top of the page and makes*/
|
||||
.NavBarWrapper{
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
max-width:100vw; /*max width so it does not get wider than the viewport*/
|
||||
width: 100vw;
|
||||
min-height: 7vh; /*min height so it can be dynamically re-sized*/
|
||||
padding: 0.5vh;
|
||||
}
|
||||
/* sets the alignment of an element to be horizontal, flexbox allows dynamic resizing */
|
||||
.HFlexBox{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*Navigation classes*/
|
||||
.NavBarSection{
|
||||
min-width: 30%;
|
||||
flex-wrap: nowrap;
|
||||
margin:1vh;
|
||||
padding:0;
|
||||
}
|
||||
.NavIcon:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.NavIcon{
|
||||
margin:0 0.5vh;
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.NavButton{
|
||||
font-size: 3vh;
|
||||
height: 6vh;
|
||||
min-width: 6vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
margin: 0 1vh; /*this sets the horizontal margin to 1% of the viewport height but the vertical margin to nothing*/
|
||||
}
|
||||
/*the hamburgers container, lays them in a centred column to make sure they're even */
|
||||
.Hamburger{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0 2vh;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*turns the hamburger shape into a cross when its enabled*/
|
||||
.Hamburger.Active{
|
||||
.HamburgerSlab.First{
|
||||
transform: rotate(45deg) translateX(1.125vh)translateY(0.9vh);
|
||||
}
|
||||
.HamburgerSlab.Middle{
|
||||
color:transparent;
|
||||
background-color:transparent;
|
||||
}
|
||||
.HamburgerSlab.Last{
|
||||
transform: rotate(-45deg) translateX(0.75vh)translateY(-0.75vh);
|
||||
}
|
||||
}
|
||||
.HamburgerNavMenu.Active{
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
.Hamburger:hover{
|
||||
.HamburgerSlab{
|
||||
transform: scaleX(1.2);
|
||||
}
|
||||
}
|
||||
.HamburgerSlab{
|
||||
outline: none;
|
||||
width:5vh ;
|
||||
height: 0.75vh;
|
||||
margin-top:0.25vh;
|
||||
margin-bottom: 0.25vh;
|
||||
transition: 0.5s;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
/*gives each hamburger bar a separate colour*/
|
||||
.Hamburger{
|
||||
/*you can reference two consecutive classes for styling
|
||||
so for example here, the hamburger slab span element has
|
||||
class="HamburgerSlab First" or class="HamburgerSlab Middle"
|
||||
and you can reference them individually
|
||||
*/
|
||||
.HamburgerSlab.First{
|
||||
color:slategray;
|
||||
background-color:slategray;
|
||||
}
|
||||
.HamburgerSlab.Middle{
|
||||
color:dimgrey;
|
||||
background-color:dimgray;
|
||||
}
|
||||
.HamburgerSlab.Last{
|
||||
color:darkslategray;
|
||||
background-color:darkslategray;
|
||||
}
|
||||
}
|
||||
|
||||
/*this is for only mobile or 4:3 and lower screen aspect ratios*/
|
||||
@media only screen and (max-aspect-ratio: 12/9) {
|
||||
/* drop down menu is a window not in the hotbar */
|
||||
.HamburgerNavMenu {
|
||||
padding: 0.5vh;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 9vh;
|
||||
right: 0;
|
||||
transform: translateX(0) translateY(-100vh);
|
||||
transition: 0.25s;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
/* ::After is a pseudo element, it allows us to put the little point arrow */
|
||||
.HamburgerNavMenu::After {
|
||||
content: '';
|
||||
position: absolute; /* if the parent element is positioned as relative, absolute defines position relative to the parent*/
|
||||
right: 15%;
|
||||
bottom: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1.2vh solid transparent;
|
||||
border-right: 1.2vh solid transparent;
|
||||
border-bottom: 1.7vh solid black;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/*this is only for desktop screen aspect ratios */
|
||||
@media only screen and (min-aspect-ratio: 12/9) {
|
||||
/*positions hamburger elements on hotbar when open
|
||||
to always have a window style, move whats inside the @media only screen and (max-aspect-ratio: 12/9)
|
||||
outside of the query and delete the @media boxes*/
|
||||
.HamburgerNavMenu {
|
||||
padding: 0.5vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
transform: translateX(100vw) translateY(0);
|
||||
transition: 0.25s;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user