general_styles.css

/* aaron elcheson: 261047851
general style sheet css -> this was intended to be only the navbar and the footer but it became a general style sheet. 
I really should have kept only one because there is not much difference from the recent paste style sheet. */

* {

    margin: 0; /*  */
    padding: 0;
    box-sizing: border-box;

    font-family: 'Courier New', Courier, monospace, sans-serif; /* font family */
}

/* ****************************************************** HEADER AND SITE NAV BAR STYLING USING FLEX BOX ****************************************************************************************************** */



.navbar { /* styling for the navbar content area (includes the logos and the links) */

    height: 100%;
    display: flex;
    
    justify-content: space-around;
    align-items: center;
    
    padding: 1rem;
    padding-right: 5rem;

    background-color: #BFB8BD;
    border-radius: 0.5rem;
    position: relative;
    
}

.logo {

    flex: 0 0 auto;
    margin: 0.3rem;
    margin-right: auto;

    padding-left: 2rem;
    padding-right: 2rem;
    
    justify-content: space-between;
    
}

.logo img {
    
    width: 6rem;
    height: auto;
    display: block;

    border-radius: 0.5rem;
    background-color: #BFB8BD;
    border: 0.1rem solid white;
    transform: scale(1.1);
}

.nav-links { /* links flex with space in between the buttons -> formatted with space from right side of screen */

    display: flex;
    flex: 1;
    list-style: none;

    justify-content: space-between;
    align-items: center; 
    margin-right: 3rem;
   
    gap: 1.5rem; /* space between links */
}

.nav-links a {

    text-decoration: none; /* remove link underline */
    color: black;
    font-size: 1.5rem;

    font-weight: bold;
    font-variant: small-caps;
   
}

.nav-links a:hover {

    color: white;

}

/* **************************************** TABLE HEADER AND FOOTER BUTTONS + TABLE STYLING **************************************************************** */

body {

    display: flex;
    flex-direction: column;

    min-height: 100vh; 

    background-color: #8F99A6;
    

}


.dashboard-box {

    display: flex;
    flex: 1;
   
    background-color: #8F99A6;
    flex-wrap: wrap;

    padding: 1rem;
    gap: 1rem;

}

.picture-box{ /* picture box styling -> stretches to fit like a banner image */

   width: 100%;
   height: 5rem; /* BANNER IMAGES - not working well in about page */
   object-fit: cover;
   
   border-radius: 0.5rem;

}


.sidebar {
 
    flex: 0 0 250px; /* adjusting basis */
    display: flex;
    /* flex: 1; */
    flex-direction: column;
    height: auto;

    color: white;
    padding: 1rem;
    border-radius: 0.5rem;

    background-color: #363F40;
    order: 1;
   

}

.main-content {

    flex: 1; /* make room on resizing  */
    display: flex;
    flex-direction: column; /* flex in column  */

    align-items: center;
    padding: 1.5rem;
   
    gap: 1.5rem;

}

.weather{ /* weather widget from service canada website styling box */

    flex: 1; /* make room on resizing  */
    display: flex;
    flex-direction: column; /* flex in column  */

    align-items: center;
    /* justify-content: right; */
    /* order: 4; */
    padding: 1.5rem;
    
    gap: 1.5rem;


}

 .content-inner { /* another general content box flex container */


        flex: 1; /* make room on resizing  */
        display: flex;
        flex-direction: column; /* flex in column  */
        width: 90%;
      
        margin: 1.5rem;
        align-items: center;
        /* padding: 10rem; */
        padding: 2rem;
        padding-bottom: 4rem;
        gap: 1.5rem;
        
        border: 0.5rem solid #bfb8bd;
        border-radius: 0.5rem;
        background-color: #4d5859;
        
    
        
      }

      .text-area-container {

        flex: 1;
        display: flex;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        
    
        text-align: center;
        
        
      }

      /* responsive sizing for text box area */
      textarea {

        width: 100%;
       
      
        border: 0.3rem solid #ccc;
        
        border-radius: 0.5rem;
        font-size: 1rem;
    
        padding-bottom: 10rem;
      }

     

      .footer {

        display: flex;
        justify-content: center;
        align-items: center;
       
    
        width: 100%;
        margin-top: auto; /* keep footer on bottom */
    
        background-color: #BFB8BD; 
    
        padding: 1rem;
        border-radius: 0.5;
        gap: 1.5rem;
        margin-top: 5rem;

    
    }

      .footer input[type="password"] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .footer button {
        padding: 5px 10px;
        background-color: #f39c12; /* Accent color */
        border: none;

        border-radius: 5px;
        color: #fff;
        cursor: pointer;
      }

      .footer button:hover {
        background-color: #363f40;
      }

      /* responsive elements */
      @media (max-width: 600px) {
        .nav-links {
          flex-direction: column;
          gap: 10px;
        }

        .footer {
          flex-direction: column;
          gap: 1.5rem;
        }
      }



/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }
    
    .sidebar {
        flex: 1;
        text-align: center;
    }

    .table-container, .picture-container {
        width: 100%;
    }
}

.paste-search-area {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    width: auto; /* content area above table -> buttons for recent pastes  */
    max-width: 90rem;

    align-items: center;
    padding: 1rem;
    border-radius: 0.3rem;

    background-color: #4D5859;
    
    
    margin-right: auto;
    gap: 1rem;  /* space between flex boxes  */
    order: 2;

}

.paste-search-buttons { /* table control buttons  */

    display: flex;
    flex-wrap: wrap;
    
    gap: 1rem;
    

}

.paste-button {

    flex: 1;
    font-weight: bold;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-radius: 0.3rem;

    text-align: center;
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    background-color: #363F40;
    color: white;
    border: none;

}

.paste-button:hover { /* styles for buttons on hover  */

    background-color: rgb(243, 178, 189);
    color: black;

}

.paste-button.active {

    background-color: rgb(233, 114, 213);
    color:black;

}

.paste-search-bar { /* expand the search area to flex -> flex in row direction  */

    display: flex;
    flex-direction: row; 
    flex: 2; 

    gap: 1rem; /* space between  */

}

.paste-search-bar input {

    flex: 1;

    padding: 0.5rem;
    
    font-size: 1rem;

    border: none;
    border-radius: 0.5rem;

}

.paste-search-bar button {

    font-size: 1rem;
    border-radius: 0.5rem;

    padding: 0.5rem 1rem;

    background-color: #363F40;
    color: white;
    border: none;

    cursor: pointer;

}

.paste-search-bar button:hover {

    background-color: rgb(243, 178, 189);
    color: black;

}

.page-buttons {  /* ***************************************************** TABLE BUTTONS AT BOTTOM OF TABLE ****************************************************************************  */

display: flex;
justify-content: center;
align-items: center;

margin-top: 1rem;

gap: 1rem;

}

.page-button {

border: none;
font-size: 1rem;
border-radius: 0.3rem;

padding: 0.5rem 1rem;

background-color: #79838C;
color: white;

cursor: pointer;

}

.page-button:hover {

background-color: rgb(243, 178, 189);
color:black;

}

.page-button:disabled {

background-color: grey;

cursor: not-allowed;

}

.table-container {

flex: 1;
width: 90%;
max-width: 90rem;
/* height: 400px;  */


border-radius: 0.3rem;

padding: 1rem;

background-color: #363F40;

margin-right: auto;

}

table { /* TABLE STYLING STARTS ************************************************************/

   


flex: 1;
width: 100%;
border-collapse: collapse;

background-color: #79838C;

padding: 1rem;
margin-right: auto;



}

th, td {
   

 flex: 1;
font-size: 1rem; 
text-align: center;
margin-right: auto;

word-wrap: break-word;

padding: 0.5rem;



}

/* ******************************************************************* RESPONSIVE MEDIA QUERIES BELOW ************************************************************** */

@media (max-width: 780px) {

.paste-search-area {

flex-direction: column; /* search section box should felx column-wise */

gap: 1rem;

}

.paste-search-buttons {

flex-direction: column; 


}

.paste-button { /* paste buttons should resize */

font-size: 1rem;

padding: 0.4rem 0.6rem;

}

.paste-search-bar input,
.paste-search-bar button {

font-size: 1rem;
padding: 0.4rem;


}


.table-container { /* table should resize on smaller screens */


padding: 1rem;
flex: 1;
margin-right: auto;
gap: 1rem;


}

.table{

    padding: 1rem;
    display: flex;
    flex: 2; 

    gap: 1rem;
    
}

th, td {

   display: flex;
    flex: 2; 

font-size: 1rem; 
text-align: center;

word-wrap: break-word;

padding: 0.3rem;


}

}

th { /* BRAND COLORS */

    font-weight: bold;
   
    background-color: #BFB8BD;
    color: black;
   

font-size: 1rem; 
text-align: center;

word-wrap: break-word;

padding: 0.5rem;


}

tr:nth-child(even) {

    background-color: #4D5859;
   
}

tr:nth-child(odd) {

    background-color: #79838C;
   
}




@media (max-width: 780px) { /* ************************************** RESONPSIVE LAYOUT CONTINUED: adaptive layout for search area *****************************************************/

    .paste-search-area {

        flex-direction: column;

        align-items: stretch;

    }

    .paste-search-buttons {

        flex-direction: column;
        align-items: stretch; /* stretches buttons across the box -> might change to make hamburger in nav bar later instead */
        font-size: 1rem;
    }

    .paste-search-bar {

        flex-direction: column;
    }
}

@media (max-width: 600px) {

    .nav-links {

        flex-direction: column;
        gap: 1rem;

    }

    .text-area-container {

        min-width: 20rem;
        min-height: 20rem;
    }

    .footer {

        flex-direction: column;
        gap: 1rem;

    }

  

    
}