Last active
September 16, 2018 00:58
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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