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

 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
 +
/* Universal Styling */
  
−
: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;
 +
}
  
 +
.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;
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
 
</html>
 
</html>

Latest revision as of 15:15, 28 July 2021