Difference between revisions of "Template:SUNY Oneonta/CSS"

Line 1: Line 1:
−
{{SUNY_Oneonta}}
+
/* Universal Styling */
−
<html>
+
−
<head>
+
−
<style>
+
  
−
:root{
+
body {
−
--main-background: #0b0c0f;
+
margin: 0;
−
--main-fonts-color: #fff;
+
font-family: Lato;
−
--main-decor-color:#00a9e2;
+
−
        --main-header-background:#21252e;
+
−
--main-font-family: 'Poppins', sans-serif;
+
 
}
 
}
  
−
*{
+
/* Header Styling */
−
margin: 0;
+
 
−
padding: 0;
+
#iGEMLogo {
−
scroll-behavior: smooth;
+
float: center;
 +
padding 20px;
 
}
 
}
  
−
main{
+
#Title {
−
padding: 0;
+
float: left;
−
width: 100%;
+
color: white;
−
height: 100%;
+
font-size: 32px;
−
background: var(--main-background);
+
 
}
 
}
−
/*──────────────────
+
 
−
      header
+
header {
−
──────────────────*/
+
height: 235px;
−
header{
+
position: relative;
−
margin: 0 auto;
+
background-color: #4b5320;
−
width: 100%;
+
−
height: 70px;
+
−
display: flex;
+
−
    align-items: center;  
+
−
justify-content: space-around;
+
−
    background: transparent;
+
−
position: fixed;
+
−
top: 0;
+
−
transition: 0.3s;
+
−
z-index: 5;
+
 
}
 
}
−
.nav-show{
+
 
−
opacity: 0;
+
header a {
 +
text-decoration: none;
 
}
 
}
  
−
header:hover{
+
header a:hover {
−
opacity: 1;
+
text-decoration: none;
−
background: var(--main-header-background);
+
 
}
 
}
  
−
.logo img{
+
/* Navigation Bar Styling */
−
padding-top: 5px;
+
 
−
height: 50px;
+
.navbar {
−
cursor: pointer;
+
  overflow: hidden;
 +
  background-color: #333;
 
}
 
}
  
−
.nav-bar{
+
.navbar a {
−
list-style:none;
+
  float: left;
−
position: relative;
+
  font-size: 16px;
−
display: inline-flex;
+
  color: white;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 
}
 
}
  
−
a.nav-link{
+
.dropdown {
−
margin: 2px;
+
  float: left;
−
padding: 5px 10px;
+
  overflow: hidden;
−
text-decoration: none;
+
−
color: var(--main-fonts-color);
+
−
font-family: var(--main-font-family);
+
−
cursor: pointer;
+
−
text-transform: uppercase;
+
 
}
 
}
  
−
.active{
+
.dropdown .dropbtn {
−
background: var(--main-decor-color);
+
  font-size: 16px; 
 +
  border: none;
 +
  outline: none;
 +
  color: white;
 +
  /* padding: 14px 16px; */
 +
  background-color: inherit;
 +
  font-family: inherit;
 +
  margin: 0;
 
}
 
}
  
−
.nav-link:hover {
+
.navbar a:hover, .dropdown:hover .dropbtn {
−
color: #000000;
+
  background-color: #cb2c30;
−
    background: var(--main-decor-color);
+
 
}
 
}
  
−
/*──────────────────
+
.dropdown-content {
−
    end header
+
  display: none;
−
──────────────────*/
+
  position: absolute;
 +
  background-color: #f9f9f9;
 +
  min-width: 160px;
 +
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
  z-index: 1;
 +
}
  
−
</style>
+
.dropdown-content a {
−
</head>
+
  float: none;
−
</html>
+
  color: black;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
  background-color: #ddd;
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
  display: block;
 +
}

Revision as of 15:11, 28 July 2021

/* Universal Styling */

body { margin: 0; font-family: Lato; }

/* Header Styling */

  1. iGEMLogo {

float: center; padding 20px; }

  1. Title {

float: left; color: white; font-size: 32px; }

header { height: 235px; position: relative; background-color: #4b5320; }

header a { text-decoration: none; }

header a:hover { text-decoration: none; }

/* Navigation Bar Styling */

.navbar { 

 overflow: hidden;
 background-color: #333;

}

.navbar a { 

 float: left;
 font-size: 16px;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;

}

.dropdown { 

 float: left;
 overflow: hidden;

}

.dropdown .dropbtn { 

 font-size: 16px;  
 border: none;
 outline: none;
 color: white;
 /* padding: 14px 16px; */
 background-color: inherit;
 font-family: inherit;
 margin: 0;

}

.navbar a:hover, .dropdown:hover .dropbtn { 

 background-color: #cb2c30;

}

.dropdown-content { 

 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;

}

.dropdown-content a { 

 float: none;
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;

}

.dropdown-content a:hover { 

 background-color: #ddd;

}

.dropdown:hover .dropdown-content { 

 display: block;

}