Skip to content

Instantly share code, notes, and snippets.

@skybldev
Last active September 16, 2018 00:58
Show Gist options
  • Save skybldev/169747c7ebb6dfa748b6350219caeda5 to your computer and use it in GitHub Desktop.
Save skybldev/169747c7ebb6dfa748b6350219caeda5 to your computer and use it in GitHub Desktop.
CSS styling for Synonym(dot)com, because I'm a picky little kid who doesn't like ugly sites. The code is a little dirty, please forgive.
nav.navbar {
background: rgba(255, 255, 255, 0) !important;
padding-top: 0px;
}
div.row:not(.result) {
margin-top: -15px;
width: 1600;
backdrop-filter: blur(5px);
height: 150px;
}
div#heading-container {
background:rgba(255, 255, 255, .57);
line-height: 1.5;
position: fixed;
}
.container {
max-width: 1500px;
}
div#heading-container {padding-top: 15px;}
div.logo-container {
position: relative;
width: 100%;
margin: auto;
bottom: 1;
padding-top: 15px;
}
img.logo-img {width: 12%;}
div.search {
font-family: "Whitney HTF";
font-size: 20pt;
position: relative;
top: 0px;
width: 100%;
}
input#searchbar {
background: rgba(255, 255, 255, .73) !important;
border: 2px solid #777777;
border-radius: 100px !important;
height: 72px;
width: 1000px;
outline: none;
padding-left: 30px !important;
padding-bottom: 5px !important;
box-sizing: border-box;
color: #595959;
}
input, textarea, [contenteditable] {caret-color: #595959;}
input#searchbar::placeholder {
transition: all 500ms cubic-bezier(0.785, 0.005, 0.180, 1.005);
color: #d9d9d9;
text-shadow: 0 0 5px rgba(112, 112, 112, 0);
}
input#searchbar:focus::placeholder {
color: transparent;
text-shadow: 0 0 5px rgba(112, 112, 112, .15);
}
input#searchbar:not(:focus) {
transition: all 500ms cubic-bezier(0.785, 0.005, 0.180, 1.005);
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
margin-top: 0%;
}
input#searchbar.glow {
transition: all 500ms cubic-bezier(0.785, 0.005, 0.180, 1.005);
box-shadow: 0 0 100px 320px rgba(255, 255, 255, .51) !important;
margin-top: 25%;
}
h1 {visibility: hidden;}
.main {margin-top: 20px;}
.card {border-radius: 5px;}
div.result {
width: 100%;
}
div.synonym {
font-size:0;
}
div.result > div {
width: 100%;
}
h3.term {
margin-top: -5px;
font-family: "Whitney HTF";
font-size: 30pt;
color: #424242;
}
p.definition:before {
content: "Definition";
padding: 2px 6px 2px 6px;
color: #595959;
background-color: rgba(80, 80, 80, 0.06);
border-radius: 5px;
margin-right: 7px;
margin-left: -6px;
font-weight: 600
}
ul.synonyms, ul.antonyms{
margin-left: -11px;
margin-top: -12px
}
.synonym ul li a {
padding: 2px 6px 2px 6px;
margin: 2px;
border-radius: 5px;
cursor: pointer;
line-height: 32px;
}
.syn a {
transition: all 50ms cubic-bezier(0.785, 0.005, 0.180, 1.005);
font-size: 15pt;
font-family: "Whitney HTF";
color: #595959;
background-color: #00a8ff20;
font-weight: 600;
} a:hover {
background-color: #00a8ff1a;
color: #0000007d !important;
}
.ant a {
font-size: 15pt;
font-family: "Whitney HTF";
color: #595959;
background-color: #ff000024;
font-weight: 600;
}
p.definition {
padding: 2px 6px 2px 6px;
color: #6d6d6d;
background-color: rgba(80, 80, 80, 0.06);
border-radius: 5px;
font-family: "Whitney HTF";
font-style: normal;
font-size: 15pt;
line-height: 29px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment