RedXen/Homepage
RedXen
/
Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use avg of contrasts as a default, if href is present use contrast, align dates to right and adjust visibility

This commit is contained in:
caskd 2019-08-04 14:17:12 +02:00
parent d6c52b95fe
commit b5ebcd5f72
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/main.less
View File

@ -14,17 +14,17 @@ h1 {font-size:32px}
h2 {font-size:14px} h2 {font-size:14px}
a { a {
color: contrast(@bg); color: average(contrast(@bg), @bg);
text-decoration: none; text-decoration: none;
&:hover, &[href]:hover,
&.highlight { &[href].highlight {
color: @color; color: @color;
} }
&.highlight:hover { &[href].highlight:hover {
text-decoration: underline; text-decoration: underline;
} }
&[href="#"] { &[href] {
color: average(contrast(@bg), @bg); color: contrast(@bg);
} }
transition: cubic-bezier(0.23, 1, 0.32, 1) 0.4s; transition: cubic-bezier(0.23, 1, 0.32, 1) 0.4s;
} }
@ -118,7 +118,11 @@ html {
flex-direction: row; flex-direction: row;
div.item { div.item {
margin: 14px 0; margin: 14px 0;
font-size: 20px;
h4 {font-size: 24px;}
div.date { div.date {
width: 100%;
text-align:right;
font-size: 12px; font-size: 12px;
} }
} }

16
index.html
View File

@ -5,7 +5,7 @@
<!--Styles and meta--> <!--Styles and meta-->
<title>RedXen Community</title> <title>RedXen Community</title>
<meta name="description" content="The community that empowers gamers."> <meta name="description" content="The community that empowers gamers.">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<meta name="keywords" content="rx,redxen,community,game,games,server,discord,pmbot,forum"> <meta name="keywords" content="rx,redxen,community,game,games,server,discord,pmbot,forum">
<meta name="author" content="caskd"> <meta name="author" content="caskd">
<meta name="theme-color" content="#d22"> <meta name="theme-color" content="#d22">
@ -19,11 +19,11 @@
<!--These endless wrappers might be unnecessary now but could be useful later--> <!--These endless wrappers might be unnecessary now but could be useful later-->
<div class="headwrap"> <div class="headwrap">
<div class="header"> <div class="header">
<a href="#">Services</a> <a>Services</a>
<a href="#">Platform</a> <a>Platform</a>
<img alt="logo" src="res/logo.png"> <img alt="logo" src="res/logo.png">
<a href="#">Community</a> <a>Community</a>
<a href="#" class="highlight">Get active</a> <a class="highlight">Get active</a>
</div> </div>
</div> </div>
<div class="bodywrap"> <div class="bodywrap">
@ -44,7 +44,7 @@
</div> </div>
<div class="item"> <div class="item">
<h4>Something went wrong</h4> <h4>Something went wrong</h4>
<a href="#">Read more</a> <a href="something">Read more</a>
<div class="date">01.01.1970</div> <div class="date">01.01.1970</div>
</div> </div>
</div> </div>
@ -75,9 +75,9 @@
<div class="col"> <div class="col">
<ul> <ul>
<span>Legal</span> <span>Legal</span>
<li><a href="#">Terms of service</a></li> <li><a>Terms of service</a></li>
<li><a href="legal/privacypolicy.html">Privacy Policy</a></li> <li><a href="legal/privacypolicy.html">Privacy Policy</a></li>
<li><a href="#">Contact</a></li></div> <li><a>Contact</a></li></div>
</ul> </ul>
</div> </div>
</div> </div>