Commit 67c3cf73 authored by Porter Libby's avatar Porter Libby
Browse files

work on some colors

parent af17101b
......@@ -31,31 +31,31 @@
</div>
</div>
<div class="parent p1" id='p1' style='position: absolute; z-index: 0;'>
<div class="box div1" onclick='openDetails("campus_life",this)'>
<div class="box color-2 div1" onclick='openDetails("campus_life",this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div2" onclick='openDetails("community_engagement", this)'>
<div class="box color-2 div2" onclick='openDetails("community_engagement", this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div3" onclick='openDetails("major_selection", this)'>
<div class="box color-3 div3" onclick='openDetails("major_selection", this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div4" onclick='openDetails("research", this)'>
<div class="box color-3 div4" onclick='openDetails("research", this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div5" onclick='openDetails("internship", this)'>
<div class="box color-3 div5" onclick='openDetails("internship", this)'>
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div6" onclick='openDetails("off_campus_study", this)'>
<div class="box color-4 div6" onclick='openDetails("off_campus_study", this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div7" onclick='openDetails("career", this)'>
<div class="box color-4 div7" onclick='openDetails("career", this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
......
:root{
--block-color-1: coral;
--block-color-2: coral;
--block-color-3: coral;
--block-color-4: coral;
--circle-color-1: lightblue;
--block-color-2: lightblue;
--block-color-3: orange;
--block-color-4: maroon;
--circle-color-1: coral;
--detail-color-1: lightgray;
--text-color-1: black;
--text-color-light: #ddd;
--text-color-2: #333;
--button-color: lightgreen;
--button-color: lightgray;
}
html{
......@@ -79,7 +80,22 @@ body {
text-align: center;
cursor: pointer;
border-radius: 8px;
}
.color-1{
background-color: var(--block-color-1);
color: var(--text-color-1);
}
.color-2{
background-color: var(--block-color-2);
color: var(--text-color-1);
}
.color-3{
background-color: var(--block-color-3);
color: var(--text-color-1);
}
.color-4{
background-color: var(--block-color-4);
color: var(--text-color-light);
}
.box:hover{
......@@ -102,10 +118,8 @@ body {
display: inline-block;
vertical-align: middle;
font-size: 3vmin;
color: var(--text-color-1);
}
.box-prompt{
color: var(--text-color-2);
font-size: 2vmin;
font-weight: normal;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment