The officially official Devuan Forum!

You are not logged in.

#1 2017-05-27 01:23:41

pekman
Member
From: /usr/bin/pekman
Registered: 2017-05-11
Posts: 58  

Devuan color Palette

Hey all.

Seen's Devuan sites, i capture this colors and compile this palette.

Devuan palette color

Cheer's

Last edited by pekman (2017-05-27 07:32:41)

Offline

#2 2017-05-27 04:09:00

golinux
Administrator
Registered: 2016-11-25
Posts: 3,137  

Re: Devuan color Palette

Nice thought to do that pekman! Someone was asking about the colors earlier today and I completely forgot about responding so this will come in handy.

Your palette is in the ballpark but several of those colors are not in the purpy theme for the website.  And several colors are missing like the orange link hover color #C2540D.  I have copied the purpy theme css below so you can get all the correct colors.  Note that the colors are subtle and nuanced at different locations of the site:

$color0:   #7B7691; // background
$color1:   #E8E7F3; // text

$c-body-bg:    #FFFFFF; 
$c-body-fg:    #424252; 

$c-a-link:     #9AA12D;
$c-a-hover:    #C2540D;
$c-a-visited:  #A185B9;

$c-code-bg:    #F3F1F2;

$c-about-bg:   #6F6A83;

$c-donate-bg:               #A1B067;
$c-donate-fg:               #E5EDB0;

$c-donate-bg-hover:         #E5EDB0;
$c-donate-fg-hover:         #D91C15;

$c-donate-icon-heart-hover: #D91C15;

$c-sticky-bar-bg:       #88839C;
$c-sticky-bar-fg:       #E8E7F3;
$c-sticky-bar-a-hover:  #E89A67;
$c-sticky-bar-a-hover:  #D7EA8E;

$c-sticky-bar-a-link:   #D2E292;
$c-sticky-bar-a-hover: #EBB795;

$c-find-a-link:    #CDDF86;
$c-find-a-hover:   #E9AF8A;

$c-next-a-link:         #B5D147;
$c-next-a-visited:      #A1B067;
$c-next-a-hover:        #E89A67;

body {
    background-color: $c-body-bg;
    color: $c-body-fg;
}

body>header {
    background-color: $c-body-bg;
}

h1 {
  background: transparent url(/ui/img/rounded-purpy-square.png) 0 1rem no-repeat;
  background-size: 3.2rem 3.2rem;
  padding: 0.5rem 0.5rem 0.5rem 5rem;
}

a {
    font-weight: normal;

    &:link {
        color: $c-a-link;
    }
    &:visited {
        color: $c-a-visited;
    }
    &:hover {
        color: $c-a-hover;
        text-decoration: underline;
    }
}

code { background-color: $c-code-bg;
	margin:0 .2rem 0 35px; ;
}

p>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

li>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

a>code {padding:.2rem .5rem;
	margin:0 .2rem 0 0;
}

ul ul,ul ol,ol ol,ol ul{
	margin:1.5rem 0 1.5rem 3.5rem;
}

ol,ul{
	padding-left:5px
}

#about {
    background-color: $c-about-bg;
    color: #ffffff;
}

#banner {
    background-color: #6F6A83;
}

/* fixed header */
#sticky-bar {
    background-color: $c-sticky-bar-bg;
    color: $color1;

    a {
        color: $c-sticky-bar-a-link;
        &:hover {
            color: $c-sticky-bar-a-hover;
        }
    }

}

/* footer */
#find {
    background-color: $color0;
    color: $color1;

    a {
        &:link, &:visited {
            color: $c-find-a-link;
        }
        &:hover {
            color: $c-find-a-hover;
        }
    }

}

/* donate button */
.button.button-primary,
#sticky-bar .button.button-primary,
#find .button.button-primary {
    background-color: $c-donate-bg;
    border-color: $c-donate-bg;
    color: $c-donate-fg;
    padding: 0 2rem;

    &:focus,
    &:hover {
        background-color: $c-donate-bg-hover;
        border-color: $c-donate-bg-hover;
        color: $c-donate-fg-hover;
        text-decoration: none;
        font-weight: 600;

        .icon-heart {
            color: $c-donate-icon-heart-hover;
        }
    }
}

/* download button */
.button.button-dl,#sticky-bar .button.button-dl,#find .button.button-dl{
	background-color:#C5D27D;
	border-color:#C5D27D;
	color:#662984;
	padding:.25rem 2rem 0
}

/* download button hover */
.button.button-dl:focus,.button.button-dl:hover,#sticky-bar .button.button-dl:focus,#sticky-bar .button.button-dl:hover,#find .button.button-dl:focus,#find .button.button-dl:hover{
	background-color:#E5EDB0;
	border-color:#E5EDB0;
	color:#662984;
	text-decoration:none;
	font-weight:600
}

/* download button icon */
.button.button-dl:focus .icon-download,.button.button-dl:hover .icon-download,#sticky-bar .button.button-dl:focus .icon-download,#sticky-bar .button.button-dl:hover .icon-download,#find .button.button-dl:focus .icon-download,#find .button.button-dl:hover .icon-download{
	color:#662984
}

Offline

#3 2017-05-27 05:58:57

pekman
Member
From: /usr/bin/pekman
Registered: 2017-05-11
Posts: 58  

Re: Devuan color Palette

I work it, go rebuild palette, thanks for clarification.

Offline

#4 2017-05-27 07:32:58

pekman
Member
From: /usr/bin/pekman
Registered: 2017-05-11
Posts: 58  

Re: Devuan color Palette

update

Offline

#5 2017-05-27 15:19:34

golinux
Administrator
Registered: 2016-11-25
Posts: 3,137  

Re: Devuan color Palette

FANTASTIC!!  Thanks so much for putting that together!

Offline

Board footer