mirror of
https://github.com/maxboeck/webring
synced 2025-02-16 17:58:23 +00:00
redesign layout
This commit is contained in:
Max Böck
parent
bcd113e5ef
commit
64b191007c
12 changed files with 152 additions and 120 deletions
|
|
@ -10,11 +10,55 @@ body {
|
|||
color: $body-color;
|
||||
text-align: left;
|
||||
background-color: $body-bg;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
max-width: 640px;
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
|
||||
&__primary {
|
||||
flex: 1 0 auto;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
&__secondary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
width: 50%;
|
||||
|
||||
&__primary {
|
||||
padding: 2rem;
|
||||
border-right: 1px solid $gray-lighter;
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
h3,
|
||||
h4 {
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.75em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
.beta {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 80px 80px 0;
|
||||
border-color: transparent $gray-darker transparent transparent;
|
||||
|
||||
&::after {
|
||||
content: 'beta';
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-style: italic;
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -70px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
.form {
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid $gray-light;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
|
||||
padding: 1.5rem;
|
||||
|
||||
|
|
|
|||
32
src/assets/styles/components/_ghlink.scss
Normal file
32
src/assets/styles/components/_ghlink.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.ghlink {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
fill: #fff;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 80px 80px 0;
|
||||
border-color: transparent $gray-darker transparent transparent;
|
||||
}
|
||||
&:hover::after {
|
||||
border-color: transparent $gray-darkest transparent transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,9 @@
|
|||
fill: $brand-primary;
|
||||
fill-opacity: 0.25;
|
||||
}
|
||||
&__image {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&__node {
|
||||
fill: $gray-dark;
|
||||
stroke-width: 5;
|
||||
|
|
@ -24,10 +27,15 @@
|
|||
}
|
||||
}
|
||||
&__tooltip {
|
||||
opacity: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__node:hover + &__tooltip {
|
||||
}
|
||||
|
||||
.map--dense {
|
||||
.map__tooltip {
|
||||
opacity: 0;
|
||||
}
|
||||
.map__node:hover + .map__tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,10 @@
|
|||
.webring {
|
||||
&__card {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
|
||||
}
|
||||
|
||||
&__header,
|
||||
&__body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 4px solid $gray-lighter;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid $gray-lighter;
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
object-fit: center;
|
||||
object-position: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
margin-right: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
|
@ -67,20 +41,4 @@
|
|||
padding: 0.25rem 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding-top: 3rem;
|
||||
|
||||
&__header {
|
||||
display: block;
|
||||
padding-top: 60px;
|
||||
}
|
||||
&__image {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
}
|
||||
&__map {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@
|
|||
@import 'components/webring';
|
||||
@import 'components/map';
|
||||
@import 'components/form';
|
||||
@import 'components/beta';
|
||||
@import 'components/ghlink';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,21 @@
|
|||
<svg class="map" width="640" height="440">
|
||||
<circle cx="320" cy="220" r="170" class="map__circle"></circle>
|
||||
<circle cx="320" cy="220" r="50" class="map__center"></circle>
|
||||
<text x="320" y="225" text-anchor="middle" class="map__title">{{ meta.title }}</text>
|
||||
{% for node in members|mapNodes(170, 640, 440) %}
|
||||
{% set r = 170 %}
|
||||
{% set ri = 50 %}
|
||||
{% set w = 600 %}
|
||||
{% set h = 440 %}
|
||||
{% set nodes = members|mapNodes(r, w, h) %}
|
||||
|
||||
<svg class="map {% if members|length > 10 %}map--dense{% endif %}" width="{{ w }}" height="{{ h }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
|
||||
<circle cx="{{ w/2 }}" cy="{{ h/2 }}" r="{{ r }}" class="map__circle"></circle>
|
||||
<clipPath id="map-image-mask">
|
||||
<circle cx="{{ w/2 }}" cy="{{ h/2 }}" r="{{ ri }}" />
|
||||
</clipPath>
|
||||
{% if meta.image %}
|
||||
<image class="map__image" x="{{ w/2 - ri }}" y="{{ h/2 - ri }}" clip-path="url(#map-image-mask)" xlink:href="/assets/images/{{ meta.image }}" width="{{ ri*2 }}" height="{{ ri*2 }}" />
|
||||
{% else %}
|
||||
<circle cx="{{ w/2 }}" cy="{{ h/2 }}" r="{{ ri }}" class="map__center"></circle>
|
||||
{% endif %}
|
||||
{% for node in nodes %}
|
||||
<circle r="10" cx="{{ node.x }}" cy="{{ node.y }}" class="map__node"></circle>
|
||||
<text x="{{ node.x }}" y="{{ node.y - 15 }}" text-anchor="middle" class="map__tooltip">{{ node.title }}</text>
|
||||
{% endfor %}
|
||||
</svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 551 B After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,33 +1,22 @@
|
|||
<article class="webring">
|
||||
<div class="webring__map">
|
||||
{% include 'map.njk' %}
|
||||
</div>
|
||||
<div class="webring__card">
|
||||
<header class="webring__header">
|
||||
{% if meta.image %}
|
||||
<img class="webring__image" src="/assets/images/{{ meta.image }}" width="70" height="70" alt="">
|
||||
{% endif %}
|
||||
|
||||
<div class="webring__description">
|
||||
<h1 class="webring__title">{{ meta.title }}</h1>
|
||||
<p>{{ meta.description }}</p>
|
||||
<a href="/code-of-conduct">Code of Conduct</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="webring__body">
|
||||
<div class="webring__subtitle">
|
||||
<h2 class="h3">Members ({{ members | length }})</h2>
|
||||
<a href="/feeds.xml">RSS Feeds</a>
|
||||
</div>
|
||||
|
||||
<ol class="webring__memberlist">
|
||||
{% for member in members %}
|
||||
<li class="webring__member">
|
||||
<a href="{{ member.url }}" class="webring__link">{{ member.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
<header class="webring__header">
|
||||
<h1 class="webring__title">{{ meta.title }}</h1>
|
||||
<p>{{ meta.description }}</p>
|
||||
<a href="/code-of-conduct">Code of Conduct</a>
|
||||
</header>
|
||||
|
||||
<div class="webring__body">
|
||||
<div class="webring__subtitle">
|
||||
<h2 class="h3">Members ({{ members | length }})</h2>
|
||||
<a href="/feeds.xml">RSS Feeds</a>
|
||||
</div>
|
||||
|
||||
<ol class="webring__memberlist">
|
||||
{% for member in members %}
|
||||
<li class="webring__member">
|
||||
<a href="{{ member.url }}" class="webring__link">{{ member.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -18,15 +18,12 @@ layout: base
|
|||
and supply the name and URL of your site. If you publish a RSS feed, you can provide that as well.
|
||||
</p>
|
||||
<p>
|
||||
If you don't have a Github account, you can also use this form to sign up:
|
||||
If you don't have a Github account, you can also use this form to sign up.
|
||||
The webring admins will then look at your site and handle your request.
|
||||
</p>
|
||||
|
||||
{% include 'signupform.njk' %}
|
||||
|
||||
<p>
|
||||
The webring admins will then look at your site and handle your request.
|
||||
</p>
|
||||
|
||||
<h2>Add the banner</h2>
|
||||
<p>
|
||||
Once you've joined the ring, copy this code snippet into your site:
|
||||
|
|
|
|||
|
|
@ -11,9 +11,22 @@
|
|||
<link type="application/atom+xml" rel="alternate" href="feeds.xml" title="{{ meta.title }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
{{ content | safe }}
|
||||
<div class="layout">
|
||||
<main class="layout__primary">
|
||||
<div class="layout__content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</main>
|
||||
<aside class="layout__secondary">
|
||||
{% include 'map.njk' %}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<a class="ghlink" href="{{ meta.repo }}">
|
||||
<svg role="img" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||||
</svg>
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue